ポートフォリオサイト

Type : Web|スクール課題

Created date : 2025.3

タイトル

Ouki Shimose Portfolio site

制作概要

就職活動にあたり、制作物やプロフィールをまとめたポートフォリオサイトを制作しました。このサイトは、私のスキルや考え方を効果的に伝えるための重要なツールであり、ユーザビリティと個性の両立を意識して、訪問者にとって直感的で魅力的な構成を心がけました。

ターゲット

企業の採用担当者様、デザイナーの方々

目的

自身の制作物や考え方を通じて、スキルや価値観、デザインに対する姿勢を伝えるため。

コンセプト

同じ“記録媒体”であるという共通点から、「一枚のレコードに自分を刻む」というテーマを軸に、アナログレコードをモチーフにしたデザインを展開しています。このアイデアは、ヒップホップのサンプリングという手法から着想を得て制作しました。それぞれのページは、レコードを構成するサンプリング元の素材として意識して制作しています。また、Home、Works、About、Contact、作品紹介ページの5つのページには、それぞれに合わせた異なるビートを制作し、音源にはレコード特有のノイズも取り入れています。

サイト構成

サイト冒頭のウェルカムページとHomeページでは、世界観に“完全に集中”した没入型の演出を展開しています。Homeページでは、レコードが回る映像のインパクトをより強調するため、ファーストビューのみで構成しました。その後のページ構成や操作、情報は必要最低限に絞り、主要ページ(Works / About / Contact)への明確な導線を設けることで、演出を重視しつつも、ユーザビリティが損なわれないようバランスを取っています。

デザイン

レコードというアナログなモチーフとは対照的に、色数を絞り、ライトグレーを基調としたモノトーン配色で洗練された印象を演出しました。その中で、アクセントカラーのオレンジが視覚的なポイントとして際立つようデザインしています。フォントサイズや余白など細部にも徹底的に配慮し、PC・タブレット・スマートフォンそれぞれに合わせて最適なレイアウトに切り替わるレスポンシブ設計を採用。どのデバイスでも快適に閲覧できるよう工夫しました。

制作範囲・期間

企画        4時間

デザイン      1週間

コーディング    1ヶ月

使用ツール

Illustrator / Photoshop / Premiere Pro / XD / Visual Studio Code