CSSnite Shift11：Webデザイン行く年来る年 #cssnite

昨年末に行われた、CSSnite Shift11（Webトレンド総まとめ回）のサマリーです。

＜INDEX＞
http://cssnite.jp/lp/shift11/
[▶] 動画

【基調講演】今までの10年。これからの10年。

長谷川 恭久
[▶] https://vimeo.com/247642918/a243313e2d

iPhone登場から10年、スマホの登場で価値観が大きく変わった

2007年（10年前）
・iPhoneが誕生した年。IE6、 Flash全盛の時代
・サイトを作ったことが成果になっていた時代
・サイトをじっくりみていた時代

2009年からの2年間でgoodプラクティスが
badプラティクスになってしまうことも起こるような、大きな変化があった
→PCとスマホのシェア逆転

2017年
・つくっただけでは意味がない、ビジネスに貢献しないといけない時代
→売上、ブランディング。「自己表現のWeb」から「ビジネスのWeb」へ
・ユーザーの使い方を決め付けられない時代
→たくさんのデバイス、接触時間の増加
・サイトをじっくり見なくなった時代
→情報が身近になり、スマホをひらいたらすぐ答えがある、があたりまえに
・認知の入口がSNSになっている
→昔はサイトの表現を派手にして認知してもらっていたが、
入り口がSNSになり、webは比較・検討や行動を促す場となった

今後10年でどうなる？
・WEBブラウザでサイトをみる、という概念がなくなるのでは
→PWA（progressive web apps）での配布
→VOICEデバイス の普及
→インターネットにつながるデバイスがどんどん出てくる

今からできる3つのこと
・情報設計
今後増えるさまざまなデバイスに単純に対応していくだけではなく、
どういった文脈で使用するのか、ユーザーの行動を考えたコンテンツ配信・情報設計を学ぶ

・長方形のデザインからの脱却
長方形画面ではないデバイスもでてくる
理想的な見せ方に固執せず、極端に崩れない設計を考える

・デザインの言語化
協業ののためのスキル
感覚的に片付けていたことを言葉にすることが重要

テクノロジーは止まらない、今までの概念を壊してでも進まなければならない

【マークアップ】2017年のマークアップの話題を総まとめ

小山田 晃浩（ピクセルグリッド）/久保 知己（まぼろし）
[▶] https://vimeo.com/247643257/50306ddd1b

ブラウザ
・IEのボーダーラインが11に
2017/4/11 Windows Vistaサポート終了
Edgeは内部バージョンが16に
・Flashの本格的な廃止
・全ページhttpsにしましょう

HTML
・HTML5関連に大きな動きはなし
・廃止勧告案の提案が出ている（ほぼ通りそう）
・UTF-8を利用しましよう

CSS
・CSS Gridが最新ブラウザで利用可
・IEは古い仕様のCSS Gridなので注意
・iPhone Xのランドスケープ対応もしましょう

JavaScript
・jQueryはブラウザでできるように
・Reactに次いでVue.jsの人気が躍進

Tools
・HTML Preprocessorは環境にあわせて
・バンドラーはとりあえずwebpack

【アドビ】これだけ押さえればOK！Adobeのツールを最大限活用するWebデザイン手法2017

浅野 桜（タガス）/黒野 明子（crema design）
[▶] https://vimeo.com/247643977/3cbb2a7dfc

XD CC
・2017年10月正式版リリース
ほぼ毎月アップデートがかかる。だいぶ現場で使えるレベルに
・スマホのXdアプリで実機確認も可能
・今年はXdの年

Dimention CC
・カンタンに3Dのデザインができる

Capture CC
・写真を撮るとTypekit中から近しいフォントを教えてくれる
・デジタルアセットの作成

Photoshop CC 2018
・デバイスプレビュー消滅＞Xdを使いましょう

Illustrator CC 2018
・バージョン22.0のバグフィックス
・プロパティパネル登場
・アートボード1000枚まで作成&整列が可能に
・テキスト自体がライブラリに保存可能に

【アクセシビリティ】アクセシビリティ 改め インクルーシブデザイン？

