Hiromu Otsubo
← Works

Web Design / Product Experience

MOTPRI

02 / 2026

プリンターのある暮らしを、
Web上で体験する商品紹介サイト。

サイトを体験する
MOTPRI日本語版。白いプリンターと日本語の商品情報を表示したファーストビュー

実サイトの画面 / 日本語版 · Desktop · 2026

Project overview

スペックを比較する前に、
自分の生活に置いてみる。

Role
Concept / Web Design / UI・UX /
Interaction Design / Development
Project
Digital Hollywood STUDIO
Graduation Project / 2026
Output
架空のブランド・製品を用いた
EN / JA 商品紹介サイト

01 / Project

About this
project

「必要ない」から、
「自分の生活にあったら楽しそう」へ。

プリンターをスペックだけで比較するのではなく、実際の暮らしの中で使うイメージから選べる商品紹介サイトを制作しました。

ターゲットは、写真や旅行が好きでも、プリンターを購入するほどの必要性はまだ感じていない若い世代です。

部屋への置きやすさを確かめ、写真を飾る・贈る・つくる場面を操作しながら想像できる構成にしました。製品を知ることと、使う理由を見つけることをつなぐ設計です。

  1. Problem

    若年層にとってプリンターは「必要になってから比較するもの」であり、そもそも購入候補に入りにくい。

  2. Insight

    スペックを説明するだけでは、自分の生活でプリンターを使うイメージにつながりにくい。

  3. Hypothesis

    購入後の生活や利用シーンを先に体験できれば、「自分にも使い道がありそう」と感じてもらえるのではないか。

  4. Solution

    店頭で商品を見る体験をWeb上に再構成し、サイズ → 開閉 → 利用シーン → スペックの順に体験できるサイトを設計。

02 / Concept

「実物を見る」を、
Web上で再設計する。

店頭では、正面を見るだけでなく、大きさや開いた状態を確かめ、自分の生活に置いた姿を想像しながら商品を選びます。その順番をスクロール体験に置き換えました。

自由に回転させること自体を目的にせず、知りたい情報へ順に視点が移るようにしています。

  1. 01サイズ
  2. 02開いた状態
  3. 03できること
  4. 04スペック
  5. 05購入前の疑問

03 / Design & Interaction

体験を、選ぶ理由に。

01Scale in context

数字ではなく、
暮らしの中で大きさを伝える。

本体サイズを数値だけで表示するのではなく、デスクやPCなど日常的な物と同じ空間にプリンターを配置しました。

「370 mm」と表示するだけでは想像しづらいサイズ感を、実際に自分の部屋へ置いたときのスケールとして理解できるようにしています。

デスクやノートPCと並ぶMOTPRI。幅370、奥行340、高さ145 mmを表示
「部屋に、なじむ」— 部屋に置いたときの大きさ
同じ部屋で蓋を開いたMOTPRI。高さ470 mmと開閉角度80度を表示
「開いても、すっきり」— 開いて使うためのスペース
02Try before reading

機能を読む前に、
できることを体験する。

日本語版「思い出を、飾る」。3枚の写真、写真を追加するトレイ、ドラッグの案内
「思い出を、飾る」— 写真を選び、壁の好きな場所へ

写真を印刷して壁に飾る。
メッセージを添えて贈る。
好きなものをプリントして形にする。

プリンターの機能を文章だけで説明するのではなく、スクロールやドラッグを通して利用シーンを疑似体験できるようにしました。

ユーザー自身が操作することで、プリンターを手に入れた後の生活をより具体的に想像できることを目指しています。

プリンターのトレイに続くActive Printと2枚の印刷済み写真
「想像以上に、できること」— 排紙口からつながる写真
贈り物に添えるカードと、ハサミでつくる紙の素材を同じ作業台で表示
「気持ちを、添える」「好きを、かたちに」
03Paper as interface

動きにも、
プリンターらしさを。

サイト全体のモーションも、製品と関係のない装飾ではなく、「印刷」をモチーフに設計しました。

見出しは、プリントヘッドが紙の上を往復するように左右から現れます。Navigationには、印字のドットをイメージしたオリジナルのDot Arrowを採用。

また、プリンターから出てきた紙がそのまま次の生活空間へつながるなど、Section Transitionにも「紙」と「印刷」の動きを取り入れています。

プリンターから出た縦長の紙に部屋の景色が現れた遷移中の画面
紙に部屋が現れる → 紙面の先の空間へ
04

Process

最初に、すでに購入を決めた人ではなく「興味はあるが、まだ必要性を感じていない人」を想定しました。

商品を見る、部屋に置く、開く、使い方を体験する。その後にスペックと疑問を確認し、購入を検討する順番を設計しました。

白を基調に商品と写真を主役にし、Blenderで制作した製品の画像シーケンスをCanvasへ描画。GSAP / ScrollTriggerでスクロールとフレーム、情報が現れるタイミングを合わせています。

ブラウザ上で順方向・逆方向のスクロールやドラッグを確認し、動く時間と理解するために止まる時間を調整しました。このページの画像も、動作中のサイトを実際にスクロールして撮影しています。

今後の検証

現時点ではコンセプト・体験設計までの提案であり、ユーザーテストによる効果検証は未実施です。

今後は、ターゲットユーザーへのユーザビリティテストを行い、「商品理解」「購入意向」「各セクションでの迷い」などを確認し、その結果をもとにUI・情報設計を改善したいと考えています。

05

Credits

Role
Concept / Web Design / UI・UX / Interaction Design / Development
3D / Visual
Blender / Product & visual direction
Development
HTML / CSS / JavaScript / Canvas / GSAP / ScrollTrigger
Support
AI-assisted development with Codex
Project
Digital Hollywood STUDIO
Graduation Project
Year
2026

Live project / EN · JA

ExperienceMOTPRI

サイトを体験する