CSS Nite in Osaka

CSS Nite in Osakaに参加してきました

マルチデバイス時代におけるWebサイトのUIについて
株式会社サン・サン 鍋坂 理恵さん

フラットデザインにおいては要素を削ぎ落したエリアに
配置することで操作対象であることを認識させる

ナビゲーション

  • 項目が少ない場合はボタンやタブ型
  • 多い場合はリスト型

chrome Extension のresponsive-web-designでチェックすると便利



Style Guide 活用のススメ
ニイハチヨンサン 大月 茂樹さん

HTMLプロトタイピングについての内容。
デザインの世界でもスパイラルモデルを導入して手戻りなどを防ぐ。

Style Guideとすなわちコーディングガイドライン

多様なデバイスやブラウザの動作も検証・担保するために作成し、使用する
例: bootstrapのガイドライン


Style Guide作成に使えるツール

styledoccoではnode.jsの環境が必要、kaleiはwebサーバの環境があれば使える

ただ、理想はstyle guideは作っている制作サイトベースで作ることが望ましい

また、モジュール・コンポーネントを出し切る
モジュール:ボタンなどの機能を持つもの
モジュール∈コンポーネント

Style guideは一番スキルがあるひとが管理

検証ツール:ghost lab

デザイナーの案をプロトタイプの段階で検証し、
技術的に不可能なものは事前につぶしておくことで手戻りを防ぐ