Project
Portfolio
Overview（概要）
自身の実績だけでなく、これまでの経験や思考、価値観まで伝えることを目的に、ポートフォリオサイトを制作しました。作品そのものだけでなく、制作の背景やプロセスを含めて見てもらうことで、制作への向き合い方まで伝わる構成を目指しました。
コンセプトは ポートフォリオ＝自分自身。生まれ育った環境や自身の性格をもとに、穏やかで落ち着いた世界観を設計し、自分らしさが自然と伝わるデザインを目指しました。
Description（詳細）
- 概要
- ポートフォリオサイト
- 課題
- 制作力だけでなく、自分の経験や人物像まで短時間でどう伝えるか
- 目的
- 制作実績だけでなく、経験や価値観まで伝える
自分らしさが伝わる体験を設計する - ターゲット
- 制作会社の採用担当者
- 担当範囲
- アートディレクション / Webデザイン / 実装
- 制作期間
-
企画 / 情報設計 / WF 2週間デザイン 3週間実装 4週間
- 使用ツール
- Figma / Photoshop / Cursor / GSAP
- 使用言語
- HTML / CSS（Sass） / JavaScript
Architecture（情報設計）
採用担当者が短時間でも必要な情報を把握できるよう、情報の優先順位と導線を整理しました。
トップページでは制作実績を優先して配置し、興味を持った作品から詳細ページへ自然に遷移できる導線を設計しています。プロフィールは概要をトップページに、より詳しい経歴や考え方をAbout Meに分けることで、必要に応じて段階的に人物像を理解できる構成としました。
Projectsでは制作の背景や意図、プロセスを、About Meでは経歴や制作への考え方、価値観を整理しています。それぞれの役割を明確に分けることで、制作物を見るだけでは伝わりにくい思考や人物像まで理解できる情報設計を目指しました。
Design（デザイン）
コンセプトを ポートフォリオ＝自分自身 と設定し、生まれ育った環境や自身の性格から、自分らしさを表現するデザインへ落とし込みました。
背景には、幼少期から見慣れてきた自室に差し込む木漏れ日をモチーフとして取り入れています。また、穏やかで静かな世界観を好む自身の性格から、モノトーンを基調とした配色とゆとりのある余白を取り入れ、落ち着いた空気感を表現しました。
見出しにはMarcellusとZen Old Mincho、本文にはZen Kaku Gothic Newを採用しています。タイポグラフィや写真、余白、アニメーションまで共通したトーンを持たせることで、サイト全体を通して自分らしさが自然と伝わるよう設計しました。
Development（実装）
HTML・CSS（Sass）・JavaScriptによる静的実装を行い、スタイル設計にはFLOCSSを採用しました。remやclampを活用したリキッドレイアウトにより、画面幅に応じて柔軟に変化するレスポンシブ設計としています。
アニメーションにはGSAPとScrollTriggerを採用し、Lenisによるスムーススクロールを組み合わせています。デザインで意図した穏やかな空気感を損なわないよう、動きの速度やタイミングを調整し、サイト全体で一貫した操作感を目指しました。また、ライブラリの読み込み状況を判定して初期化することで、読み込みに失敗した場合にも基本的な閲覧や表示に影響が出にくいよう配慮しています。
