作品をまとめるポートフォリオサイト（当サイト）を作成しました。

使用言語
HTML5, CSS3, jQuery

使用ツール
Brackets, illustrator

制作期間
3週間

制作フロー

1.  類似サイトの調査
2.  ペルソナ策定
3.  サイトマップ制作
4.  コンセプト＆デザインラフ制作
5.  コーディング

1. 類似サイトの調査

クリエイターやWEBデザイナー数名のポートフォリオサイトを調査しました。
サイト構造やデザインを参考にしました。

2. ペルソナ策定

■想定ペルソナ

• 企業の採用担当者、もしくはクラウドソーシング等の依頼者
• デザイナーの「人となり」と「作品」をサイト上で閲覧する。
• 採用、もしくは仕事を依頼するに値する人材かを判断する。

3. サイトマップ制作

ペルソナをもとに、サイト訪問者の主な目的はデザイナーの「人となり」と「作品」が分かるページと仮定。
実際に仕事を依頼する場合の宛先となる「問い合わせフォーム」を加え、トップページ直下に3つのコンテンツが並ぶサイト構造にしました。
その他のコンテンツは一切省き、訪問者が目的のコンテンツにリーチしやすいシンプルさを目指しました。

4. コンセプト＆デザインラフ制作

サイト名を「my toybox」とし、制作物（＝自分のおもちゃ）をラフにアップしていく、まさしくおもちゃ箱のようなサイトにしたいというコンセプトでデザインしました。

ロゴや大まかなテーマを決め、詳細なデザインはコーディングをしながら詰めていきました。

■テーマ

• 親しみやすさ
• 個性
• シンプルさ

■工夫したポイント

• 英字フォントは「Comfortaa」を使用し、丸文字で親しみやすさを演出しました。
• わたし自身がカラフルでポップなデザインを好みとすることから、アクセントカラーとしてコンテンツごとに別の色を設定（“about me”はパープル、“works”はイエローetc）し、色とりどりのおもちゃを連想させるようなカラーリングを目指しました。
• コンテンツごとに色を分けることでページの切り替わりを明確にし、かつページ内の色数は最小限に抑えることでシンプルで統一感が出るよう工夫しました。

5. コーディング

グローバルナビゲーションを左サイドに固定した2カラム式のサイトデザインを採用し、訪問者が目的のコンテンツにリーチしやすい構成を目指しました。

「about me」は説明文が冗長になりがちだったため、重要なポイントにマーカーを引く、ツールをアイコンで表示する、経歴をチャート化するなど、視覚的に分かりやすくなるよう工夫しました。
逆に「works」は一覧に無駄な説明文を省くことで、作品を一望できる構成にこだわりました。