トップページが完成したら、次は下層ページの制作に進みます。UN HAMBURでは、Menu Staff Access BlogList BlogPage など、複数のページを作成します。
ここからは、トップページで作成したヘッダーやフッターのコンポーネントを再利用しながら、各ページを効率よく作成していきます。
最初に作成するのは Menu ページです。今回は、トップページを複製し、共通部分を残した状態から下層ページの基本形を作成します。
1. トップページを複製しよう
まず、完成したトップページのフレームを複製します。TopPage のフレームを選択し、option（alt) キーを押しながら右方向へドラッグすると、フレームを複製できます。複製したフレーム名は Menu に変更しておきましょう。
トップページには、キービジュアル Menu Staff What's News Map など、トップページ専用のセクションが配置されています。
今回は下層ページを作成するため、これらのトップページ専用コンテンツを削除し、ヘッダー フッター を残します。。
フッターには下方向の制約を設定しているため、Menu フレームの高さを変更しても、フッターはフレーム下部の位置を保ちます。
このあとMenuページの内容を追加しながらフレームの高さを調整し、最後にフッターがページ最下部に配置されているか確認しましょう。
2. ヘッダーとフッターがインスタンスか確認しよう
レイヤーパネルを確認し、ヘッダーとフッターがインスタンスになっているかを確認します。
レイヤーパネルの header や footer の横に表示されている ◇アイコン が、インスタンスであることを表しています。
トップページを複製して作成したページでも、ヘッダーとフッターが元のコンポーネントとのつながりを持ったインスタンスのままになっていることを確認しておきましょう。
インスタンスになっていれば、元のコンポーネントを変更したときに、その変更を各ページにも反映しやすくなります。
複数ページで構成されるWebサイトでは、同じヘッダーやフッターをページごとに作り直すのではなく、共通パーツとして管理することが大切です。
3. 下層ページ用のタイトルを作成しよう
次に、ヘッダーの下に下層ページ用のタイトルを作成します。
今回はレンガの背景画像を使用し、その上に MENU と表示します。背景画像の上に文字を配置し、中央に揃えましょう。
今回の設定は、
サイズ：1280px × 200px背景画像：レンガ塗り：#721104・不透明度50％文字：40px・#FFFFFF・Anonymous Pro・Bold
としています。
背景画像の上に色を重ねることで、写真の明るさや色味を調整しながら、文字を読みやすくすることができます。
このページタイトル部分は、今後作成する Staff Access BlogList BlogPage でも同じデザインを使用します。
そのため、背景画像とタイトル文字を選択し、コンポーネント化しておきましょう。
各ページでは、このコンポーネントからインスタンスを配置し、MENU STAFF ACCESS BLOG など、タイトル文字だけを変更して使用します。
これにより、背景画像やサイズ、文字の基本的な位置をページごとに作り直す必要がなくなります。
4. 下層ページの基本フレームを先に作成しよう
ヘッダー ページタイトル フッター が揃ったら、この状態を複製して下層ページの基本フレームを作成しておきます。
フレーム名は、Menu Staff Access BlogList BlogPage としておきましょう。
先に共通部分を準備しておくことで、これからは各ページ固有のコンテンツだけを作成すればよくなります。
複数ページを制作するときは、ページを1つずつ最初から作るのではなく、共通部分を先に整えてから展開すると効率よく進められます。
5. Menuページのコンテンツを作成しようここから Menu ページの中身を作成します。
今回のMenuページでは、写真 商品名 説明文 を組み合わせたカードを配置します。
まず、1つ目のカードを作成します。左側に写真、右側に商品名と説明文を配置し、カード全体がひとまとまりに見えるように整えます。
背景には境界線とドロップシャドウを設定し、カードが背景から少し浮いて見えるようにします。写真と文章の位置だけでなく、カード内の余白や文字の位置も確認しながら調整しましょう。1つ目のカードが完成したら、カード全体をフレーム化しておきます。
フレーム化しておくと、写真・商品名・説明文をひとまとまりとして扱いやすくなり、複製や位置調整もしやすくなります。次に、完成したカードを複製して、Ice Cafe Mocha Chocolate Donut のカードを作成します。
今回は、すべて同じ並びにするのではなく、2つ目のカードだけ写真と文章の位置を入れ替えます。
1枚目：写真が左・文章が右 2枚目：文章が左・写真が右 3枚目：写真が左・文章が右
と交互に配置することで、ページに変化をつけます。3つのカードが完成したら、カード全体をまとめてオートレイアウトに設定します。
方向は縦方向にし、カードとカードの間隔を 100px に設定します。
オートレイアウトを使用すると、カード同士の余白を一定に保つことができ、あとから間隔を変更するときもまとめて調整できます。最後に、カードの幅 写真の大きさ 文字の位置 カード内の余白 ドロップシャドウ カード同士の間隔 が揃っているか確認しましょう。
13. Menuページ全体を確認しよう
最後に、レイアウトガイドを非表示にしてMenuページ全体を確認します。次のポイントを確認しましょう。
- ヘッダーとフッターがインスタンスになっているか
- ページタイトルが共通コンポーネントになっているか
- 3つのカードの幅が揃っているか
- 写真の大きさが揃っているか
- カード内の余白が揃っているか
- ドロップシャドウが統一されているか
- カード同士の間隔が揃っているか
今回はトップページとは異なり、既存の共通パーツを再利用しながら下層ページを作成しました。
このあと作成する Staff Access BlogList BlogPage でも、同じように共通パーツを活用しながらページを作成していきます。
今回のポイント
Menuページでは、トップページで作成した ヘッダー フッター をインスタンスとして再利用しました。さらに、新しく作成した ページタイトル もコンポーネント化し、このあと作成する Staff Access BlogList BlogPage で使用できるようにしています。
複数ページのWebサイトでは、同じパーツをページごとに作り直すのではなく、共通するものをコンポーネント化し、インスタンスとして再利用することが重要です。
次はStaffページを作成しよう
Menuページが完成したら、次は Staff ページを作成します。
すでに作成しておいた Staff フレームには、ヘッダー ページタイトル フッター が配置されています。次のページでは、この共通部分をそのまま活用し、Staffページ固有のコンテンツを追加していきます。