CSS Nite Shift13フォローアップ（8）「デザイントレンド」セッション

2019年12月21日に浅草橋ヒューリックホールで開催したCSS Nite Shift13「ウェブデザイン行く時代来る時代」のフォローアップとして、原　一浩さん（カンソクインダストリーズ）、矢野 りんさん（バイドゥ）の『Webデザイントレンド』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画

このセッションは、CSS Niteベスト・セッション2019において、ベスト・セッション（次点）に選出されました。

フォローアップ

原のフォローアップ

>CSS Nite Shift13のWebデザイントレンドセッションにご参加ありがとうございました。

今回も昨年と同様、原と矢野それぞれでトレンド要チェックランキングをベスト10まで用意し、それをベスト7にまとめたものを発表しました。昨年はランキング形式はじめてということもあり慣れない部分もあったかと思いますが、改善を進めてバランスのとれたセッションを目指しました。アンケートで寄せられた様々なご意見については、今後のセッションをよりよくしていくために利用したいと思います。

フォローアップとして、ベスト7位以外のランキングについて共有すると共に、アンケートで質問が多かったランキングの産出形式について回答します。年末年始の思索の種としてお使いください。また、スライドについてですが、引用元を明記いただければお仕事の際のプレゼンやリサーチ結果にお使いいただいて構いません（もしうまくいったらこっそり教えてください）。

原のトレンドランキングベスト10

※ 選外のものについては、軽くコメントを付記してあります。

世界のWebデザイン

• 1位 : Sally https://new.drivesally.com/
• 2位 : Webkey https://webkey.cc/
• 3位 : Starface https://starface.world/
• 4位 : The Goonies https://the-goonies.webflow.io/
• 5位 : AccessElite https://accesselitenow.com/
• 6位 : WinShape https://camps.winshape.org/
  • よく使われているドット柄
• 7位 : Consider　https://consider.co/
  • パステキストの例。これはSVGで実装
• 8位 : Future London Academy https://bauhaus.futurelondonacademy.com/
  • PWA (Progressive Web Apps)。このサイトをChromeで見るとアドレスバーに(+)マークが出る
• 9位 : Intacts https://www.intactsoftware.com/
  • ダークモードテイスト
• 10位 : ACCM https://accm.ie/
  • 海外のフッター山のダイナミックさについて

世界の大学 (アメリカ編)

• 1位 : MIT https://web.mit.edu/
• 2位 : Wittenberg University https://www.wittenberg.edu/
• 3位 : Saint Lawrence University https://www.stlawu.edu/
• 4位 : The College of Saint Rose https://www.strose.edu/
• 5位 : Central Methodist University https://centralmethodist.edu/
  • IAM、ターゲット別ナビゲーションのスタイル
• 6位 : Fontbonne University http://fontbonne.edu/
  • 充実のアクセシビリティツール
• 7位 : Washington and Jefferson College http://washjeff.edu/
  • フッターに一言キャッチコピーあり。こういうコピーがフッターにあるケースが多い
• 8位 : Berkeley University of California http://berkeley.edu/
  • こちらもYaleと同様ベンチマーク指標
• 9位 : University of California http://universityofcalifornia.edu/
  • カルフォルニアという土地柄っぽいデザイン
• 10位 : Kansas City University of Medicine and Biosciences http://kcumb.edu/
  • イアイの採用スタイル

上場企業サイト

• 1位 : ダイドードリンコ株式会社 https://www.dydo.co.jp/
• 2位 : オーデリック株式会社 https://www.odelic.co.jp/
• 3位 : 株式会社パルコ http://www.parco.co.jp/parco/
• 4位 : 東亜石油株式会社 https://www.toaoil.co.jp/
  • ロゴに沿ったデザイン展開
• 5位 : ダイハツ工業株式会社 https://www.daihatsu.co.jp/top.htm
  • ターゲット別スプラッシュ
• 6位 : 株式会社イオンファンタジー http://www.fantasy.co.jp/
  • 数字で見るスタイル
• 7位 : 株式会社シード https://www.seed.co.jp/
  • ダブル新着情報
• 8位 : 日本信号株式会社 http://www.signal.co.jp/
  • グロナビが平積み
• 9位 : パイオニア株式会社 http://www.pioneer.co.jp/
  • フッターナビにタブ
• 10位 : 日本調剤 http://www.nicho.co.jp/
  • 丁寧さ重視のサイト事例

自治体

• 1位 : 甲斐市 https://www.city.kai.yamanashi.jp/
• 2位 : 北上市 https://www.city.kitakami.iwate.jp/
• 3位 : 朝日町 https://www.town.asahi.yamagata.jp/
• 4位 : 五霞町 https://www.town.goka.lg.jp/
• 5位 : 坂戸市 https://www.city.sakado.lg.jp/
  • 前年までファーストビュースプラッシュを採用していたが、取りやめた
