BBCのデザインガイドライン
はじめに
2009.05.07追記
BBCウェブサイトはFuture Media Standards & Guidelinesというページで、ウェブページ設計のためのガイドライン資料を公開中。
- デザイナー向け（ページデザインする人向け）資料
- pdf（「Visual Language v2.0」。50pある）
- IllustratorやPhotoshopのdesign assets（要認証）
- 開発者向け資料
- 各担当者にコンタクトしてくれ、というスタンスらしい。
- "Barlesque"
- BBCウェブサイトで使っているページテンプレートシステム（＝CMS?）
- 機能概要・ガイドラインはBBC - Barlesque - Test Pageで公開
デザイナー向け資料は、「Visual Language v2.0」の前Ver.であるPage Layout Standards v1.1も公開中。
ガイドラインの変更点などを比較することができる。
開発者向け資料は断片的な感じ。"Barlesque"についてはBBCのブログエントリ、カンファレンスで使ったスライドを見つけた。
- Visual Language v2.0
- Page Layout Standards v1.1
- BBC - Barlesque - Test Page
- BBC - BBC Internet Blog: From Barley To Barlesque
- Into Enemy Territory: Architecting Client-side Code for Syndication
この５つを以下斜め読み
Visual language 2.0 - BBC design guidelines for the web
BBCウェブサイトのデザインガイドラインをまとめた50pのpdf文書。
Global Visual Language v2.0のページからDLできる（zipにしてる）。
以下斜め読んだ内容
ページレイアウト
- デザイングリッド
- 66pxのカラム、余白14pxが基本
- サブカラム26px+余白14px+サブカラム26px
- 固定幅レイアウト：ヨコ994px
- タテは600pxを基準（XP+IE7で最小高さは617px）[33p]
- この高さまでがページでロード時に表示される
- ナビゲーションはこの高さに収まるように。
- ナビゲーションのためのスクロールはユーザの負担になる
- 記事はスクロールされることが期待されてるので、この高さに収める必要なし
- コンテンツは
- 原則全ての要素がデザイングリッドを守る
- 例外１：コンテンツ部分のテキスト＆画像に左右10pxの詰めを追加可能
- 例外２：埋め込み動画（wmvなど。仕様固定幅のため。）
ページの構成要素
- ヘッダ（mastheadと表現)
- globa/localの２つに分かれる。130pxルール（原則高さは130px）
- globalヘッダ
- リンク：text only
- リンク：help
- 検索ボックス
- "explorer the BBC"ボタン
- グローバルナビゲーション
- news,radioなど主要コンテンツへのリンク
- サイトマップ（詳細なリンクリスト）へのリンク
- グローバルナビゲーション
- localヘッダ
- カテゴリ別のヘッダ
- 高さ49px、ロゴのフォントはGill Sans or Arialで30px
- 活用方法
- サブ見出し、ローカルナビゲーションなどを入れる
- ローカルナビゲーションの配置場所はかなり自由
- フッタ
- 3カラムでリンク（contsct usとかが、16個）
- 配色で3パターンあり
- コンテンツ
- 画像とテキストの配置
- 必要なら、10px詰め（=グリッドから外れ）てもOK
- 原則。画像の縦横比は16：9
- フォント[35p]
- Gill sansが基本（Gill bold禁止）
- 見出し用／ページタイトル用／本文用
- 最小文字サイズ
- 原則utf-8
- メディアプレイヤー埋め込み
- グリッドに沿わないがしょうがない
- 音声データ（EMP）は柔軟なのでグリッドに合わせる
- 画像とテキストの配置
- ローカルナビゲーション
-
- 水平方向／上下方向／パン屑の３つに分けて解説
- 配置場所は指定無
- 必須項目
- カテゴリトップ（Siteと表現）へのリンク
- カテゴリ固有のリンク
- 禁止項目
- フッターリンク、グローバルナビゲーションに含まれるもの。
- コンテンツに関連するもの
- フィード
- 印刷用ページへのリンク
- 友達にメールする
- 関連記事へのリンク
- 水平に配置／上下方向に配置／両方の組み合わせ
- アンカーテキスト
- 短く簡潔に
- 大文字は注意を促すときのみ使う
- ズームは2段階まで対応（＝崩れない）
-
- 広告
- UK以外の訪問者に向けてしか表示されない。
前Ver.と比べて
グリッドの採用
多言語対応
広告表示のルール
ページの領域が、ヘッダ／フッタ／それ以外に簡略化
感想、ないものねだり
あるルールを採用する理由について紙幅を割いていると、うれしい。
- サイトトップでは"explorer the BBC"ボタンはトップページでは不使用。理由？
- コンテンツ（テキスト、画像）部分は、1.グリッドに揃える、2.左右10px詰めの2種類許容してる。使い分けの指針？
- ローカルナビゲーションの配置場所。
- ヘッダ／フッタ以外
Page Layout Standards v1.1
現行の「Visual Language」の1つ前のもの。
保留事項（＝今後詰めるもの）も載ってて面白い
- ページを構成する要素は色々
- 一定のlook and feelを作るｂｙデザイナー
- 複数ページ間で共通する要素を活用
- 訪問者がbbc.co.uk内にいることがわかるように
- デザインパターンは２つ
- 左ナヴィゲーションの有
- 左ナヴィゲーションの無
- ページの目的がナヴィゲーションであるときに使うべし
- ページ構成要素
- Toolbar
- グローバルナビゲーション。
- 幅固定／ウィンドウ幅の2パターン
- Search
- ページ全体のデザインを加味して、ボタンの配色を変えれる
- Banner
- サイト内のコーナーのブランディングとidentifyが目的
- 高さ制限（40-100px）
- 広告エリアではない
- Top left area
- 日付
- テキストver.への変換
- ヘルプ（アクセシビリティ対策）
- Left-navigation
-
-
- Crumb、Local、Servicesを包含
-
- グローバルナビゲーションと、ローカルナビゲーション両方
- 幅は3パターンのみ（110,125,140px)
-
- Crumb
- 今見てるページのサイトの内での位置がわかる
- Local
- 今見てるページと同一カテゴリ内のページリンク
- 原則テキストリンクが必須
- 例外。正当な理由のある場合のみ画像を使ったリンクを使える
- Services
- グローバルナビゲーション
- 「contact us」など
- Gutter（要素の境界線）
- 原則。ナビゲーション／コンテンツは10px間隔空ける
- Content
- 通常左寄せ。
- 幅は固定幅とウィンドウ幅の2種類
- 固定幅は、480,620,635,650pxのいずれか。
- ページ全体の横幅がウィンドウ幅100%か、770px以下。
- Footer
- About BBC,Help,とあと各種ポリシーページへのリンク
- 全てのページで表示されることが必須
- 今後詰めること
- Serviceエリア
- 定義をきちんとする
- ポータルページでの配置
- Serviceエリア
BBC - Barlesque - Test Page
BBCウェブサイトで使っているBarlesqueの機能概要ページ
「Visual Language v2.0」pdfからのみリンクされてる
以下斜め読んだ内容
あとでかく
BBC - BBC Internet Blog: From Barley To Barlesque
「Visual Language v2.0」の実装の話であり、かつBBCのウェブサイトで使ってるシステム移行の話
BBC internet ブログ2008年5月のエントリ
技術的に突っ込んだエントリにするのは想定読者向きじゃないので簡単に言えば、という主旨のエントリ
- Barley
- 昔使ってたページレイアウトシステム
- 時代遅れのテクノロジー
- IE3サポート
- tableレイアウト
- 横幅固定とか制約がとても多い
- 更新がとても大変
- Barlesque
Into Enemy Territory: Architecting Client-side Code for Syndication
BBCの開発者がWeb 2.0 Expo Europe 2008でウェブサイトのテンプレートシステムをBarleyからBarlesqueへ移行したことをネタにした発表したときのスライド。
スライドだけでは分かりにくい箇所多々あり
