CSS Nite Shift12フォローアップ（7）原　一浩さん（グレーティブ）、矢野 りんさん（バイドゥ）

2018年12月22日に都内で開催したCSS Nite Shift12「Webデザイン行く年来る年」として、原　一浩さん（グレーティブ）、矢野 りんさん（バイドゥ）の『Webデザイントレンド』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画

フォローアップ、メッセージ

原さんから

Webデザイントレンドを担当しました原です。
CSS Nite Shift 12にご参加いただきありがとうございました。

僕自身Shift 1からWebデザイントレンドを担当していますので、今年で12年目になります。

ただ、12年もやっておりますと、だんだんと過去の傾向からの引用も増えたりして、ハイコンテキストなセッションとなってしまう場面もあります。今回は、ちょうど今年より構成を刷新したので、フォローアップメールでも改めて、ランキング策定までの流れを書いてみます。

今年からランキングというキャッチーな形式にてトレンドを紹介しています。今までは1年間で多く使われたデザインの傾向に対して名前をつけ、それを各カテゴリーごとに発表していくという形式でした。これはいってみれば定量的な調査で、多く使われたデザインであれば取り上げるという形です。

ただし、この方法だと、翌年に向けた話をするという展開がやりづらく、多く使われた手法ではないけれど、時代の流れを反映しており、明確な根拠を示せるわけではないけど「きざし」を感じさせる傾向についてはこぼれおちてしまっておりました。

今年は、ランキングということで、各出演者の目により頼る形式として、定性的な側面からランキングをお届けしてみました。定性的なランキングですから100人いれば100様な傾向になると思います。なので、本セッションの資料は「あの人はああ言っているけど、自分は…。」みたいな感じで一エビデンス程度に利用して来年について考えてみてください。

僕からは、今回セッション中に紹介したランキングの完全版をここでお届けします。紹介しなかった10位から8位はコメント付きでお届けします。それでは、皆さんよいお年を!

Web デザイントレンドセッション観点の完全版ベスト 10

海外 Web サイト

Rank 10
Euroformat
https://euroformat.com/en
マイクロインタラクションに業種ならではの意味のあるサイトが増えてきました。例えばこのサイトはエレベーターを彷彿とさせるパララックスとなっています。

Rank 9
It Will Glow
https://itwillglow.co.uk
2018 年の今っぽさを感じさせるという点で矢野さんに選出いただいたものの、当日解説できず選外となりました。

Rank 8
iconwerk
https://iconwerk.com
矢野さんはアイコン職人に注目していました。このサイトは、グローバル企業をクライアントとして数多くのアイコンを手がけています。

Rank 7
Clorova
https://clorova.com

Rank 6
hourly, ios app for time tracking
https://hourly-app.com

Rank 5
Festive Folks
https://festivefolks.com

Rank 4
Bond
https://bond.backerkit.com

Rank 3
Teatr Lalka
https://teatrlalka.pl/en

Rank 2
Bates Creative
https://batescreative.com

Rank 1
MIT - Massachusetts Institute of Technology
https://web.mit.edu

グローバル企業

Rank 10
Procter & Gamble Company
https://us.pg.com/
フルーセルという画面全体でカルーセルをするという表現を以前紹介しましたが、このサイトは無限にフルーセルしていきます。

Rank 9
Tyson
https://www.tyson.com/
ジューシーな食品を扱う会社のサイトは、Tasty などに代表されるメルトな表現にリニューアルする傾向が増えました。

Rank 8
America Movil
https://www.americamovil.com/
英語の方がWebフォントのメリットがはっきりする気がします。読みやすかったりわかりやすかったりという矢野さんの評。

Rank 7
State Farm
https://www.statefarm.com/

Rank 6
AutoNation
https://www.autonation.com/

Rank 5
Jardines
https://www.jardines.com/

Rank 4
Groupe Eiffage
https://www.eiffage.fr/

Rank 3
Bayer
https://www.bayer.de/

Rank 2
Sanofi
https://en.sanofi-aventis.com/

Rank 1
Delta
https://www.delta.com

上場企業

Rank 10
栃木銀行
https://www.tochigibank.co.jp/
ネットバンキング推しのナビゲーションをはじめ、様々な仕掛けにて攻めています。

Rank 9
ワタベウェディング
https://www.watabe-wedding.co.jp/
これほどスマホサイトの大きい版としてリニューアルされた上場企業サイトもないのではというほどモバイルファーストが徹底されています。

Rank 8
高田機工株式会社
https://www.takadakiko.com/
このサイトは、非常にオールドスタイルなデザインでずっときていたのですが、一気にリニューアルしました。建築業のサイトが華々しくリニューアルされるという傾向は近年続いています。

Rank 7
フジ日本精糖株式会社
https://www.fnsugar.co.jp/

Rank 6
東和薬品
https://www.towayakuhin.co.jp/

Rank 5
ユニマットライフ
https://www.unimat-life.co.jp/

