自身のポートフォリオサイト
- クライアント
- –
- URL
- https://sasakim.com/（当サイト）
- 担当範囲
- 情報設計、デザイン、実装、公開
- 制作期間
- １ヶ月
- 使用ツール
- Photoshop、illustrator、Figma、Visual Studio Code、Local、WordPress
転職活動用のポートフォリオを制作しました。「今までやったことがないことをやる」を裏テーマに、自分で描いたイラストを使ってみたり、タブ切り替え機能の実装、Localを使用したCMS化などを行いました。
企業の採用担当者様に見ていただくことを考え、制作物が見やすいレイアウトを心がけました。また、自分らしさを失わないデザインを目指し、色数を抑え、すっきりとした印象を持ってもらえるようにしました。
- 目的
- 転職活動に向けて、制作物をまとめる
- ターゲット
- 企業の採用担当者様
- コンセプト
- 制作物を見やすく＋自分らしい雰囲気を伝えられるサイトに。
- 情報設計
- 最初に優先度の高い「制作実績」を配置
トップページでは「制作実績（Works）」を上部に置いて、最初に採用担当者様の目に入るようにしました。下部には「私について（About）」が続くため、トップページに掲載する実績は5つまでに絞っています。
スクロールでフェードインするアニメーションをつけました。段階的に情報を見せることで下に続くコンテンツの存在を伝えるとともに、単調な印象にならないようにしました。
サイドメニューやフッター内のナビゲーションメニューは、他のリンクとは違う動きをつけることで、役割を区別化しています。
サイドメニューのリンクをホバーした際の動き。通常のリンクはホバー時に透明度が変化する。 ロゴはProcreateのアニメーションアシストという機能を使い、線がずれて動くようなgifにしました。サイトを開いた際のちょっとしたアクセントにしています。
- デザイン
- イラストで自分らしいサイトに。
元々イラストを描くのが好きということで、自分らしさを表現するためにイラストを使用しました。ロゴ部分の顔のイラストはprocreateを使用し、フッターのイラストはIllustratorで作成しました。
シンプルなデザイン製作物を見ていただくのが第一の目的のため、製作物の雰囲気を邪魔しないようなシンプルなデザインを目指しました。色数を抑え、ベースカラーは白（#FFFFFF）で、アクセントカラーに緑（#429C7E）のみ使用しています。
パンくずリストで現在地を分かりやすく。下層ページにはパンくずリストを設置し、今どのページを見ているのかを視覚的に分かりやすくしました。
- 今後の展開
- 実績が増えた際に更新する予定です。また、選考を受ける中で都度改善していきます。
- ふりかえり
-
イラストを描いて載せる・タブの切り替え機能を実装する・CMS化する（Localから本番のWordPressに移行する）など、今までやったことのないことに取り組むことができたので、転職活動に使える以外にも意味のある制作になったと思います。今後は、WordPressの管理画面のUI改善など、実務で必要な知識・技術を身につけていきたいです。