Espresso Laneでは、ワイヤーフレームからPC版・スマートフォン版のデザインを作成し、Webサイトを1ページ完成させる流れを学習しました。ここからは、ハンバーガーショップ 「UN HAMBUR」 を題材に、複数ページで構成されるWebサイトを制作します。
UN HAMBURでは、TOP MENU STAFF ACCESS BLOG一覧 BLOG詳細 など、複数のページを作成します。
複数ページのWebサイトでは、ヘッダーやフッター、ボタンなど、同じデザインを何度も使用するパーツが増えてきます。
そこで、この課題ではFigmaの コンポーネント や インスタンス を活用しながら制作を進めます。今回は、用意されたワイヤーフレームをもとにトップページのデザインを作成します。
1. 完成イメージを真似して作成してみよう
前回のEspresso Laneではワイヤーフレームの作成から行いましたが、今回は、複数ページのモックアップを参考に練習してみましょう。
PCのワイヤーフレーム作成はこちらを参照：https://webtraining.jp/figma/figma-practice/figma-practice01/#index_id1
今回は、デスクトップのフレームで 1280px * 高さは任意で作成します。レイアウトガイドは、12列、余白100px 、ガター20pxと指定しています
2. カラーを作成しスタイルに登録しよう
複数ページを作成するときは、ページごとに色を設定するのではなく、最初にサイト全体で使用する色を決めておきます。
UN HAMBURでは、カラーとフォントの仕様書を作成し、スタイルとして登録します。今回は
プライマリーカラー プライマリーホバー 背景プライマリ 背景セカンダリ 文字標準 文字セカンダリ 線標準
など、役割が分かる名前になっています。
今回はトップページだけではなく、あとから複数のページを作成します。
ページごとに同じ色を設定していると、あとから色を変更したくなったときに修正する場所が増えてしまいます。
スタイルを使って管理しておくことで、複数ページでも同じデザインルールを使いやすくなります。
3. フォントとテキストスタイルを設定しよう
次に、サイト内で使用する文字のルールを決めます。
UN HAMBURでは、大きな見出し セクション見出し 本文 ナビゲーション ボタン など、用途に応じて文字サイズや太さを使い分けます。よく使用する文字設定は、テキストスタイルとして登録しておきましょう。
スタイルの登録方法はこちらを参照：https://webtraining.jp/figma/figma-practice/figma-practice02/#index_id1
4. ヘッダーを作成しよう
トップページの上部にヘッダーを作成します。今回のヘッダーには、UN HAMBURのロゴ HOME MENU STAFF ACCESS BLOG SNSアイコン を配置します。
ロゴ（仮置きで文字をおいておきましょう）とナビゲーション、SNSアイコンの位置を整え、PC画面で見やすい間隔に調整しましょう。
ナビゲーション部分にはオートレイアウトを使用すると、項目同士の間隔を揃えやすくなります。
5. ヘッダーをコンポーネントにしよう
UN HAMBURでは、このあと MENU STAFF ACCESS BLOG など複数のページを作成します。すべてのページで同じヘッダーを使用するため、完成したヘッダーをコンポーネント化しておきます。ヘッダーを選択し、右クリックでコンポーネントの追加となります。
コンポーネントになるとレイヤー表示も紫色で菱形４つのアイコンが表示されます。
コンポーネントは、複数の場所で繰り返し使用するパーツの「元」となるものです。作成したコンポーネントから各ページに配置するものをインスタンス（レイヤーでは１つの菱形が表示）といいます。例えば、あとからナビゲーションの文字やロゴの大きさを変更したい場合、各ページを1つずつ修正するのは大変です。
元となるコンポーネントを修正すると、変更内容を複数のインスタンスにも反映できます。複数ページのWebサイトでは、同じものを何度も作るのではなく、共通パーツとして管理することを意識しましょう。
6. キービジュアルを作成しよう
ヘッダーの下に、大きなキービジュアルを配置します。今回は、ハンバーガーショップのメインとなる写真を使用し、ページを開いたときにお店の雰囲気が伝わるようにします。写真は、Figmaのプラグイン Unsplash を使うか、素材サイトからダウンロードした画像を配置します。
配置したら、画像の表示位置やトリミングを調整し、主役となるハンバーガーがしっかり見えるようにしましょう。キービジュアルは、本文のコンテンツ幅の中に収めるのではなく、画面幅いっぱいに見せる要素として考えます。
また今回は、写真の上に黒を20％程度重ね、少し暗くしています。明るさを抑えることで、写真全体を落ち着いた印象にし、ヘッダーやこの後配置する文字・要素ともなじみやすくなります。
7. Menuセクションを作成しよう
次に、Menuセクションを作成します。
今回は、Cheeseburger and Fries Ice Cafe Mocha Chocolate Donut の3つのカードを横並びで配置します。
1つのカードは、写真 商品名 説明文 で構成されています。
まず1つ目のカードを作成し、写真・商品名・説明文の位置や余白を整えましょう。
1つ完成したら複製し、写真や文章を差し替えて残りのカードを作成すると、効率よく進められます。
3つのカードを並べたときは、画像の大きさ、カードの高さ、文字の位置、カード同士の間隔が揃っているかも確認しましょう。
カードの下には「And More」ボタンを配置します。ボタンについては、次の項目でコンポーネントとバリアントを使って設定します。
8. ボタンを配置しよう
Menuの下には「And More」ボタンを配置します。UN HAMBURでは、同じ形でも色や用途が異なるボタンを複数使用します。
このようなパーツは、コンポーネントとバリアントを使って管理すると便利です。
今回はFigma基礎で作成したボタンコンポーネントを利用し、必要な種類に切り替えて配置します。
バリアントを使うと、メインカラー アクセントカラー グレー など、同じボタンの異なるデザインを1つのコンポーネントセットとして管理できます。
バリアントの作成方法は、Figma基礎「コンポーネント・インスタンス・バリアント」を参照してください。
9. Staffセクションを作成しよう
次にStaffセクションを作成します。背景画像を配置し、その上に見出しとスタッフ募集用のバナーを配置します。写真の上に文字やバナーを配置するときは、背景とのコントラストを確認し、内容が読みやすくなるように調整しましょう。
10. What’s Newsを作成しよう
続いて、ブログやお知らせを表示する「What’s News」を作成します。1つの記事カードは、アイキャッチ画像 記事タイトル 日付 で構成されています。
1つ完成したら複製し、3件分を横並びに配置します。
同じ形式のカードが複数ある場合は、必要に応じてコンポーネント化してもかまいません。
後ほどBLOG一覧ページでも同じような記事パーツを使用するため、他のページでも使うかもしれないパーツかどうかを考えながら作成しましょう。
11. Mapを配置しよう
Accessにつながる情報として、トップページにMapを配置します。地図画像またはGoogle Mapを想定した画像を配置し、ページ内のほかのセクションと幅を揃えます。
Webサイトでは、地図そのものだけでなく、周囲の余白や見出しとの距離も確認しましょう。
12. フッターを作成しよう
ページの最後にフッターを作成します。
今回のフッターには、UN HAMBURのロゴ 営業時間 住所 電話番号 SNSアイコン コピーライト を配置します。
トップページ以外のページでも同じフッターを使用するため、完成したらコンポーネント化しておきます。
トップページ全体を確認しよう
最後に、レイアウトガイドを非表示にして、ページ全体を確認します。
カラーに統一感があるか 見出しの文字サイズや色が揃っているか セクション間の余白が適切か 写真の雰囲気が合っているか カードの大きさや位置が揃っているか ボタンのデザインが統一されているか ヘッダーとフッターが整理されているか
などを確認しましょう。
トップページだけを見るのではなく、このあと複数ページを作ることを想定して、共通して使用するパーツが整理されているかも確認します。
今回使用したFigmaの機能
| 機能 | 今回の使い方 |
|---|---|
| カラースタイル | サイト全体で使用する色を統一 |
| テキストスタイル | 見出し・本文などの文字設定を統一 |
| オートレイアウト | ナビゲーションやパーツの間隔を調整 |
| コンポーネント | ヘッダー・フッター・ボタンなどを共通化 |
| インスタンス | 共通パーツを複数ページで再利用 |
| バリアント | ボタンの色や種類を切り替える |
| 画像 | キービジュアルやカードに写真を配置 |
コンポーネントを使うタイミングを考えよう
今回の課題では、すべてのパーツをコンポーネント化する必要はありません。
ヘッダー フッター ボタン SNSアイコンのまとまり
など、複数ページや複数箇所で繰り返し使用するものはコンポーネントに向いています。
一方で、そのページだけに一度しか登場しない装飾まで、必ずコンポーネントにする必要はありません。
「また同じものを使うか？」
を考えて、コンポーネント化するかどうかを判断してみましょう。
次は複数ページを作成しよう
トップページが完成したら、次は MENU STAFF ACCESS BLOG などのページを作成します。
次のページからは、今回作成したヘッダーやフッターのインスタンスを配置して制作を進めます。
同じパーツを一から作らず、コンポーネントを活用することで、複数ページのWebサイトを効率よく管理できることを確認していきましょう。