Portfolio

インターンシップへの応募を目的として制作した、自身のポートフォリオサイトです。

単に制作物を並べるだけではなく、作品そのものに加えて「どのような目的で、何を考えて制作したのか」まで伝えられるポートフォリオを目指しました。

また読者が複数のポートフォリオを見ることを想定し、短時間でも自分のスキルや人物像を把握できる情報設計を意識しました。

制作目的

インターンシップへの応募にあたり、自分がこれまで制作してきた作品や身につけてきたスキルを整理し、採用担当者に伝えることを目的として制作しました。

課題

ポートフォリオでは制作物を掲載するだけでは、デザインの完成度は伝わっても、制作時の思考や自分自身の特徴までは十分に伝わらないと考えました。

そこで、

• 制作物を探しやすくすること
• 短時間でも自分のスキルを把握できること
• 制作物だけでなく、デザインに対する考え方まで伝えること
• 見やすさを保ちながら、自分らしさを感じられること

を設計上の課題として設定しました。

インターンを募集している企業の採用担当者や、デザイナー・クリエイター職の選考担当者を想定しました。

多くの応募者を見る採用担当者が閲覧することを考え、長い文章を読まなくても、制作物・スキル・人物像へ素早くアクセスできることを重視しています。

企画からデザイン、実装まで一貫して担当しました。

• コンセプト設計
• 情報設計
• ワイヤーフレーム制作
• Webデザイン
• 画像・ビジュアル制作
• レスポンシブ対応

「見やすさ」と「自分らしさ」の両立

採用担当者が作品を確認する際の負担を減らすため、基本となるレイアウトはシンプルに設計しました。

一方で、整ったレイアウトだけでは自分自身の印象が残りにくいと考え、サイト全体には「一冊のスケッチブック」というコンセプトを設定しています。

スケッチブックは、完成した作品だけではなく、アイデアや試行錯誤も蓄積されていくものです。

ポートフォリオも同様に、現在の完成度だけを見せるものではなく、これまでの制作や思考、これからの成長まで記録していく場所として捉えました。

01｜作品を主役にする情報設計

ポートフォリオそのものの装飾が作品より目立たないよう、作品一覧や個別ページではコンテンツを主役としたシンプルなレイアウトを採用しました。

情報の優先順位を整理し、まず作品のビジュアル、その次に概要や制作意図を確認できる構成としています。

02｜迷わず移動できるナビゲーション

ページをスクロールした後でも別のコンテンツへ移動しやすいよう、固定ヘッダーを採用しました。

必要な情報へ少ない操作でアクセスできるよう、ナビゲーション項目も必要最低限に整理しています。

03｜デバイスに合わせたレスポンシブ設計

PC版を単純に縮小するのではなく、画面幅によって情報の優先順位や読みやすさが損なわれないようレイアウトを調整しました。

特にスマートフォンでは、文字サイズ・余白・画像サイズ・要素の並び順を見直し、小さな画面でも作品を確認しやすい状態を目指しています。

04｜世界観をつくるビジュアル

サイトには「空」をモチーフとしたビジュアルを取り入れました。

「空そのものを変えることはできなくても、捉え方や創造力によって見える世界は変えられる」という考えを大切にし、自分自身のクリエイティブに対する姿勢と重ねています。

シンプルな情報設計をベースにしながら、こうしたビジュアルや演出を加えることで、自分自身の印象が残るポートフォリオを目指しました。

自分自身をユーザーに伝えるという目的から逆算してWebサイトを設計したことで、見た目を整えるだけではなく、「誰に・何を・どの順番で伝えるか」を考えてデザインする重要性を学びました。

また、企画・情報設計・デザイン・レスポンシブ対応・実装まで一貫して経験したことで、Webサイトを一つの体験として設計する視点を身につけることができました。

制作後も作品の追加や構成の見直しを行いながら、自分自身の成長に合わせて継続的にアップデートしています。