Figma課題：ポートフォリオデザイン

完成時チェック項目

ページ

• トップページが完成している
• 制作実績詳細ページが完成している
• フレーム幅が1440pxになっている
• 画像や文字が大きくはみ出していない

スタイル

• テキストスタイルを使用している
• カラースタイルを使用している（文字色などが未設定の可能性あり）
• 2ページのデザインに統一感がある
• 文字が読みやすい

コンポーネント

• 同一デザインのパーツをコンポーネント化した（制作実績カード等）
• 同一デザインのパーツのインスタンスを配置した（制作実績カード等）
• インスタンスごとに画像と文章を変更した
• 共通ボタンをコンポーネント化した
• ページ上にボタンインスタンスを配置した（インスタンスになっていないボタンが配置されていることあり）

プロトタイプ

• ヘッダーから各ページに移動できる
• 制作実績から詳細ページへ移動できる
• 詳細ページからトップページへ戻れる

プロトタイプURLをコメント欄から提出

右パネルの「共有」をクリックします。

「リンクをコピー」をクリックしてコメント欄に投稿してください。

終わった人用の課題

必須課題が完成した人は、次の課題に取り組みましょう。

すべて行う必要はありません。
上から順番に確認し、自分の作品に必要だと思う修正を選んでください。

終わった人用の課題に取り組んだ人は、次の内容をメモしておいてください。

• 取り組んだ課題
• 修正した場所
• 修正前の問題
• どのように改善したか
• 改善後に良くなった点

デザインを整える

完成したページを見直し、より見やすく、統一感のあるデザインに修正します。

余白を8の倍数にそろえる

ページ内で使用している余白を確認してください。
中途半端な数値が使われている場合は、近い8の倍数へ変更します。

確認する場所

• 見出しと本文の間
• 画像と文章の間
• カード内部の余白
• カード同士の間
• セクション上下の余白
• ボタン内部の余白

チェックポイント

• 使用する余白に一定のルールがある
• 同じ役割の余白がそろっている
• 要素同士が近すぎたり離れすぎたりしていない

横位置をそろえる

ページ全体を見て、要素の開始位置を確認します。

確認する場所

• 各セクションの見出し
• 本文の左端
• カード一覧の左端
• 画像の左端
• ボタンの位置

位置が少しずれている場合は、同じガイドやコンテンツ幅にそろえます。

チェックポイント

• 各セクションの左端がそろっている
• 中央揃えと左揃えが混在しすぎていない
• ページ全体に位置揃えの軸が感じられる

カードのデザインを統一する

3件の制作実績カードを見比べます。

確認すること

• カードの幅と高さ
• 画像の高さ
• タイトルの位置
• カード内部の余白
• 角丸や枠線

文章量が異なる場合でも、カードの見た目や高さが大きく崩れないように調整します。

チェックポイント

• 3枚のカードサイズの高さがそろっている
• 画像サイズがそろっている

操作や機能を追加する

ボタンにHover状態を追加する

ボタンコンポーネントに、次の2つのバリアントを作成します。

• default
• hover

hoverでは、色、枠線、文字色などを変更してください。

チェックポイント

• ボタンに2つのバリアントがある
• マウスを重ねると見た目が変わる
• hover後も文字が読みやすい
• すべてのボタンで同じ動作を使用している

固定ヘッダーを設定する

ページをスクロールしても、ヘッダーが画面上部に固定表示されるようにします。

チェックポイント

• スクロールしてもヘッダーが表示される
• ヘッダーが他の要素を隠していない（背面のコンテンツと重なっていない）
• プレゼン表示で確認している

お問い合わせページを追加する

3ページ目として、お問い合わせページを制作します。

コンポーネントの入れ替えができる「必須項目」と「任意項目」のラベルをつけてください。
プロトタイプでお問い合わせページに移動できるようにしてください。

チェックポイント

• お問い合わせページが追加されている
• 入力項目が分かりやすく並んでいる
• 「必須項目」と「任意項目」のコンポーネント入れ替えができる
• 各ページからお問い合わせページに移動できる
• お問い合わせページからトップページへ戻ることができる