2016年、Webデザイナーにとってもっとも重要なトピックは何だったのでしょうか。
今年も様々な技術や手法が登場しました。ここで一度、おさらいをしておきましょう。

今回は、2016年に頻繁に取り上げられた重要トピックを中心に、2017年に向けてWebデザイナーが押さえておきたいものを7つピックアップしました。

2017年は、また新たなキーワードがたくさん飛び交うかもしれません。今年のうちに今のトレンドをキャッチアップしておきましょう。

来年に持ち越せない！Webデザイナー必見の2016年重要トピックス

1. モバイル・プロトタイピング

5603_01.png
参考：
Webサービスやアプリ開発に必須！国内外のプロトタイピングツール6選

2016年は「Adobe XD」や「Facebook Origami Studio」といったモバイル端末のプロトタイピングツールが続々とリリースされました。
日本でも次第にアプリやWebにおけるUI・UXというものが重視されるようになりましたが、2017年にはインターネット利用の75％はモバイル経由になる(※英Zenithによる予測)など、モバイルにおけるUXデザインの重要性がますます高まりつつあります。

Webデザイナーにとって、プロトタイピングツールを使いこなすことは必要なことなのでしょうか。従来行っていたようなワイヤーフレームの作成やPhotoshopやIllustratorを使ったモックアップの作成では足りないのでしょうか。

答えは、イエスです。

一体、なぜでしょうか。それは、「Webデザイン」という言葉自体に、UI・UXデザインも包括されるようになってきたからです。
一昔前は、白紙のカンバスに見栄えの良い配色を施したり、美しいグラフィックで飾っていくのがWebデザインの役割でした。

しかし、現在ではWebデザインは「Webページの画面(目に見える部分)をデザインする」以上に「Webページのユーザー体験(目に見えない部分)をデザインする」という意味合いに変わってきています。

美しい見栄えのホームページは、今では無料で簡単に作れてしまいます。WixやWebnodeといった、優れたツールはたくさん存在します。だからこそ、WebデザイナーはWebデザイナーにしかできないことを行う必要があります。目に見えない部分も含めた、Webサイトの総合的なデザインです。

プロトタイピングツールでは、1ページずつのモックアップを作成することができるだけでなく、画面遷移や、ユーザーがUIに触れた時の動作を再現することができるなど、プレビュー機能が充実しています。プロトタイピングツールを使うことで、ユーザーが心地いいかを、コーディングを行う前に確認することができるのです。

ホームページのエンゲージメント率を高めるために、シリコンバレーに名を連ねる企業をはじめとして、様々な企業やチームがプロトタイピングツールを取り入れています。
コーディングだけではわからない、実際に触ってみないと知る余地もない部分を、プロトタイピングツールが手助けしてくれます。

2. マイクロインタラクション

5603_02.png
参考：
サイトの離脱率が下がる！UXにマイクロインタラクションを取り入れる際の5つのポイント

ユーザーの体験も含めて、ホームページを総合的にデザインするのがWebデザイナーの仕事になっている、という点はすでにお話しました。
それでは、ユーザーが心地よい体験をするためには具体的に何が必要なのでしょうか。

その解決策として、今年頻繁に登場したキーワードの一つが「マイクロインタラクション」です。

マイクロインタラクションとは、ボタンをカーソルでホバーした際のちょっとしたアニメーションや、フォームにカーソルを合わせた際のポップアップなど、何かしらのトリガーによって引き起こされるアクションのことです。これは面白いと思えるホームページには必ずといっていいほど、アニメーションベースの仕掛けが盛り込まれています。

これまでのWebデザインは、白紙のカンバス全体にどういうデザインを施すか、という、いわば「マクロなデザイン」を行う傾向が強かったものです。一方、クリックやタップ、ホバーといったユーザーアクションの一つひとつといったディティールにまでデザインの手を加えていくのが、これからのWebデザインの主流になります。

BootstrapやPureのようなCSSフレームワーク、フラットデザインやマテリアルデザイン等トレンドのデザインを採用しているホームページはたくさんありますが、見かけだけで個性を出すのは難しくなっています。

マイクロインタラクションを取り入れれば、実際に触ってもらいながらユーザーとコミュニケーションを取ることができます。そのコミュニケーションの取り方こそが個性につながり、拡散を生むきっかけになります。

3. 動画

5603_03.png
参考：
サイト来訪者の目を"動き"で釘付けに！サイレントスクイザーを使った注目サイト10選

「好きなことで生きていく」というキャッチコピーとともに、2016年はYouTuberが広告やCMでフィーチャーされました。2017年を迎えるにあたって、Webデザイナーは動画とどう付き合っていくかを考えなければいけません。

全世界の月間アクティブユーザーが4億人に達したInstagramも、もともとは写真を通じてコミュニケーションを取るSNSでしたが、動画投稿に注力する方針を取っています。
結果、昨年8月から1年もたたないうちに動画の再生回数が40％以上増加しました。

