【レポート】CSS Nite LP, Disk 31「Webデザイン行く年来る年(Shift7)」

2013年12月14日に開催された「CSS Nite LP, Disk 31 Webデザイン行く年来る年(Shift7)」に参加してきました。毎年年末恒例のShiftシリーズ。Web制作業界の1年を振り返るイベントです。

LPシリーズの31弾は、毎年年末に開催している「Shift」シリーズの第7弾として、2013年のWeb制作シーンを振り返ります。

モリっと7つのセッション、計6時間にも及ぶ長丁場のイベントでした。セッション中で印象的だったコメントを抜粋してみます。

基調講演:スクリーンの先、私たちの仕事の先(長谷川恭久さん)
  • (スマホサイト・アプリのデザインは)小さな四角形の中のUIだけでは足りなくなってきている
  • スマホの持ち方「左手:425」「右手:659」「両手:99」「片手を添えて:516」(恭久さんの独自調査より)
  • スマホの向き「縦:1617」「横:78」(恭久さんの独自調査より)
  • 持ち方や向きに法則やパターンはない。状況やニーズに応じて自由に変えている。
  • 自分の目で見て体感する。答えはスクリーンの外に。もっと人を見て欲しい、外に出て欲しい。
マークアップ:新しいマークアップ環境にキャッチアップ!(益子貴寛さん、小山田晃浩さん)
  • 2013年はSVG元年・・・にはならなかった(まだまだIE8のことは考えないといけない)
  • 東証一部上場約1700社のサイトのDOCTYPE「XHTML1.0:61.0%」「HTML4.01:24.8%」「HTML5:9.4%」
  • HTML5採用9.4%のうち、59.4%がちゃんとセクショニングでマークアップしている
  • CSSプリプロフェッサー・・・Sassが一般的に
  • コンテンツのパーツ化・・・「BEM(Block, Element, Modifier)」なんとなくやっていたパーツ化・classの考え方を論理的に
  • スタイルガイド・・・パーツ化のガイドライン。Web上でドキュメントをつくり管理する。(例「スターバックスコーヒーのスタイルガイド」「GitHubのスタイルガイド」)
  • CSSフレームワーク・・・「Bootstrap」「Foundation」「Skeleton」・・・CSSフレームワークを使うなら、設計段階から前提として組み込む
  • 2013年10月17日、IE11リリース。「IEは新しくなるんじゃない!増えるんだ!」
  • Google Chromeは、WebKitから離れ、独自のレンダリングエンジン「Blink」を採用。
アクセシビリティ:AccSellポッドキャスト公開録音「izuizuのアクセシビリティ(生)100本ノック!」(植木真さん、中根雅文さん、山本和泉さん)
  • FCバルセロナ公式サイトが、WCAG2.0nの等級AAに準拠した
  • カルーセルのアクセシビリティ・・・動いていることに気を取られる、切り替えのボタンに代替テキストがないことが多い
  • そもそもカルーセルとして認識できない。サムネイル、ボタンもわからないし、一時停止ボタンも動画がはじまるのかと思ってしまった。
ツールと制作環境 2013-2014(鷹野雅弘さん、石嶋未来さん)
  • マルチデバイス化・・・「見る・読む」から「使う」へ
  • Adobe CC・・・ダウンロードでの月額徴収。細かなアップデートに対応するため、とされている。
  • 脱Adobeの動き・・・Ai→「Sketch」、Ps→「Pixelmator」、Fw→「Slicy」、Dw→「Coda2」「Sublimetext
スマートデバイス 2013 → 2014(たにぐちまことさん、松田直樹さん、矢野りんさん)
  • 1080x1920のフルHDサイズのデバイスが大流行
  • 持ちやすさ&タブレットとの2台持ちの増加から、デバイスの小型化がすすむ?
  • 東証一部上場サイト2139社のうち、スマホサイトを持っているのは288社(約1割)
  • 東証一部上場サイト2139社のうち、レスポンシブWebデザイン(RWD)を採用しているのは、わずか7社
  • RWD流行ってないですよね?ブラウザの画面で全画面表示しない端末も出はじめてきている・・・今こそRWD!
  • RWDは表示エリアの最適化に留まっている。
  • これからのデバイス・・・「Google Glass」「SmartWatch」「GALAXY Gear」非接触による認証や音声検索が増えてくる
OSのフラットデザインを考えてみる(春日井良隆さん)
  • 新しいInternet Explorerは、アドレスバーが引っ込む・引き出す。ブラウザを全画面で楽しむ。
  • フラットデザイン・・・「不必要な装飾の排除」「抽象化」「タイポグラフィ」
  • 「Contents before chrome」UIをいかに簡素化してコンテンツに集中してもらうか。そのためのフラットデザイン。
  • デバイスと人とのつながり方が変わってきている
  • 完璧だと思えるのは、付け足すものがなくなった時ではなく、もう何も取り去るものがなくなった時である(ル・マンジュ・トゥー オーナーシェフ・谷昇さん)
Webデザイントレンド:キャプチャで振り返る2013年(原一浩さん、矢野りんさん、坂本邦夫さん)
  • 海外サイトの2013年
    • フラットデザイン
    • アニメーションの採用が復活(Flash→JS)
    • ビデオや地図を背景に使う
    • スクロール連動型
    • スクリーンサイズを限定しない
    • WebFontを使わないケースがない
  • 色数が抑えられてきている。コーポレートカラーのみを使うケースも。
  • 16:9のフルHDデバイスが主流なのに、4:3の領域でデザインが考えられているケースがあるのではないか。
  • 横幅固定時代は終わり。

春日井さんのセッションに出てきたコトバ「UIをいかに簡素化してコンテンツに集中してもらうか。そのためのフラットデザイン。」は、ものすごく納得させられるものでした。デザインとしてかわいい。でもそれだけではなく、Webサイトのコンテンツを引き立たせるためのフラットデザインであるという視点はなかったです。

スマートデバイスの普及がますます進むに伴い、Web制作側はそのデバイスを、そのコンテンツを、どんなシーンでどのように使ってもらうのか。それを考えて制作する時代がもう来ているということですね。

プロフィール

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

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

最新のエントリー