植木 真（インフォアクシア）/土屋 一彦
[▶] https://vimeo.com/247644483/1c95092ed7

インクルーシブデザインに取り組みましょう
・高齢者や障害がある人など、特別なニーズを抱えた消費者をデザインプロセスの上流工程へと積極的に巻き込んでいく手法
・特定の障害のある人の話ではない、みんなのためのもの

Inclusive Design Principles
http://inclusivedesignprinciples.org/ja/
→ 同等の体験を提供する
→ 状況を考慮する
→ 一貫性を保つ
→ 利用者に制御させる
→ 選択肢を提供する
→ コンテンツの優先順位を付ける
→ 価値を付加する

・欧米では法律でウェブアクセシビリティを確保することの義務化がスタンダードに
・最低限の原則。基準をクリアした上で便利なものをつくりましょう

2018年のアクセシビリティ界隈
・WCAG2.1 勧告へ
・アクセシビリティがUXの基本として不可欠という価値観がより根付く
・ニーズが高まる今だからこそ「アクセシビリティもできる」が差別化＆競争力に

【マーケティング、解析】マーケティングの矛盾：事例で振り返る2017年のウェブマーケティング

益子 貴寛（まぼろし）/安達 里枝（スマイルファーム）
[▶] https://vimeo.com/247644790/5d042eb03a

マーケティングされたくない
・ユーザーの広告を無視する力が向上中
・今までの自社都合のマーケティングが嫌悪感をうんでいる

心にフィットする広告を
・ユーザーの都合を考えたマーケティングは受け入れられる
・自社都合だけでゴリ押ししない

態度変容をおこすための6つのポイント
・時間帯
・場所
・気分
・お役立ち
・絞込
・自己実現

炎上マーケ
・狙っていなくても、些細なきっかけで炎上
→ペルソナにモニタリングしてもらいましょう
・炎上をねらう？
広告効果に換算したら数億円かも知れないが、元の目的に対して役に立ったのかは疑問

余談：クリテオ（動的なリマーケティングを配信している会社）の株価が大暴落
→safariに実装されたトラッキング防止ツールの回避策がなかったため

【フォント】フォントまわりのトレンド2017

鷹野 雅弘（スイッチ）/関口 浩之（ソフトバンク・テクノロジー）
[▶] https://vimeo.com/247646684/79db28a7c8

話題の2017年フォント
・筑紫Q明朝　デビュー
・源ノ明朝　「ビャンビャン麺」がリガチャで打てる
・貂明朝　貂の絵が字形で登録されている
・絵文字のハンバーガーのチーズの位置が話題に

最近出てきた手書き風デザイン書体
・パルラムネ
・つばめ
・ミウラゴチック プロポR

最近出てきたアナログ風味、オールド系
・筑紫Q明朝
・秀英にじみ明朝 Std L
・A1ゴシック Std M
・貂明朝

Illustrator CC 2018
・カラーフォントに対応
・絵文字は、肌の色にもリガチャで対応

テキスト表現トレンド
・テキストにグラデーション
・チカラワザ・スウォッシュ

・装飾でがんばるのではなく、世界観にあった適切なフォントを選ぶ
・フォントは情報を的確に伝えるための重要なUI/UX

【スマホUIトレンド】スマホアプリにおけるUIデザインのトレンド2017

佐藤 洋介（サイバーエージェント）
[▶] https://vimeo.com/247646933/6bdff7f478

2017年UI業界トピックス
・iOS11登場＞Appstoreデザイン刷新、Animoji登場など
・AR＞iOS11になってARKit本格始動
・スマートスピーカー
・LIVEコマース＞メルカリチャンネル、Live Shop!（10代向け）

制作環境の変化
・ZEPLINと、SKETCHやPhotoshopを組み合わせて開発
・ProtoPie、Origami Studioなど
タイムライン制御で詳細なアニメーションまで試せるプロトタイプツール

▽サービスデザインの今後
スマホ習慣の変化
・Apple Payなど決済機能がスマホに含まれ接触機会が増える
・「テレビの時間」が「スマホの時間」に
UIの進化
・GoogleがVoice User Interface Designerを募集
・AppleもSiriデザイナーを募集＞音声UIに注目

