03
SCROLL
MY PORTFOLIO.
URL:magasasu.github.io/shoma-portfolio
制作概要
今ご覧いただいているこのポートフォリオサイト自体の制作実績です。構成・情報設計からコーディングまで、すべて自分一人でディレクションし、一から作り上げました。作品の「見せ方」だけでなく、それを実現する「作り方」自体も自分の実力として提示したく、あえて作品の一つとして掲載しています。
目的と対象
未経験からのWeb制作職就職に向けて、実装力・デザイン力・ディレクション力の3つを同時に証明できる作品にすることを目指しました。閲覧している面接官・採用担当者自身が今使っているこの画面こそが実装物であるという構造上、説明よりも体験で実力を伝えられると考えています。
現状課題
架空案件の作品だけでは、「見た目を整える力」は伝わっても「一から設計し形にする力」までは伝わりきりません。自分自身のための本番サイトを、要件定義・構成・実装まで通しで担うことで、この不足を補う必要がありました。
ターゲット
想定したのは、制作会社・事業会社の採用担当者や面接官です。応募書類やポートフォリオを日常的に多数見ている前提で、短時間でも実装の質と情報設計の意図が伝わる構成にすることを意識しました。
コンテンツ設計
HOME・ABOUT・WORKSの3階層をハンバーガーメニューとPC用固定ナビで統一し、全ページから迷わず行き来できる構成にしました。作品詳細ページはこのページも含め「概要→目的と対象→現状課題→ターゲット→コンテンツ設計→意匠設計→実装イメージ」の同一フォーマットに揃え、比較しやすさと一貫性を優先しています。
意匠設計
ベースは明度を抑えた淡いラベンダーグレー、アクセントに紫（#a200ca）を一色に絞って統一感を出しました。見出しはOswald、本文はNoto Sans JPを組み合わせ、欧文の硬質さと和文の可読性を両立させています。パンくず・ページインデックス・PAGE TOPなど、閲覧者が今どこにいるかを常に把握できる導線設計にもこだわりました。
