ポートフォリオサイト
PORTFOLIO SITE
Web制作会社への就職活動用に制作したポートフォリオサイトです。作品を引き立てるニュートラルモダンなデザインと犬のモチーフによる親しみやすい印象の両立を図りました。採用担当の方々が快適に閲覧できる設計を目指しています。
project-data
- Duration : 5 weeks (2026.05)
- Role : Planning, Design, Coding (All)
- Stack : HTML, CSS, JavaScript, WordPress
- Tools : Figma, Photoshop, Illustrator, VS Code
design process
制作意図
Challenge
- • スキルの証明不足
- 実務未経験のため、現段階のスキルや設計力が伝わりにくい。
- • 書類の伝達限界
- 書類のみでは制作姿勢や人物像が伝わりにくい。
- • 途中離脱の発生
- 採用担当者は多忙なため、サイトから途中で離脱されてしまいやすい。
Goal
- • 最終目標（KGI）
- 書類選考を通過し、面接の機会に繋げること。
- • 中間指標（KPI）
- トップページでの離脱を防いでサイト内の回遊率を高めることで、下層ページの滞在時間を伸ばし、制作姿勢や成長意欲を伝えること。
Target
- • メイン
- 自社にマッチする人材を探しているWeb制作会社・採用担当者
解決手法
Approach
- • スキルとプロセスの明示
- ツールの対応可能範囲や各作品のデザインプロセスを明記し、保有スキルや設計思考を示しました。
- • 制作姿勢と意欲の提示
- デザイナーを目指した理由や仕事への姿勢、価値観などを記述し、制作への想いや成長意欲を示しました。
- • 情報配置と導線の最適化
- MV直後の作品配置や作品詳細からの回遊導線により、探索ストレスを軽減してサイトからの途中離脱を防ぐ設計にしました。
Key Points
- • 遊び心を取り入れた演出
- 閲覧性を損なわないよう配慮した肉球アニメーションにより、ユーザー操作へ適度な遊び心と変化をプラスしました。
- • 思考プロセスの可視化
- 制作背景や思考プロセスを明確にし、整合性と再現性のあるデザイン実現への姿勢を示しました。
視覚設計
Typography
- • Noto Sans JP（和文）
- 閲覧環境に依存しない高い可読性を確保し、作品を引き立てるニュートラルなトーンを備えているため選定しました。
- • Gotham（欧文）
- モダンで視認性が高いうえ、独特の丸みにより親しみやすさも演出する意図です。
Color Palette
- • 配色意図
- 作品を邪魔しない端正なトーンをベースに、犬のモチーフが持つ温もりが自然と馴染む配色を目指しました。
- • 色彩設計
-
- #F9F9F7
- #ECEAE6
- #4A3F35
- #9E6D51
layout overview
横スクロールして複数ページをご覧いただけます
