12月13日（土）に東京・ベルサール神田で開催されたCSS Nite LP38 「Webデザイン行く年来る年（Shift8）」に参加しました。盛りだくさんの内容だったので、気になるところ・耳が痛かったところ・来年の目標になりそうなところを中心にまとめます。
もくじ
基調講演「Webのスーパーヒーローになる方法」
基調講演はcouldの長谷川恭久さん。
今年で25歳になるWebという技術
作っているのが小さな企業のWebサイトであろうと、すべての人がデザイナーとして世界を変えている。 今年で25周年を迎えるWebがあるおかげで、どんな人でも日々情報発信ができる。
そのWebを一人でも多くの人に使ってもらうのがデザイナーの仕事。 幸せにするのも、不快にさせるのもデザイナーである。
すごい力を持っている、そして責任もある
Webというすごい力を使う以上、社会に与える影響は大きさを自覚しなければならない。
スーパーヒーローから学べるところ
- 巨大な敵に挑むこと（敵はクライアントでも上司でもなく、「できない」と思う自分）
- 諦めずに続ける（継続は力なり。イベントもブログも続けることによって、スキルが上がり信用を得られる）
- 自分以外のことを考える（自分のテイストを押し付けない！）
お話を聞いていて、すべてのゴールは「自分がやりたいことをやる」ではないかと思いました。 「巨大な敵に挑む」ために「諦めずに続ける」モチベーションを維持するには「自分以外のことを考える」。全部ひとつづきなんですね。
「まず一緒に考えましょう」って言えているか？
「まず作ってみてよ」と言われてしまうと、すぐ形にしたくなるのが人情です。しかし、それで正しいゴールに辿り着けるのでしょうか？そもそもスタート（Webサイトを作ったりリニューアルする目的）すら見つからないかもしれません。立場や状況にもよりますが、まず目的を探すことから始めるのが2015年の目標になりそうです。
セッションの構成について
長谷川さんのセッションはデザイナーの力と責任についてのお話でした。セッションの構成で感動した点があるので自分のためにメモしておきます。
セッションの冒頭に、「プログラマーもディレクターもみんなデザイナーです！」ということで当てはまる人に起立を促すシーンがありました。このアクションのおかげで、その後の内容が自分のこと（そして、起立した全員のこと）として捉えられたように思います。話を聞いてもらうためのテクニックとして、こういう身体的動作を含んだセッションはすごく巧みでした。
おすすめ書籍「生きのびるためのデザイン」は学生時代に読みましたが、名著だと思うのでぜひ。今になったらわかる部分も増えてるのかなーと思うので、近々読み返す予定です。
マークアップ「2014年マークアップ総まとめ」
マークアップについての実務的なセッションは益子さんと小山田さん。 コーディングもやるデザイナーとして、気になるトピックをピックアップしてまとめます。
Web標準
HTML5は勧告されました！ということは、これからは今まで以上に安心して使えるようになりました。 しかし相変わらずブラウザの対応状況は気にしなければいけないとのこと。 CSSも今年20周年を迎えますが、引き続きあまりバージョンを区別せずに使っていくべきだそうです。
超重要なIE対応については、「2015年はIE8が下限」だそうです。一度だけやったIE6対応の難しさを思い出し、ちょっとほっとしました。公式サポートがなくなったというのはやはり大きいようです。（たとえ某市役所でXPが続投していようとも）
CSSプリプロセッサ
会場内でCSSプリプロセッサを使ったことがある人は6割程度。 最近Lessを勉強し始めたので、特に理由がなければSassの方がいいという意見にちょっとびっくりしていました。
Sassを監視してタスクランナーで自動化できるのはとても魅力的でした。2015年の個人的キーワードに「自動化」も追加。 ブラウザのリロードまでGulpでできてしまうのは感動。そしてこの辺りは本当に手が回っていないのが反省です。
BEM
「Webサイトの設計手法」としてご紹介いただきました。 設計が甘くて後から青くなるケースが多々あるので、使えるものはどんどん取り入れたいです。
Coding for Marketing
「コーダーもマーケティングとは無関係でいられないよね」と益子さん。 身近な例では、コーダーさんがGoogle Analyticsのコードを入れたりすることですね。 デザイナーもやることいっぱいですが、コーダーさんも解析までカバーできるようになればそれに越したことはないのかもしれません。
まとめ
「gruntからGulpに乗り換えるにしても、学んだことは無駄にならない」という言葉には勇気が出ますね。
- HTML5はすでに標準なので安心して使おう
- IE6/7はすでに過去になりつつあるが、IE8はかつての6的ポジションに
- ビルドツールのスピーディーな進化についていくのは時間の節約に繋がる
- BEMは設計手法の標準に
- 次のjQueryはとりあえずCompat3
- マーケティングに無関係ではいられない
アクセシビリティ「動画にキャプションを付けなきゃダメよ〜ダメダメ」
AccSellのお三方から、「動画にキャプションを付けなきゃダメよ〜ダメダメ」というタイトルのアクセシビリティについてのお話。 スクリーンリーダーの音声を聞く機会はあまりないので、とんでもない早口音声は新鮮でした。
キャプションをつければ、聴けないユーザーでも動画を楽しめる
聴覚障がいのあるユーザーの役に立つ・見てもらえるようになるというのはわかります。 それ以上に目からウロコだったのは、「静かにしなくてはいけない図書館や騒がしいスポーツバーにいる人の役に立つ」ということでした。たしかに、音が聴けない状況なのは同じです。
キャプションとして文字情報にしておくことで検索エンジンがキーワードを探すこともできるので、SEO的にも効果があるかも？ YouTubeなら簡単にキャプションがつけられるほか、「検索ワードから再生を開始する」機能もあります。以前英語の動画に字幕をつけるのにYouTubeを使いましたが、精度もそこそこな感じです。
動画のキャプションを作成する基本ステップ
- テキストを書き起こす
- タイムコードを作成する
- キャプションを設定する
- 表示確認する
テレビの字幕でよくみかける「（）」や「♪」の使い方にも放送局ごとのガイドラインがあるようです。
2015年のアクセシビリティ指針
字幕を見ている人は健常者が8割というのは、普段自分がテレビを見るときに置き換えると納得でした。どんな人にも親切に、というのは難しそうですが法律も制定されることですし、真剣に考えるべき局面かもしれません。
- 来年はウェアラブルが加速するんじゃないか
- 障害者差別禁止法が制定されると、行政機関のWebサイト等にもガイドラインが影響している（欧米では当たり前）
- 障害者のためのもの、にとどまらない
ツールと制作環境「フローの変革からツールと制作環境が注目された2014年」
鷹野さんとイシジマミキさんのフローの変革とデザインツールのお話です。
Webデザインの本質は「言葉」である！
でも意外と読まれていないんですよね…。すべての人に読める文字という普遍的な情報と一部の人にわかるビジュアライズされた情報の使い分けが重要になりそうです。 Webフォントの読み込み速度も改善されましたし、Noto Sansがリリースされたりとフォント界隈もにぎわった2014年でした。
グラフィックオーサリングツール以外も注目を浴びました
今年注目されたツールを見ると、デザインというのはアートワークではなくフローが注目されたのではないかということでした。
- タスクランナー
- ワークフロー構築ツール
- バージョン管理ツール
- フレームワーク（どんどんいいものがでてくる！）
ツール紹介対決
会場投票の結果は、鷹野さんに軍配が上がりました。Windows版があるAdobeツールはやっぱり強いですね。
ワイヤーフレーム
石嶋さん：Sketch（デフォルトで搭載されているテンプレートでも十分）
鷹野さん：Photoshop（拡張機能「Velositey」に搭載されているテンプレートでパーツをらくらく挿入）
スライス
石嶋さん：SlicyとSketchのExport機能
鷹野さん：Photoshopのレイヤーにファイル名をつけ、アセット＞生成で書き出し
コードレスプロトタイピング
石嶋さん：InVisionとSketch3の連携
鷹野さん：Adobe Muse（LP的な1ページものを作るのに向いている）
来年の予想
- Adobeツールは細かい機能を緻密に直していく方向性（初心者に優しくなる？）
- 小粒アプリが活躍しそうだけど、Mac中心なのは不安
- ビジュアルオーサリングとWebオーサリングでのツールの使い分けが重要
- GUIベースのWebサイト制作ツールが増えるかも
マルチデバイス「スマートデバイス 2014→2015」
たにぐちまことさん、矢野りんさん、松田直樹さん
2014年のスマートフォン市場はGoogle独壇場
「2014年のスマートフォン市場を振り返ると、Googleがさらに攻めてきた印象」と松田さん。モバイルフレンドリーの指針を打ち出すなど、今まで以上に絡んできたイメージだそうです。他には、スマートフォンでのECサイト売上がPCを超えたり、中高年ユーザーも激増。Googleの検索結果で「スマホ対応」というラベルが登場したりと、SEO面でもスマホ対応が無視できなくなってきました。 PCの代替として求められるようになり、主役になったといえるでしょう。
「使いやすさ」を諦めてはいけない
「つい3ヶ月前に娘をリリースしました」と矢野さん。子供さんを抱っこしたままでは両手を空けるのが厳しい以上、スマートフォンが優勢なのは当然かもしれません。 「babycentre」というスマートフォンサイトのUIを例に出しながらスマートフォンサイトに必要な要素についてのお話でした。パンくずリストと記事の概略についてはあんまり重視したことがなかったので新鮮でした。このブログもパンくずリストを省いてしまったので反省です。 strongタグを使ったりパラグラフの感覚を使えば長文も読みやすくなりそうです。
Windowsの大改革
Windowsの代表取締役が変わってからの大改革にたにぐちさんは注目されているそうです。自分はApple大好きなMacユーザーなので完全についていけていない話題だったんですが、シェアが大きいぶん無関心ではいられないと感じました。
大学のWebサイト展開について
国内外の大学のWebサイトを例に、モバイル対応とレスポンシブウェブデザイン対応を統計として分析されていました。 日本の大学は旬のコンテンツや最新情報などのキャッチーなものでユーザーを惹きつけようとしているのに対して、アメリカの大学は純粋にアプリとしての使い勝手を追求しているような印象です。「大学の存在意義が日米で違うからではないか」と矢野さん。
国内についてはまだまだカルーセルスライダーの使用が多く、PCサイト主導でスマートフォンサイトからPCサイトへのリンクも多いです。
ソーシャルの活用
Texas A&M UniversityはSNSのアイコンがたくさん載っており、サイトとソーシャルで役割をぱきっと分けている可能性も大。
メニューボタン
世界の大学ではハンバーガーボタンが優勢。「MENU」というラベルがついている方が稀。 ハンバーガーボタンは押されないもの（世間的な認識不足が原因？）だと思っているので、日本の学校サイトで取り入れるのには勇気が要ります。
デザインガイドラインが英語で作られている以上、英語圏の人より日本語圏が不利なのは否めなさそうです。極端な話ですが、世の中のすべてのメニューボタンが統一されれば、ユーザーにぐっと親切になるよなーと思いながら聞いていました。
ページスピードは35〜65点付近に分布
スマートフォン対応済みのサイトのページスピードを計測すると、そこそこに優秀な結果が出たそうです。95点をとった日本の大学のサイトはデザイン的にもそれなりにリッチですし、ミシガン大学はRWDを採用していますが80点の高得点をマークするなど、グラフィカルだから、RWDだからという言い訳はできないようです。
スマートフォンとPCのデザインに差を出さないバランス感覚
東京工業大学はPCサイトとスマートフォンサイトの統一感がある例として紹介されていました。スマートフォンサイトを作るとラベルの位置や大きさを変えたくなってしまいます（※じゃないと収まらないという切実な問題も…）が、それが本当に正しいのかは一度考えた方がよさそうです。
まとめ
- スマートデバイスは、揺るぎない主役へ
- 見た目 → コンテンツデザイン
- 独自性より、画一化
「ページスピードもデザインのうち」というお言葉にはひやっとしました。
デザイントレンド「Webデザイントレンド キャプチャでふりかえる2014」
「キャプチャでふりかえる2014」ということで、Shift名物（？）のデザイントレンドのお話です。
今年のキーワードは「普遍化とローカルアレンジ」
「トレンドとは最先端ではない。時代に最適化された現象である」というお題目のもと、リニューアルされたサイトを中心にピックアップされました。 ひとつのデザインが出たと思ったら他のデザインに変わるなど、イマイチな要素はさくさく切り捨てられている印象だそうです。
キーワードでみる海外デザイン編
白ヘッダー（白ハチマキ）
インパクトのある写真をビッグバナーに使う場合は、ヘッダーに白を使うケースが多くなりました。
Web Fonts
主張しない部分にもWebフォントが使われているケースが増加。 手書き風イラストとフォントが使われたグラフィカルなサイトもSVGとWeb Fontsで実装されているケースもご紹介いただきました。 KAKTUS
余白のないデザインを上手く作るコツ
ブロック要素を並べたリキッドデザインが席巻しているそうです。 「ちょっとおしゃれなデザインの盛り付け」という矢野さんの出された例が納得。余白をしっかり確保するにはテキスト量も絞らなければならないのが悩みどころです。
クォータービュー再び
シムシティのような俯瞰で街を見下ろしたようなイラストが増えてきたそうです。 みっちり書き込みすぎるとうっとうしくなりそうですが、パステルカラーにしたり単色にしたりすることでまとまりを出している印象を受けました。
トリコローレ来たる
イタリアの国旗に由来する「緑・白・オレンジ」が増えてきたとのこと。 ヘルシーでさわやかな印象が演出できそうですね。
ハンバーガーボタンのバリエーション
「MENU」と併記するボタンも増えているそうです。このあたりのことは、クリック（タップ）してもらってなんぼなので本当に難しいですね。 「色々な挙動があってわからない！」という坂本さんのコメントには深く頷きたいです。
カード型ナビゲーション
水戸黄門スタイルと通じるところを感じました。「押せる感」を出すのにいつも苦心するんですが、シャドウを多めにかけたり付箋みたいに切り込みを入れたりするのもひとつの手段です。
背景色の使い方
メインビジュアルの写真に使われている色に近い背景色を下部に敷き詰めたり、白と赤など差が大きい背景色をつけたボックスを1/2に並べたスタイルも散見。
日本の上場企業編
アトラスなど、トップページのコンテンツ量を絞り込んだサイトが増加。Googleを極めるとこうなってしまうんでしょうか。
コンテンツの区切りを斜めにする（45°よりゆるやかに）「イアイ」も定番に。斜めに切った部分に文字を入れるなど、スペースの有効活用が重要になりそうです。
スターバックスなどの左に固定ナビゲーション、右にコンテンツなリキッドレイアウトも視野に入れる必要を感じました。練習としてブログで採用してみたいです。
自治体編
テンプレート化が進み、似たようなレイアウトが散見。
アーチ
グローバルナビゲーションに曲線を用いて、奥行きと広がりを演出
ディテール大賞
半田市や尾鷲市のようにがっちり作りこんでいるケースと、シンプルにまとめたサイトの二極化。
フラット大賞2014
講師のお三方がそれぞれ自治体Webサイトの中からフラット大賞を選ばれました。
- 倶知安町（本来の意味のフラットかといわれると難しいが、押せる部分を強調するなどほどよい塩梅）
- 寝屋川市（素朴でフラットらしいフラットデザイン）
- さいたま市（コンテンツ量を抑えていることと、文字サイズが大きくマルチデバイスに忠実）
まとめ
- イタリアのWebデザインの復権（スタンダードなグローバルナビゲーションを踏襲しつつ、新鮮なデザインが増えた）
- 2014年はイタリアから既存のUIをひねった何かが生まれそうな気配
- ブランド統一という課題への対処
矢野さんのおっしゃった「ブランド統一」のキーは「色相は3つ以内に収める（同系色トーン違いはOK）＝情報をカテゴリ別に色分けしない
」「デザインパーツの形は、ロゴの形に合わせる（アイコン、レイアウトボックスの装飾など、ふにゃっとしたロゴならふにゃっとしたパーツ）」」とのことでした。