Rank 4
保土谷化学工業株式会社
https://www.hodogaya.co.jp/

Rank 3
アース製薬
https://www.earth-chem.co.jp/

Rank 2
中央紙器工業株式会社
https://www.mcpack.co.jp/

Rank 1
プリマハム
https://www.primaham.co.jp/

自治体サイト

Rank 10
幸手市
https://www.city.satte.lg.jp/
せっかく中国語が選べるのに、中国国内から開こうとすると Google フォントの API を叩いているだけで二分はかかってしまうという点でいろいろな示唆のあるサイトとなりました。

Rank 9
海老名市
https://www.city.ebina.kanagawa.jp/
神戸市のサイトより広まったコンシェルジュという手法ですが、より一歩前進させた感のあるリニューアルです。

Rank 8
湧水町
https://www.town.yusui.kagoshima.jp/
ついに自治体もトップページのメインイメージエリアとして、ドローンによるフルサイズのビデオを掲載してくるような時代になりました。他にも玄海町でも空撮によるフルビデオがメインムービーとして使われています。

Rank 7
京丹後市
https://www.city.kyotango.lg.jp/

Rank 6
玄海町
https://www.town.genkai.lg.jp/

Rank 5
大和村
https://www.vill.yamato.lg.jp/

Rank 4
三戸町
https://www.town.sannohe.aomori.jp/

Rank 3
伊勢崎市
https://www.city.isesaki.lg.jp/

Rank 2
真岡市
https://www.city.moka.lg.jp/

Rank 1
福山市
https://www.city.fukuyama.hiroshima.jp/

原 一浩 (はらかずひろ)

