SNSを眺めていると、たまに目を奪われるサイトがあります。点と線が浮遊しながら繋がっていてマウスを動かすとぬるぬる反応する、あの3Dっぽいやつです。「かっこいいな」で終わっていたのですがあるとき思いました。
あれ、うちのサイトでも作れるんじゃないか、と。
やってみたら、想像していたよりずっと面白いものになりました。この記事はその制作の記録です。
専門的な話はなるべく噛み砕くので、「ああいうサイトってどうやって作ってるの？」が気になっていた方に読んでもらえたらうれしいです。
きっかけは、ノートアプリの「あの画面」
出発点は、Obsidianというノートアプリでした。文章を書いて溜めていくためのアプリなのですが、その中に「グラフビュー」という機能があります。書いたノート同士のつながりを、点と線で地図のように見せてくれる画面です。
これを見たとき、ふと思いました。この「繋がりで見せる」やり方、作品を並べるギャラリーに使えるんじゃないかと。
普通のポートフォリオは、作品を四角いタイルで並べます。きれいですが、作品同士の関係は見えません。
でもグラフなら、「この作品とこの作品は同じ技術を使っている」「このサービスからこの実績が生まれた」といった繋がりごと見せられます。
並べるだけでなく、探索してもらえる。そう考えたら、作ってみたくなりました。
まず、平面で点と線を繋いでみる
いきなり凝ったものは作れないので、まずは一番シンプルな形から始めました。丸（作品）を置いて、関係のあるもの同士を線で結ぶ。それだけです。
面白いのは、この点と線が「勝手にいい感じに並ぶ」ところです。お互いに反発し合いながら、線で繋がったもの同士は引き寄せ合う。そういう力を働かせると、ぐちゃぐちゃにならず、自然に見やすい配置に落ち着いてくれます。物理のシミュレーションを、そのまま絵に使っているイメージです。
丸をドラッグすると、繋がった仲間もついてくる。マウスを乗せると、その丸の関係先だけが浮かび上がる。この時点で、もう「触っていて楽しい」ものになっていました。
実際に触れるものを、この記事にも置いておきます。動かしてみてください。
サイトURLはhttps://node-studio-psi.vercel.app/です
3Dにして、回るようにする
平面で手応えを掴んだので、次は立体にしてみました。Obsidianにも3Dのグラフビューがあって、あれがやりたかったのです。
立体にすると、ドラッグでぐるぐる回せて、スクロールで近づいたり離れたりできます。点と線が宇宙空間に浮かんでいるような見た目になって、インパクトが一気に増しました。
ただ、やってみて分かったこともあります。3Dはかっこいいけれど、角度によっては文字（ラベル）が読みにくい。「インパクト重視なら3D、情報を落ち着いて見せたいなら2D」という、それぞれの良さがはっきりしました。今回は最終的に、読みやすさを取って2Dに戻しています。この"やってみて選ぶ"感覚は、実際に動かさないと分からないところでした。
クリックしたら、詳細が出るように
見た目ができたら、次は「使える」ようにします。作品の丸をクリックしたら、その作品の詳細がふわっと開く。名前、カテゴリ、説明、そして詳細ページへのリンク。
ここまで来ると、もう「作品集」として成立します。グラフで全体を眺めて、気になったものをクリックして深掘りする。眺める楽しさと調べる便利さが両立しました。
中心に会社を据えて、「事業マップ」にする
最後に、一番しっくりきた形にたどり着きました。グラフの真ん中に会社そのものを置いて、そこからサービスが枝分かれし、さらにその先に実績がぶら下がる、という構造です。
そうすると、ただの作品集を超えて「この会社が何をやっているか」の全体像が、一枚で見えるようになりました。しかも、複数のサービスにまたがって使っている技術を線で繋ぐと、網の目のように繋がりが濃くなって、「この技術が全部を支えている」という背景まで伝わります。
作品を並べるのではなく、会社の世界そのものを地図にする。当初はギャラリーのつもりが、気づけば事業紹介のツールになっていました。
普通のギャラリーと、何が違うのか
作ってみて、一番の違いは「探索できること」だと感じました。
タイルで並べたギャラリーは、上から順に見て終わりです。でも繋がりで見せると、読者は自分の興味のままに、関連をたどって動き回れます。ひとつの作品から、同じ技術の別作品へ。あるサービスから、その実績へ。受け身で「見る」のではなく、自分から「探す」体験になる。滞在時間も、記憶への残り方も変わってきます。
もちろん、なんでもグラフにすればいいわけではありません。情報を早く正確に届けたいページには、シンプルな一覧のほうが向いています。あくまで「世界観を体験してほしい」「関係性を見せたい」ときに効く見せ方です。
動きは手段、大事なのは「何を伝えるか」
今回いちばん実感したのは、凝った動きそのものが目的ではない、ということです。
3Dで回ることや、点が繋がって光ることは、あくまで「作品同士の関係を分かりやすく、記憶に残る形で伝える」ための手段でした。動きが主役になってしまうと、かっこいいけれど何も残らないサイトになります。逆に、伝えたいことがはっきりしていれば、動きはそれを何倍にも強くしてくれます。
私たちCreavePlusは、こういう「動きで魅せる」サイトづくりを得意としています。ただ、いつも立ち返るのは「動きがあって、メッセージが伝わること」。派手さのためではなく、伝えるための動き。今回のグラフギャラリーは、その考え方がそのまま形になった一例でした。
「自社の世界観を、体験できる形で見せたい」そんな相談があれば、こういう作り方も選択肢になります。気になった方は、気軽に声をかけてください。