サービスデザイナーに求められる「力」
・世の中の変化に気づき「柔軟に対応する力」
・トレンドを「自分なりに解釈する力」
・常に進化するユーザーリテラシーを「甘く見ない力」
・作業を効率化した分を「クオリティに昇華する力」
・未知の領域でもベーススキルを活かせる「応用力」

【Webデザイントレンド】Webデザイントレンド祭り 2017 - 次の10年のはじまり

原 一浩（Greative.GK）/矢野 りん（Baidu）/坂本 邦夫（カラー&Webデザイン フォルトゥナ）
[▶] https://vimeo.com/247648506/ed33bcf480

この回のトレンドの定義
・トレンドとは最先端ではない、時代に最適化されつつある現象である
・海外話題サイトおよび過去のリニューアル、グローバル500社のサイト400サイト、地方自治体県市町村1700サイト、上場企業サイト3400サイトを観察した結果

2017年デザインキーワード
・とにかく動く

2017年の方向性
・アニメーション自体でコンテンツをみせるというより、雰囲気づくり
・国内では、短い言葉の使われ方に重点が置かれる
・上場企業は保守的で、自治体は試行的

▽海外表現まわりトピックス
ピクニックシート
・敷物をしく感じでコンテンツが表示される演出
・てっとり早くてダイナミック、2017年とにかく多用されている
ロシアンデザイン
・注目度が上がった、スケールが大きめ
WebVR
・2017年、WebVR元年？

▽海外機能周りトピックス
フチ勢
・囲い幅いっぱいでフチをつける、コンテンツの真ん中に目線があつまる
・デバイスにフチがなくなってきたのも影響？
ランドスケープモード
・画面の向きを強制される
→横である必然性がないUI的には推奨しない

▽上場企業トピックス
銀行系自治体サイト説
・自治体っぽい感じでモダンにリニューアル
エモコピ
・大きなメインイメージと気持ち的なことを言うシンプルなコピーというパターン
・しかし、シンプルな一文がかえって伝わりにくいケースが...
サイドバーリターンズ
・一時期、横一直線のレイアウトにとってかわられたが復活してきている
・タブレットで指の届く範囲で採用？スマホのときはたたまれるパターンが多い

▽自治体トピックス
・街にキャッチコピーをつけるパターン
次の動き
・地域ブランディングテクスチャ、フッター多重など

言いたいことは短く、大きな字で
・画像・動画中心のファーストビューは加速中、1画面上のテキスト量はどんどん減っている、
少ない文字をいかに読ませて理解させるか

2017年アシスタント戦争（スマートスピーカーが台頭）
・ユーザーが、コンテンツや製品を手に入れる（目標達成する）ための「文脈」を獲得する戦い
→10年後のサイトはシズル感ある写真+チャットボットのような形になるかも
その時求められる「メディア制作力」は
・フライトアテンダントのようなガチの接客力（相手が何を求めているか万全と理解する能力）
・写真家や映画監督なみの視覚を切り取るクリエイエティブ力（質の高い画）
・聴力に訴える演奏力 or 声の力（品質の良い聴くコンテンツ）

【クロージング】今までの10年。これからの10年。（エピローグ）

中川 直樹（アンティー・ファクトリー）
[▶] https://vimeo.com/247649577/d9b6ab3906

2010–2011年
・表現力重視のリッチなプロモーション
・SNSを活用したバズ意識の仕事が多かった

2017年
・プロセスをデザインする、ビジネス的な結果を求められる仕事が中心に
・キチンとブランディングをやろうとする企業が増えた

2010年を堺に、Webマーケティングからデジタルマーケティングに変化

2018年以降、Web従事者に求められる範囲は広がっている
・時代に求められる技術者、スペシャリストを育成、獲得
・企業やサービス、ビジネスのデザインをサポートする能力
・先の時代も他社より秀でる「仁義なき施策」

年末のShiftに参加すると、Webのトレンド情報を一気にアップデートできるので良い。講演の中でも度々取り上げられた「音声」コンテンツは次に来そうだなと感じました。