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

• 今回のレッスンの内容
• コンポーネントの追加
• 4. サイト紹介の作成
• 5. お知らせの作成
• 6.フッターの作成

今回のレッスンの内容

ページデザインの下半分を作成し、デザインを完成させます。
前回のレッスンで登録した、スタイルやバリアントも活用していきます。

コンポーネントの追加

改めて見ると、見出し部分は後半もほぼ一緒のデザインです。
共通部分をコンポーネント化しちゃいましょう。

見出し（大きい文字）とラインを選択し、コンポーネントの作成を行います。

オートレイアウトを追加し、アイテム同士の間隔を設定します。
バリアブル（数値）を設定している場合は、それを使っても良いですね。

メインコンポーネントもデザインに使っている人は、ここまでで完了。

デザインの外に避けておきたい方は、メインコンポーネントをカット・アンド・ペーストで移動。
デザインの方にはインスタンスを配置して下さい。

4. サイト紹介の作成

4-1. 全体枠と見出しの用意

イベントのセクションと同じく、塗りを設定したフレームを用意します。

見出しのインスタンスを挿入し、新しく作ったフレームの下（中）に置きます。
水平方向の中央揃えを設定し、Y座標に余白として開けたい数値（96）を入力。

文字色を緑色に設定します。
解説ではヘッダーの背景色を、スタイルgreenとして登録しています。

4-2. コンテンツ部分の用意

次に、見出し下にあるサイト説明部分を作ります。

フレームツールで適当な長方形を描きます。

Shiftキーを押しながらドラッグして、見出しブロックの下ピッタリに合わせます。

キーボードショートカットShift + Aでオートレイアウトを追加。

アイテムの並び順は [横に並べる] を選択して下さい。
Y座標に+80と入力し、見出しからの間隔をとります。

水平方向のサイズ調整で、固定幅を選択。WをPCコンテンツ幅（1200）に設定します。
水平方向の中央揃えで、フレームの横方向中央に配置してください。

フレーム名をcontainerなど分かりやすいものに変更。
垂直パディング・水平パディングは、共に 0 に設定します。

4-3. コンテンツ部分の要素を作成

左側・画像部分

作成したフレーム（container）の中に、長方形ツールで長方形シェイプを1つ作ります。

作成した長方形シェイプを選択して、キーボードショートカットShift + Aでオートレイアウトを追加。

Frame2のオートレイアウトの設定で、垂直パディング・水平パディングの両方を10に設定します。

塗りを白色にして、カードと同じドロップシャドウを追加。

フレームの中にある長方形（Rectangle）を選択します。
塗りからパンダの画像を挿入。

画像サイズ・縦横比はあとで設定します。

右側・テキスト部分

右側にある、テキスト部分を作っていきます。
小見出し、説明文それぞれテキストレイヤーを作って下さい。

都心でいちばん動物とふれあえる場所

動物園で、ありのままの動物たちの生活や行動、しぐさの中に「凄さ、美しさ、尊さ」を見つけ、「たくさんの命あふれる空間の居心地の良さ」を感じてほしい。家畜・ペット種との触れ合いを通じて「命の温もり、命の尊さ」を感じてほしい。そして、野生動物の保護や環境問題を考えるとき、動物たちは私たちと対等な生き物なんだと思うきっかけになれる、そのような動物園でありたいと思っています。

作成したテキストレイヤーを、2つとも選択状態にします。
キーボードショートカットShift + Aでオートレイアウトを追加。
[縦に並べる] を選択して、小見出しが上に来るようテキストレイヤーの順番を入れ替えます。

見出し部分を、フォントサイズ24の太字、緑色にします。

下の説明文のところは、標準の太さ・サイズを16にします。
スタイルを登録しておいても良いですね。

テキストレイヤー２つそれぞれに、以下の設定を行います。

• 水平方向のサイズ調整を [コンテナに合わせて拡大] にする
• 段落を左揃えに設定する

その後、テキストレイヤー２つを囲うフレームも、水平方向のサイズ調整を [コンテナに合わせて拡大] に設定します。

オートレイアウトの項目を使って、アイテムの上下の間隔を24に設定。
左にだけ余白が付くよう、水平パディングを「48, 0」と入力して下さい。

一旦選択を解除して、選択し直すと、上下左右個別の表示になります。

調整

パンダの画像と、テキスト部分のサイズを調整します。
画像を設定したRectangleのW,Hの値を、横長になるように変更します。

画像を囲っているフレームは、水平方向・垂直方向どちらも [コンテンツを内包]に設定。
オートレイアウトで設定した、上下左右のパディングを効かせます。

上部の見出しを打ち替えていませんでしたね。
「ズーロッパ東京とは」に変更します。

最後に、このセクション全体のフレーム（about）の長さを揃えます。
下辺をドラッグして、始まりと同じだけ余白をとった位置に合わせたら完成です。