• 6位 : 前橋市 http://www.city.maebashi.gunma.jp/
  • 市長の部屋の場所について
• 7位 : 草津市 http://www.city.kusatsu.shiga.jp/
  • 観光コンテンツがページ中央部に出張
• 8位 : 宍粟市 http://www.city.shiso.lg.jp/
  • インフォグラフィック
• 9位 : 大府市 http://www.city.obu.aichi.jp/
  • くらしのナビの見直し
• 10位 : 半田市 http://www.city.handa.lg.jp/
  • 緻密な仕事系のデザインが一変

どういう方法でランキングを作っているの？

つづいて、ランキングの作成方式について。

Webデザイントレンドセッションはサイトのキャプチャやクローリングを行っている原が全体的なサイトチェックをするところから始まります。僕は長年Webサイトのクローラーとキャプチャ、そしてチェックを行うツールを作り続けており、選者となる矢野さん（や、その他のゲストの皆さん）には、そのツールにログインしていろいろなチェックやランキングを実施していただいています。

カテゴリー分け形式からランキング形式に移行してからは以下のような流れでランキングを作っています。作り方はかなりアナログですが、ランキングというフレームワークを使うことで、あまり多くの採用事例はないけど紹介するべきみたいなケースを紹介することができるようになりました。

1. 原がまず一次チェック。リニューアルしているものしていないものを振り分ける、また海外デザインであればある程度のクオリティに沿って仕分け
2. 各自、気になった傾向を持っていたり、何かピンときたものなどにチェックをいれる（そういう機能がツールにはあります）
3. これを何度か繰り返して絞り込みをする。この時点でもまだ全体像はぼんやりとしか見えていないものの、フィルタリングを繰り返したりするごとに多く使われているデザインの傾向が見えてくる
4. デザインのカテゴリ分けをし、そのカテゴリの中でも特徴が際立ったものを抽出してランキングに加える
5. ベスト30くらいになってきたら、より細かくサイトをチェックして順位を作っていく
6. ベスト10まで絞り込んだら各自のランキングは完成
7. 更に原によってランキングはマージされ、当日の朝打ち合わせをして最終確定

フォローアップは以上となります。

Webデザイントレンドは前年と比べることで今年の変化を感じるタイプのセッションです。もしご都合があえば、来年もまたShiftでお会いできますと幸いです。

矢野のフォローアップ

CSS Nite Shift13のWebデザイントレンドセッションにご参加ありがとうございました。矢野からはフォローアップとしてグローバルの若年層で高い支持を得ているサービスと、選外ながらインパクトの強かったWebサイトをご紹介します。

今年話題だったサービス

Soul

https://www.soulapp.cn/

上海生まれの「リアルで会わない出会い系」。ソウルメイトと引き合わせてくれるという壮大な用途をかかげています。日本では似たコンセプトで「ひま部」というサービスがありましたが、ミスマッチ（援助交際を希望する中年層）などを防止する手段が見出せず2019年12月31日にサービスを終了しました。

Discord

https://discordapp.com/

各ユーザにサーバを割り当て、そのサーバに友達を勧誘するという斬新な基本設計の音声チャットサービス。誰かが立てたサーバで遊ぶという前提はマインクラフトのおかげで最近の若年層にとってはなじみがあるようです。若年層はDiscordでボイスチャットすることを「ディスコでボイチャする」などと言います。

Zenly（ゼンリー）

https://zen.ly/home

リアルな友達同士の交流ツールです。『友達同士で一番よく送られているメッセージって「いまどこ？」なんだって。Zenlyを使えば、もうそんなメッセージ送る必要ないよ！

#bestfriendsonly 』という紹介文の高校生に絶大な支持を得る位置共有アプリ。若い人はMapsを開いてジオコードを共有することすらめんどくさいのですね。コミュニティアプリとは異なりますが今年注目されたサービスです。

ぜひ見ていただきたい選外のサイト

Alban Mezino氏の自己紹介

https://albanmezino.fr/

フリーランスのデベロッパーの自己紹介です。かなり砕けた内容ですが、自分の立ち位置や価値観を素直に強く表明している点が印象的です。

tobaccodock イベント紹介サイト

https://www.tobaccodocklondon.com/

問い合わせへのリンク先を常にfooterにFIXさせているところなど、デザインセオリーにとらわれずにイベントの想定参加者の課題をよく見ているところが素晴らしいです。

メールクライアントアプリの紹介ページ

https://www.juicymail.co/

昨年なら静止画像でもそれなりに製品説明サイトの体裁はつくろえましたが、デモを動画で見せなければ全く伝わらない時代になりました。svgでフレームを作り、中にvimeoにアップした動画をはめ込んでモーショングラフィックっぽく見せているところも良い演出。

以上、セオリーにとらわれずにどこまで工夫ができるのか。まさに「独自の工夫」こそ次のトレンドであると言えそうです。