3Dサイトの設計は「何を主役にするか」で決まる｜4つの型と選び方

表現に振るほど、そのサイトはページであることをやめていきます。

3Dのサイトをいくつも作って気づいたことです。演出を強くするほど、スクロールバーが消え、メニューが消え、ページというより「場所」に近いものになっていく。

そして、その途中のどこで止めるかが設計そのものでした。技術の問題ではありません。

この記事では、3Dサイトを設計するときの型を書きます。デザインのバリエーション集ではなく、何を主役に据えるかという1つの決断を、4通りに整理したものです。

舞台は4つしかない

主役に据えるものが違うだけです。技術ではなく、決断の型として整理しています。

型	主役	効く相手
言葉	文字そのもの	著者・思想家・理念を持つ会社
物	ひとつの物体	製品・作品・料理・建築・工芸
場所	空間	作家・写真家・スタジオ・個人
象徴	ひとつのシンボル	事業が複数・団体・産地・周年

以下、1つずつ見ていきます。

言葉が主役

文字を現象として見せます。読ませる前に、まず沈ませる。一節ずつ現れて、消えていく。売り物の話は後半まで始めません。

この型は4つの中で最も素材の条件が厳しいです。断言か問いが3つから5つ、本人の言葉として必要になります。

言葉が弱いと、演出だけが浮いた重いサイトになります。理念を掲げている会社でも、その理念が借り物の言葉なら成立しません。

物が主役

ひとつの物を空間に固定し、動くのは見る側だけにします。スクロールしても物は逃げない。カメラと言葉が回り込む。

4つの中でいちばん外さない型です。迷ったらこれ。

理由は、普通のマーケティングの骨格を保ったまま演出を載せられる唯一の型だからです。商品の説明も、価格も、問い合わせ導線も、通常どおり置けます。

物が実在しなくても、「作られた物」に見える形を用意すれば成立します。

場所が主役

ページではなく場所を作ります。読者はその中に立つ。文字は世界の上に固定され、カメラだけがゆっくり漂います。

素材がゼロでも成立するのがこの型の特徴です。だからこそ、中身が空だと「綺麗なだけ」で終わります。

私的でいい型でもあります。好きなもの、やらないこと、信条。そういうものを載せて構いません。

1つ注意があります。中央は空けてください。埋めると世界が死にます。

象徴が主役

事業や活動が複数あるとき、並べて説明すると散ります。だから先に象徴をひとつ立て、そこから入口を2つか3つだけ生やす。

「うちは何屋か」が一言で言えない相手ほど効きます。

見極めの基準があります。入口が4本目に増えたら、それは象徴が弱い合図です。1つに束ねられていないということなので、象徴のほうを考え直してください。

この型も素材ゼロで成立します。

型を選ぶ手順

主役を決めるところから始めます。

1. 言葉 ── 断言か問いが3つから5つあるか。無ければ選べない
2. 物 ── 無くても成立する。迷ったらこれ
3. 場所 ── 個人の表現か。素材ゼロで成立する
4. 象徴 ── 複数の活動を1つに束ねられるか

素材が先で、型が後です。逆にすると、素材が足りないまま作り始めることになります。

進み方と入口を掛け合わせる

型が決まったら、2つの層を掛けます。ここが重要で、この2つは4つの舞台のどれにでも掛けられます。

進み方は3つ

進み方	挙動	使いどころ
普通に進む	通常のスクロール	読ませたい情報がある。既定
章で進む	1章ずつ離散的に	順に見せたい物語がある
進まない	その場に留まる	場所や象徴そのものを見せる

「章で進む」は、連続したスクロールを1章ずつの間に変える発想です。物語として読ませたいときに効きます。

ただしスクロールを奪う型なので、必ず戻れるようにしてください。戻れないサイトは信用されません。奪いっぱなしにしないこと。

入口は3つ

入口	挙動	使いどころ
そのまま	いきなり本編	速さ優先・企業向け
読み込み画面	3〜6秒の扉	既定
別ページ	独立したURLに扉だけ	世界の温度を先に決めたい

「別ページ」は、本編の前に1枚挟む発想です。この入口ページは検索に出しません。検索に出すのは本編のほうです。

