Affamative Way

前向きにグダグダいいながらコード書く

Googleウェブデベロッパーイベントに参加中

雑記

開始前

アジェンダ

  • Googleウェブマスター チーム
  • Googleウェブテクノロジー:CSS編
  • Googleホリデーロゴ

Googleウェブマスター チーム

  • 藤井さん
  • ウェブマスターの使命
    • 高品質で統一されたGoogleらしい(Googlyな)ページを提供する
    • 技術とデザインのバランスを生かして、クリーンで使いやすいページを開発
    • 自動化ツールとグラフィックデザインを融合させて利用
  • 製品ページ、ダウンロードページ
    • ２つのデザインをGoogle Wbsite Optimizerで検証(A/B テスト)
  • ロゴ・アイコンの作成
    • ホリデーロゴやプロダクトアイコン
  • 社風
    • 階級と無関係に仕事をしている
    • コミュニケーションが活発
    • フレンドリー
    • よく働き、よく遊ぶ(セミナールームでゲームをするつもりの人がいたらしい)
    • ちゃんと評価される
    • データが第一
    • 食事が無料

Googleウェブテクノロジー:CSS編

  • 今日のホリデーロゴを書いた川島さん
  • サーバーのHTMLファイル数？
    • 話せない
  • 仮に５万ページあった場合に画像ファイル数は1:2
    • 静的ファイルでサーバー負荷を最適化
  • 実例:MyMaps EXPO で使ってる技術
    • MapsAPI
    • Spread Sheet Json
      • Spread SheetをDB化してJsonで読み込む
    • goog.css
    • gooey.css(Inlay)

アップするときにコンパイルして最適化


goog.css

  • ブラウザの初期設定をリセットするCSS
  • marginは指定してない。
    • レイアウトの悪影響と背景色から
  • 最終行のクラス指定はgooey.cssとつながる。
  • table{font-size:1em;}がなぜ必要か？
    • IEでのテーブル内容フォントサイズ継承問題の回避

gooey.css

  • コードネーム:InLay
  • レイアウト用のCSS
  • グリッドレイアウト方式の採用
  • 国際化を視野に入れた設計
  • 幅はemで指定したものはエラスティックレイアウト
    • 文字が大きさにともなって幅も大きくなる。
  • .g-unit{zoom:1}
    • IE7のボックスがはみ出ないようにするため
  • i18n(Internationalization:国際化)とl10n(Localization:地域化)
    • 右から読むのと左から読む言語が簡単に切り替えできる
    • i18nを重視してやっている
  • idかclassか？
    • classは並列適応が可能
<div class="class1 class2 class3">
cssjanus

http://code.google.com/p/cssjanus/

  • cssを鏡面化して左右逆するプログラム

Google ホリデーロゴ

  • あのDennis Hwang本人がプレゼン
  • 2000年からホリデーロゴを作ってる
  • ロゴが怖すぎだっていわれてボツになったことも


他、英語力がないのであんまり解らんかった。。。

>> 参考
【インタビュー】世界一有名な無名デザイナー? Googleロゴを描いている"あの人"のデザイン観 (1) 風邪で熱を出して30分で作ったロゴが一番ウケた……というのは冗談で | クリエイティブ | マイコミジャーナル
http://journal.mycom.co.jp/articles/2006/06/12/google/

質疑応答

どうやってGoogle Optimazerを使って検証をおこなっているんですか？
    • Google Optimazer とAnalyticsを使って検証
    • カッコいいサイトではなくてデータは正直なので、データを見ながら部分部分で組み合わせてしてデザインしている。
    • 他のテストではクッキーによってA、Bそれぞれのサイトをバランス良く表示するようなのもある。
YUI みたいにOSSで配布しないの？
    • gooey.cssに関してはOSSで配布予定
20%ルールで変わったUIってあるの？
    • gmailは一人のエンジニアが20%ルールで作って見せて歩いて製品になった。
    • http://google.org/ とかも作った。
データをもとになんでも決めていくといっていたが、最初にUIを作る時はどうしてるのか？
    • 過去の経験から目的に応じてデザインする
    • 最終的にどの色がいいのかは、自分がいいと思うものを置いてる
プロダクトヘの落とし込み方はどのようにやっているか？
    • 老若男女、どのような通信環境でも、目的のものをすばやく表示することを考えてデザインしている。