FigmaでWebページデザインを制作する（前半）

• 学習内容・制作フロー
• 下準備
• 1. ヘッダーを作成する
• 2. ファーストビュー
• 3. イベント

学習内容・制作フロー

ここから、いよいよFigmaで最終目標のWebページデザインの作成を行っていきます。

本レッスンでは、ここまでの復習も兼ねて、題材デザインの上半分を作ります。
下図の範囲、「楽しいイベントいっぱいだよ」のセクションまでを作成します。

デザイン制作のフローについて

きっちりした企業や大規模開発・UIデザインのときは、先にデザインのルールを決めておく事が多いです。
デザインのガイドライン・デザインシステムが定義されていて、それに則ってデザインを作っていくイメージです。

反対に、小規模なWebサイト/ページのデザイン、個人または少人数で制作する場合。
デザインのルールが厳密ではなく、デザイン制作と、規則性の明確化が同時進行という事もあります。

今回は、こちらの同時進行方式でデザインを作成していきます。

下準備

本講座では、ここまでにコンポーネントやフレームをいくつか作りました。
せっかくですので、これも活用していきます。

横幅1600のフレーム（top_pc）を、ページデザインの枠、Adobe製品で言うところのアートボードとして使います。

ベージ全体を示すフレームは、縦長になるよう引き伸ばしておきましょう。
足りなければ伸ばせば良いので、長さは適当で大丈夫です。
カード4つは下の方に置いておきます。

1. ヘッダーを作成する

ページ最上部にあるヘッダー、ヘッダーナビゲーションを作ります。
背景色が緑色の部分です。

1-1. 土台を作る

ヘッダー部分は背景が緑色（＃669900）、テキストが白（＃FFFFFF）。
背景色があったほうが見やすいので、とりあえず緑色を敷きましょう。

フレームツールで幅1600の枠を作って、塗りを緑色にします。
高さは中身を入れてから調整するので大きめに作っておきましょう。

（※フレームtop_pcの内側で作成しても良いです）

1-2. パーツを用意する

ヘッダーを構成するパーツ（ロゴ・文字）などを用意します。
一緒に操作を試される方は、ロゴは円シェイプで代用しても、右クリックで下画像を保存して使っていただいても構いません。

一つずつ作り込んでいくと進めなくなりがちなので、まず必要なアイテムを簡単に配置。
文字は白色で、サイズは標準的な16(px)。

パンダの画像は高さ30前後のサイズにします。

1-3. 左右のパートを作る

左側に配置される、ロゴ・サイト名部分を作ります。

文字の大きさ（フォントサイズ）を感覚的に変えたいときは、拡大縮小ツールが便利です。
日本語・英語を2段で並べた時、高さがパンダの画像を超えないくらいに調整してください。

パンダの画像とサイト名は、最終的に1つの画像として書き出すと考えます。
なので、フォントサイズが10px以下・細かい小数になって良いです。感覚でサクッと合わせちゃいましょう。

出来たらグループ化します。

次に右側、メニューの部分を作ります。
テキスト4つを選択して、オートレイアウトを追加。

オートレイアウトで[横に並べる]を選択して、左右の間隔を設定します。

1-4. オートレイアウトで両端にアイテムを配置

作成したグループとフレームを両方選択して、オートレイアウトを追加します。

新たに作成されたフレームで、以下の設定をします。

1. 水平方向のサイズを固定にして、Wに1200と入力
2. 並べ方は[横に並べる]を選択
3. アイテムの左右の間隔を[自動]にして、両端に揃えにする
4. 垂直方向を中央揃えにする

デザインタブの最上部の揃え位置アイコン、もしくは“制約”を使って左右上下どちらも[中央]に指定。

緑色のフレームの高さを、ヘッダー（メニューバー）としてちょうど良いくらいに調節します。

Frame〇〇が重なってわかりにくいので、わかりやすいように名前を変えておいて下さい。

1-5. コンポーネント化

ヘッダー全体をコンポーネント化しておきます。
メインコンポーネントもデザイン内で使うか、別の場所にまとめておくかは、お好みで。

下図ではメインコンポーネントを左にまとめ、インスタンスをページのフレーム（top_pc）に配置しました。

レイヤーパネルにメインコンポーネントが並ぶと見にくい、という場合はセクションで囲んでおくとスッキリします。

2. ファーストビュー

2-1. 画像を配置

