Webサイトやアプリの画面を作るとき、単に文字や画像を並べればよいわけではありません。
どの情報を最初に見せるのか。
どのボタンを目立たせるのか。
見出しと本文をどう区別するのか。
ユーザーが迷わず操作できるように、
画面全体を設計する必要があります。
このように、ユーザーが情報を理解し、操作するための画面を設計することを
UI Design（User Interface Design：ユーザーインターフェースデザイン）
と呼びます。
今回は、
架空のWeb制作会社のトップページを題材に、
Figma Designで画面の骨組みを作りながら、
UIデザインの基本を理解しましょう。
UIデザインとは
Web制作をしていると頻繁に聞くUIというのは、
ユーザーがサービスと接する部分のことです。
Webサイトであれば、
見出し、文章、画像、リンク、ボタン、入力フォーム、ナビゲーション
などがUIに含まれます。
UIデザインでは、これらの要素を
どのように配置し、
どのように見せ、
どのように操作できるようにするか
を考えます。
例えば、お問い合わせを増やしたいWebサイトであれば、次のような設計が考えられます。
- サービスの内容を最初に伝える
- サービスの特徴を読みやすく整理する
- 制作実績を見つけやすい位置に配置する
- お問い合わせボタンを認識しやすくする
- 文字やボタンの大きさを、読みやすさや操作しやすさに合わせる
重要なのは、画面をきれいに見せることだけではありません。
ユーザーが
情報を理解し、
次に何をすればよいか判断できる画面を作ることがUIデザインの目的です。
情報設計とUIデザインの違い
前回学習した「情報設計」と、今回の「UIデザイン」は、関連していますが役割が異なります。
| 項目 | 情報設計（IA） | UIデザイン |
|---|
| 主な目的 | 情報の構造を整理する | 情報を画面上でわかりやすく表現する |
| 考えること | どんなページが必要か | ページ内に何をどう配置するか |
| 成果物の例 | サイトマップ、情報分類 | ワイヤーフレーム、画面デザイン |
| 主な判断 | ページの分け方、階層 | 配置、サイズ、余白、文字、色 |
ほとんどのWebサイトで例を挙げると、
トップページに
サービス紹介、制作実績、お問い合わせを配置する
という判断は、
情報設計から生まれます。
一方で、
それらをどの順番で配置し、
どのような見出しやボタンで表現するかは
UIデザインで具体化するといった感じです。
この2つは完全にそれぞれが独立した工程ではありません。
画面を作ってみることで、情報の不足や構成の問題に気づくこともあります。
その場合は、情報設計に戻って調整するというような、関連性がある内容だと考えましょう。
UIデザインで考える5つのポイント
画面を設計するときは、次の
5つのポイントを意識します。
① 情報の優先順位
画面に表示する情報には、
重要度の違いがあります。
例えば、Web制作会社のトップページであれば、
サービスの内容や利用するメリットは、
会社の細かな沿革よりも先に伝えたい情報かもしれません。
すべての情報を同じ大きさ、同じ強さで表示すると、
ユーザーは何を重要視すればよいかわからなくなります。
まずは、
ユーザーが最初に知るべき情報を決めましょう。
② レイアウト
レイアウトは、
画面内に要素を配置するための設計です。
次のような配置を考えてみましょう。
- 見出しと本文を縦に並べる
- 文章と画像を左右に並べる
- 複数のサービスをカード形式で並べる
- 関連する情報をひとつのまとまりにする
配置を工夫することで、
情報同士の関係が伝わりやすくなります。
③ 余白と間隔
余白は、単に空いている場所ではありません。
関連する要素同士を近づけ、
別のまとまりとの間隔を広げることで、
情報のグループを
視覚的に伝えられます。
例えば、
見出しと本文の間隔を小さくし、
次のセクションとの間隔を大きくすれば、
両者が
同じグループに属することがわかりやすくなります。
余白を適切に使うと、画面が整理され、読みやすさも向上します。
④ タイポグラフィ
タイポグラフィは、
文字の見せ方に関する設計です。
文字の
大きさ、太さ、行間、文字色
などを調整して、情報の重要度や読みやすさを表現します。
ページのメイン見出しは大きく太くし、
本文は読みやすい大きさにする。
補足情報は本文より控えめにする、
といった使い分けです。
文字を大きくすればよいというわけではありません。
見出しと本文の違いが明確で、
文章を無理なく読めることが重要です。
⑤ 色とコントラスト
色は、情報の強弱や操作できる場所を伝えるために使えます。
主要なお問い合わせボタンにブランドカラーを使い、
通常の文章や補足情報には落ち着いた色を使う方法があります。
ただし、色だけで情報を伝えようとすると、色の違いを認識しにくいユーザーには伝わりにくいことがあります。
ボタンの文字や形状なども組み合わせて、意味が伝わるようにしましょう。
「アクセシビリティ」について学習すると、適切な色の扱い方などが理解できますが、今回はこれは学習しません。
実習：トップページのワイヤーフレームを作る
ここからは、Figma Designを使って実際に画面を作ってみます。
今回は、
Web制作会社のトップページを題材にします。
目的は、「訪問したユーザーにサービス内容を伝え、お問い合わせへ誘導すること」です。
最初から色や画像を細かく作り込むのではなく、まずは情報の配置を決めます。
この段階で作る、画面の骨組みを
ワイヤーフレーム と呼ぶので覚えておきましょう。
完成イメージ
次の図は、今回作るワイヤーフレームの構造を示したものです。
画像をインポートする必要はありません。
これを見本にして、Figma Design上で各要素を作成します。
この図はレイアウトの構造を示すための簡略図です。実際の画面では、画面幅や掲載する情報に応じて配置を調整します。
手順1：ページのFrameを作る
- Figma Designでデザインファイルを開きます。
- ツールバーからFrameツールを選択します。
- 右側のプリセットからデスクトップ向けのサイズを選びます。
プリセットが見つからない場合は、Frameを作成して右側の幅・高さに数値を入力します。
- 今回は練習用として、幅を 1440、高さを 2000 に設定します。
- レイヤー名を Home に変更します。
このFrameが、トップページ全体を作るための
土台になります。
ここで設定した幅や高さは練習用の値です。
実際のWebサイトでは、コンテンツ量やレスポンシブ対応を考慮して調整します。
手順2：ヘッダーを作る
- 01_Home の中に、ヘッダー用のFrameを作ります。
- 幅を 1440、高さを 80 に設定します。
- 左側にロゴ用のテキストを配置します。
- 右側に「サービス」「制作実績」「会社概要」「お問い合わせ」のテキストを横並びに配置します。
ヘッダーは、ユーザーがサイト内を移動するための主要なナビゲーションです。
前回の学習で設計した
ページ構成を、実際の画面上に表現していることを意識しましょう。
この段階では、まだロゴ画像を用意する必要はありません。文字だけで十分です。
手順3：ファーストビューを作る
ファーストビューは、ページを開いたときに
最初に目に入る領域です。
- ヘッダーの下に、メインビジュアル用の領域を作ります。
- 左側にメイン見出しを配置します。
- 見出しの下に、サービスを説明する短い文章を配置します。
- その下に「お問い合わせ」ボタンを作ります。
- 右側に画像を配置するための四角形を作ります。
メイン見出しは、次のようにします。
「Web制作で、ビジネスをもっと前へ。」
説明文には、どのようなサービスを提供しているのかを簡潔に記載します。
画像は、最初は四角形のままで構いません。
ここでは画像の選定よりも、文章と画像の位置関係を決めることを優先します。
手順4：サービスをカード形式で配置する
次に、サービスを紹介するセクションを作ります。
- ファーストビューの下に「サービス」という見出しを配置します。
- その下に、3つのカードを横並びに配置します。
- 各カードにサービス名と説明文を入れます。
今回は、次の3つです。
- Webサイト制作
- システム開発
- 保守・運用
カードの大きさや間隔を揃えることで、複数のサービスを比較しやすくなります。
ここで重要なのは、カードを作ること自体ではなく、
同じ種類の情報を同じ形式で見せることです。
同じ形式で表示すれば、ユーザーはカードごとに情報の位置を探し直さずに済みます。
手順5：制作実績とお問い合わせを配置する
サービス紹介の下に、制作実績のセクションを作ります。
- 「制作実績」という見出しを配置します。
- 実績の画像や説明文を置く領域を作ります。
- その下に、お問い合わせ用のセクションを作ります。
- 「お問い合わせはこちら」というボタンを配置します。
この段階では、実績の内容や画像を完成させる必要はありません。
どの情報を
どこに配置するかがわかれば十分です。
お問い合わせボタンは、ヘッダーにも配置し、ページの下部にも配置しています。
同じ目的へ移動する導線を複数設けることで、ユーザーが問い合わせたいと思ったタイミングで行動しやすくする狙いがあります。
ただし、ボタンを増やしすぎると画面が煩雑になるため、必要な場所に絞りましょう。
ワイヤーフレームからUIデザインへ進める
ワイヤーフレームができたら、
画面の構造を確認します。
この段階では、まだ色や装飾を作り込む必要はありません。
まずは、次の点を確認します。
- メインの見出しでサービス内容が伝わるか
- 必要な情報が適切な順番で並んでいるか
- 関連する情報がまとまっているか
- お問い合わせボタンを見つけやすいか
- 各セクションの間隔が整理されているか
構造に問題がなければ、次に
色、文字サイズ、余白、画像などを調整して、画面の見た目を整えます。
例えば、
メイン見出しを本文より大きくする、
主要なボタンに目立つ色を使う、
各セクションの上下に十分な余白を設ける、
といった調整です。
ただし、最初からすべての装飾を完成させようとすると、情報の配置を変更するたびに修正が増えてしまいます。
まず構造を決め、その後に
視覚的な表現を整えるという順序を意識しましょう。
UIデザインでよくある失敗
すべての要素を目立たせてしまう
見出しもボタンも画像も、すべてが強く目立つと、ユーザーはどこに注目すればよいかわかりません。
重要な情報と
補助的な情報に差をつけ、視線の流れを作りましょう。
余白が狭すぎる
画面に情報を詰め込みすぎると、情報同士の関係がわかりにくくなります。
関連する要素は近づけ、異なるセクションは適切に離すことで、情報のまとまりを伝えられます。
見た目を優先して情報を削りすぎる
画面をすっきりさせるために、ユーザーが判断するための重要な情報を削ってしまう場合があります。
情報量を減らすこと自体が目的ではありません。
必要な情報を残しながら、
理解しやすく整理することが大切です。
ボタンの役割がわかりにくい
ボタンの文字が「こちら」「詳しく見る」だけでは、
移動先や操作の結果が予測しにくいことがあります。
可能な限り「サービス詳細を見る」「お問い合わせする」など、目的が伝わる表現を選びましょう。
あとがき
UIデザインは、
ユーザーが情報を理解し、操作しやすい画面を設計することです。
今回学んだ重要なポイントは、
- 情報の優先順位
- レイアウト
- 余白
- タイポグラフィ
- 色とコントラスト
です。
前回の学習で作った情報設計を、今回は具体的な画面の構造に落とし込みました。
まずは
ワイヤーフレームで情報の配置を決め、
構造が整理できたら色や文字、余白などの視覚的な表現を整える。
この流れを身につけることで、見た目だけでなく
使いやすさも考慮した画面を作りやすくなります。
UIデザインを学び始めると、
色やフォント、装飾などの見た目に意識が向きがちです。
しかし、画面の使いやすさは、
装飾を加える前の段階から始まっています。
- 何を最初に見せるか
- 関連する情報をどうまとめるか
- ユーザーが次の行動を判断できるか
こうした設計ができていなければ、見た目を整えても使いやすい画面にはなりません。
Figmaでは、最初から完成形を作ろうとせず、まずはFrameとテキスト、図形を使って画面の骨組みを作ってみましょう。
そこから少しずつ調整することで、UIデザインの考え方を実際の操作と結びつけて理解できます。
0 件のコメント:
コメントを投稿