WEB業界のメジャーイベント「CSS?Nite」では、年末恒例企画として「Webデザイン行く年来る年」を実施していますが、昨年（2015年）は12月26日に開催。本当に暮れも押し迫った、しかも土曜日というタイミングで、もう仕事納めも終わった後…という方も多かったようですが、登壇者も聴講者も多数参加。WEBデザインに対する熱いハートが感じられました。
今回はその中から、事業者側の方にも参考になりそうなトピックスをピックアップしてご紹介。有料セミナーのため、やや概要的な紹介にとどめますが、ポイントを掴んで、今年のサイト制作の参考にしていただければと思います。
デザイントレンドいろいろ
まずは、デザインセッションで紹介された様々なデザイントレンドを、フラッシュ形式でご紹介していきます。海外のものが中心に紹介されていました。
ハンバーガーのかたちのハンバーガーナビ
センションの前ふりとして、アメリカのこんなサイトの紹介から始まりました。左上に注目してください。スマホでよくみられる通称「ハンバーガーナビ」が、本当にハンバーガーの形になっています。海外ではこんな感じのハンバーガーショップのサイトが多く出現しているそうです。日本国内では未確認のようですが、こうした遊び心もデザインには必要だという話でした。
http://www.huxtaburger.com.au/
微妙に崩れた、これもデザイン？
ちょっとズレたような感じのこんなデザインも紹介されていました。たぶん多くの人が「崩れているから、直して」と言いそうですが、（恐らく）意図的に崩しているのだろう、との話でした。その背景にはインターネットにつながる機器が増えて閲覧環境も盛りだくさんな今、「どうせ崩れるんだから、いっそのことそれをデザインにしちゃえ、という思い切りがあるのではないか」という考察がされていました。グリッドデザインというかっちり目のデザインが多いのですが、あえてそれに縛られないというやり方もあるという事例です。
フラットデザインに似合う立体デザイン、「ローポリ」
ローポリとはローポリゴンの略で、少ないポリゴン（角）数で形作られた3Dのこと。これ事態は新しい手法ではありませんが、フラットデザインの流行を背景に、それに合う立体表現として静かなブームがあるようです。イベント後、日本の事例を探してみたところ、左のようなサイトがありました。
中間色で画像を引きたたせる「パステルマット」
「パステルマット」というレンドも紹介されました。淡い中間色を画像の背景に敷く手法で、対象を印象的に見せるテクニックとして使われるということでした（但し、微妙なところもあるので、流行だからと飛びつくとこわいパターンかも…という声もありました）。これについては、適切なサイト例が見つからなかったので、参考にディスプレイデザインの写真でご紹介します。
http://www.nishi-d.co.jp/case/genre/restaurant/002272.html
キャプションを縦にいれる「縦書きラベル」
実際にも使えそうなのが、この「縦書きラベル」。写真や図のキャプションを横書きではなく縦に配置するというものです。目を引きやすく、画像の上下に文字が置きにくい時などにも便利だと説明されていました。左の画像は「縦書きWeb普及委員会」からのサイトの一部のため、キャプションというには文字数が多いですが、受ける印象が違うということは分かっていただけると思います。
ちなみに、このイベントで出た話ではありませんが、あるサイトで、キャプションを上に置いた場合と下に置いた場合でA/Bテストを行ったところ、上に置いたパターンの方が効果が高かったという話を聞いたことがあります。キャプションは写真の下に横書き…という既成概念を持ちがちですが、縦書きも含め配置の仕方でどう効果が変わるかを検証してみるのもいいかもしれません。
これらの他にも様々なサイトが次々と紹介され、デザインは実際のサイト上にあるということを、強く実感できました。
トレンドとは、時代に最適化されつつあるもの
なお、このセッションでは、最初に「トレンドとは最先端のものではなく、時代に最適化されつつあるものだ」という説明がされたのが印象的でした。
例えば、2015年によく見られたデザインとして、左の例のようにメニューにカラフルな色を使った「レインボーナビ」がありますが、これはインターネット初期のよく見られたデザインパターン。どちらかと言うと長らく「ダサい」と切り捨てられてきたものです。それが時間を経て、またトレンドとなっていく…ということで、それも面白い現象だと思いました。
その他のセッションからランダムに…
ここからはデザインセッション以外のセッションから、幾つかの話題をピックアップしていきます。
デザインプロセスを軸に
基調講演は、「2015年のデザインキーワード」についてでしたが、テーマは“パクる”“真似する”というもの。“パクる“といえば、2015年にはオリンピックエンブレムのデザインに関する騒ぎがありましたが、話はその件についてではなく、デザインのプロセスでは何かを参考にしたり学んだりすることも大事という趣旨でした。そして
- デザインプロセスを共有することで、制作過程でさまざま意見が取り入れられよいものが生まれてくる。
- デザインプロセスを可視化することで、課題発見や効率化ができる。また、デザイナーとクライアントに信頼が生まれてくる
という未来志向の話でまとめられました。
ブラウザ環境の変化に注意
マークアップセッションは、主に制作者側の技術的な話でしたが、意外に多くの時間が割かれたのがこれからの対応ブラウザについてでした。
マイクロソフトのポリシー変更により、使っているOSに対応した最新のIEのみがサポート対象になるということで、既に2015年中に多くの企業サイトが推奨環境の変更を告知しています。今後IEについては9以上を対象とすることになりますが、IE9はシェアの少ないVistaに対応した最新ブラウザのため、そこも切り捨ててIE11のみを対象にするところも多いそうです。
またWindows10に合わせた新ブラウザ「Edge」の登場もIE離れを加速。セッション中には、MicrosoftからEdgeを推奨する声が上がる一幕もありました。
参考「Internet?Explorer?サポートポリシー変更の重要なお知らせ」https://www.microsoft.com/ja-jp/windows/lifecycle/iesupport/
アクセシビリティの大切さを実感
アクセシビリティのセッションでは「WAI-ARIA」が大きく取り上げられました。WAI-ARIAというのはアクセシビリティに対応した仕様のことですが、ふだんはなかなか実感がわかない部分。そこで、このイベントでは、実際にスクリーンリーダー（音声リーダー）がどのようにコンテンツを読み上げるかの比較デモが行われました。
普通のHTMLでの記述の場合、基本的なページならスラスラ読み上げられるものの、タブやダイアログといった動きの付いたものになるとたちまち訳の分からない読み上げ方になります。ところが、WAI-ARIAに準拠した記述の場合は、それらのページでも理解しやすい読み上げになるということを、自分の耳で聞くことができました。
WEBアクセシビリティについては、2015年に書籍も多く発行され、各地でセミナーやイベントも開催され盛り上がってきているとのこと。2016年には関連する法律も施行されるということで、さらに重要性が増しそうですが、時流ということだけではなく、「全ての人がWEBを快適に使えるように」という考えで、アクセシビリティを意識したWEBサイトが広まってくるといいな、と思います。
スマートデバイスで使いやすいフォームのポイント
スマートデバイスのセッションは、登壇者による調査と分析により、ECサイトの入力フォーム大賞を決定するという展開。2015年末には米Amazonでクリスマスの売上の7割以上がスマホなどからだったというのに象徴されるように、もはやECでもスマホが主流。そこで、最適化された入力フォームの検証をしながら、大賞を決定しようというものです。
大賞はある大手総合通販会社のフォームでした。必須項目の入力部分の色分けや、必須項目がすべて入力されるまで送信ボタンがアクティブにならないなどの細かな点まで配慮され、よくできているのが好印象だったようです。
EFO（エントリーフォームの最適化）はPCサイト時代からの手法ですが、スマートデバイスではそれに加えて独自の要素を考慮していく必要があり、主な重要項目には以下の様なものが挙げられていました。
- フリック入力のしやすさがポイント。
- 入力項目は必要なものだけに絞る。
- システム側の都合による入力のさせ方は避ける
（郵便番号をハイフン前後で別々に入力させるなど）。 - 入力ステップを明示する。
- タップできる場所かどうかを分かりやすく。
イベントについては以下のページでご覧ください。
「Shift9：Webデザイン行く年来る年（CSS?Nite?LP43）」http://cssnite.jp/lp/shift9/
今回のまとめ
デザインイベントということに加え、年末という空気感も手伝ってか、かなりほんわかとしたイベントでしたが、様々な学びがありました。そんな中から、以上、主なポイントをご紹介しました。制作者寄りの話になるため詳しく紹介しませんでしたが、2016年には制作のワークフローの変化などもやって来そうです。これらはやがて、発注者のみなさんにも影響するようになるかもしれません。
また、セッション中には、「最近クライアントから効果についての話も多く出て、KPIなどの用語を使う機会も増えた」というような話もありました。WEBデザインでも、見た目ではなく効果、感覚ではなくデータ重視の傾向が広まって来ているということでしょうか。
＜関連記事＞今年はこうなる！2016年のWEBデザイン、5つのトレンドを大胆予想！https://www.m-hand.info/blog/9099/
＜PR＞WEBに関する情報をまとめたキュレーションサイトSeleQt（セレキュト）http://www.seleqt.net/