• Twitter : karad (https://twitter.com/karad)
• Facebook : kazuhirohara (https://www.facebook.com/kazuhirohara)

矢野さんから

Web デザイントレンドを担当しました矢野です。
CSS Nite Shift 12 にご参加いただきありがとうございました。
フォローアップとして矢野が選んだ平成最後のデザイントレンド各カテゴリベスト10を共有します。普段製品開発とプロモーションの両方を現場で手がけている人間なりの視点から、一言解説も追記しています。
自治体編の奄美大島 大和村に使用されていたフォントの種類は「こはるいろサンレイ」でした！
セッション当日ドヤ顔で「レトロ感のある看板文字風」などと解説しましたが、
アニメ「きんいろモザイク」のロゴにある「ハロー！！」の部分からインスパイアされて作られたフォントだそうです！！全然方向性が違いましたね〜〜。
https://fontfree.me/2285?fbclid=IwAR1N0bF4crKZY77N1WoXKzsYRcVvMx5BAbY29xHw2yLWNOm2zW9956-WgLQ

矢野が選んだ平成最後のデザイントレンド各カテゴリベスト10

海外 Web サイト

Rank 10
Bond
https://bond.backerkit.com/
アノニマス系はほんとに流行りました。目を描き入れないのがポイント。

Rank 9
PIND
https://pind.univ-tours.fr/
あっさりパンク！新しいパンクファッションのスタイル。

Rank 8
The Gerald
https://thegerald.com.au/
エフェクトちょうどいい。多すぎるのもうるさいですよね。

Rank 7
TEATR LALKA
https://teatrlalka.pl/en
Cookie確認斬新です。マジメなデザインじゃタップ率は上がりません。

Rank 6
BARREL
https://www.barrelny.com/recap/2017
クリエイティブぶっとんでます。ほとんどアート。

Rank 5
iconwerk
https://iconwerk.com/
アイコン職人という１点突破の業態に脱帽。

Rank 4
ELEVATOR
https://elevatorstrategy.com/
Chromeか！！平均点に収まらない操作性

Rank 3
It Will Glow
https://itwillglow.co.uk/
2018年の今っぽさ。セオリーに沿いながらはみ出す高度なセンス

Rank 2
hourly
https://hourly-app.com/
ブランディングとして斬新。アプリのプロモーションという枠組みから出ている

Rank 1
BASECREATIVE
https://batescreative.com/
ナナメギミック！構図がナナメなだけですが、発想が素敵

グローバル企業

Rank 10
P&G
https://us.pg.com/
こんなにスマホを擦ったことは無い...こんなデザイン提案を超コンシューマ向けのサイト制作で突き通すのもプロです。

Rank 9
america movil
https://www.americamovil.com/
英語の方がWebフォントのメリットがはっきりする気が。Condensed書体使いがポイントですね。

Rank 8
Mcdonalds
https://www.mcdonalds.com/us/en-us.html
全部バナー！文字ほぼなし！理想的だけどスタイリッシュでブランド力のあるバナーの運用は案外コストが高いです。さすが世界屈指の企業。

Rank 7
Renault
https://group.renault.com/en/
矢印の形が目線異動を楽にしてくれます。小さい工夫が光る。

Rank 6
Bayer
https://www.bayer.de/de/homepage.aspx
色がすごい..！これでもまとまる画面に仕上げきるデザイナーの力量を感じます。

Rank 5GM
https://www.gm.com/
下にメニューは大きい画面のスマートフォンでとても便利。今後もっと増えて良い設計。

Rank 4
Autonation
https://www.autonation.com/
ハンバーガーメニューならぬ道路メニュー！！遊び心の極み。

Rank 3
Jardines
https://www.jardines.com/
彩度がうんと高い色は、スマホの繊細な発色にピッタリ。かつ、今のティーンのトレンドにマッチしています。人と同じじゃつまらない！

Rank 2
Royal Mail Group
https://www.royalmailgroup.com/en/
スマホでちょうどいい文字量とはまさにこんなかんじ。でもコピーライティング能力が問われるから簡単じゃないんですよね。

Rank 1
DELTA
https://www.delta.com/
スマホでちょうどいいジャンプ率ー！大きさの差で目の移動を促しています。

上場企業

上場企業
Rank 1
アース製薬
https://www.earth-chem.co.jp/
キャッチーなビジュアルが最初にドーンと来るっていうのは正義ですね..。お金はかかるけど...

Rank 2
プリマハム
https://www.primaham.co.jp/
シズルのある写真で商品商品をしっかり見せるっていうのは大事。そして細部にそっと隠された遊び心の数々に、デザイナーが楽しんで制作したことがわかります。

Rank 3
保土谷化学
https://www.hodogaya.co.jp/
1ページで会社の特徴を説明しきっていて素晴らしい構成力。

Rank 4
中央紙器工業
https://www.mcpack.co.jp/
ァーストビューで端的にコンテンツの説明をして詳しく見るを押させようとするレイアウトとコピーライティングのバランスの取れた感じがすごい！

Rank 5
日本M&Aセンター
https://www.nihon-ma.co.jp/
色の統一感とか文字サイズのコントラストとか、スマホに最適化した構成のサンプルのようです。

Rank 6
東和薬品
https://www.towayakuhin.co.jp/
ジェネリック気になる人にちゃんとターゲティングした内容。ユーザ調査力のあるマーケティングチームが実力を発揮しているデザインです。

Rank 7
栃木銀行
https://www.tochigibank.co.jp/
ネットバンキングのメニューが上に固定する仕様が素晴らしい。スマホWebのUI設計のお手本

Rank 8
CROPS
https://www.crops.ne.jp/
キャンペーン告知のバナーがバンバン出てくる盛りだくさん感が良いですね！

Rank 9
高田機工株式会社
https://www.takadakiko.com/
昨年からのリニューアルぶりがすごい！！

Rank 10
西部電気工業株式会社
https://www.seibu-denki.co.jp/
読み込みがめっちゃ速いんです。やはりスマホサイトで最も大切なのは表示速度....5Gになったらそんなことどうでも良くなるかもですが、今は避けられない工夫だということを忘れずに〜〜

自治体サイト

Rank 1
北海道厚真町
https://www.town.atsuma.lg.jp/
災害情報がスマホに最適化されています。災害時活躍するのはPCではなくどう考えてもスマートフォン。

Rank 2
広島県呉市
https://www.city.kure.lg.jp/
災害版/通常版運用の例

Rank 3栃木県真岡町
https://www.city.moka.lg.jp/
ビジュアルデザインがとても丁寧に作り込まれています。いちごのブランド力を街を上げて作っているという気概を感じます。

Rank 4
鹿児島県湧水町
https://www.town.yusui.kagoshima.jp/
トップページにYoutubeをガッツリ貼っている振り切り感が凄い。また、そのようなサイトが他にあまり見かけないことから上位にプッシュしました！

Rank 5
広島県福山市
https://www.city.fukuyama.hiroshima.jp/
縦バナー！！単に縦に組むだけで、重要なことがより重要に見える効果と、他に類を見ない個性化につながるとは驚かされました。

Rank 6
佐賀県玄海市
https://www.town.genkai.lg.jp/
閑静な田舎町に英語のキャッチコピーというギャップを高く評価します。

Rank 7岐阜県白川町
https://www.town.shirakawa.lg.jp/
白川町よりフッター街のほうが都会！！遊び心が見えるデザイン。

Rank 8青森県三戸町
https://www.town.sannohe.aomori.jp/
IPを全面に使っている！サザエさんや鬼太郎などIPで地域を盛り上げる例は多いですが、ここまで全面的に活用しているのは珍しいかも。親しみやすく物語に共感を求めやすいからかな？

Rank 9
熊本県長洲町
https://www.town.nagasu.lg.jp/
観光情報にラーメン屋や焼肉屋の情報や住所が写真もなくポロっと乗ってるのが面白かったです。

Rank 10
埼玉県幸手市
https://www.city.satte.lg.jp/
中国語が選べます。が、GoogleフォントのAPIを叩いているだけで中国国内から閲覧すると表示までに２分はかかるので注意が必要です。

矢野りん

Twitter : yanorin (https://twitter.com/yanorin)