Project Facts
- Project: Motoyoshi Takamitsu Website
- Client: Motoyoshi Takamitsu
- Course launch: 2025/1/31
- Garden Eightの担当範囲: Design, Development
- Relevant capabilities: Web design, Creative development, Three.js / WebGL, 3D production, Interaction design
- URL: https://photoyoshi.com/
ポートフォリオ制作にあたり、彼の写真の世界観を理解することから始めました。彼の作品は、フィルム写真の偶然性に影響を受けた表現と、緻密な技術が融合することで、正確さと偶然性が共存する独自のスタイルを生み出しています。本サイトでは、彼の写真が持つ世界観をデジタル上で最大限に引き出し、没入感のある写真体験を提供することを目指しました。
サイト設計
サイト設計ではユーザーが直感的に写真の雰囲気を感じ取り、より深く作品と向き合えるように以下の設計を採用しました。
無限スクロール
メインページには無限スクロールを導入しています。
これによりユーザーは次の作品へと自然に誘導されシームレスな写真体験を得られます。
また、スクロール速度に応じてエフェクトが変化する設計とすることで、操作そのものがインタラクションの一部となるようにしています。
2つのモード
無限スクロールと合わせて、ユーザーが写真の雰囲気を直感的に感じ取れるように2つの閲覧モードを設置しました。モード切り替え時には、写真の連なりを想起させるエフェクトとシームレスな遷移を組み合わせることにより、全体の雰囲気を俯瞰する体験と個々の写真にフォーカスする体験をスムーズに切り替えられるようになっています。 
写真とマウスインタラクションの融合
マウスインタラクションは、過度なエフェクトを避け、写真の魅力を直感的に伝えるデザインにしました。ユーザーの操作が直接写真の視覚表現に影響を与えることで、「自分で写真を操作する」感覚をより印象付けています。
デザインについて
デザインのトーン&マナーは、作品の世界観を最大限に際立たせるため、余白を活かしたミニマルデザインを採用しました。
装飾を抑えたシンプルなレイアウトにすることで、視線が自然に写真へと向かい、作品のディテールや雰囲気を直感的に感じ取れるようにしています。また、タイポグラフィも視認性を保ちつつ、写真の質感と調和するフォントを選定しました。 
UIについて
横スクロールは没入感を生み出す一方で、操作に慣れていないユーザーにとっては直感的ではない可能性があります。そのため、初回ロード時にスクロール方向を自然に理解できるアニメーションを実装しました。
CMS
バックエンドにはWordPressを活用し、静的化することでパフォーマンスを最適化しました。また、管理画面でホーム画面に表示する画像を選択できる仕組みを導入し、訪問のたびに異なる写真と出会える設計にしています。この仕組みにより、ランダム性のある体験を提供し、写真との新鮮な出会いを演出できるようにしました。 
Credits
- Client: Motoyoshi Takamitsu
- Designer / Developer : Meguru Muramoto (Garden Eight)