読者です 読者をやめる 読者になる 読者になる

以下斜め読んだ内容

pseudo translation of useful posts, book reviews, remarks,etc. twitter: feeddict

BBCのデザインガイドライン

斜め読み

はじめに

2009.05.07追記
BBCウェブサイトはFuture Media Standards & Guidelinesというページで、ウェブページ設計のためのガイドライン資料を公開中。

  • デザイナー向け(ページデザインする人向け)資料
    • pdf(「Visual Language v2.0」。50pある)
    • IllustratorPhotoshopの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

この5つを以下斜め読み

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]
    • この高さまでがページでロード時に表示される
    • ナビゲーションはこの高さに収まるように。
      • ナビゲーションのためのスクロールはユーザの負担になる
    • 記事はスクロールされることが期待されてるので、この高さに収める必要なし
    • コンテンツは
  • 原則全ての要素がデザイングリッドを守る
    • 例外1:コンテンツ部分のテキスト&画像に左右10pxの詰めを追加可能
    • 例外2:埋め込み動画(wmvなど。仕様固定幅のため。)

ページの構成要素

  • ヘッダ(mastheadと表現)
    • globa/localの2つに分かれる。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)は柔軟なのでグリッドに合わせる
  • ローカルナビゲーション
      • 水平方向/上下方向/パン屑の3つに分けて解説
      • 配置場所は指定無
    • 必須項目
      • カテゴリトップ(Siteと表現)へのリンク
      • カテゴリ固有のリンク
    • 禁止項目
      • フッターリンク、グローバルナビゲーションに含まれるもの。
      • コンテンツに関連するもの
        • フィード
        • 印刷用ページへのリンク
        • 友達にメールする
        • 関連記事へのリンク
    • 水平に配置/上下方向に配置/両方の組み合わせ
    • アンカーテキスト
      • 短く簡潔に
      • 大文字は注意を促すときのみ使う
      • ズームは2段階まで対応(=崩れない)
  • 広告
    • UK以外の訪問者に向けてしか表示されない。
前Ver.と比べて

グリッドの採用
多言語対応
広告表示のルール
ページの領域が、ヘッダ/フッタ/それ以外に簡略化

感想、ないものねだり

あるルールを採用する理由について紙幅を割いていると、うれしい。

  • サイトトップでは"explorer the BBC"ボタンはトップページでは不使用。理由?
  • コンテンツ(テキスト、画像)部分は、1.グリッドに揃える、2.左右10px詰めの2種類許容してる。使い分けの指針?
  • ローカルナビゲーションの配置場所。
  • ヘッダ/フッタ以外

Page Layout Standards v1.1

現行の「Visual Language」の1つ前のもの。
保留事項(=今後詰めるもの)も載ってて面白い

  • ページを構成する要素は色々
    • 一定のlook and feelを作るbyデザイナー
    • 複数ページ間で共通する要素を活用
      • 訪問者がbbc.co.uk内にいることがわかるように
  • デザインパターンは2つ
    • 左ナヴィゲーションの有
    • 左ナヴィゲーションの無
      • ページの目的がナヴィゲーションであるときに使うべし
  • ページ構成要素
    • Toolbar
      • グローバルナビゲーション。
      • 幅固定/ウィンドウ幅の2パターン
    • Search
      • ページ全体のデザインを加味して、ボタンの配色を変えれる
    • Banner
      • サイト内のコーナーのブランディングとidentifyが目的
      • 高さ制限(40-100px)
      • 広告エリアではない
    • Top left area
    • 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エリア
      • 定義をきちんとする
      • ポータルページでの配置

BBC - Barlesque - Test Page

BBCウェブサイトで使っているBarlesqueの機能概要ページ
「Visual Language v2.0」pdfからのみリンクされてる

  • 突っ込んだ情報はBBC社内LANからのみアクセス可能な情報が多い。
  • SVNTracで管理されてるらしい。
以下斜め読んだ内容

あとでかく

BBC - BBC Internet Blog: From Barley To Barlesque

「Visual Language v2.0」の実装の話であり、かつBBCのウェブサイトで使ってるシステム移行の話
BBC internet ブログ2008年5月のエントリ
技術的に突っ込んだエントリにするのは想定読者向きじゃないので簡単に言えば、という主旨のエントリ

Into Enemy Territory: Architecting Client-side Code for Syndication

BBCの開発者がWeb 2.0 Expo Europe 2008でウェブサイトのテンプレートシステムをBarleyからBarlesqueへ移行したことをネタにした発表したときのスライド。
スライドだけでは分かりにくい箇所多々あり

  • bbc.co.uk
    • ジャーナリズムから音楽まで複数ジャンル扱ってる
    • 動かしてるシステム=色々
    • コンテンツ作成上のニーズ=色々
  • Barley
    • 90年代より使用
    • IE3,NS4時代の産物
  • Barlesque
    • 2008年
    • HTML/CSS/JSが複雑になったのでその辺への対処が大変
  • どうしてるか
    • namespace
      • "blq"
      • class="blq-main"とか、var blq= new function(){..とか
    • css
      • specificityを高くする
      • css reset
  • 各要素のレイヤー
    • cssのz-index、flash、form関連の要素
    • ブラッシュアップ中
  • cvs使う
  • 開発ツール
    • ?
  • データの圧縮。転送量を抑える
    • 色々やってる(よくやられてること)
  • ドキュメント作る