- 講演者
（敬称略） - 基調講演 ：長谷川恭久
- マークアップ：益子 貴寛、小山田 晃浩
- アクセシビリティ：植木 真、中根雅文、山本 和泉
- ツールと制作環境：鷹野 雅弘、石嶋未来
- デザイントレンド：原 一浩、矢野 りん、坂本 邦夫
- スマートフォン：たにぐち まこと、矢野 りん、松田 直樹
- 開催日
- 2014年12月13日
- 場所
- ベルサール神田
基調講演
余談：Webが誕生してから25周年。
SUPER HERO / Webのスーパーヒーローになる方法
「納期が決まっているから」「これはもう仕方ない」「上司が言ったから」・・・。よくあるシーン。だがしかし、これはデザイナーの責任。デザイナーは人の考えに影響を与えていることに誇りをもつべき。
スパイダーマンで語られている、「大いなる力は大いなる責任を伴う」と。
これはデザイナーに通じている。デザイナーをスーパーマンになぞらえてみる。
Webのスーパーヒーローになる方法
- 巨大な敵に立ち向かう（巨大な敵は自分の中にいる。それは「どうせ無理」）
- 諦めずに続ける。「次は無理かも」に立ち向かう。持続は力。
- 自分以外を考える。視野を広く。
今の自分にできることは？
参考書籍： ヴィクター・パパネック「生きのびるためのデザイン」
マークアップ
余談：CSSが誕生してから20周年。
Web標準
- 2014年10月28日、HTML5が正式な仕様になりました。
- いまやCSS4の時代。
ブラウザー
- 2014年4月9日、IE6は終焉です。
- 2016年1月12日、IE8のサポート終了する予定と公式アナウンス（第2のIE6にならなければいいが・・・）。
- Safariの最新版は、WebGLに対応しました。
- Firefoxでは、制作者向けにDeveloper Edition ツールを提供
IE6/7のサポートはもうしないのがスタンダード。IE8も対応しないこともあるみたい。
制作環境
- Sassのさらなる普及（プリプロセッサーに関してはSassの一択になりつつある）
- POST PROCESS（後処理）が話題
- タクスランナー戦争（たとえばい、Sass Auto-prefixer CSSO concat uglifyの流れを一発で完了させる。Grunt Gulp がメジャー）
技術
- BEM（Block Element Modifier）
classの命名規則だけでなんく、Webサイト設計手法を取り入れていきたい - jquery 3が出ます
IE9 以降 jquery 3.0
IE6,7,8 jquery Compat3.0（余談：compatible＝互換性） - アプリケーションフレームワーク
BACKBONE.JS
NGULARJS by Google
Flux + React
Coding for Marketing
- Googleアナリティクスのトラッキングコード
- GAのコード管理
- 広告のコード管理
- タグマネージャー
- 構造化データ（JSON-LD形式がGoogle推奨で、できています）
- Google検索結果でスマホ対応のラベル表示（Mobile-friendly でチェックできる）
アクセシビリティ
ちょっと内容が濃すぎたので、後でフォローアップで復習時にまとめる予定
ツールと制作環境
「ワイヤーフレーム」「スライス書き出し」「コードレスプロトタイプ」の視点で、それぞれに最適ではないか、というたくさんの制作ツールを紹介いただきました。もう試したいことてんこ盛り!
来年の予想
- Adobeツールの初心者向け機能強化が続く？
- 小粒アプリがなければWeb制作ができない状態に？
- ビジュアルオーサリングとWebオーサリングの区分けが濃厚に？
- シングルページなどのWebサイト定型化によるGUIベースのWebサイト制作ツールが増えるかも
スマートフォン
2014年スマホ市場動向振り返り（その1）
Googleが、さらに攻めてきた年
- Material designでインターフェースデザインを体系化
- Mobile-Friendly Websitesで、スマホ対応の啓蒙
市場
- スマートフォン広告市場規模2,000億円超え（PC超え）
- ネット通販を利用するユーザーがパソコンを上回る
- 40〜50代でスマホ急増
- スマホ「画面の大きさ」を重視
結局、タッチポイントとしても、メディアとしても、デバイスとしてもスマホが主役になった年
2014年スマホ市場動向振り返り（その2）
GOODスマホサイトはこれ、babycenter.co.uk。そのGood POINTは下記。
- 書いた人、監修者など、誰による記事なのかを冒頭に記載
- ページの先頭にぱんくずリストがあるので関連記事が探しやすい
- 広告をコンテンツに挟まない
- サマリーを箇条書きで先に見せる
- 1画面に収まるパラグラフ
- 収まらないときも、関連見出しを強調する工夫がある
- おすすめや関連記事をページ下に表示
コンテンツをデザインしている。このサイトデザインの見せ方は、まさに自分の考えと一致！
2014年スマホ市場動向振り返り（その3）
Microsoftの2014年
オープン、フリー、クラウドに許可している
ビルゲイツの時代が変わってきた
Microsoftの2015年
Windows 10
大学スマホサイト
- 早稲田大学のサイトリニューアル
- 賛否あるが、「明確なコンセプトを標榜し、それを具現化した」点は高評価。
- 武蔵野美術大学
- 重点的に設計した点
- 情報整理
- 適切なラベリング
- 余白
- タップエリア
- コントラスト
- 関係者ネゴ
| スマホ対応（レスポンシブ対応） | |
|---|---|
| 国立 | 32%（17%） |
| 公立 | 26%（12%） |
| 私立 | 46%（10%） |
大学スマホアプリ
ほとんどがAndroid。iOS対応はあまりない。シェアを考えると納得。
日本の大学における特徴
- デザイントレンドは、6,7割がカルーセル（スライダー）を採用。
- PCサイト主導（まずPCサイトを見せてから、スマートフォンサイトはこちらの導線がある）。なんか懐かしい・・・
- 学生向け、受験生向け、保護者向けなど、対象者別メニューがある。
- アイコン（ピクトグラム）で、帽子のピクトグラムを使うケースがありがちだが、各大学によって意味が違っている
世界の大学における特徴
- テキストベース
- フレームワークそのまま
- ソーシャルの活用
- メニューボタン（ハンバーガーボタン、ホットドックボタン）
日本は点とバーがほとんど、ただ統一がない
日本と世界の比較
- 日本はLPっぽい。アメリカの大学では使いやすさを考えられている。
- デザインが全然違うが、そもそも大学の立ち位置が違う（設計思想が違う）
表示速度
日本の大学400校でのPageSpeed Insights TESTの結果、35〜65点で山ができていた（65点以上を目指すのがいいでしょう）。
東北芸術工科大学は0点だが、デザインはいい。これは良例。
ピックアップ！
- 京都ノートルダム女子大学
- 基本に忠実。堅実。
- 東京工業大学
- PCもスマホも同じだとわかる（ブランディングがしっかりしている）。
- University of Michigan
- フロントエンド的な実装面もすばらしい。
- お知らせニュースやキャンパスライフを謳歌しているのが多い中、アカデミックな意味で立ち位置をしっかりしている。あれ？確認したらキャンパスライフ・・・
まとめ
- スマートデバイスは、揺るぎない主役へ
- 見た目→コンテンツデザイン
- 独自性より、画一化
デザイントレンド
トレンドとは最先端ではない
時代に最適化されつつある現象である
2015年の象徴的なトピック
Appleがとうとうフラット＆レスポンシブルに
キーワードでみる海外デザイン
普遍化とローカルアレンジ
- 目的を明確に
- 以前実験的だった手法がふつう
- 効果的でないものは素早く切り捨て
- マルチデバイスは強く意識
- 次のWebデザインの某んぽうを模索
- 事業の統廃合、その余波がつづく
セミナーに参加してみて
何回かShiftに参加している（ほんとは毎年行きたいのだが、気がついたときには満席になっている・・）が、やっぱり生で参加できてよかった。久しぶるにとてもいい刺激を受けることができました！
さっそく実践しようと決めたこと
- Sassの取り入れ
- PageSpeed Insightsの習慣付け
- Mobile-friendlyの習慣付け