ポートフォリオサイト

概要OVERVIEW

STEP.1

コンセプト設計

このポートフォリオは、採用担当者の方が短時間でも内容を把握できる構成を目指して設計しました。
情報を整理し、迷わず読み進められることを最優先としています。

STEP.2

情報設計・構成設計

掲載情報を「制作物」「業務経験」「スキル」「経歴」などに分類し、役割ごとに明確に整理しました。
適切な見出しをつけ、余白設計を意識し、視線の流れが自然になるレイアウトを設計しています。

STEP.3

デザイン設計

これまで女性向け・男性向けなど幅広いターゲット層の制作に携わってきた経験を表現するため、制作物やメインビジュアルに合わせてサイトカラーが変更切り替わる仕組みを取り入れました。
フォントはどのカラーにも合わせやすいよう、視認性がよくシンプルな「Noto Sans JP」を採用しました。

STEP.4

実装・技術設計

CSSカスタムプロパティを活用し、テーマカラーを一括管理できる設計としました。
また、SVGによるスキルグラフでは円周計算を基にstroke制御を行い、視覚的に分かりやすい表現を実装しました。