ポートフォリオサイト

プロジェクト概要

ポートフォリオサイトのプロトタイプです。トップの大きなヒーローセクションに氏名を配し、「About → Skills → Works → Contact」へ自然に導くシングルページ構成のテンプレートです。デスクトップのグリッド表示、モバイルの縦並びリストを含む複数ブレイクポイントのモックを同時に提示しており、カード型の作品サムネイルと、わかりやすいスキルタグ・絞り込みUI、目立つグラデーションのコンタクトCTAで「作品確認→問い合わせ」までの導線を短くしています。

制作のポイント

視覚設計とブランディング：ヒーローで氏名を大きく表示してパーソナルブランディングを即伝達。一貫したグラデーションとタイポグラフィでブランド感を統一し、上品さを演出。

レスポンシブ設計：デスクトップはカードグリッド、モバイルは縦スクロールで可読性と操作性を確保。各ブレイクポイントで主要要素を優先表示し、最適な閲覧体験を提供。

導線設計とUX最適化：スキルタグ・フィルタで興味のある作品をすばやく絞り込み、統一アスペクト比のカードとホバーエフェクトで「クリックしたくなる」誘因を設計。コンタクトCTAはグラデーション背景で視認性を高め、問い合わせハードルを下げる。

実装とアクセシビリティ：十分なコントラスト、タップ領域確保、遅延読み込み（lazy-load）でパフォーマンスを最適化。CMSで作品追加を簡単化し、OGPやメタでSNS流入に対応。