WORKS.

自主制作

ポートフォリオ（当サイト）

Design / Coding　　計11ページ

制作概要

Outline

概要

就職活動にあたり、制作物やプロフィールをまとめたポートフォリオサイトを制作しました。
目的

就職活動にあたって、制作物や自分自身の強みとスキルレベルを伝え、興味を持ってもらう。
ターゲット

企業の採用担当者様。デザイナーとして就業されている方。
制作範囲/期間

企画：1日
デザイン：1.5週間
実装（コーディング/素材制作）：3週間
使用ツール

Figma / Photoshop / Illustrator / Visual Studio Code / ImageFx（画像生成）

詳細

Detail

情報設計

サイト全体の構成は、ユーザーの行動導線と閲覧優先度を基準に設計しました。トップページでは、最も注目してほしい worksセクションをファーストビュー直下に配置し、カテゴリを明示することで、目的の作品へ迷わずアクセスできる構造としています。 worksページでは、作品画像と制作概要を横並びに配置（PC版のみ）し、テキストを読みながらスムーズに作品を閲覧できる導線を設計しました。 Aboutページでは、自己紹介・強み・スキルといった重要情報を上部に集約し、閲覧者に短時間で人物像を伝えられるよう配慮しました。さらに、ギャラリーセクションを設けることで、個人の世界観や好みも自然に伝わる構成としています。
デザイン

第一印象での離脱を防ぐために、物語性を感じられるビジュアル設計を意識しました。星・雨・光や影といったモチーフを想起させる細いラインや装飾を用い、シンプルでありながらもページ全体に繋がりや流れを感じさせています。テキストや制作物を引き立てるために、余白を作り装飾を控えめにすることで、世界観と情報の読み取りやすさを両立させました。スクロールによるアニメーションやハンバーガーメニューにもこだわり、自分らしさが自然と伝わるようなデザインを目指しています。

フォント：
本文には「Zen Kaku Gothic Antiqu」を採用し、柔らかく親しみやすい印象を与えるとともに、読みやすさも確保しました。

配色：
サイト全体のベースには、淡いブルーグレーを採用し、ページ全体に静けさや落ち着きを演出しました。また、ベースカラーと相性の良い青緑をボタンなどの重要要素に使用し、控えめながらも視線を自然に誘導できるよう設計しました。