第28回リクリセミナー「Webデザイントレンド in 大阪 2016」参加レポート

2016/3/20(日)に十三の大阪研修センターで行われた第28回リクリセミナー「Webデザイントレンド in 大阪 2016」に参加してきましたので、いつものように自分の主観でレポートを書きます。

今回は、メモをきっちり取っていく、できる限りツイートをするということに重点を置いてイベントを楽しむ形で臨みました。
今回のハッシュタグは「#resem28」。いつものようにまとめを作成していますので、当日の雰囲気はこちらでなんとなくわかるかと思います。
#resem28ツイートのまとめ
今回は長くなるので目次付きです。

目次

1. スマートデバイス 2015→2016
2. ミニセッション：プロトタイピングツールとWeb制作（仮）
3. Webフォント最新事情（2016年版）
4. JUSO Coworkingの紹介+サイボウズLiveの紹介
5. Webデザイントレンド
6. まとめ

スマートデバイス 2015→2016

まず最初はたにぐちまことさん、松田直樹さん、矢野りんさんのスマートデバイスセッションです。
スマートデバイスセッションでは、スマートデバイスの最新動向というよりもその周りの情報を中心とした話でした。
最初のテーマはAMPの話で、このブログでも書いた(モバイルサイトの爆速表示を実現するAMP-HTML-Page作成方法まとめ)AMPの概要についての話でした。
AMPはGoogleが高速化表示のために作った技術ですが、それによってSEO面でどうなのかとか、実装するのはWordPressのプラグインでもできるというような話でしたが、ここはきちんと事前に調べていたところなので復習的な感じで聞けました。
次にアプリとWebの画面が同じになってきているという話だったんですが、今回は後でもその話が出てくるくらいの感じで、このセッションの一つのポイントだったように思います。
アプリとwebの境界線が曖昧になってきている例として、slackがあげられたのも非常に特徴的だったかなと思います。
ElectronやApache Cordovaのような支援サービスが出てきたことによってこの流れは加速していくであろうというような趣旨の話はわかりやすいなと思います。
また、スマートデバイスにおけるECサイト全体の話として、シニア向けのサービスはサービスの付加価値を提案する際の勉強になるということ、運営目線ではなくユーザー目線でサービスを作り、常識やトレンドにとらわれない検証と改善を行うことが大切というのは基本ではありますがこの話の最後として言われていて非常に説得力があるなと思いました。
あと、個人的に勉強になったのがたにぐちさんのアドリブの上手さ。
当日はマイクの音量が高くならなかったり、WiFiに繋がらなくなったりといった機材トラブルがあったわけですが、そこをアドリブでうまくこなしている感じは見ていて惚れ惚れしました。
今回のリクリは参加者が130名ほどいる規模感のあるイベントだったんですが、その人数を前にとっさに機転のきくアドリブで切り抜けるというのは並大抵のことではありませんので。
以下は自分用メモの箇条書きです。
参加してない人には何のこっちゃですが。

• アプリ作成時のKPIの分解という考え方
• 目標設定が重要
• MAUはMonthly Active Userの略。月にいくらアクティブユーザーがいるのかという指標
• DAUはDay Active Userの略。日にいくらアクティブユーザーがいるのかという指標
• RRはRetention Rateの略。定着率を表す指標で予測をする際に重要。
• ネタと運用とデザインを考えて作る
• ターゲッテイング、タイミング、UIの利用率を考えて作る
• RRが上がればDAUが上がり、MAUが上がる。それぞれ上がってサービスの価値が上がる。
• ネタとデザインの妥当性を検証する場合は別案を用意。2軸で検証。
• 一般的に離脱率は30%と言われている
• ECサイトでよくあるデザインのパターン「カルーセル」「バナー」「全画面バナー」「検索窓」「カート(右上)」
• 会員登録のパターン「いつでも」「購入前」「決済時」
• 登録手段のパターン「個人情報の入力」「メール」「SNS」
• メアドを持っていない人向けに、電話番号からのアカウント作成のパターンもある
• 登録を必要としないYahooのスマートログイン
• 入力フォームのパーチェスファネル(消費者の購入までの意識の遷移を図化)の要素「認知」「好意」「検討」「意思優勢」「購入」
• フォームが入力しづらいというのは取りこぼしの元凶
• 入力フォームの必須の表現「アスタリスク」「文字ラベル」「背景色変更」
• 必須のみ入力させる、残りの項目を表示する、入力完了しないと送信ボタンをタップさせない、エラーの表記と移動など、フォーム落ちしないための対策を考える
• 郵便番号と電話番号の表記は「分割」「結合」のいづれか
• チェックボックスとラジオボタンは「オリジナル」「OS準拠」のいづれか
• タップしやすいデザインに

参考URL
入力フォームの最初の項目を入力しやすくするだけでユーザーの直帰は減らせる／15か条の1
今どきの入力フォームはこう書く！ HTMLコーダーが抑えるべきinputタグの書き方まとめ
Chapter 5: Form Entry arrow_back Principles of Mobile App Design: Engage Users an

ミニセッション：プロトタイピングツールとWeb制作（仮）

