From ぬるま湯スタッフ 西内
熊本のオフィスより、、、
こんばんは！
西内です。
24日から尾上さんと一緒に熊本へ、、、
外からオフィスが丸見えな開放的な部屋で
2人で仕事をしています。
熊本の近況は明日の尾上さんのブログで紹介予定ですので
遊びにこれる方はぜひ来てください！
ではーー、、、
本日も皆さんからいただいている
質問に回答をしていきます！
聞きたいこと、質問などあれば
こちらのフォームから記載してください。
↓
https://live-publishing.jp/click/nurumayu-radio/
尾上さんの作業中の手元(キーボード)と作業画面を同時に見たい。
作業系の動画を拝見しますが、いつもどのようにショートカット作業をしているのかが気になるため。
6月14日の公開添削で
尾上さんのカメラを手元カメラを見せるように調整中なのでぜひ、ご参加ください！
公開添削は、6月14日 19:00～21:00
当日の添削物も用意できている方は担当講師まで送ってください！
デザイン、クリエイターの仕事をするうえで大変なことは何ですか？
デザイナーにしかわからない時間がかかる丁寧で細かいデザインが、
クライアントに理解してもらえないこと。
webデザインの講座を受講する際に、必要となる物はありますか。デスクトップパソコンは持っていますが、ノートパソコンは必要ですか。
Webデザインを始めるうえで必要なものは3つ。
・パソコン（デスクトップがあればノートパソコンは不要です。）
・インターネット
・Photoshop
そしてWebデザインを慣れてきた人、作業スピードを上げたい人に用意してもらいたいのは
「デュアルモニター」です。
マイクロソフトの技術コンサルタントが「ディスプレイと作業効率の定量化」を調査した結果、「シングルモニターをデュアルモニターに変更しただけで、デスクワークの生産性が42%向上」
ぬるま湯デザイン塾 秋葉原校では
各テーブルにモニターを用意しているので
是非、作業効率UPを体感してみてください！
SNSやブログのヘッダーですが、画面上では綺麗でも実際にアップすると画像が荒く(特に文字)なってしまいます。ネットで調べる限りの対策(画像サイズを小さくして出力する、PNGにする)はしましたが、それでもあまりクリアではありません。何か良い方法があれば教えて下さい。
これは思いつくものを列挙します。
（下記すべて当てはまらなければ、講師にご相談を！）
- 推奨サイズが違う
（アップした画像サイズが小さく、引き伸ばされている） - 文字だけ気になる場合、文字設定でアンチエイリアスの設定が「鮮明」などになっていない
- 画像をjpgで保存した時の、画質が低すぎる
- アメブロで多いですが、アップロードのサイズを超えてアップすると粗くなる
パッと思いつくものは上記になるので一度試してください！
印刷物はAiの方が適している事は学びましたが、その上で印刷物をPsで作る際のコツか何かあれば教えて下さい。以下、私が試して失敗した事例です。①RGBで作成し、納品時にCMYKへ変更→一部色が変わってしまった。②始めからCMYKで作成→PDFへ変更時に色が変わってしまった＆塗りつぶしで画像の色を変えようとしたが失敗。色が混ざる？変な色になってしまった。
▼①の回答
Photoshopで印刷物のデザインをする場合
最初から、印刷モード（CMYK）解像度を300~350にする必要があります。
途中変更は望ましくないのと、単にモードを変えるだけでは不具合が起きることがあるので
カラープリセットの変更を実施してみてください。
▼②の回答
PDFにした時の不具合は、変更時の設定が問題なのかもしれません。
よくあるのは、各印刷会社で専用のプリセットを配布しているのでそれを読み込んで書き出す。
何もないときは、Photoshop pdf に書き出すときに
「Adobe PDFプリセット」を「PDF/X-4:2008(日本)」にする。
などを試してみてください。
尾上先生にとってWebデザインとか何か。
→なくてはならないもの
By 尾上
尾上さんが人生で特に大切にしていることはなんですか？
→常にワクワクする選択をし続けること
By 尾上
css設計をしてBEMというコードの書き方は実際の現場では主流だったりしますか？
おそらく今このブログを見ている人でBEMと言われ
分かる人は1割もいないと思います(笑)
B：Block
（単独で意味のある独立したエンティティ）
E：Element
（独立した意味を持たず、意味的にBlockに結び付けれているBlockの一部）
M：Modifier
（ブロックまたは要素上のフラグ。外観や動作を変更するために使用する）
はい、ちんぷんかんぷんですね(笑)
簡単に言うと、命名規則。
誰が見ても分かりやすくしよう、ということです。
じゃあ、デザイナーにBEMはいるの？ということですが、正直いらないです。
最低限、class名、id名をどの部分を指しているかが分かるように書ければOKです。
問題です、次の2つはLPのコードです。
どっちが分かりやすいでしょうか？
①（日本の苗字ランキングで命名）
<body>
<div class="sato">
<div class="suzuki">
</div>
<div class="takahashi">
<div class="tanaka">
</div>
<div class="ito">
</div>
<div class="watanabe">
</div>
</div>
<div class="yamamoto">
</div>
<div class="nakamura">
<div class="kobayashi">
</div>
<div class="kato">
</div>
<div class="yoshida">
</div>
<div class="yamada">
</div>
<div class="matsumoto">
</div>
</div>
<div class="inoue">
</div>
</div>
</body>
②（LPの流れに合わせて命名）
<body>
<div class="container">
<div class="fv">
</div>
<div class="tokuten">
<div class="tokuten-1">
</div>
<div class="tokuten-2">
</div>
<div class="tokuten-3">
</div>
</div>
<div class="koushi">
</div>
<div class="naiyou">
<div class="naiyou-1">
</div>
<div class="naiyou-2">
</div>
<div class="naiyou-3">
</div>
<div class="naiyou-4">
</div>
<div class="naiyou-5">
</div>
</div>
<div class="form">
</div>
</div>
</body>
当たり前ですが、圧倒的に②が見やすいと思います。
画像や文字が入っていなくても
class名を見るだけでLPのページがイメージできてくるはずです。
また、特典が3つある場合、特典の大枠を「tokuten」
特典の1つずつの枠を、「tokuten-1」「tokuten-2」「tokuten-3」と表していますが
これも言わばBEMに近いものです。
クライアントから、
「特典2の画像を変更してほしい」と言われたときに
①だと、上から順番に解析しないと分かりませんが
②の場合は、tokuten-2を見れば一発で分かります。
クライアントから命名規則のルールを言われない限りは
BEMを使わなきゃ！と難しく考えず
誰でもわかる命名規則を意識するだけで大丈夫です！
Q：ぬるま湯デザイン通信でこれは読んどけというおすすめの記事があれば教えてください。
本日も7個ピックアップしていきます！
▼アート（芸術）とデザインの違い
▼貯金は好きですか？
▼【初心者必見】Photoshopってすんごい
▼学びは真似ることから始まる
▼【動画】尾上の消しごむテクニック
▼尾上流ファイル整理術
▼【動画】ペンツールってすんごい
いかがでしたでしょうか？
この一問一答コーナーの中からでも
新しい気付きや学びがあれば嬉しいです。
気になる事、質問、相談があれば
下記へ記載をしてください！
↓
https://live-publishing.jp/click/nurumayu-radio/
それでは！
コメント