Staffページと同じように、すでに用意している Access フレームの共通パーツを活用し、完成見本を参考にしながら自分でレイアウトを作成してみましょう。
1. 完成イメージを確認しよう
まず、Accessページの完成イメージを確認します。
今回のAccessページでは、2店舗の情報を掲載します。
本店 店舗写真2枚 Map 福岡店 店舗写真2枚 Map
という順番で構成します。
ページ上部の ヘッダー ページタイトル、ページ下部の フッター は、これまで作成した共通パーツを使用します。
2. ページタイトルを変更しよう
下層ページ用タイトルのインスタンスを使用し、タイトル文字を ACCESS に変更します。
背景画像やサイズ、文字の位置などは、MenuページやStaffページと同じデザインを使用します。
共通パーツは作り直さず、インスタンスの必要な部分だけを変更して使用しましょう。
3. 本店の店舗情報を作成しよう
最初に、本店の情報を配置します。本店 電話番号 住所を入力し、その下に店舗写真を2枚横並びで配置します。写真はUnsplashなどを利用して、店舗の外観や店内の雰囲気が分かるものを選びましょう。
2枚の写真は、高さや横幅を揃えて配置します。その下にはワイヤーフレームとして、Mapが入る場所をグレーの長方形で作成します。
4. 福岡店の店舗情報を作成しよう
続いて、福岡店の情報を作成します。本店と同じように、福岡店 電話番号 住所 店舗写真2枚 Mapを配置します。
本店と福岡店でレイアウトのルールが変わらないように、写真の大きさ、文字の位置、Mapの幅などを揃えましょう。本店で作成したまとまりを複製して、写真や店舗情報を差し替えてもかまいません。
Accessページ全体を確認しよう
すべて配置したら、レイアウトガイドを非表示にしてAccessページ全体を確認します。
次のポイントを確認しましょう。
- ヘッダーとフッターがインスタンスになっているか
- ページタイトルが共通コンポーネントのインスタンスになっているか
- 本店と福岡店のレイアウトが揃っているか
- 2枚の写真のサイズが揃っているか
- 店舗情報と写真の位置が揃っているか
- Mapの大きさが揃っているか
- セクション間の余白が適切か
- ページ全体の左右位置が揃っているか
完成見本とまったく同じでなくてもかまいません。2店舗の情報が分かりやすく整理され、同じルールで配置されていることを意識して作成してください。