【Figma入門⑤】Webデザインを作りながら、Figmaの基礎習得・スキルアップを目指す

Figmaの基本操作・基本機能がある程度わかったら、Webページのデザインを作ってみるのがおすすめです。学習用に作るのであれば、多少ズレても、間違えても問題ありません。

実際にデザイン制作を行ってみることで「この機能はないの？」「この方が効率的だった」など様々な疑問や発見があります。操作に慣れるだけではなく、小さな気付きの積み重ねで自然にどんどんスキルアップできますよ！

• 今回学習する内容について
• 制作の流れについて
• 使用素材
• デザインを作ってみよう
• 0.下準備
• 1. ヘッダー
• 2. ファーストビュー
• 3. イベント

今回学習する内容について

Webサイトによくある要素を盛り込んだ、下図のトップページデザインを作成します。
今回は上半分、「楽しいイベントいっぱいだよ」エリアまでのデザインをFigmaで制作していきましょう。

制作の流れについて

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

反対に、個人・小規模チームでの制作や、数ページ程度のデザインの場合は、ルールがふわっとしていて、デザイン制作と規則性を作っていくのが同時進行という事もあります。ほぼ独立したページのようなLPデザインの制作も、このパターンが多いです。

今回は、この同時進行方式でデザインを作成していきます。
よく使う色などを登録できるFigmaのスタイル・バリアブル機能については次の記事で、使用方法をご紹介します。

使用素材

Unsplashで提供されている以下の素材を使用させていただいています。

デザインを作ってみよう

まずはデザイン要素・規則性の下地ができるまで、デザインを作っていきます。

今回の場合は見本があり全体像が見えていますので、大体のデザイン要素が登場するくらいの範囲までやってみましょう。
ページの上半分、下図の3パートを作ります。

0.下準備

Figma入門シリーズでは前回までで、コンポーネントやフレームをいくつか作りました。せっかくですので、これも活用していきます。

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

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

1. ヘッダー

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

せっかくなので今までの復習も兼ねて、Figmaの機能を活用して作ってみましょう。

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に設定。
アイテム同士の間隔を設定します。

3-3. 配置

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

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

デザインタブ、Y座標のところに余白として開けたい数値を入れます。

次に、カードレイアウト部分。
こちらも同じようにShiftキーを押しながら、上に移動します。
上のオブジェクト（見出しブロック）と重なる、余白ゼロのところに来ると、先ほどと同じようにガイド線が表示されます。その位置に、一旦配置して下さい。

デザインタブの方で、今あるY座標の数値に「+80（追加したい余白）」と入力します。
そうすると、見出しの下辺から80pxあけた場所に配置してくれます。

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

ページの上半分が出来ました。
区切りが良ところで、レイヤーを整理したり、バージョン履歴を追加したりと、ファイルを整理しておくのがおすすめです。