02-01_デザインの基本原則

出典: 制作部署マニュアル デザインの基本原則（自動ミラー・正本は /Users/oogushiyuuki/manual-terasu）

デザインの目的を最初に押さえる

「かっこいいサイトを作る」のがデザインの目的じゃない。デザインの本質は：

ユーザーが迷わず目的を達成できる状態を作ること。

TERASUがHP制作で勝てる本質はここにある。ビジュアルの派手さじゃなく、「コンバージョン（問い合わせ・予約・購入）が発生する」状態を作るのがゴール。

デザインの4大原則（ノンデザイナーズデザインブック）

世界中のプロデザイナーが使う基礎中の基礎。これ4つを意識するだけで、素人っぽさが消える。

近接（Proximity）

関連する要素は近くに、関係ない要素は遠くに配置する。

→ 「同じ意味のものをまとめる」だけで情報構造が明確になる。

整列（Alignment）

要素は揃える。中央揃え・左揃え・右揃え、どれかに統一する。

• ばらばらの位置に配置（散らかって見える）
• 左揃えで統一（プロっぽい・読みやすい）

→ 文章主体なら左揃えが基本。中央揃えはヒーローセクションや結論パートに限定。

反復（Repetition）

同じデザイン要素を繰り返して使う。

• 見出しのスタイル（フォント・色・サイズ・余白）を全ページで統一
• ボタンの形・色も統一
• アイコンのテイストも統一

→ 統一感が出てブランドの印象が強まる。

コントラスト（Contrast）

重要なものは目立たせる。差別化する。

• タイトル（大）vs 本文（小）
• メインCTAボタン（黄色・大）vs サブリンク（グレー・小）
• 背景色 vs テキスト色（コントラスト比4.5:1以上）

→ メリハリのないデザインは「のっぺり」して何が大事か分からない。

視線誘導の基本

人の目は決まった順番で動く。これを利用して情報を伝える。

F型パターン（テキストが多いページ）

• 上端を左から右へ
• やや下がって左から右へ（短く）
• 左端を下へスクロール

→ ニュースサイト・記事ページ・検索結果でよく使われる。

Z型パターン（ヒーロー・LP）

• 左上 → 右上 → 左下 → 右下 へZ字に
• 重要な情報は 「左上＝ロゴ/ブランド」「右上＝CTA」「左下＝補足」「右下＝メインCTA」

→ 1画面で完結するLPはZ型が基本。

余白（ホワイトスペース）の重要性

「何もない空間」こそデザインの肝。

余白のルール

• 要素間：最低 8px の倍数（8, 16, 24, 32, 48, 64, 96, 128...）
• セクション間：80〜120px（ゆったり）
• カードの内側パディング：24〜32px
• ヒーロー上下：100〜200px（広く取る）

→ 「余白が足りない」と感じたら倍にする。それでもまだ詰まって見えることが多い。

黄金比・3分割法（構成の決め方）

黄金比（1 : 1.618）

• メインコンテンツ : サイドバー = 1.618 : 1（≒ 8 : 5）
• 画像と本文の比率もこれが美しい

3分割法（rule of thirds）

• 画面を縦横3等分した交点に重要な要素を配置
• 写真・ヒーローのテキスト配置に有効

TERASUデザインで守る5つの最低限ルール

チェックリスト：制作中に確認する10項目

• [ ] 関連する要素同士が近くにある（近接）
• [ ] 全要素が同じラインで揃ってる（整列）
• [ ] 見出し・ボタン・余白のスタイルが全ページ統一（反復）
• [ ] 重要な要素が一番目立つ（コントラスト）
• [ ] 視線の流れが自然（F型/Z型）
• [ ] 余白が十分にある（足りなければ倍）
• [ ] 1画面に詰め込みすぎていない
• [ ] スマホで見ても崩れない
• [ ] ボタンが「ボタンに見える」（クリッカブル感）
• [ ] 色のコントラストが十分（背景と文字）

→ 全部 ならプロ品質。1つでも欠けると「素人っぽさ」が出る。

参考：プロが見る世界一流のサイト

→ 詰まった時はこれら開いて「なぜ美しいのか」を言語化する習慣を。