この章では、小さなサイトを題材に、デザインの流れを通して確認します。
ここでは、架空のカフェサイトを例にします。
情報設計、ワイヤーフレーム、レイアウト、余白、文字、色、画像、UI、スマホ表示まで、これまで学んだ内容をつなげて考えます。
作るサイト
今回想定するのは、地域にある小さなカフェのサイトです。
目的は、初めて見る人に店舗の雰囲気を伝え、来店や予約につなげることです。
想定するページは、まずトップページ1ページです。
必要な情報は次の通りです。
- 店舗名
- キャッチコピー
- 店舗の特徴
- メニュー
- 店内写真
- 営業時間
- アクセス
- 予約または問い合わせ導線
最初から大きなサイトにせず、小さなサイトで流れを確認します。
目的を決める
まず、ページの目的を決めます。
今回の目的は、次の2つです。
- 店舗の雰囲気を伝える
- 来店や予約につなげる
目的が決まると、優先する情報が見えてきます。
たとえば、店舗の雰囲気を伝えるには、写真や短い紹介文が重要です。
来店につなげるには、営業時間、アクセス、予約導線が必要です。
ターゲットを決める
次に、誰に向けたサイトかを考えます。
今回は、次のように設定します。
近隣に住んでいる20〜40代の人。
休日にゆっくり過ごせるカフェを探している。
初めて行く前に、雰囲気、メニュー、場所、営業時間を確認したい。ターゲットが決まると、必要な情報や言葉のトーンを考えやすくなります。
情報を洗い出す
次に、必要な情報を洗い出します。
- 店舗名
- キャッチコピー
- 簡単な説明
- 店内写真
- 人気メニュー
- メニュー一覧
- こだわり
- 営業時間
- 定休日
- 住所
- 地図
- 予約ボタン
- SNSリンクこの段階では、順番はまだ決めません。
まず、必要そうな情報を出します。
セクション構成を作る
情報を洗い出したら、セクションに分けます。
今回なら、次のような構成が考えられます。
- ファーストビュー
- 店舗の紹介
- こだわり
- メニュー
- 店内写真
- 営業時間・アクセス
- 予約・問い合わせ
ファーストビューでは、店舗名、キャッチコピー、メイン画像、予約ボタンを置きます。
アクセス情報は、来店判断に必要なので下部にまとめます。
予約導線は、ファーストビューとページ下部の両方に置くと見つけやすくなります。
ワイヤーフレームを作る
次に、ワイヤーフレームを作ります。
最初は簡単なメモで十分です。
ヘッダー
- ロゴ
- ナビ
- 予約ボタン
ファーストビュー
- キャッチコピー
- 説明文
- 店内写真
- 予約ボタン
店舗の紹介
- 見出し
- 本文
- 写真
こだわり
- 3つのカード
メニュー
- 人気メニュー3つ
- メニュー一覧へのリンク
アクセス
- 営業時間
- 住所
- 地図
CTA
- 予約ボタン
- SNSリンクワイヤーフレームでは、色や装飾ではなく、情報の流れを確認します。
レイアウトを決める
ワイヤーフレームができたら、レイアウトを考えます。
PCでは、ファーストビューでテキストと画像を左右に配置できます。
スマホでは、キャッチコピー、説明、画像、ボタンの順に縦に並べると読みやすくなります。
こだわりのセクションは、PCでは3カラム、スマホでは1カラムにします。
メニューカードも、画像比率と文字量をそろえます。
重要なのは、各セクションの役割に合う配置にすることです。
余白を整える
レイアウトが決まったら、余白を整えます。
確認したい項目は次の通りです。
- セクション間に十分な余白があるか
- 見出しと本文の距離が自然か
- カード内が窮屈ではないか
- ボタン周りに余白があるか
- スマホで間延びしていないか
店舗サイトでは、余白に余裕を持たせると落ち着いた印象になります。
ただし、スマホでは広すぎる余白を少し調整します。
文字と色を決める
文字は、読みやすさを優先します。
キャッチコピーは少し大きく、本文は読みやすいサイズにします。
色は、落ち着いた印象を出すために、ベースカラーを明るい背景色、メインカラーを深い緑や茶系、アクセントカラーを予約ボタンに使うような設計が考えられます。
ただし、色を増やしすぎないようにします。
ボタンやリンクは、操作できることが伝わるように、文字色と背景色のコントラストを確認します。
画像を選ぶ
カフェサイトでは、画像が印象を大きく左右します。
使いたい画像は次の通りです。
- 店内の写真
- 人気メニューの写真
- スタッフや接客風景
- 外観や入口
実際の店舗写真がある場合は、素材写真よりも優先します。
写真は、明るさ、トリミング、比率をそろえます。
メニュー一覧の写真は、カードとして並べやすいように同じ比率にします。
UIを整える
ボタン、リンク、カード、ナビゲーションの見た目を整えます。
今回のサイトでは、次のようにルールを決められます。
- 予約ボタンはメインカラーで塗りにする
- 詳細リンクはテキストリンクにする
- メニューカードは画像、名前、説明、価格をそろえる
- ナビゲーションはシンプルにする
- スマホメニューは開閉式にする
同じ役割のパーツは同じ見た目にします。
UIの一貫性があると、ページ全体が整って見えます。
チェックする
最後に、デザインをチェックします。
確認したい項目は次の通りです。
- 最初に何の店かわかるか
- 店舗の雰囲気が伝わるか
- 営業時間と場所が見つけやすいか
- 予約ボタンが見つけやすいか
- 文字が読みやすいか
- 余白が不自然ではないか
- スマホで見やすいか
- 画像が粗くないか
- ボタンが押しやすいか
チェックで見つけた違和感を、情報、レイアウト、余白、文字、色、画像の順に直します。
この講座のまとめ
Webデザイン基礎 完全講座では、Webページを見やすく、伝わりやすく、使いやすく整えるための考え方を学びました。
デザインは、センスだけで決まるものではありません。
誰に何を伝えるかを整理し、情報の順番、余白、文字、色、画像、UIを整えることで、ページの品質は上がります。
コーディングやWordPress制作をする場合でも、デザインの基礎があると、実装時の判断がしやすくなります。
今後は、自分が作ったページを見る時に、次の視点で確認してみてください。
- 情報の順番は自然か
- 余白はそろっているか
- 文字は読みやすいか
- 色は役割を持っているか
- 画像は内容に合っているか
- ボタンやリンクは操作しやすいか
- スマホで見やすいか
この章のまとめ
- 小さなサイトでも、目的、ターゲット、情報設計から考える
- ワイヤーフレームで情報の流れを確認してから見た目を作る
- レイアウト、余白、文字、色、画像、UIを順番に整える
- スマホ表示と操作しやすさも必ず確認する
- デザインは、意図を持って整えることで改善できる