今回のレッスンの内容
ページデザインの下半分を作成し、デザインを完成させます。 前回のレッスンで登録した、スタイルやバリアントも活用していきます。
コンポーネントの追加
改めて見ると、見出し部分は後半もほぼ一緒のデザインです。 共通部分をコンポーネント化しちゃいましょう。
見出し（大きい文字）とラインを選択し、コンポーネントの作成を行います。
オートレイアウトを追加し、アイテム同士の間隔を設定します。 バリアブル（数値）を設定している場合は、それを使っても良いですね。
メインコンポーネントもデザインに使っている人は、ここまでで完了。
デザインの外に避けておきたい方は、メインコンポーネントをカット・アンド・ペーストで移動。 デザインの方にはインスタンスを配置して下さい。
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幅）のデザインが完成です。 お疲れ様でした！