2006 年 12 月から 2007 年 2 月まで、私たちは Facebook のプロダクトマネージャーと連絡を取っていた。案件は、いずれ Facebook を再設計するというものだった。結局契約には署名されなかったので、デザインは引き出しにしまっておいた。それが今までの話……
お気づきかもしれないが、以下の 2 画面は 2006 年当時の正確なデザインそのものではない。ウェブはもう当時と同じではないし、私たちも同じではない。Facebook の現在のデザインと公平に比較するために、スケッチを現代のデザイン基準に合わせて調整した。厚化粧をしてはいるが、土台のワイヤーフレームと情報設計の原則は今もまったく同じだ。画像をクリックすると 1:1 のデザインスケールが見られる。
iA" title="Facebook startpage through the eyes of iA" />
By default you can only see two comments per feed entry. In order to see the full commenting thread you need to click on either the feed item or the comment block. These two images illustrate that behavior.
iA" title="Facebook startpage with chosen comment thread through the eyes of iA" />
レイアウト
基本アイデアは、メールアプリのようなインターフェースを、柔軟な 3 カラムレイアウトで作ることだった。フィルター、情報ストリーム、反応 を明確に分ける。
- フィルター: 左カラムは並べ替えのための装置として機能する
- 情報ストリーム: 中央カラムに絞り込まれた結果を表示する
- 反応: 右カラムで、個々のフィード項目について議論する
どのメニュー項目（ニュースフィード、メッセージ、写真……）を選ぶかによって情報設計は変わるが、フィルタリング、閲覧、反応を分ける 3 カラムレイアウトは大半のセクションで維持される。たとえば、左で「Messages」を選ぶと、次のような表示になる。
- Inbox、Outbox、Drafts、Trash などのサブメニュー（左）
- メッセージヘッダーと最初の 2 行（中央）
- 返信入力欄付きの全文メッセージ（右）
情報設計
当時のスケッチを、今オンラインにある Facebook の実際のデザインと比べると、次のようなことが分かる。
- ブランドにもっと余白がある
- フィードにもっと余白がある
- 議論にもっと余白がある
- 主要なナビゲーション要素がひとまとめになっている
- 閉じ込められた余白が少ない
- 右カラムがいつもの蚤の市みたいではない
- 広告がより目立つ
公平に比べるには、2 枚の画像のうち 1 枚を、実際の Facebook サイトの横で新しいブラウザタブに開く必要がある。以下は抽象的な比較だ。左が現在の Facebook のデザイン、右が iA が再設計した 2006 年のコンセプトだ。
iA mockup" title="The Facebook news feed beside the iA mockup" />
もちろん当時は、3 カラムレイアウトが史上最高にクールなソーシャルネットワークのレイアウトだと思っていた。今では、この手を使うアプリはいくつもある。たとえば、非常に人気のあった Outlook Express などだ。スクロールの挙動、スケーリング、リクエストがどこにあるのか、もしこうなったらどうなるのか……話すことはまだたくさんあるが、私は長いブログ記事は信じていない。それでも、ひとこと だけでももらえたらうれしい。賛成？ 反対？