動画を使う場合には、ホームページ上で動画をどのように使うのかが重要です。
動画をホームページ上にベタ張りするケースもあれば、Macやテレビなどの画像を貼ってスクリーン画面に動画をはめ込む場合もあるでしょう。

その中でも2015年から2016年にかけて特に活用されたのが、「サイレントスクイザー」と呼ばれる手法です。

サイレントスクイザーとは、動画を全画面に敷いてホームページ全体で再生する無声動画です(まれに有声の動画が使われることもあります)。
また、最近ではインタラクションを取り入れた動画(インタラクティブムービー)を使ったホームページも増えてきています。

例えば、パナソニックの「さわろう。ふだんプレミアム」のホームページでは、動画を全画面で観ながらも、再生中に出てくる「CLICK」という部分をクリックすることで、商品詳細を都度確認することができます。

動画は、もはやコンテンツのほんの一部ではなく、コンテンツの大部分を占めたり、ホームページそのもののアイデンティティにもなる重要な要素になっています。これからのWebデザインを考える際、動画なしでは語ることはできないでしょう。

4. グロースハック

5603_04.png
参考：
たった5分で理解できる！今さら聞けない「グロースハック」の5つの重要ポイント

2017年は、「グロースハック」がますます重要になってくるでしょう。

これまでは、「グロースハック」の重要性を理解しているひとはいるものの、実際にグロースハックを担う人は「グロースハッカー」と呼ばれ、その他の役割とは区別され、彼らが主導となってホームページやサービスのスケールアップが行われていました。しかし、2016年に入り、データ分析やテストツールを使うための便利なツールが続々登場し、特別な知識や才能が必要なくなったのです。
つまり、これまでグロースハッカーが担っていた仕事は、次第にWebデザイナーにも要求される可能性があります。

これまで、グロースハックにはユーザートラックングツールMixpanelやA/BテストツールOptimizelyなどが利用されてきました。ただ、こうしたツールを使うにはある程度知識が必要な上、日本語のローカライズが行われていなかったため、日本人のWeb担当者には敷居が高いものでした。

しかし、2016年10月にはGoogle AnalyticsのUIが刷新され、「ファネル分析」や「コホート分析」といった複雑な分析を行うのも手軽にできるようになりました。それに加え、同時期にこれまで有料だったGoogle Optimizeが無償で開放され、A/Bテストや多変量テスト、Redirectテストといった様々な効果測定も可能になりました。マテリアルデザインの親しみやすいプラットフォームで、多言語対応で、Googleのさまざまなサービスとも連携できるので、グロースハックに対する敷居が低くなったのです。

サービスのコンバージョン率を上げるためには、SEO対策をはじめとする外部流入増加＝「エクスターナル対策」をするだけではなく、ホームページに来たユーザーにサイト内回遊をさせながらランディングページに誘導する「インターナル対策」も重要です。

検索エンジンの評価を変えるには時間がかかりますが、ホームページ内部でのテストであれば、専門家でなくても行えるようになります。Google AnalyticsやGoogle Optimizeによって、テストや効果測定が簡単に行えるようになったからです。

5. AIチャット

5603_05.png
参考：
人工知能（AI）と人工無脳（チャットボット）、どう使い分ければいい？

オンラインショッピング業界(EC業界)は年々伸びていて、経済産業省によれば、2015年のB-to-Cのオンラインショッピングの市場規模は13.7兆円、前年比7.64％増と発表されています。その中でも、近年EC業界で流行しているのが、人工知能(AI)を用いたチャットボットサービスです。

チャットボットとは、人間同士のやりとりで使われるのと同じ自然言語でコミュニケーションを取るプログラムのことです。生活に身近な例としては、Apple社のSiriやAndroidの「OK Google」と呼びかけて起動する音声認識システムです。

365日24時間対応で問い合わせの3分の1をカバーしている、通販サイトLOHACOに導入された顧客サポートボット「マナミさん」の活躍や、ヤマト運輸が自社の公式LINEアカウントでAIを用いた荷物の問い合わせ機能を追加したことが話題になりました。

インターネットショッピングを楽しむシーンも、パソコンではなく、利用シーンを選ばずどこでも使えるモバイル端末がほとんどです。
その中で、ECサイトでの問い合わせも「お問い合わせフォーム」や「メール」で行うより、チャットで行うほうが手軽でスムーズであるといった点が、チャットボットを採用する大きな理由となっています。

こうした背景により、ユーザーのエンゲージメント率を高める上で、「AIチャット」は2017年においても欠かすことのできないキーワードだと言えます。

それでは、Webデザイナーは「AIチャット」とどのように向き合っていけばいいのでしょうか。

