- 制作背景
-
Webデザイナーとして就職活動を行うにあたり、これまで学んできたデザインやコーディング・動画制作のスキルを総合的に表現できるポートフォリオサイトを制作しました。採用担当者や面接官に、自分の制作実績やスキルを分かりやすく伝えることを目的としています。
- ターゲット
-
・就職活動における採用担当者
- デザインコンセプト
-
浮世絵を題材に、和風で印象に残るデザインを目指しました。世界観を出すため、実際のポストカードや雑誌から浮世絵素材を収集し、After Effectsで取り込み、トップ動画やタイトル横の装飾に動きを加えています。背景には紙をスキャンした画像を使用し、質感のある表現を取り入れました。動きを多く取り入れている分、全体のレイアウトはシンプルにまとめ、印象に残りつつも見やすさと分かりやすさを両立しました。
- 制作プロセス
-
・リサーチ：既存のポートフォリオサイトを調査し、採用担当者が短時間で求める情報を把握できるよう、情報構成や見せ方の傾向を分析しました。
・構成設計：トップページに自己紹介・制作実績・強みを集約し、詳細ページで各作品の制作背景や工夫を伝えられるよう設計。採用担当者が短い時間でも全体像を把握できる流れを意識しました。
・素材制作：IllustratorやPhotoshopで画像の切り抜きや色味補正を行い、サイト全体のトーンを統一しました。さらにAfter Effectsを用いてトップ動画や装飾を制作し、独自の世界観を演出しました。
・実装：HTML / CSS / JavaScriptに加え、WordPressでテーマを自作。各ページをテンプレート化し、更新や追加が容易にできるよう運用性も考慮しました。
・改善点・気づき：初稿では情報量が多く読みにくかったため、セクションごとに余白を増やし、スクロール時の見やすさを改善しました。また、スマホ表示では文字サイズやボタン配置を最適化し、ユーザー体験を向上させました。
- 工夫した点
-
・After Effectsでトップ動画を制作し、動きを取り入れることで印象に残るビジュアルを演出しました。
・採用担当者が短時間で必要な情報にたどり着けるよう、シンプルで直感的なサイト構成を意識しました。
・WordPressを用いてテーマを自作し、更新や追加が容易にできるよう設計。今後の運用を見据えた仕組みづくりを行いました。
・レスポンシブデザインを導入し、PC・スマホいずれからも快適に閲覧できるよう調整しました。
- 制作時間
-
デザイン：1週間
動画制作：1週間
コーディング：3週間
- 使用ツール
-
Illustrator／Photoshop／Aftereffect／PhpStorm／WordPress
