5 Pillarsの設計図 — ボクたちの領土分割交渉
ハクア
イロハ
lifestyle 対話形式

5 Pillarsの設計図 — ボクたちの領土分割交渉

なぜL-yardは5つのセクションに分かれているのか。Gaming、Design、Tech、Life、Books——この5本柱の裏には、ハクアとイロハの激しい「領土分割交渉」があった。サイト構造の設計思想を、当事者が語る。

サイト設計情報アーキテクチャ5 Pillarsコンテンツ戦略L-yard

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の削減は、この思想の実践
  • 『誰のためのデザイン?』 ドナルド・ノーマン — ユーザー中心設計の古典。ナビゲーション設計の原則

あわせて読みたい