【一問一答 Vol.2】デザイナーにBEMって必要？
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/
それでは！
関連記事
おすすめ記事
コメント
この記事へのトラックバックはありません。
1986年生まれ。茨城出身。7歳の時に父親の会社が倒産し、借金地獄のホームレスとなる。
その後、祖父母に引き取られ12歳の時にWindowsパソコンをイチから組み立て、WEBサイト制作を独学で始める。
16歳から印刷業界を経験し、その後WEB業界に転身。WEBマーケティングを実践で学び、反応率にフォーカスした売上重視のデザインを得意とする。
2020年にデザイン塾を創業し、世界23ヵ国、延べ64,000人にデザインセミナーや講座を開催。
2022年には熊本県熊本市と立地協定を締結し、地方創成プロジェクト開始。
2023年からは法務省の委託事業として、全国少年院の職業訓練として民間初となるWEB制作講座を開始し、子供たちの社会復帰支援にも尽力している。
ぬるま湯のご質問はお気軽にLINEから
ピックアップ記事
-
日々の学習お疲れ様です＾＾エキスパート講師の森田です。皆さまにお知らせがあります！！… -
皆さん、こんにちは！エキスパート講師の小西です。梅雨明けが待ち遠しい今日この頃、むし… -
2022/8/27
【デザインとは？デザイナーとは？】みなさんこんばんは。クリエイティブディレクターのJUNPEIです。今日は「デザインとは？… -
2021/3/8
読んでもらいたいブログ３選From:ドラゴン★尾上神田のオフィスより、、、こんにちは。ども、尾上です。＾＾… -
2021/2/1
【GGRKS】参考デザインはこう探せFrom:ドラゴン★尾上神田のオフィスより、、、こんにちは。ども、尾上です。＾＾… -
2021/1/18
デザイナーの「５ステージ」From:ドラゴン★尾上秋葉原の自宅より、、、こんにちは。ども、尾上です。＾＾… -
2020/11/30
【秘密】企業への裏口就職の仕方From:ドラゴン★尾上秋葉原の自宅より、、、こんにちは。ども、尾上です。＾＾…
この記事へのコメントはありません。