my portfolio

概要

本作品はWebコーダーとしてのスキルを整理し、制作実績を分かりやすく伝えるために制作したポートフォリオサイトです。
作品への導線設計と回遊性を重視し、KVスライダーや作品詳細ページ間のページネーションを実装しました。
また、ダーク / ライトのテーマ切り替えやページ遷移演出など、サイト全体の体験を意識して設計・実装しています。

制作目的

Webコーダーとしてのスキルを形にし、第三者が確認しやすい状態にするために制作しました。

単なるコーディング集ではなく、Web制作者として必要な情報設計・UI設計・アクセシビリティ・実装の総合力を高めることも目的にしています。

作品の魅力が伝わる導線を重視し、閲覧体験を設計しました。

設計

最も重要な「作品へのアクセス性」を軸に、トップから短い操作で作品詳細へ到達できる構成にしました。

Worksセクションからの導線に加え、KVのスライダーからも各作品ページにアクセスできるようにし、入口を複数用意しています。

作品詳細ページ下部にはページネーションを設置し、一覧に戻らなくても作品間を移動できる設計にしました。前後の作品名も表示し、次の行き先が分かるようにしています。

工夫した点

• 作品へ最短で辿り着ける導線設計

  ポートフォリオの目的である「作品を見てもらう」ことを最優先に、WorksセクションだけでなくKVスライダーからも各作品ページへアクセスできるようにしました。入口を複数用意することで、閲覧者が迷わず回遊できる構成にしています。

• 作品詳細を回遊できるページネーション

  作品詳細ページ下部にページネーションを設置し、一覧へ戻らなくても作品ページ間を移動できるようにしました。前後ボタンには作品名も表示し、「次に何が見られるか」が直感的に分かるUIにしています。

• ページを跨いでも崩れないスムーススクロール

  ナビゲーション移動はJSでスムーススクロールを実装し、固定ヘッダー分のオフセットも考慮して狙った位置に着地するよう調整しました。さらに別ページからハッシュ付きで遷移した場合も同じ体験になるように対応し、ハンバーガーメニューからの導線も一貫させています。

• テーマ切り替えの体験と一貫性

  ダークモード / ライトモードを実装し、localStorageでテーマを保持することで再訪時もユーザーの選択を維持できるようにしました。あわせてロゴや各種アイコンなど画像アセットもテーマに応じて切り替え、見た目の一貫性を保っています。

技術選定の理由

アニメーションは表現力と制御性を重視してGSAPを採用しました。テキストのスライダーはSplideを用いました。
また、機能ごとにJSをコンポーネント化して読みやすさと保守性を確保し、ポートフォリオ全体を通して実装方針がブレない構成を意識しています。

学び

作品を「見てもらう」ためには、デザインやコードだけでなく、情報の優先順位・導線・回遊性といった体験設計が重要だと実感しました。

ダークモードやページ遷移、ページネーションなど、サイト全体に関わる機能は影響範囲が広いため、役割分担（コンポーネント化）と状態管理（localStorage / sessionStorageなど）の設計が品質に直結することを学びました。

アニメーションは“派手さ”よりも「操作の分かりやすさ」「気持ちよさ」「読みやすさ」を優先し、UIの目的に沿って使い分けることが大切だと理解できました。

使用言語 / 使用ツール

• HTML
• CSS
• SCSS
• JavaScript
• GSAP
• Splide
• Cursor
• Figma