UN HAMBUR 03｜Staffページを作成しよう | Webtraining　- Webトレは、初心者から実務までのWeb学習トレーニング

完成見本を参考にしながら自分でレイアウトを考えて作成していきます。今回は、スタッフ募集を目的とした Staff ページを作成します。

すでに準備している Staff フレームには、ヘッダー　ページタイトル　フッター の共通パーツが配置されています。

これらを活用しながら、Staffページ固有のコンテンツを追加していきましょう。

Contents

1. 完成イメージを確認しよう

まず、完成するStaffページの全体を確認します。

今回のStaffページは、ページタイトル　メイン画像　募集案内　歓迎する人物像　応募方法　応募フォーム　フッター で構成されています。

完成見本とまったく同じ位置やサイズにする必要はありません。

ページ全体のバランスや読みやすさを考えながら、自分で調整してみましょう。

下層ページ用に作成したページタイトルのインスタンスを使用します。

タイトル文字を STAFF に変更します。

背景画像やサイズなどは、Menuページと共通のデザインを使用します。

共通パーツを作り直すのではなく、インスタンスを活用して必要な部分だけ変更することを意識しましょう。

ページ上部には、スタッフ募集のイメージとなる大きな写真を配置します。

今回はコーヒー豆の写真を使用しています。

写真の中央には、私たちと一緒に働きませんか？スタッフ募集中といったメッセージを配置します。

写真の上に文字を配置するときは、背景とのコントラストを確認し、文字が読みやすくなるように調整しましょう。使用する写真はUnsplashなどから探してもかまいません。

メイン画像の下に、スタッフ募集についての案内を配置します。

見出し　キャッチコピー　説明文 を組み合わせて、内容がひとまとまりに見えるようにします。

背景には境界線やドロップシャドウなどを設定してもかまいません。

文字サイズや色は、これまで登録したテキストスタイルやカラースタイルを活用しましょう。

続いて、どのような人を募集しているのかを分かりやすく紹介します。

例えば、人と接するのが好きな方　チームで働くのが得意な方　ハンバーガーが大好きな方などの内容を配置します。情報のまとまりが分かるように、見出し・本文・余白のバランスを考えてみましょう。

次に、応募方法を案内するエリアを作成します。今回は、電話番号を大きく表示し、応募方法がすぐに分かるようにします。応募方法　案内文　電話番号の優先順位を考えながら、文字サイズや太さを調整しましょう。電話アイコンなどを追加してもかまいません。

ページ下部には応募フォームを配置します。

今回のフォームには、氏名　連絡先　お問い合わせ内容　送信するボタンを配置します。

実際に入力できるフォームを作成する必要はありません。Figmaでは、フォームがどのような見た目になるのかをデザインします。入力欄の大きさ、ラベルとの間隔、ボタンの位置などを考えながら作成してください。

ボタンは、これまで作成したコンポーネントやバリアントを活用してもかまいません。

すべてのコンテンツを配置したら、レイアウトガイドを非表示にしてページ全体を確認します。

次のポイントを確認しましょう。