travel gallery

概要

過去に訪れた国々で撮った写真をまとめたギャラリーサイトです。
情報設計、デザイン、コーディングを自ら行いました。

制作目的

本作品はポートフォリオ用のオリジナル作品として制作しました。
単に写真を並べるギャラリーサイトではなく、閲覧者が写真の世界観に自然と入り込める体験を目的としています。

またGSAPを用いたアニメーション表現と、レイアウトや余白設計といったデザイン面の理解を深めることをテーマとし、技術的な習得と表現の両立を意識して制作しました。

自身の旅の記録を題材にすることで、作り手としての視点や価値観を作品に反映しつつ、
オリジナル性のあるアウトプ ットを目指しています。

設計

本サイトでは、写真そのものに集中できる体験を軸に全体の構成を設計しました。
まずビジュアルによって世界観を提示し、その後に必要な情報が自然と理解できるよう、コンテンツの配置や閲覧の流れを整理しています。

各国ごとの下層ページは、レイアウトや操作方法を共通化し、表示する写真や背景のみが切り替わる構成としました。
国が変わっても操作に迷わず、写真鑑賞に意識を向け続けられるよう、体験の一貫性を重視しています。

PC・スマートフォン・タブレットといったデバイスの違いによって体験に差が出ないように、 マウス操作やhoverに依存しないインタラクションを前提に設計しました。
画面サイズが異なる環境でも、操作方法や情報の伝わり方が変わらないことを意識しています。

工夫した点

• 操作を遮らないアニメーション設計

  操作全体を通して、ユーザーの動きを遮らない流れるような体験になるようアニメーションを設計しました。 ページ遷移や表示切り替え時にも動きを持たせることで、画面が唐突に切り替わる印象を抑えています。

• 直感的に伝わる操作性への配慮

  スクロールトリガーを用いて画像にアニメーションやラベル表示を加え、 クリック可能な要素であることが直感的に伝わるよう工夫しました。 マウス操作をしないスマートフォンやタブレットからのアクセスでも、 操作対象が分かる設計を意識しています。

• 国ごとの世界観を表現する背景演出

  各ページの背景にはその国を象徴する画像を使用し、 スクロールに応じて背景が徐々に暗くなる演出を取り入れました。 ページ全体に一体感を持たせつつ、コンテンツが進むにつれて ギャラリーの写真へ自然に視線が集中することを狙っています。

• 写真一枚一枚に意識を向けるギャラリーレイアウト

  ギャラリーは1行につき1枚の画像を配置するグリッド構成とし、 写真一枚一枚にしっかり視線が行くよう設計しました。 行ごとに画像の配置を左右交互に切り替えることで、 単調にならないリズム感と視覚的なアクセントを持たせています。

• ギャラリー体験と連動するハンバーガーメニュー

  特に力を入れた点として、ハンバーガーメニューの演出があります。 スクロール位置をトリガーに背景が各国のサムネイル画像へ切り替わる仕組みとし、 ナビゲーション自体もギャラリー体験の一部として機能させることを目指しました。

• 写真へ意識を導くライトボックス演出

  画像クリック時のライトボックス表示では、 clip-path（polygon）とGSAPのタイムラインを組み合わせたアニメーションを実装しました。 開閉時にも一連の流れを感じられる演出とし、 単なる拡大表示ではなく写真へ自然に意識が移るよう調整しています。

技術選定の理由

アニメーションにはGSAPを採用しました。CSSのみでは制御しづらい タイムライン管理やScrollTrigger連携をしています。

また、JavaScriptはフレームワークを使わず、 素の構文で記述することで挙動の理解と保守性を優先しました。

学び

本制作を通して、アニメーションは「目立たせるための装飾」ではなく、 体験の流れを整え、操作を補助するための要素であるという認識が深まりました。 動きを加えることで情報が分かりやすくなる一方、過剰な演出は体験を阻害する可能性があるため、 常にユーザー視点でのバランス調整が重要だと感じています。

また、写真を主役とするコンテンツでは、レイアウトや余白、背景の扱いが 視線誘導や没入感に大きく影響することを実感しました。 見せたい要素を明確にした上で、他の情報や装飾をどこまで削ぎ落とすかという判断が、 デザイン設計において欠かせない要素であると学びました。

技術面では、GSAPを用いたタイムライン管理やScrollTriggerによる制御を通して、 アニメーションを構造的に組み立てる考え方を身につけることができました。 単に動かすのではなく、状態管理や再利用性を意識して設計することで、 保守性の高い実装につながるという理解を深めています。

使用言語 / 使用ツール

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