CSS Nite LP31 Shift7（Webデザイン行く年来る年）に参加しました
12月14日に開催されたCSS Nite LP31 Shift7（Webデザイン行く年来る年）に参加しました。今回私が参加したいわゆる「Shift」シリーズでは、講師の方々が会話してセッションを進めていく形式でした。入社一年目の私でもお名前を知っているような方たちが講師として並び、今年のWeb、これからのWebについてお話をされていました。
- 基調講演：スクリーンの先、私たちの仕事の先
- マークアップ：新しいマークアップ環境にキャッチアップ！
- アクセシビリティ：AccSellポッドキャスト公開録音「izuizuのアクセシビリティ（生）100本ノック！」
- ツールと制作環境 2013-2014
- スマートデバイス 2013 → 2014
- OSのフラットデザインを考えてみる
- Webデザイントレンド：キャプチャで振り返る2013年
参加した感想
基調講演：スクリーンの先、私たちの仕事の先
様々な種類の端末が出るだけではなく、人によってスマートフォンの持ち方も様々です。そうなると、人がどんな使い方をしているのか知るのも大切なことです。そのためにはオフィスを出て周りをよく観察します。
私はデザイナーではないけど、CMSの記事の編集画面をカスタマイズすることがあるのですが、操作性に欠けていることもあります。操作性に欠けていると、用意した機能も使いにくかったり、お客さんに気づいてもらえない場合があります。どうやったら気づいてもらえるのか、どうしたらスマートフォンでも更新しやすいのか、デザイナーじゃなくてもいざというときにアイディアをだせるように日頃から考えていかないといけないなあと思いました。
マークアップ：新しいマークアップ環境にキャッチアップ！
マークアップエンジニアとして働いているので、うんうんと頷けるところが多かったです。 そのなかでBEMは名前を聞いたことがあっただけだったので印象に残っています。BEMとはブロック（Block）、エレメント（Element）、モディファイア（Modifier）の略で、classの命名規則です。
他にも効率よく作業するためのCSSプリプロセッサー、ビルトタスクのGruntのお話がありました。CSSプリプロセッサーは何度も使う色や何度も使うベンダープレフィックスにとても便利そう。大規模案件には良さそうですが、私の場合は、小規模案件には使い慣れないCSSプリプロセッサーを使うよりCSSを使った方が良いかなあと思いました。GruntはCSSとJSの圧縮、複数ファイルをまとめることでファイルのリクエスト数が少なくなり、表示速度の改善にも繋がりそうです。
アクセシビリティ：AccSellポッドキャスト公開録音「izuizuのアクセシビリティ（生）100本ノック！」
以前から気になっていたカルーセルの疑問をピックアップしていて、こちらのセッションにはとても興味津々でした。私は他のコンテンツに集中したいのにカルーセルが気になって仕方ないことがよくあります。カルーセルってあまり好きじゃないというのが本音でした。実装する際はHTMLが複雑になるのか、実装が複雑になるのか、カルーセルでなければ実装できない情報なのか理由を考えていきたいですね。
セミナーでは、東京オリンピックの影響で日本のWebの品質が世界中の注目されることを指摘されていました。オリンピックってスポーツが注目されるだけではないんですね。
ツールと制作環境 2013-2014
Mac用の画面分割ソフト、Divvy。あっさり紹介されていましたが、結構気になります。セッションには出てきませんでしたが、セミナー後に我が社の社長さんにお勧めされたBetterTouchToolというものもあります。Divvy面白そうだなと思って見てたら教えてもらいました。無料ソフトながらこちらも使えそう。
SublimeTextのプラグインのBrowserRefresh-Sublimeも面白そうです。 他にも書き出しがラクになるSlicyや良く使うパーツを登録して再利用Pixel Droprのご紹介がありました。画像関係はAdobe製品しか使ってなかったのでAdobeじゃない製品も試しに使っていきたいですね。
スマートデバイス 2013 → 2014
上場企業の中でスマフォ対応している288社中100社が同じような鉄板デザインパターンでは以下のようなものが挙げられていました。 - 右上にメニューボタン - カルーセル - 下にナビゲーション
我が社では左上メニューボタンが標準だったのでちょっと驚きでした。一般的には右上ボタン派なんですね〜。
順番を変えることができるflex box、1つの要素のものを2つの要素に分割できるCSS Regions Moduleやユーザーの環境も判別できるようになるMedia Queries4の紹介がありました。Media Queries Level4ではpointer,hover,script,luminosityがあり、明るさ（luminosity）によってスタイルを変えることができます。
ユーザーの都合を把握して直しながら最適解にしていくのがスマフォコンテンツに求められる作り方というデザインについてのお話しがありました。Media Queries level4によってよりユーザーの都合にも対応できるようになりそうですね。
今後注目していきたいウェアラブルデバイス、セパレートデバイスや音声認識のお話。音声認識で文字入力ができるようになり、今度はキーボードがなくなるかもしれませんというお話もありました。どうなるかわくわくですね〜。
OSのフラットデザインを考えてみる
私自身、サブカラムがごちゃごちゃしているパソコンサイトをみると、コンテンツに集中しにくいことに最近、実感しつつありました。パソコンは集中して使い続けますが、タブレットは歩きながら使えますから、使ったり止めたりします。デバイスを使うパターンが人それぞれになってきたからこそ、無駄なものは取り去って簡素化し、よりコンテンツに集中させる方法を考えていきたいですね。
セッションの中で覚えておきたいこと
- コンテンツが重要、簡素化する
- ユーザーが使うデバイスの状況が変わってきたからこそ、いかにコンテンツに集中させるのかということからフラットデザインが重要。
- UIの理想は取り去るものがなくなったとき。
Webデザイントレンド：キャプチャで振り返る2013年
紹介されていた（海外の）2013年の方向性
- フラットデザイン
- アニメーションの採用
- ビデオ、地図を背景に使う
- スクロール連動型のコンテンツの普及
- スクリーンサイズを固定しない
- Web Fontsを使わないケースがない
「キャプチャで振り返る2013年」とタイトルにはありますが、キャプチャでは振り返れない動きのあるサイトもありました。静的には表現できない動きのあるサイトがこれからは増えていくのかなという印象でした。
森田かすみ