ヘッダーの下に、長方形ツールで全幅の長方形を作ります。
緑色の長方形の下辺と、ぴったりくっつけて下さい。

塗りから、画像を選択します。
必要に応じて、トリミングを使って位置を調整します。

2-2. テキストとボタンを配置

ファーストビュー部分に掲載したい文字、ボタンデザインを配置します。

• キリンに乗って散歩しよう！
• 世界で一番スリリングな冒険、キリンに乗って園内を散歩できます
• 詳細はこちら（※ボタン）

テキストツールで「キリンに乗って～」を入力し、太さやサイズ・塗りの色を設定。
位置は後で揃えるので、適当でOKです。

「世界で一番～」という文字部分を入れ、サイズを調整。
ここは自動改行してくれるよう、固定サイズを選択してテキストエリア型にします。

ボタンはコンポーネントの使い方で登録したものがありますので、そのインスタンスを挿入します。

2-3.飾り線の作成とレイアウト

デザインの見本だと、飾り線は何箇所も同じものを使うようです。

色や大きさの調整がしやすいように、この線もコンポーネントとして作っておきましょう。

縦幅（高さ）が5pxの長方形を作成します。
複製して5つを横並びにして、それぞれ塗色を変更。

コンポーネント化して、heading_lineと名前をつけました。

作っているファーストビュー部分に、インスタンスを2つ配置します。

テキスト・ボタン・飾り線を全て選択。
左揃えにして、オートレイアウトを追加します。

オートレイアウトを追加すると、時々、下図のようにレイヤーアイコンが囲まれたような表示になります。
これは、アイテムが絶対配置になっていることを示す表示です。

フレーム右上の[絶対配置]のアイコンから解除して、レイヤーの並び順を変えましょう。

固定サイズにした方のテキスト「世界で一番～」は、垂直方向のサイズ調整を [内包] に変更します。

高さがテキストと同じになり、オートレイアウトによる均等な余白がつきます。

アイテムの上下の間隔を調整して、フレームごとお好きな位置に移動させて下さい。

3. イベント

イベントエリアを作ります。
前回のオートレイアウトまでで、6～7割くらい出来ているので簡単です。

3-1. フレーム作成

ファーストビューの下に、横幅いっぱい・高さやや長めのフレームを作ります。
塗りを追加して、渋めの黄色（#DBAF23）を設定しました。

わかりやすいようにフレーム名をeventに変更。
カード配置のためのフレーム（card-container）を、新しく作ったフレームの中に移動させます。
オートレイアウトの設定、アイテムの間隔やパディングの調整が必要なら行います。

3-2. 見出し部分の追加

見出しと、見出しの補助テキストを追加します。

• 楽しいイベントいっぱいだよ
• いつ訪れても楽しいズーロッパ東京

見出しはフォントサイズ32のBold、補助テキストの方は基本の文字サイズ（16）でMediumにしました。
どちらのテキストも中央揃えに設定します。

コンポーネントから飾り線（heading_line）を加えます。
テキスト、飾り線、計3つのレイヤーを選択して、オートレイアウトを追加。

フレームの横幅、垂直方向のサイズ調整を[内包]にして、最大幅を1200に設定。
アイテム同士の間隔を 24 に設定します。

3-3. 配置

見出しのまとまりを、Shiftキーを押しながら上に移動します。
フレームの上辺ピッタリ、Y座標が 0 の位置まで移動すると、下図のようなガイド線が表示されることを確認して下さい。

表示されない場合は、スナップ機能、[オブジェクトにスナップ]が有効かご確認下さい。
左上にあるメインメニュー、基本設定から確認できます。

デザインタブ、Y座標のところに余白として開けたい数値を入れます。
以下では96（px）にしました。

次に、カードレイアウト部分。
こちらも同じようにShiftキーを押しながら、上に移動します。

上のオブジェクト（見出しブロック）と重なる、余白ゼロのところに来ると、先ほどと同じようにガイド線が表示されます。
その位置に、一旦配置して下さい。

デザインタブの方で、今あるY座標の数値の後ろに +80（追加したい余白サイズ）と入力します。
そうすると、今の位置よりも80px下に配置してくれます。

最後に、塗りに黄色を設定したフレームの高さを整えます。
下からドラッグしていくとガイド表示が出るので、上部と同じ96pxのところで止めます。

ページの上半分が出来ました！

区切りが良ところで、レイヤーを整理したり、バージョン履歴を追加したりと、ファイルを整理しておきましょう。