【レポート】CSS Nite LP, Disk 20:Webデザイン行く年来る年(Shift5)

2011年12月10日にベルサール九段で開催された「CSS Nite LP, Disk 20:Webデザイン行く年来る年(Shift5)」に行ってきました。毎年年末恒例、2011年のWebトレンドを振り返り、2012年にシフトしていこう!というイベントです。

我々が知る世界の終り(けど大丈夫)
  • 人はもうWebサイトに訪れなくなってきている
  • 人が集まる場所(ソーシャルメディアなど)に情報が集まってきている
  • より早く情報を伝えたい、明日プロモーションがしたい・・・Tumblrなどで実現できる。デザインにかける時間が必要なくなってきている
  • ひとはなぜWebサイトに行くの?・・・ひとが求めているものはデザインではなく、コンテンツ
  • Webサイトはソーシャルメディアなどに情報を渡し、ソーシャルメディアから人がWebサイトに訪れる
  • Webサイトをつくるのは目的ではない
  • サイトをつくることにコストが下がり、時間がかからなくなった分、コンテンツを考える時間が増えた
  • これからはコーディネートする能力が求められる
2011年のフロントエンド技術
  • HTML5 Boilerplate」・・・HTML5のベストプラクティスが詰まっている。全部乗せなので不要なコードも入っている
  • Normalize.css」・・・いままでのリセットにするCSSではなく、属性の特徴を活かしたノーマライズという考え
  • Internet Explorer 6 Countdown」・・・マイクロソフトが運営するIE6の比率を伝えるサイト。日本は6.5%
  • 様々なスクリーンサイズに対応したデザイン「レスポンシブWebデザイン」が目立ってきている(例「About.com」)
  • HTML5のAPIも徐々に使われはじめている(例「ジセダイ」→History API)
  • jQueryは1.7にバージョンアップ。HTML5を古いブラウザに対応するには、今まで通りhtml5shivが必要
  • 2012年はもっとHTML5にShiftしていく!
HTML5のアクセシビリティ
  • アクセシビリティは、障害者・高齢者だけではなく、一時的な障害のある状態のことも含む(例・今日めがね忘れて見えづらい状態)
  • alt属性・・・基本的には何も変わらない。 alt属性に関するW3Cのドキュメント「HTML5: Techniques for providing useful text alternatives
  • h1〜h6属性・・・「すべてh1属性でマークアップ」vs「h1〜h6を使う」→スクリーンリーダーの対応状況を考慮するなら「h1〜h6を使う」が無難
  • マウス操作だけではなく、キーボード操作のことも考える
  • HTML5、WAI-ARIAの仕様に沿って実装していく
ツール・電子書籍の2011年
  • Adobe creative suite 5.5 リリース
  • Adobe creative cloud 発表(リリースは2012年春?)・・・月額5,000円。複数のソフトを使う人にはお得?
  • Adobe Touch Apps・・・タブレット版のcreative suite(Androidのみ)
  • aside magazine・・・HTML5のみで作られた世界初の電子書籍
  • ePub・・・電子書籍のフォーマット。中身はHTML+CSS。私たちのスキルが活かせる。
スマートフォンの2011年
  • タブレット元年到来!
  • スマートフォン高速回線化・・・スマフォで映画をダウンロードする時代も近い
  • スマホサイトの2011年・・・「レスポンシブWebデザイン」「アプリっぽいデザイン」「jQuery Mobile 1.0 正式版リリース」
  • スマホサイトの2012年・・・「非PC世代の加速」「スマホ専用サイトって本当に必要?」「画面サイズ、プラットフォーム、ブラウザの多様化」
  • 「モバイルファースト」という考え方・・・要素を削るのではなく、つけたす
激動の今年を振り返る、師走のWebデザイントレンド60分拡大版!
  • センターレイアウト
  • パノラマ(例「Digital Hands」)
  • メインビジュアルがない
  • 色で領域を分ける
  • ロゴの領域を広げる
  • 円形に切り抜かれて拡大
  • フラット&ソリッド
  • アプリっぽいデザイン(例「adecco」
  • フルイメージ(例「General Motors」)
  • キービジュアルからメッセージイメージへ(例「クオール株式会社」)
  • 緑色のサイトの増加(例「玉川村」)
  • コーポレートカラーリング(例「松屋フーズ」)
  • 工業系企業のリニューアル(例「三信建設工業」)
  • 多段グリッド(例「タイヨーエレック株式会社」)
  • 地域の特徴をヘッダーに(例「歌志内市」)
  • グローバルナビに写真と説明文を入れる(例「茨城県」)

年末恒例のShift。ほぼ毎年参加していますが、今年も2011年のWebに関する技術、トピック、そしてデザインがギュッと凝縮された中身の濃いセミナーでした。

ちなみに、今日一番興味を持った技術は「ePub」、ささったコトバは「人が集まっている場所に情報が集まっている(長谷川恭久さん)」でした。

プロフィール

林大輔 写真
林 大輔
旅を売るWebデザイナー / ジャム男子
楽天トラベルでWebデザイナーとして働きながら、個人でもWebサイト制作業務を請け負う。趣味ではシャムをつくる自称・ジャム男子。
著書「FireworksレッスンブックCS6対応」「ガレリアCSS

詳しいプロフィールを見る

最新のエントリー