数字ではなく、
暮らしの中で大きさを伝える。
本体サイズを数値だけで表示するのではなく、デスクやPCなど日常的な物と同じ空間にプリンターを配置しました。
「370 mm」と表示するだけでは想像しづらいサイズ感を、実際に自分の部屋へ置いたときのスケールとして理解できるようにしています。


Web Design / Product Experience
02 / 2026
プリンターのある暮らしを、
Web上で体験する商品紹介サイト。
実サイトの画面 / 日本語版 · Desktop · 2026
Project overview
スペックを比較する前に、
自分の生活に置いてみる。
01 / Project
「必要ない」から、
「自分の生活にあったら楽しそう」へ。
プリンターをスペックだけで比較するのではなく、実際の暮らしの中で使うイメージから選べる商品紹介サイトを制作しました。
ターゲットは、写真や旅行が好きでも、プリンターを購入するほどの必要性はまだ感じていない若い世代です。
部屋への置きやすさを確かめ、写真を飾る・贈る・つくる場面を操作しながら想像できる構成にしました。製品を知ることと、使う理由を見つけることをつなぐ設計です。
若年層にとってプリンターは「必要になってから比較するもの」であり、そもそも購入候補に入りにくい。
スペックを説明するだけでは、自分の生活でプリンターを使うイメージにつながりにくい。
購入後の生活や利用シーンを先に体験できれば、「自分にも使い道がありそう」と感じてもらえるのではないか。
店頭で商品を見る体験をWeb上に再構成し、サイズ → 開閉 → 利用シーン → スペックの順に体験できるサイトを設計。
02 / Concept
店頭では、正面を見るだけでなく、大きさや開いた状態を確かめ、自分の生活に置いた姿を想像しながら商品を選びます。その順番をスクロール体験に置き換えました。
自由に回転させること自体を目的にせず、知りたい情報へ順に視点が移るようにしています。
03 / Design & Interaction
本体サイズを数値だけで表示するのではなく、デスクやPCなど日常的な物と同じ空間にプリンターを配置しました。
「370 mm」と表示するだけでは想像しづらいサイズ感を、実際に自分の部屋へ置いたときのスケールとして理解できるようにしています。



写真を印刷して壁に飾る。
メッセージを添えて贈る。
好きなものをプリントして形にする。
プリンターの機能を文章だけで説明するのではなく、スクロールやドラッグを通して利用シーンを疑似体験できるようにしました。
ユーザー自身が操作することで、プリンターを手に入れた後の生活をより具体的に想像できることを目指しています。


サイト全体のモーションも、製品と関係のない装飾ではなく、「印刷」をモチーフに設計しました。
見出しは、プリントヘッドが紙の上を往復するように左右から現れます。Navigationには、印字のドットをイメージしたオリジナルのDot Arrowを採用。
また、プリンターから出てきた紙がそのまま次の生活空間へつながるなど、Section Transitionにも「紙」と「印刷」の動きを取り入れています。

最初に、すでに購入を決めた人ではなく「興味はあるが、まだ必要性を感じていない人」を想定しました。
商品を見る、部屋に置く、開く、使い方を体験する。その後にスペックと疑問を確認し、購入を検討する順番を設計しました。
白を基調に商品と写真を主役にし、Blenderで制作した製品の画像シーケンスをCanvasへ描画。GSAP / ScrollTriggerでスクロールとフレーム、情報が現れるタイミングを合わせています。
ブラウザ上で順方向・逆方向のスクロールやドラッグを確認し、動く時間と理解するために止まる時間を調整しました。このページの画像も、動作中のサイトを実際にスクロールして撮影しています。
現時点ではコンセプト・体験設計までの提案であり、ユーザーテストによる効果検証は未実施です。
今後は、ターゲットユーザーへのユーザビリティテストを行い、「商品理解」「購入意向」「各セクションでの迷い」などを確認し、その結果をもとにUI・情報設計を改善したいと考えています。
Live project / EN · JA