| 目的・ターゲット |
- 書類選考を通過し、内定獲得につなげること。
- 自身のスキルや人柄を伝え、採用担当者に一緒に働くイメージを持っていただくこと。
|
| 課題 |
- 自身のスキルや人柄を、具体的に伝えられる作品がないこと。
- フロントエンドエンジニアとしての視点や強みを、どのように表現するか。
|
| 情報設計 |
- 外国人であり、フロントエンドエンジニア出身のWebディレクターという自身の特徴を、採用担当者に一目で知っていただけるよう、自己紹介を優先した情報設計にした。
- ファーストビュー直下に簡単なプロフィールを配置し、より詳しく知りたい方には詳細ページへアクセスできる構成にしています。その後に制作実績、お問い合わせの順で配置し、人物像を知ってからスキルや実績を見ていただける流れを意識している。
- 詳しいプロフィールにはグローバルヘッダーの「ABOUT」からいつでもアクセスできるようにし、下層ページからもトップページへ戻れるよう「トップページに戻る」ボタンを設置した。
|
| デザイン意図 |
- エンジニアの硬い印象を和らげ、クリエイティブさや繊細さを感じていただけるよう、爽やかな黄色と水色をメインカラーにした。黒をアクセントとして加えることで、プロフェッショナルかつスタイリッシュな印象に与える。
- 文章だけの説明が続かないように、ラベルやリストなどのUI要素を取り入れ、情報を視覚的にわかりやすく整理した。
- スマートフォンでの閲覧時にページが長くなりすぎないよう、PCとは異なるレイアウトに調整し、画面サイズに合わせた情報量と配置を意識している。
- サイトを楽しみながら閲覧していただけるように、ページ全体にアニメーションを取り入れ、読みやすさにも配慮し、下にスクロールするとグローバルヘッダーに白背景が表示される仕様に。
|
| 制作期間 |
- 企画／ワイヤーフレーム2日
- デザイン3日
- コーディング2日
- サーバー・ドメイン設定1日
|
| 使用ツール |
Figma／Cursor／ChatGPT |