掛け算になる

舞台 4 × 進み方 3 × 入口 3 ＝ 36通り

「6つの型から選ぶ」ではありません。4つの主役に、進み方と入口を掛ける。

だから「象徴を、章立てで見せたい」といった要望にそのまま応えられます。

ただし全部が意味を持つわけではありません。言葉と物は進行が前提の型なので、「進まない」と組み合わせると1つ目しか見えません。一言だけ、停留所ひとつだけと割り切るなら成立します。

相手別の定番

実務でよく使う組み合わせを挙げます。

相手	舞台	進み方	入口
著者・思想家	言葉	普通に進む	読み込み画面
工芸・食品・プロダクト	物	普通に進む	読み込み画面
写真家・映像作家	場所	進まない	別ページ
建築・空間	場所	章で進む	別ページ
団体・産地・周年	象徴	進まない	読み込み画面
研究所・技術系	物	普通に進む	別ページ

迷ったら、この表の近いところから始めて調整するのが早いです。

どこまで「ページであること」を捨てるか

ここが設計の核心です。

冒頭に書いたとおり、表現に振るほどページでなくなっていきます。スクロールバーが消え、メニューが消え、時間と視線が進行を担うようになる。

つまり型を選ぶとは、どこまでページであることを捨てるかを選ぶことでもあります。

売り物の説明が必要なら、そこまでは捨てられません。世界だけを渡せばいいなら捨てられる。

これは技術の話ではなく、事業の話です。何で選ばれている会社なのかによって、答えが変わります。

やってはいけない6つ

実際に踏んだもの、または踏みかけたものです。

型を混ぜる

1ページに舞台は1つです。上下に2つ置くと両方死にます。

「言葉も見せたいし物も見せたい」は、たいてい主役が決まっていない状態です。決めてください。

章で進む型で、戻れなくする

前述のとおりです。奪いっぱなしにしない。

入口の読み込み画面で嘘をつく

読み込みが終わっているのに待たせるのは、ただの嫌がらせです。

演出として3秒待たせたい気持ちは分かりますが、それは訪問者の時間を勝手に使っています。

音を自動再生する

一発で閉じられます。押させてください。

音そのものを否定しているのではありません。前提にするのはいい。ただし再生ボタンは訪問者に押させる。

文字を画像や3Dのテクスチャだけにする

検索にも、読み上げにも残りません。目に見えていても、機械には存在しないのと同じです。

世界観だけで中身が無い

場所と象徴は素材ゼロで作れてしまいます。だからこそ危険です。

綺麗なものはできる。でも何も言っていない。この状態が一番もったいない。

対策は1つで、先に言うことを決めてから作る。順番を逆にしないことです。

まとめ

この記事の核心は3点です。

1. 舞台は4つ。言葉・物・場所・象徴。技術ではなく「何を主役にするか」の決断
2. 4つの舞台に、進み方3種と入口3種を掛ける。36通りの組み合わせになる
3. 選ぶとはどこまでページであることを捨てるかを決めること。技術ではなく事業の話

3Dサイトの相談を受けると、たいてい「こういう動きをやりたい」から始まります。でも動きから決めると、あとで必ず詰まります。素材が足りない、言葉が無い、主役が2つある。

先に決めるのは主役です。それが決まれば、動きは自動的に絞られます。

正直に書いておくと、この4つの型は作りながら整理していったものです。最初から体系があったわけではありません。何度か作って、うまくいかなかったパターンを引き算していったら、この形に落ち着きました。

だからまだ変わる可能性はあります。ただ、少なくとも「どんな動きにするか」から考え始めるよりは、事故が減ると思っています。

自分のサイトが今どう見えているのか、まず確かめたい方へ。URLを入れるだけで、AI検索への対応度を8つの軸で採点するツールを配っています。公式LINEに登録して「AIO」と送ってください。

https://online.zoroya.co.jp/line/open/0RvI2YIDwo6D?mtid=215Go3drIXpK

出典

• 型の分類・組み合わせ・禁止事項は、すべて自社の3Dホームページ生成ツールの設計と、制作過程で得た知見に基づく