- 制作時間・時期
- 企画・ワイヤーフレーム / 2週間 デザイン / 2週間 コーディング /2週間 2025年3月〜4月に制作。
- 使用ツール
- Illustrator / Photoshop / figma

転職活動に向けて、自身の制作物や経歴をまとめたポートフォリオサイトを制作しました。
シンプルでありながらも自分らしさが感じられるデザインと、ストレスのない情報構成を心がけています。



転職活動に向けて、自身の制作物や経歴をまとめたポートフォリオサイトを制作しました。
シンプルでありながらも自分らしさが感じられるデザインと、ストレスのない情報構成を心がけています。
- 制作時間・時期
- 企画・ワイヤーフレーム / 2週間 デザイン / 2週間 コーディング /2週間 2025年3月〜4月に制作。
- 使用ツール
- Illustrator / Photoshop / figma


- ターゲット
- web制作会社の採用担当者様
- 課題、要望
- 自身のスキルや制作物をまとめたサイトがない。
- 目的
- 現段階の自身のスキルや経歴を知っていただき、書類選考の通過を目指す。
- 情報設計
- 採用担当者の方が最も重視するのは制作物だと考え、Topページのfv直下にWorksセクションを配置しました。 その中で特に見ていただきたい作品4点と、全ての作品リストをボタンで切り替えられる構成にすることで、ページ遷移のストレスを避け、スムーズに内容を確認できるようにしています。モックアップ画像は、デザインの特徴や雰囲気が視覚的に伝わるよう大きめに配置し、全ての作品リストでは2カラムで視認性を意識した構成にしています。各作品のページでは、文章が続くことで読みにくくならないように、制作時期・期間・使用ツールの3点を案件概要やデザイン説明とは分けてレイアウトし、読みやすさと情報の整理性に配慮しています。Aboutページでは、これまでの取り組みやデザイナーを志した背景をまとめるとともに、趣味や好みが伝わる写真を掲載することで、人柄や個性を感じてもらえるよう工夫しています。
- デザイン
- “海”という自身の名前にちなんだテーマを軸に、爽やかで優しいブルー系カラーを基調にしたデザインで構成しました。コンテンツを引き立たせながらも印象に残る配色にすることで、他のポートフォリオとの差別化も意識しています。波をモチーフにしたSVGアニメーションやゆったりとした動きを取り入れることで、テーマに統一感を持たせつつ、上品で穏やかな空気感を演出。全体のレイアウトは、圧迫感を避けて読みやすくなるよう余白をたっぷりと取りました。さらに、スキル紹介セクションでは、Figmaで自作したイラストを掲載し、視覚的なアクセントと共に簡単なイラスト制作ができるというアピールも図っています。




ALL WORKS
制作したもの一覧
ALL WORKS
制作したもの一覧
-
宵 / 照明専門店
( direction / design / coding ) -
My Portfolio / 当サイト
( direction / design / coding ) -
Rosalie / フラワーショップ
( direction / design / coding ) -
こもれび内科クリニック / 病院
( direction / design / coding ) -
好食冰 / 台湾かき氷店
( direction / design / coding ) -
banner
販促バナー / チョコレート
( design ) -
banner
販促バナー / シャンプー
( design ) -
banner
婚活アプリバナー
( direction / design )