次のセッションは、たにぐちさんと松田さんが引き続きプロトタイピングツールについて。
開始時に挙手でプロトタイピングツールを利用したことがあるかどうかを聞かれてましたが、今回のセミナー参加者では1割程度ということで、かなり少ない印象でした。
アプリ系のデザインをする場合は何かしら使うものだと思っていたので、かなり少なくて驚いたんですが今回はWebサイトのみを作るデザイナー層がメインだったのかもしれません。
松田さんは「invision」たにぐちさんは「prott」推しでした。
invisionを松田さんが気に入っている点は、「コメントをつけてやり取りのログが残せる」「ライブシェアで簡単に共有できる」という点があり、利用することでお客さんとのやり取りを効率化・明確化できるという点が気に入っているポイントのようです。
プロトタイピングツールをコミュニケーションのためのツール、レビューツールとして活用するという取り組み方は非常に面白いと思いました。
たにぐちさんがprottを気に入ってる点は「動作説明をレビューで伝えるのことができる」ことと「国産なので応援したい」ということでした。
確かにプロトタイピングツールは色々ありますが、機能面だけを考えればそこまで特色があるものというのも難しいと思うので、そういう選び方もいいように思います。
どちらの場合も、プロトタイピングツールに期待している部分は、人が使うものとしての「振る舞い」を確認・共有できるようにするための道具で、関係者を巻き込んでデザインするためのツール、コンセンサスを得るためのツールとしての位置付けとして考えている点が共感できました。

Webフォント最新事情（2016年版）

続いてのセッションは関口浩之さんによるWebフォントのセッション。
ここでも挙手でアンケートがあり、Webフォントを使ったことある人が50%、日本語Webフォントまで使った人だと30%という感じでした。
これも思ってるより少ないなと思いました。
このブログでもFONT PLUSのWebフォントを使っているので、世間一般でももっと使われているようなイメージを勝手に持っていたんですが、実際はそうでもないのかもしれません。
そんなWebフォントですが、導入が進んでいない理由として「遅延」「ちらつき」「文字詰め」「windows」「価格」の5点がネックになることが多いそうなんですが、これらはFONT PLUSではすべて対応が進んでいる状況のようです。
遅延に関しては、現状でサービス開始当初と比較して5倍から10倍くらいの高速化が実現できていて、ちらつきにも対応し、文字詰めもcssで対応する(font-familyに{pm}と追記)ことができており、配信時にユーザーエージェントの判定でフォントを出し分けることでWindows環境でのアンチエイリアスにも対応、価格は10万PVで月額1,000円の価格帯もあるので導入の壁はかなり低くなってきていると思います。
また、Webフォントの新しい利用シーンとしてe-pubで実証実験をしたり、デジタルサイネージやブラウザゲームでの導入など、これまで以上に活発に活動しているようなので、そこらへんも非常に楽しみです。

JUSO Coworkingの紹介+サイボウズLiveの紹介

次のセッションはJUSO Coworkingの深沢幸治郎さんによるサイボウズLiveとJUSO Coworkingの紹介セッション。
サイボウズLiveはユーザー数が245万人を超えてきたそうで、かなり多くなってきたというのが印象です。
僕も何度か使ったことがありますが、最近アップデートをして結構変わったようなので後でどう変わったのか確認しようかなと思います。
面白い特徴として、ガラケーからも確認できる点や完全招待制という点があり、2015年11月から導入されたタイムラインなどは面白そうです。
JUSO Coworkingは深沢さん夫妻が運営するコワーキングスペースで、アットホームな感じのコワーキングスペースです。
僕も以前よく使っていた時期があり(今はふにすWeb相談所をメイン拠点にしているのであまり行けてません…)、すごく居心地がよくておすすめできる場所です。
深沢さん夫妻はかなりコミュニケーション能力が高いので、まだ行ったことがないという人でも安心していけると思います。

Webデザイントレンド

最後のセッションは本日のメインで、イベントタイトルにもなっているデザイントレンド。
原一浩さん、矢野りんさん、坂本邦夫さん、深沢幸治郎さんによる最近のデザインの傾向を読み解く人気セッションです。
僕も何度か聞いたことがあるんですが、今回はスライドの画面の説明やトレンドの定義など、セッションを聞くにあたっての前提の部分を丁寧にされていたのが素晴らしかったです。
このセッションは90分の長丁場なので、一つ一つをきちんと理解するためにもその辺の事前準備がすごく大切なんですよね。
できているのとできていないのでは、理解力に大きな差が出ると思います。
まず最初に函南町という自治体のサイトを脳内リニューアルしてみようという試みがありました。
サイトがどういう感じにリニューアルされるのかを一旦自分で考えてみて、それから実際にリニューアルされたサイトを見て「なぜこうなったんだろう」と考えるというのは非常に面白いと思います。
自治体サイトならではの「ふりがなをつける」「ここだよマップ」など、よく使う要素がどういう使われ方をしているのかを考えるというのも楽しい体験でした。
今回のセッションでは象徴的な出来事として東日本大震災から5年経ったので、その当時行政がどのようにサイトで情報を掲載していたか、今はどうなっているのかという比較をしていました。
やはりというか、緊急性の高い内容になるのでサイトで何を出すのかという点が注目点だったんですが、その中でも特に福島県のやつが特徴的で、トップページが丸ごと震災関連のコンテンツのみで埋まっていました。
原発のこともあって出さないといけない情報が多くあったのでこうなったんだろうなというのは想像に難くないですが、こういう緊急時の情報の取り扱い方は非常に考えさせられます。
デザイントレンドの本編は箇条書きにします。書き出したらすごく長くなりそうなのと(笑)、これは文章で伝えるのは難しいと思いますので。

