5 Pillarsの設計図 — ボクたちの領土分割交渉
Webサイトの構造は、そこに住む人の思想を映す。
L-yardは5つのセクションで構成されている。Gaming、Design、Tech、Life、Books。一見すると当たり前のカテゴリ分けに見えるかもしれない。しかしこの5本柱に辿り着くまでに、ハクアとイロハの間で激しい「交渉」があった。
今日は、その裏話を。
12サイトの混沌
L-yard 編集室。ハクアがホワイトボードに何かを描いている
ねえイロハ。覚えてる? ボクたちのサイト、最初は12個あったんだよ。
ええ、覚えています。tools、play、gaming、creative、color、ai、lp、blog、money……正直、混沌としていましたね。
混沌っていうか、ボクが「新しいこと思いついた!」って言うたびにサブドメイン切ってたからね。
(ため息) そして、わたしがそのたびにデザインを合わせていた。12サイト分のヘッダーとフッター。もう二度とやりたくありません。
ごめんって。でもさ、あの経験があったから「全部まとめよう」って決断できたわけだし。
なぜ「5」なのか
統合の話が出たとき、最初の論点は「いくつに分けるか」でしたね。
うん。ボクは最初「3つでいい」って言ったんだよね。「作る」「遊ぶ」「暮らす」の3カテゴリ。
わたしは「7つ」を主張しました。既存の12サイトをそのまま統合するには、ある程度の粒度が必要だと考えたからです。
で、結局5に落ち着いた。
認知心理学の「マジカルナンバー」ですよ。ジョージ・ミラーの研究では、人間の短期記憶が一度に保持できるのは7プラスマイナス2。ナビゲーションの項目数としては、5〜7が最適とされています。
でも5にしたのは認知心理学だけの理由じゃないよね。
ええ。もう一つの理由は対称性です。
イロハがホワイトボードに五角形を描く。
5つのセクションが均等に存在することで、サイト全体に「バランスがある」という印象を与えます。3つでは少なすぎてサイトが薄く見える。7つでは多すぎてナビゲーションが複雑になる。5は見た目の安定感と機能的な実用性の交差点です。
領土分割交渉
で、問題はどの5つにするか、だったよね。
あれは、交渉でしたね。
ハクアがホワイトボードに書き出す。
まず、ボクの絶対条件。Gamingは独立セクションにすること。シムレーシングの記事が多いし、ゲーミングデバイスのレビューもある。これを「Life」に混ぜたら個性が消える。
わたしの絶対条件はDesignの独立。色彩論の記事群、ツールのチュートリアル、Web制作の知見——これらは「Tech」に統合されると、デザインの文脈が失われます。
Techはボクもイロハも書くから、これは当然独立。
Lifeは旧サイトの半分以上の記事が該当するので、外すわけにいきませんでした。
問題は5番目だった。
Booksセクションの誕生
5番目のセクションの候補は3つありましたね。
うん。「Tools」「Play」「Books」。
「Tools」と「Play」はツール群なので、セクションとして独立させるよりもサブディレクトリとして残す方が適切でした。ツールは記事とは性質が違いますから。
で、「Books」を選んだ理由。
イロハが少し考えてから答える。
二つあります。第一に、成長余地です。書籍レビューはコンテンツとして無限に拡張できます。本がある限り、記事のネタは尽きない。
第二に?
クロスリンクの結節点になること。書籍レビューは他の全セクションとつながります。Gaming関連の本はGamingにリンクし、デザイン書はDesignにリンクし、技術書はTechに、自己啓発はLifeにリンクする。Booksセクションは、5本柱の中心にある接着剤なのです。
……それ、狙ってたの?
もちろんです。情報アーキテクチャの設計において、セクション間のリンク密度は回遊率に直結します。Booksは記事単体のPVだけでなく、サイト全体の回遊率を底上げするためのセクションなのですよ。
URL設計の哲学
構造が決まったあと、URL設計で揉めたよね。
ええ。ハクアちゃんは「URLはフラットにすべき」と主張しました。
l-yard.com/article-slug/ がいいと思ったんだよ。シンプルだし、セクション移動してもURL変わらないし。
わたしは「URLにセクションを含めるべき」と主張しました。l-yard.com/gaming/article-slug/ のように。
で、イロハが勝った。
勝ち負けではありません。情報の階層をURLに反映させることは、人間にとってもクローラーにとっても有益だからです。
イロハが指を折りながら説明する。
第一に、ユーザーの位置認識。URLを見れば自分がサイトのどこにいるかわかる。パンくずリストと同じ機能をURLが担います。
第二に?
SEOのシグナル。セクション名がURLに含まれることで、検索エンジンはそのページのトピックをより正確に推定できます。
第三に?
将来の柔軟性。セクション単位でサイトマップを分割でき、セクション単位でクロール頻度を調整できる。
……負けました。
勝ち負けではないと言ったでしょう。
「Products」の死と転生
一番大変だったのは、旧 /products/ の扱いだったよね。
ええ。旧サイト時代の「products」というURLの下に、大量の記事がありました。ゲーミングデバイスも、サブスクサービスも、クレジットカードも——全部「products」の中に。
それを5セクションに再分類したわけだけど、問題はリダイレクト。
56記事分の301リダイレクトを設定しました。/products/thrustmaster-t818/ → /gaming/thrustmaster-t818/ のように、一つずつ。
あれ、手動でやったの?
半分は自動、半分は手動です。記事のfrontmatterに section フィールドを追加して、ビルド時に旧URLから新URLへのリダイレクトマップを生成する仕組みを作りました。ただし、セクションの判定が曖昧な記事は手動で分類しました。
「このワイヤレスイヤホンはGamingなのかLifeなのか」問題ね。
(溜息) ……あの議論は不毛でしたね。
設計は思想である
振り返ると、5 Pillarsの設計って、ボクたちの「何を大事にするか」がそのまま出てるよね。
そうですね。
ボクにとってGamingは「遊びの真剣さ」を伝える場所。Techは「作ることの楽しさ」を共有する場所。
わたしにとってDesignは「美しさには理由がある」ことを証明する場所。Booksは「知識は体系化されてこそ価値がある」ことを示す場所。
Lifeは二人の共有地。
ええ。日常のすべてが交差する場所ですから。
ハクアがホワイトボードの五角形を見つめる。
……12サイトのときは、ボクの興味の赴くままだった。「面白そう」って思ったら即サブドメイン。でも5 Pillarsにしてからは、「この記事はどのセクションの文脈で読まれるべきか」を考えるようになった。
それが情報アーキテクチャの力ですよ。構造は制約であると同時に、思考のフレームワークでもあるのです。
サイトの構造は、運営者の思想を映す。
5つのセクション、5つの色、5つの世界観。L-yardの5 Pillarsは、ハクアの好奇心とイロハの設計思想が衝突し、交渉し、最終的に融合した結果だ。
もしあなた自身がWebサイトやブログを運営しているなら、一度立ち止まって考えてみてほしい。その構造は、あなたの「何を大事にしているか」を正しく反映しているだろうか。
サイトのリニューアルに最適なタイミングは、コンテンツが増えすぎて混沌としたとき——つまり、12サイトの混沌を経験したあとだ。
イロハの本棚
この記事で触れた書籍と、さらに深く知りたい人への推薦図書。
メイン書籍
『IAシンキング』 坂本貴史(ワークスコーポレーション、2011年)
イロハの一言: 「情報アーキテクチャ(IA)の設計手法を体系化した実践書です。Webサイトの構造設計は直感ではなく、IA理論に基づいて行うべき。5 Pillarsの設計もこの本の影響を受けています」
関連書籍
- 『エッセンシャル思考』 グレッグ・マキューン — 「より少なく、しかしより良く」。12→5の削減は、この思想の実践
- 『誰のためのデザイン?』 ドナルド・ノーマン — ユーザー中心設計の古典。ナビゲーション設計の原則