着目すべきところは、AIチャットベンダーとホームページとの「統合」部分です。
WebデザイナーがAIチャットの仕組みをゼロから作っていくことは現実的ではないので、通常はAIチャットサービスを提供するベンダーを見つけるところから始まります。
どのサービスを使うかが決まれば、Webデザイナーが考えることは「サービスをこのホームページとどう統合させるか」ということです。

チャットツールは、ユーザーと1対1でコミュニケーションが取れるので、今後はEC業界だけでなく、様々な分野で使われることになるでしょう。

6. IoT (モノのインターネット)

5603_06.png
参考：
2015年の重要キーワード「IoT」とは？オススメ記事5選

IoT(モノのインターネット)は、実のところ2015年を中心に飛び交ったキーワードでした。この流れは留まることを知らず、おそらく2017年も引き続きフォローすべき重要なキーワードとなるでしょう。インターネットに繋がるのは"コンピューターやモバイルだけ"という時代は終わり、車や家電など、あらゆるものがインターネットに接続される時代が到来しています。

モノがインターネット(つまりWeb)に接続されるということは、単純にデータのやりとりをインターネット上で行うということに留まりません。
実際のところ、Web標準化団体W3CでもIoT(WoT)コミュニティの設立やワークショップが開催されるなど、UXデザインにも精通したWebデザイナーにもIoTを考える機会が増えてくることは間違いないでしょう。

IoTの特徴をもっとも身近に感じるのは、Apple WatchやAndroid Wearに代表されるスマートウォッチでしょう。Apple WatchはまだWebブラウザを搭載していませんが、AndroidにはAppfour社がリリースするAndroid Wear用のWebブラウザがあり、もっと多くのスマートウォッチがWebブラウザを搭載する日もそう遠くはないかもしれません。

7. VR (バーチャルリアリティ)

5603_07.png
参考：
いよいよ本格始動！2016年注目のVR最新動向まとめ

2016年はVR(バーチャルリアリティ)元年と言われています。
2016年10月にはコンシューマー向けVR機器の本命とも言われるPlayStation VRが発売され、これからますますVR市場は拡大されていきます。

多くのWebデザイナーにとって関心事となっているのは、*「WebもVR対応が必要になるのか？」*というところです。
すでにGoogleマップのストリートビューと呼ばれる機能がVR的な要素の先駆的存在として多くのユーザーに利用されていますが、果たしてこれからのホームページにおけるVR対応はどうなっていくのでしょうか。

ホームページに簡単にVRを取り入れられるライブラリは既に公開されています。その一つが、WebVRと呼ばれるJavaScriptのAPIライブラリです。
WebVRを使えば、Oculus RiftやHTC Vive、Samsung Gear VR、Google CardboardなどのVRデバイスを使ってVR体験が可能になります。

WebVR BoilerplateやWeb VR StarterKitなど、WebVRをより簡単に扱えるライブラリ群も登場しています。

ただ、WebVRは初心者には少し難しく感じるかもしれません。そこで登場したのが、現在ブラウザのFirefoxで有名なMozillaのVRチームであるMozVRからリリースされたバーチャルリアリティフィレームワークA-Frameです。

A-Frameは、ごく簡単なHTMLを記述するだけで3D空間にオブジェクトを配置することができます。iPhoneやAndroidのブラウザで表示すれば、端末の向きを変えて周囲を見回すことができます。
また、Oculus RiftをPCに接続することでもVRを体験できます(Google Chrome、Mozilla Firefox、Sumsung Internet Browser for Gear VRなど、WebVRに試験的に対応しているブラウザが必要です)。

A-Frameを使えば、一つのホームページで、PCやスマートフォン単体から、Google CardboardやOculus Riftなどのハイエンドヘッドセットでいろんな環境に対応する、「レスポンシブなVR環境」を構築することができます。

また、デプロイするためのコードはもともとHTMLで書かれているため、オブジェクトの位置や色などのプロパティもHTML上で編集できる「Webらしい」方法でVRを記述できます。もちろん、HTMLなので、JavaScriptと組み合わせることでアニメーションなどの動きを付けることもできます。

最近のスマートフォンには、向きをトラッキングするジャイロセンサーが既に実装されており、VRコンテンツを表示させる高性能なCPUやGPUが備わっています。
Google Cardboardをはじめとするダンボールで作った簡易的なVRモジュールさえあれば、多くのひとが特別なデバイスを用意することなくVRを楽しむことができます。
A-Frameとスマートフォンとの組み合わせは、非常に相性がいいのです。

VRに限ったことではありませんが、Webの長所の1つは、閲覧環境に縛られずに、どこでも同じように見ることができるところにあります。
URLを共有すれば他人と簡単にVRコンテンツをシェアすることもできます。もちろん、制作側からすれば、作成した瞬間に公開することができるというメリットもあります。WebにおけるVR空間の構築は、ますます広がっていくでしょう。