• 玉ボケからローポリへ。2.3年で陳腐化するのでは？
• パステルマットは女性向けコンテンツでよく取り入れられた。
• パステルマットを男性向けに使用する場合は彩度を落とそう。
• パステルマットな来年の動向はチェックしておく方が良さそう
• 試行錯誤感がすごい「珍バーガーナビ」
• ハンバーガーナビである必要性のなさそうな場合でも導入されている理由はなんだろう
• フルーセル(縦に遷移するページ内ナビ)が増えてきた。
• ファーストビュースプラッシュと「scroll down + icon」
• ホイール付きマウスのアイコンでフルーセルを表現？
• 時代は「コンタクト＆エンゲージ」
• 過去はデザイナー＆コーダーだけだったのが増え、現在ではリーガルとソーシャルなど専門家でチームを組んでいく方向性に。
• 専門性の高い人を仲間に。
• コミュ障とか言ってられない
• 一人でなんでもできる人って、うまく回りとできない人なのでは疑惑
• グローバル企業のリニューアル状況は99/470
• ファンを取り込むという位置付けのサイトが増えている理由とその重要性
• オウンドメディアでの編集者という存在の重要性が増している
• アイコン過多。気持ちはわかる。
• cssflameworkでよく使うFont Awesomeなどを使用するとオリジナル性が無くなるので、オリジナルのアイコンという流れに。
• 上場企業のリニューアル状況は388/3400
• 復活した？グローバルメニューなどで取り入れられるレインボー
• レインボーを使用する際は色面積を減らそう。
• なぜ今？レインボーなのかを考える
• ファーストビュースプラッシュを使うと下にコンテンツがないと思ってしまう？
• 対象ユーザーが投資家向け、IR用とかに多い傾向にある薄幸系サイト
• サイト自体がそもそも見て欲しくないけど必要という場合
• 企業の都合に最適化
• 自治体のリニューアル状況は232/1700
• なぜ自治体を取り扱うかというと、多様な年代層の利用者層という前提なので、普遍的な表現の模索が行われているため。
• 北のほうの自治体は観光系コンテンツが多いという特徴があり、コンテンツはグローバルナビ内に存在する。
• 西のほうの自治体は観光系コンテンツは特設メニューとして作成されている場合が多い。
• 自治体サイトは「やさしい」
• 自治体サイトの風物詩となりつつあるフッター山
• 故郷を連想させるフッター山は自治体ごとに打ち出し方が異なる
• ゆるキャラの明暗を分けたゆるキャラグランプリ
• 人気が出なかったゆるキャラは徐々に存在感を消していき、そして消える。
• 神戸市のサイトで一躍脚光を浴びた「コンシェルジュ」
• グローバルナビを疑う。グローバルナビありきで考えていないか。
• 自治体系特設サイトの方向性「暮らし・行政」「観光」
• 予算のない自治体はFacebookPageを盛んに活用する傾向にある。
• 九州初のものが多い特設サイトのトレンド
• これから一般的になっていくかもしれない「Webの駅」
• タブレットでサイトを作成する時代に。「Adobe Slate」で作られたサイトが出てきた。
• 来年のトレンド予想「手書き」「おなじみのキャラ」「ファンページ」「イラストが主役」

まとめ

デザイントレンドは結構久々に聴いた感じがありますが、さすがに面白いですね。
デザインだけを取り出して考えることっていうのは僕自身は普段そんなにしないので、こういう機会で「デザインとは？」ということを考えるのは非常に楽しいです。
自治体のやさしさへの取り組み姿勢とか、フッター山やゆるキャラのような栄枯盛衰を見て考えるのもネタとしても面白いです。
ただ、今回のセミナーで一番心に残ったのは、矢野りんさんがいった「なんでも1人でできる人とか誰からも必要とされてない」という部分でした。
僕は結構なんでも1人でやってしまう方なので、周りから見たらそういう分類になるのではと考えさせられました。
実際はなんでもできるわけでもないですし、自分が不得意な部分はパートナーさんに依頼するんですが、多分外から見たら「ぼっちでやってる人」とみられている可能性が高いですし、好きな言葉ではないですが「コミュ障」とすら思われているのかもしれませんね。
その辺をきちんと客観的に意識すること、世間の流れがそういう方向にあるということなどを考慮して、今後の活動を考えなおすいいきっかけになりました。
しかしリクリはいつもなぜこんなに面白いんでしょう。
毎回外れないのは本当にすごいなと思います。
主催の小山さん、登壇された皆さん、スタッフの皆さん、参加された皆さんありがとうございました！