前のページでは、Webサイト「Espresso Lane」のPC版ワイヤーフレームを作成しました。
ワイヤーフレームでは、ページ全体の構成や情報の配置を確認することを目的としていたため、写真や色、細かな装飾はほとんど入れていません。
このページでは、作成したワイヤーフレームに、
- カラースタイルを使った配色
- 見出しや線などの簡単な装飾
- セクション間の余白調整
- 写真の配置
- ヒーローイメージの作成
- ロゴの簡単な装飾
を追加し、Webサイトの完成イメージが分かるモックアップ風のデザインに仕上げていきます。
1. ワイヤーフレームを確認しよう
まず、前のページで作成したPC版ワイヤーフレームを開きます。
今回は、このレイアウトを大きく変更するのではなく、現在の構成を活かしながら色や写真、装飾を追加していきます。
ワイヤーフレームの段階で、
が整理されていれば、そのままデザインを進めることができます。
本格的なデザインでは、さらに細かな装飾や余白、文字組みなどを調整しますが、今回はFigmaの基本機能を使いながら、ワイヤーフレームから一歩進んだデザインを作成してみましょう。
ワイヤーフレームは複製して使います
前のページで作成した 「PC_Wireframe」 を複製し、モックアップ用のフレームを作成します。元のワイヤーフレームはそのまま残しておき、複製したフレームに色や写真、装飾を追加していきます。
複製したフレーム名は、PC_mock-upに変更しておきましょう。
このように元のデザインを残しておくと、作業前と作業後を比較しやすくなります。また、途中でレイアウトを確認したいときにも便利です。
2. カラースタイルを使って文字に色をつけよう
前回作成したワイヤーフレームで登録したカラースタイルを使って、ページ全体に色を加えていきます。
スタイルは、まとめて登録することも可能です。
「About Us」「Menu」「Access」などの見出しを選択します。文字色には、登録しておいたアクセントカラーを設定します。
同じ役割を持つ見出しには、同じ色を使用することで、ページ全体に統一感が生まれます。
スタイルを使うメリット
色を毎回カラーピッカーから指定するのではなく、スタイルから選択すると、
- 同じ色を何度でも使える
- 色番号を覚える必要がない
- あとから色を変更しやすい（スタイル一覧から変更可能）
といったメリットがあります。Webサイトでは同じ色を繰り返し使用するため、スタイルを使って色を管理する習慣をつけておきましょう。
3. 見出しに簡単な装飾を加えよう
見出しの下に、メインカラーを使って短い線を追加します。線ツール、または細い長方形を使って作成します。
今回は、01で登録したメインカラーを使用します。
見出しの文字色と線の色を組み合わせるだけでも、ワイヤーフレームの状態からWebサイトらしい印象に変わります。
ここでは複雑な装飾を作る必要はありません。まずは、同じ種類の見出しには、同じデザインを使用することを意識しましょう。
4. 各セクションの余白を揃えよう
ページ全体を見ると、About・Menu・Accessなど、複数のセクションが縦に並んでいます。
Webサイトでは、セクションごとの余白がバラバラになっていると、全体がまとまりにくく見えます。
そこで、各セクション間の余白をオートレイアウトを使って統一します。
左側のレイヤーパネルから、About Menu Accessなど、まとめたいセクションをshiftキーを推しながら選択します。
選択したセクションをフレーム化し、オートレイアウトを設定します。方向は縦方向にし、セクション同士の間隔を設定します。
オートレイアウトを使う理由
手作業で1つずつ位置を調整することもできますが、オートレイアウトを使っておくと、
- セクション間の余白を統一できる
- 内容が増えた場合でも間隔を保ちやすい
- 後から余白をまとめて変更できる
といったメリットがあります。Figmaでは、見た目を整えるだけでなく、あとから変更しやすい構造にしておくことも大切です。
5. Unsplashプラグインを使って写真を入れよう
ワイヤーフレームでは、写真が入る場所をグレーの長方形で作成していました。ここから実際に写真を設定して、Webサイトのイメージを具体的にしていきます。今回は、Figmaのプラグイン Unsplash を使用します。
Unsplashでは、さまざまな写真を検索し、そのままFigma上に配置できます。
まず、Figma左上のメニューから 「プラグイン」→「プラグインを管理」 を開き、検索欄に Unsplash と入力します。
Unsplashを起動したら、検索欄に coffeeespressoなど、探したい写真に合うキーワードを入力します。
写真が表示されたら、写真を入れたい長方形を先に選択し、そのあと使用したい写真をクリックします。選択した長方形の中に写真が配置されます。
6. キービジュアルに写真を設定しよう
Unsplashから写真を選び、長方形の中に配置したら、写真の加工をおこなってみましょう。
Figmaでは、Photoshopのような本格的な写真加工はできませんが、トリミングや位置調整、写真の繰り返し表示など、レイアウトに必要な基本的な調整ができます。
また、露出・コントラスト・彩度・色温度・濃淡・ハイライト・シャドウなどを調整することもできます。
たとえば、写真の上に文字を配置するときは、写真を少し暗くして文字とのコントラストを高めることで、読みやすくすることができます。
今回のキービジュアルでも、写真の見え方を確認しながら、必要に応じて明るさやコントラストを調整してみましょう。
7. キービジュアルに文字を追加しよう
次に、キービジュアルの上にキャッチコピーを追加します。
例えば、 A quiet moment with a good cup of coffee. など、カフェの雰囲気が伝わる短い文章を配置します。
今回は、24px 書体は「Oswald」Boldを使って配置しています。
写真の上に文字を配置するときは、背景によって文字が読みづらくなることがあります。
などの方法で、文字が読みやすくなるように調整します。
8. Menuの4枚の写真を設定しよう
同様に、Menuにある4つのカードにもプラグインのUnsplashを使って写真を設定します。
それぞれの画像エリアを選択し、内容に合った写真を検索して配置しましょう。
例えば、
- Coffee →
coffee - Morning Set →
breakfast - Lunch Menu →
lunch - Desserts →
dessert
などのキーワードで検索すると、イメージに合う写真を見つけやすくなります。
写真を配置したら、4枚の画像サイズや表示位置が揃っているかを確認します。
また、写真ごとに明るさや色合いが大きく異なると、ページ全体の印象がばらついて見えるため、4枚を並べた状態でも確認してみましょう。
写真の雰囲気も揃えよう
写真は、内容に合っていれば何でもよいわけではありません。
明るさ・色合い・構図・写真の雰囲気が大きく異なると、Webサイト全体に統一感がなくなります。
例えば、上から撮影した写真で揃える、明るい写真で揃えるなど、4枚を並べたときのバランスも確認しながら選びましょう。
9. Espresso Laneのロゴを仕上げよう
最後に、ヘッダーにある「Espresso Lane」の文字を、簡単なロゴ風に仕上げます。
今回は、文字の前にコーヒーカップのアイコンを追加してみましょう。
Figmaのプラグインから Iconify を開き、coffee や cup などのキーワードで検索します。表示されたアイコンの中から、サイトの雰囲気に合うシンプルなものを選びます。
選んだアイコンを「Espresso Lane」の前に配置し、文字との大きさや間隔を調整します。必要に応じて、アイコンにも登録したカラースタイルを適用し、ロゴ全体のバランスを整えましょう。
また、アイコンを細かく移動するときは、マウスだけでなく 矢印キー を使うと位置を調整しやすくなります。Shift + 矢印キーを使うと、より大きな単位で移動できます。
今回は本格的なロゴ制作ではなく、文字とアイコンを組み合わせて、サイト名をロゴらしく見せる基本的な方法を確認します。
フレームの中のベクター画像
今回配置したアイコンは、Figma上ではベクター画像（Vector）として扱われます。
ベクター画像は、拡大・縮小しても画質が劣化しにくく、色や形を編集できるのが特徴です。
アイコンをダブルクリックすると、ベクター編集用のツールが表示され、ポイントや線を直接編集することもできます。
ただし、Figmaのベクター編集はIllustratorほど細かな機能を備えているわけではありません。今回は、サイズ変更や色の変更など、Webデザインで使う基本的な調整ができれば十分です。
10. ページ全体を確認しよう
最後に、PC版全体を縮小表示して確認します。
このとき、レイアウトグリッドはいったん非表示にして、完成したデザイン全体を見てみましょう。
ワイヤーフレームのときと比べながら、次のポイントを確認します。
- 色に統一感があるか
- 見出しのデザインが揃っているか
- セクション間の余白が揃っているか
- 写真の雰囲気が合っているか
- 写真の大きさや配置が揃っているか
- 文字が読みやすいか
- ロゴやアイコンのサイズは適切か
ワイヤーフレームでは、「情報の配置」や「ページ全体の構成」を中心に確認しました。
今回はそこに色・写真・装飾を加えることで、実際のWebサイトに近いイメージに仕上げています。
細かな部分だけを見るのではなく、ページ全体を見ながら、デザインに統一感があるかを確認しましょう。。
ワイヤーフレームとモックアップを比べてみよう
今回は、元のワイヤーフレームを複製し、色・写真・文字・装飾を加えてモックアップ風に仕上げました。2つを並べて見ると、ページの構成はほとんど同じでも、色や写真、装飾を加えることでWebサイトの印象が大きく変わることが分かります。
ワイヤーフレームで構成を決め、モックアップで完成イメージに近づける。この流れを覚えておきましょう。
今回使用したFigmaの機能
| 機能 | 今回の使い方 |
|---|---|
| カラースタイル | 見出しや装飾の色を統一 |
| オートレイアウト | セクション間の余白を統一 |
| Unsplashプラグイン | キービジュアルやMenuに写真を配置 |
| Iconifyプラグイン | コーヒーカップのアイコンを追加 |
| テキスト | キービジュアルにキャッチコピーを追加 |
| 画像調整 | 写真の表示位置やトリミング、明るさなどを調整 |
| ベクター | アイコンのサイズや色を調整 |
次はスマートフォン版を作成しよう
PC版のデザインが完成したら、次はスマートフォン版を作成します。
次のページでは、ここまでのように細かな操作手順をすべて説明するのではなく、PC版で学習した内容をもとに、自分でスマートフォンに適したレイアウトを考えて作成してみましょう。PC版をそのまま小さくするのではなく、スマートフォンで見やすく、使いやすいレイアウトになるように調整します。
例えば、
- 横並びの要素を縦並びにする
- 文字サイズを調整する
- 左右の余白を調整する
- 写真の大きさや配置を変更する
- セクション間の余白を見直す
- スマートフォンで読みやすい配置にする
などを考えながら制作します。