5. お知らせの作成

5-1. 全体フレームと見出し

これまで作成したフレームの下に、新しいフレームを追加します。
幅は横幅いっぱい、塗りでオレンジ系の背景色（下記では#FBB93D）を設定。

分かりやすい名前をつけて、上のフレームと隙間なく合わせます。

見出しのインスタンスを挿入して、新しく作ったフレーム（info）下に置きます。
Y座標に余白として開けたい数値（96）を入力して、水平方向の中央揃えを設定。

テキストを「お知らせ」に打ち替えます。

5-2. お知らせの枠を作る

フレームツールで、コンテンツ幅よりも狭い長方形を作ります。

とりあえず適当に描画して、塗りを白、エフェクトでカードと同じドロップシャドウを設定してください。

キーボードショートカットShift + Aでオートレイアウトを追加。フレーム化します。

水平方向の中央揃えに設定して、W（幅）を860に設定してください。

一度、見出しの線下ピッタリまで移動させます。
そして、Y座標に+80を入力し、他のセクションと同じだけ余白を取った位置に配置します。

オートレイアウトのアイテム並びは、縦方向に設定してください。
アイテム同士の間隔・余白は後で調整するので、特に設定しなくて良いです。

5-3.お知らせ一覧の作成

コンポーネントを作る

お知らせの一覧表示部分は、同じアイテムの繰り返しです。

変更しやすいように、コンポーネントで作ってみましょう。

日付と、お知らせタイトルのテキストをそれぞれ作ります。
どちらも、段落は左揃え。

日付の部分はテキストのデフォルト（サイズ16・標準の太さ）、濃い灰色にします。

タイトルの部分はフォントサイズ16は同じですが、太字。
太さを変えるために、テキストスタイルを追加します。

塗り色は、カードタイトルなどでリンク色として使っている青にします。

2つのテキストレイヤーを選択して、オートレイアウトを追加。
アイテムの並べ方を横並びにして、テキスト間の間隔を調整します。
40くらいにしておきましょう。

オートレイアウトの揃え位置を左－中央にして、垂直パディングを16にします。
フレーム名はTextに変えておきます。

Lキーで直線ツールに持ち替え、作成したフレームの下に線を引きます。
線色は薄めの灰色、下図では#CCCCCCにしています。

LineとTextを選択し、オートレイアウトを追加。
オートレイアウト設定でアイテムを [ 縦に並べる ] 、間隔は 0 に設定します。

線（Line）のレイヤー、テキストのフレームを両方選択してください。
水平方向のサイズ調整を [コンテナに合わせて拡大] に変更します。

LineとTextを囲っているフレームを選択して、コンポーネント化します。

コンポーネント名をつけたら完成です。

インスタンスの配置・調整

作成したコンポーネントのインスタンスを1つ挿入。
一覧を入れるために作ったフレーム内に配置します。

挿入したインスタンスを複製し、3つに増やします。

インスタンスを3つとも選択して、フレームの水平方向のサイズ調整を [コンテナに合わせて拡大] に変更。
下図のようにインスタンスの横幅が伸びます。

アセットパネルからボタンデザインを選択し、配置。
3つ並べたインスタンスの下に来るよう、レイヤーの並び順を変えて下さい。

ボタンインスタンスのバリアントで、サイズをNormal、ファーストビューのボタンよりも小さいものに変更します。
こちらはコンポーネント“バリアント”機能のレッスンで作成しています。

ボタンの上に、もう少し余白を多く入れたいので、フレームを増やしましょう。

ボタンのインスタンスを選択し、Shift + Aでオートレイアウトを追加します。
オートレイアウトの水平パディングで「8」と入力して、上下の間隔を広げます。

ボタンのテキストを「もっと見る」に打ち替えます。

フレームの水平方向のサイズ調整を [コンテナに合わせて拡大] に変更。
オートレイアウトの揃え位置を上揃え－中央にして、ボタンを中央に配置して下さい。

5-4. セクションの調整

オレンジ色の背景色部分になっているフレームの長さを整えます。

テキストの打ち替え、余白の調節が必要であれば行って下さい。
見本は白背景の横パディングが10前後と狭いのですが、24くらい確保すると綺麗に見えます。

6.フッターの作成

フッターは、ほとんど空、暫定という感じなので、簡単に設定しちゃいましょう。

ヘッダー部分を複製して、インスタンスを切り離します。

紛らわしいのでフレーム名を「footer」に変えておきましょう。
左側にあるlogoのグループはつかわないので、グループごと削除。

テキストレイヤーも1つだけ残して削除します。
残したテキストレイヤーを使って、文字を「footer」と打ち替えます。

footerフレームをコンポーネント化してください。
トップページデザインの最下部に、footerのインスタンスを配置します。

これでWebページ（PC幅）のデザインが完成です。
お疲れ様でした！