Conferenceのデザイナーズトラックで学んできたことを簡単にまとめてみました。あとで自分が詳しく調べるとき用の備忘録です。内容がすごく濃くて、HTML5初心者の私にとって為になるお話ばかりでした。⇒HTML5関連のAPI利用や、Canvas、WebGL、SVGなどで表現の幅を拡大。使うとこんな良いことが...!意味のあるマークアップによって、検索性が向上する。方にとって情報が伝わりやすくなる。CanvasやWebGL、SVGなどの利用により、高度で多彩なグラフィックの表現が可能になる。マークアップする上での注意点HTML5では文脈に沿ったマークアップが必要なため、要素を正しく理解することが必要。HTML5では旧要素も再定義されている。要素の数は全部で108個で、そのうち、HTML5で新たに追加されたのは24個。Queriesで、色々なデバイスへ条件分岐ができる。⇒ブラウザのサイズによって表示を変えられる。コリス新セレクタで、よりリッチな表現ができるようになった。使うとこんな良いことが...!画像でやっていたことがCSS3でできるようになる。⇒転送量が少なくなるので、表示は早くなる。⇒内容の変更にダイナミックに対応できる。問題点ブラウザによって使えるセレクタが限られていること。その差異をどうするか?は考えておく必要がある。Enhancementなどがある。小さなタッチスクリーン。Portrait(縦)とLandscape(横)で解像度が異なる。スマートフォンの機種によっても解像度が異なる。ブラウザのほとんどは、webkitベース。注意点や気を付けたいことズームイン・アウトや水平スクロールを必要とするページは操作しづらい。縦方向にスクロールするだけで全てが見えるページをつくる。⇒Viewportを使う。[iPhone生活]リンクは指で押すので、近くにリンクが複数あると、間違えやすい。⇒リンクをボタンにしたり、paddingなどを使ってヒットエリアを大きくする一部CSS3で互換がないので、ブラウザごとに書き分ける。Transitionだと古いスマートフォンで対応していない。JavaScript+Canvasは、ほとんどのスマートフォンで対応している。Graphics)とは何か2Dのベクター画像をXMLで記述した言語のこと。Demohttp://bit.ly/svgdemoIEでもRaphaelというJavaScriptのライブラリを使うことでSVGを使用できる。Enhancementまずは最低ラインの対応をし、その上で新しい機能をのせる。例)四角の角を基準にして、モダンブラウザでは角丸にする。Degradation基本は新しい環境にあわせ、壊れない程度にグレードダウン。例)角丸やグラデーションなどの使用を基準にし、対応していないブラウザでは四角の角でベタ塗りにする。Enhancement標準を基準にし、対応していないものは補う。例)CSSハックや画像などを使用し、他ブラウザでも同じ表示にする。詳しい内容がこちらにまとめられておりました。便利なツールModernaizrHTML5などの対応状況を調べるJavaScriptライブラリ。調べるだけで、対応はしないが、htmlタグにclassがつくのでそれを利用できる。Polyfills標準機能を真似するJavaScriptライブラリ。IE6やIE7の独自実装などを利用して、表示をモダンブラウザに近づける。2013のボランティアスタッフに参加して良かったこと2013.12.02UI変更が不評な時に役立つ原因の切り分け方2013.11.29About@kanako29WebサービスのUI・UXデザインなどをやっています。