CSS Nite Shift13「ウェブデザイン行く時代来る時代」

Web デザイントレンド

Image : https://www.pexels.com/photo/selective-focus-photography-of-christmas-baubles-with-string-lights-752536/

矢野りん

原 一浩

!

本セッション内での発言は 個人的な見解であり所属する団体とは無関係となります本セッションの構成!

海外Webデザイン編 ( 3000 サイトより )!

世界の大学編 ( 1800 サイトより )矢野の目!

日本の上場企業編 ( 3400 サイトより )原の目!

日本の自治体編 ( 1700 サイトより )※ リニューアルされたものを中心にピックアップ

ランキングの作成について!

今年、多く使われたデザイン!

これから来そうな予感がするトレンド!

ワイドスクリーン中心、スマホ中心で分けてチェック!原と矢野、それぞれランキングを作成して合成

好きなサイトランキングではありません!

ランキング基準!原の観点- よく使われている傾向をカテゴリ分けし、その中から見ておいた方がいい順!

矢野の観点- 情報整理と使いやすさ、そして新規性の観点から優れていると感じたサイトにチェック- チェックリストをランキング化

“トレンドとは最先端ではない時代に最適化されつつある現象である”

キャプチャスライドの見かた海外Web

世界の大学

上場企業

自治体

海外サイト編Top 7 trends

7 4➡

Top 7 trends

7

チャットの普及���������
����

����

チャットの普及���������
����

����

Top 7 trends6波のようにメニュー�������������

����波のようにメニュー�������������

����

Top 7 trends

5

Webﬂow�������������

����

Webﬂow���������
����

����

Webﬂow�������������

����

Top 7 trends

4トーンの統一大事�������������

����トーンの統一大事�������������

����

Top 7 trends

3アウトラインテキスト�������������

����アウトラインテキスト�������������

����アウトラインテキスト�������������

����

Top 7 trends

2エクステンド / ワイド系、アウトラインと合わせて�����������������

エクステンド / ワイド系、アウトラインと合わせて�������������

����

Top 7 trends

1トレンド全部入り�����������������

トレンド全部入り�������������

����トレンド全部入り�������������

����

海外Web

世界の大学

上場企業

自治体

世界の大学編今年から海外の大学サイト編を開始!

グローバル企業はお休み!

今回はアメリカの大学を中心に1800程リサーチ

海外大学Webサイトの特徴まとめ!

SNSをガッツリ利用!

ターゲット属性に合わせたナビゲーション!

キャンパスの風景をリアルに紹介!

数値でみせる!

フォーマルさTop 7 trends

7 4➡

Top 7 trends

7VR������
�������

����

VR������
�������

����

VR������
�������

����

VR�������������

����

Top 7 trends6

タブ(?)

�������������

����

タブ(?)

�������������

����

タブ(?)

�������������

����

Top 7 trends

5数字で攻める�����������������

数字で攻める�������������

����

Top 7 trends

4まとめ方のベンチマークに�������������

����

まとめ方のベンチマークに�������������

����

まとめ方のベンチマークに�������������

����

Top 7 trends

3

大きく動画を見せる�������������

����

Top 7 trends

2ユーザーのニーズを把握�������������

����ユーザーのニーズを把握�������������

����ユーザーのニーズを把握�������������

����

Top 7 trends

1

大学リサーチを経て、再掲�������������

����

大学リサーチを経て、再掲�������������

����

矢野の目2019年中旬、instagramがいいね非表示テストを開始
テスト結果を評価後、Facebookもいいね非表示の検討に入る※いいね非表示＝投稿者以外はいいね数が見えなくなる状態

いいね数アゲアゲ

トラフィック爆上げ

コンテンツ価値爆上げ

完
トラフィック爆上げCommunity Appの急成長

Discord（US）
Soul（上海）

YoutubeもThey just wanna have a communication…

海外Web

世界の大学上場企業上場企業編

自治体

上場企業サイトのリニューアル数 2018!""#!$$

Top 7 trends

7 4➡

Top 7 trends

7更新情報は別ページ��������������

����更新情報は別ページ��������������

����更新情報は別ページ�������
�������

����

Top 7 trends

6トレンドとバランス�������
�������

����トレンドとバランス�������
�������

����トレンドとバランス�������
�������

����

Top 7 trends

5イアイに斜体の明朝������������������イアイに斜体の明朝�������
�������

����

Top 7 trends

4

波残し

��������������

����

波残し�������
�������

����

波残し�������
�������

����

Top 7 trends

3

日本式ハンバーガナビ

��������������

����

日本式ハンバーガナビ

��������������

����

Top 7 trends

2自己紹介がコンパクトでうまい��������������

����自己紹介がコンパクトでうまい��������������

����自己紹介がコンパクトでうまい������������������

自己紹介がコンパクトでうまい��������������

����

Top 7 trends

1

充実のメガメニュー��������������

����充実のメガメニュー��������������

����充実のメガメニュー��������������

����

原の目

緊急情報

2019

昨年の原の目「緊急情報2018」今年は台風の当たり年
緊急情報も多く掲載された

昨年とりあげた災害情報のトレンドは緊急モードと、シンプルモード

緊急モード����������������

����緊急モード����������������

����

今年目立ったのは計画的にデザインされたスタイル

緊急情報2018に続いて2019の話

����������������

����

緊急情報2018に続いて2019の話

����������������

����

支援情報など
未来をみすえた情報も緊急情報2018に続いて2019の話

����������������

����

素晴らしかったのは
木更津市

災害情報2019ベスト������
����������

����災害情報2019ベスト������
����������

����

上場企業はほとんど緊急情報なし

いくつか、きちんと対応しているところもあった

会社がどういう影響を受けたのか掲載��������������

����

おしまい

海外Web

世界の大学

上場企業

自治体編

自治体

自治体サイトのリニューアル数 2019%&&%&$$

Top 7 trends

7 4➡

Top 7 trends

7

隠れキャラ����������������

����

隠れキャラ����������������

����

隠れキャラ��������������������

隠れキャラ����������������

����

Top 7 trends

6

地域ブランディングの新しいアプローチ����������������

����地域ブランディングの新しいアプローチ������
����������

����地域ブランディングの新しいアプローチ����������������

����

Top 7 trends

5俯瞰図ブランディング����������������

����俯瞰図ブランディング����������������

����

Top 7 trends

4

ナビゲーションタイル

����������������

����ナビゲーションタイル

����������������

����ナビゲーションタイル

������
����������

����

Top 7 trends3クリエイティブエージェンシーとのコラボ����������������

����クリエイティブエージェンシーとのコラボ����������������

����クリエイティブエージェンシーとのコラボ����������������

����クリエイティブエージェンシーとのコラボ����������������

����

Top 7 trends

2ナイスラベリング��������������������

ナイスラベリング����������������

����ナイスラベリング����������������

����

Top 7 trends

1

工夫のデパート����������������

����

工夫のデパート����������������

����

工夫のデパート����������������

����

工夫のデパート����������������

����

海外Web

世界の大学

上場企業

まとめ自治体工夫が花ひらくContent is notking anymore.

CSS Nite Shift13「ウェブデザイン行く時代来る時代」

Web デザイントレンド

ありがとうございました!!

Image : https://www.pexels.com/photo/selective-focus-photography-of-christmas-baubles-with-string-lights-752536/