CLIENT WORKTHE GALLERY — バーチャル美術館サイト
3D WEBバーチャル美術館プロジェクト / 2026
THE GALLERY — バーチャル美術館サイト
作家・時代・流派で絞り込める作品グリッドと、静止画に動きを与えるKen Burns演出のスライドショーを軸にした、実在の江戸期日本美術(浮世絵・琳派・狩野派など22点)を紹介するバーチャル美術館サイトです。ビルド不要の単一HTMLという制約の中で機能を積み上げ、運営者自身がノーコードで作品・作家情報を更新できる専用管理画面まで構築しました。
課題
実在の美術作品を、単なる画像一覧ではなく“巡る体験”として見せつつ、開発者なしで運営者が作品を追加・更新できる仕組みも必要でした。
アプローチ
作家・時代・流派のフィルタリングとKen Burnsスライドショーで鑑賞体験を設計。その後、専用の管理画面(admin.html)を構築し、GitHub APIを通じてブラウザから直接コンテンツを保存できるようにしました。
成果
バックエンドを持たない静的サイトでありながら、運営者がコードに触れずに作品・作家情報を更新できる状態を実現。実際に公開・運用中のサイトです。
サイトを見る →WEB灰谷左官店(架空企業/制作デモ) / 2026
墨壁 -BOKUHEKI- コーポレートサイト
伝統的な左官技術(黒漆喰・土壁)を手がける職人集団という設定のもと、素材の質感と間(ま)を大切にしたデザインを、詳細な実装指示書に基づき忠実にNext.jsへ移植した制作事例です。架空企業のポートフォリオ用デモである旨はサイト内にも明記しています。
課題
詳細な実装指示書で規定された静的HTML/CSS/JSのプロトタイプを、デザインやコピーを一切解釈し直さずにNext.jsの本番実装へ移植する必要がありました。
アプローチ
デザイントークン・フォント・鏝(こて)のストローク描画アニメーションやフィルムグレイン演出まで、指示書の仕様に忠実に沿ってコンポーネント単位で再構築しました。
成果
コンセプト・実績・会社概要・お問い合わせを含む全5ページを、プロトタイプの意図を損なわずに本番品質で実装。実際に公開しているデモサイトです。
サイトを見る →MOCK WORKWEB SITE MOCKUP
WEB旅暦珈琲(個人焙煎所) / 2026
旅暦珈琲 コーポレートサイト
個人で焙煎所の開業を控えるオーナーの“らしさ”を、コーポレートサイトという一枚の構造物に落とし込んだ制作事例です。屋号のトーン、豆の産地情報、店主の言葉を軸に、開業前から信頼を積み上げられる設計を意識しました。
課題
実店舗を持たない開業直後の焙煎所にとって、Webサイトが唯一の“顔”になる。信頼と個性を同時に伝える必要がありました。
アプローチ
店主の焙煎哲学をヒアリングし、コピーとビジュアルのトーンを先に固めてから構造設計へ。問い合わせと販売ページへの動線を軸にワイヤーフレームを作成しました。
成果
開業告知と同時にサイトを公開し、SNS経由の流入を問い合わせにつなげる受け皿として機能する構成になりました。
MOCK WORK3D MODEL PREVIEW
3D WEB凪 NAGI(コンセプト企画) / 2026
凪 NAGI サブスクリプション民宿サイト
内房・能登・淡路・五島、四つの拠点を月額会費で泊まり歩る会員制の“第二の住まい”というコンセプトを、空間の質感を伝える3Dビジュアル表現とともに設計したデモ企画です。宿泊体験の“間”を伝えることを軸にサイト構造を組みました。
課題
複数拠点にまたがる宿泊体験を、写真だけでは伝わりにくい“空間の質感”ごと伝える必要がありました。
アプローチ
拠点ごとの空間を3Dビジュアルで見せる構成とし、会員登録・拠点紹介・申込導線を一つの体験として設計しました。
成果
空間体験を軸にした情報設計により、宿泊予約サイトにありがちな“検索・比較”ではなく“暮らしを想像する”導線を実現しました(本事例はコンセプト企画のデモです)。
MOCK WORKPHOTO & VIDEO MOCKUP
PHOTO & VIDEOアトリエ木葉(家具工房/コンセプト企画) / 2026
アトリエ木葉 商品撮影・PR動画
一点ものの家具を手がける工房の“質感”をECサイトとSNSの両方で伝えるための、商品撮影とPR用ショート動画をセットで設計したデモ企画です。木目や手仕事の跡が伝わる光の当て方と、制作工程を見せる短尺動画を軸にしました。
課題
一点もの家具の“質感”は写真だけでは伝わりにくく、ECサイトとSNS双方で使える素材を効率よく揃える必要がありました。
アプローチ
木目や手触りが伝わる照明・アングルで商品撮影を実施し、同じ現場で制作工程を収めたSNS向けショート動画も撮影。1回の撮影で複数用途の素材をまとめて制作しました。
成果
EC掲載用の商品写真と、SNSで工房の世界観を伝えるショート動画を同時に用意できる構成を実現しました(本事例はコンセプト企画のデモです)。
MOCK WORKAPPLICATION UI
APP診断型アプリ(コンセプト企画) / 2026
診断型アプリケーション
ユーザーの悩みや状態を入力すると、段階的な質問を経て最適な提案にたどり着く診断型アプリのUI/UXを設計したデモ企画です。離脱を防ぐための質問設計と進捗表示を重視しました。
課題
診断系アプリは質問数が多くなるほど離脱しやすく、進捗の見せ方と質問設計の両立が課題でした。
アプローチ
1画面1質問の構成とし、進捗バーとマイクロインタラクションで“あと少し”を可視化。結果画面は提案理由を添えて納得感を高めました。
成果
診断完了率を意識した画面設計により、提案から問い合わせ・購買への自然な導線を実現しました(本事例はコンセプト企画のデモです)。