1. 文字の「行間」は 1.5倍〜1.7倍（line-height）
フォトショのデフォルトの行間は少し詰まりすぎていて、素人っぽく見えがち。
- プロの常識： 文字サイズ（px）に対して、行間を1.5倍〜1.7倍に設定する。
- 理由： CSSで
line-height: 1.6;と指定するのと全く同じ感覚。これだけで可読性が一気に上がる。
2. 「真っ黒（#000000）」は使わない
これもHTML/CSSのモダンなコーディングと同じ。
- プロの常識： 文字や背景に完全な黒（#000000）はほとんど使わない。#333333 や #222222 などの「濃いグレー」を使う。
- 理由： 真っ黒はコントラストが強すぎて、画面上で目が疲れるから。少し浮かせることで高級感や柔らかさが出る。
3. グループ化の「親子構造」を作る（DOM構造）
フォトショのレイヤーをバラバラにするのは、HTMLでタグを入れ子にせずに並べるのと同じくらい「嫌われる」行為。
- プロの常識： 「ヘッダー」「メイン画像」「フッター」のように、要素をフォルダ（グループ）で分ける。
- 理由： 修正が楽になるのはもちろん、コーダー（または将来の自分）が見た時に「ここからここまでが一つのブロックだ」と一瞬で理解できるから。
4. フォントは「2種類」まで
たくさんのフォントを使いたくなるが、そこを我慢するのがプロ。
- プロの常識： 基本は「ゴシック体1つ」と「明朝体1つ」、あるいは「太さ（ウェイト）のバリエーションが豊富な1フォント」だけで構成する。
- 理由： CSSで複数のWebフォントを読み込むと重くなるのと同じで、デザインもフォントが多いと視線が散らばり、まとまりがなくなる。
5. 「四隅」に重要なものを置かない（セーフティーエリア）
- プロの常識： キャンバスの端ギリギリ（端から10px〜20px程度）には、文字やロゴを絶対に置かない。
- 理由： CSSで
paddingを入れるのと同じ。端に余裕がないと、見る人に圧迫感を与えてしまう。
目次
Webデザイン（UI/UX）の常識
バナーは「1枚の絵」ですが、Webデザインは「システム」。
- 「4px/8pxグリッドシステム」の徹底 ボタンの高さ、アイコンの間隔、セクション間の余白。すべてを8（または4）の倍数で設計する。これにより、エンジニアがコーディングする際に
mt-4（16px）のように迷わず実装できる。 - F型・Z型の視線誘導 ユーザーは画面を「F」または「Z」の形で眺める。重要なボタン（コンバージョン）をその動線上に配置するのは鉄則。
- 「アフォーダンス」（押せる感） ボタンには影をつけたり、ホバー時に色を変えたり。「これはクリックできる要素だ」と説明なしで理解させる設計が必要。
全てのデザインに共通する「4原則」
これが一番重要かもしれない。どんなにツールが進化しても変わらない「近接・整列・反復・対比」。
- 近接（Proximity）：関連する項目は近づけてグループ化する（HTMLの
<div>括りと同じ）。 - 整列（Alignment）：すべての要素を意図的に配置する。バラバラに置かない。
- 反復（Repetition）：同じルール（色、フォント、間隔）を繰り返す。
- 対比（Contrast）：一番見せたいものを、色やサイズで圧倒的に目立たせる。
プロが教えない「時短」の常識
- 「アセット管理」：同じパーツを何度も作らない。Photoshopなら「スマートオブジェクト」、Figmaなら「コンポーネント」として共通化する。
- 「非破壊編集」：元のデータを壊さずに加工する（レイヤーマスクなど）。「後でクライアントに『やっぱり戻して』と言われる」ことを前提にデータを作る。
