03
SCROLL
MY PORTFOLIO.
URL:itoshoma.tech
制作概要
当ポートフォリオサイト。構成・情報設計からコーディングまで一貫して制作いたしました。読みやすさを考慮してグリッド配置にこだわって設計しております。
コンテンツ設計
HOME・ABOUT・WORKSという3階層に情報を整理し、ハンバーガーメニューとPC用固定ナビの両方から迷わず行き来できる構成にしました。ハンバーガーメニューはユーザーの押しやすさを考慮し、フッター部分に固定配置しております。作品詳細ページは「概要→目的と対象→現状課題→ターゲット→コンテンツ設計→意匠設計」の構成で自身で行った課題解決プロセスの設計を記載しております。
意匠設計
視認性や読みやすさを考慮し、グリッド配置を基本配置としております。配色について、作品が映えるようにベースカラーにはグレーで構成しました。メイン・アクセントカラーには紫・オレンジを使用し、可読性を意識して配色しております。フォントについても可読性を意識し、見出し(和文・欧文)と本文で各々統一し、全体的にスタイリッシュさのあるフォントを採用しております。アニメーションについては、jQueryを中心に画像やテキストにエフェクトを設定しております。