CSS Nite LP66「デザイントレンド特別版」

Web デザイントレンド［特別版］

Image :https://www.pexels.com/photo/backlit-bright-clouds-cloudscape-355508/

出演

坂本邦夫

矢野りん

原 一浩

!

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

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

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

グローバル500企業編 ( 400 サイトより )原の目!

日本の上場企業編 ( 3400 サイトより )※ リニューアルされたものを中心にピックアップ

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

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

これから来そうな予感がするスタイル!

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

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

ランキング基準!原の観点- よく使われている傾向をカテゴリ分けし、トピック順!

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

坂本の観点- 読みやすさ・使いやすさと新しいデザインがそのサイトに合っていると感じたものを中心“トレンドとは最先端ではない時代に最適化されつつある現象である”

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

世界の大学

グローバル500

海外サイト編

上場企業

Top 10 trends

10 4➡

Top 10 trends

10先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

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

����

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

����

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

����

Top 10 trends

9先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

複雑なハンバーガーナビ�������������

����複雑なハンバーガーナビ�������������

����複雑なハンバーガーナビ�������������

����チャットのデザインにも注目

複雑なハンバーガーナビ�������������

����

Top 10 trends

8先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

ヒーローナビパネル�����������������

ヒーローナビパネル�����������������

Top 10 trends

7

先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

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

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

����

Top 10 trends

6

先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

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

����

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

����

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

����

Top 10 trends

5先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

ロシアでは、アイソメが今年も元気���������
��������

他の事例

フランスのアイソメと比べてみよう�����������������

Top 10 trends

4

先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

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

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

Top 10 trends3

先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

空気感のエフェクト�������������

����

Top 10 trends2

先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

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

����

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

����

Top 10 trends

1

先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

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

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

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

����

海外Web

世界の大学

グローバル500

世界の大学編上場企業

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

アメリカの大学を中心に 1,889 サイトをリサーチ!

アメリカでは大学 (ユニバーシティ & カレッジ) が4,000 校以上存在する!

リスト自体は 20,000 ほどある

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

SNS発信を独自のデザインで!

I AM A...

!

VR (的な演出でキャンパスを紹介)!

数字で攻める!

ファーストビューに動画!

フッターにコンバージョンへの一言!

アクセシビリティツール

Top 10 trends

10 4➡

Top 10 trends

10先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

SNS運用数がえらい������
�������

����

SNS運用数がえらい������
�������

����

他の事例

TwitterとInstagramのデザインを分ける�������������

����

TwitterとInstagramのデザインを分ける�������������

����

新着情報としてのInstagram�������������

����

新着情報としてのInstagram�������������

����

Top 10 trends

9先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

I AM�����������������I AM�������������

����

他の事例

控えめな I AM�����������������控えめな I AM�����������������

フォーム型の I AM�������������

����フォーム型の I AM�����������������

Top 10 trends

8先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

タブ(?)

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

����

タブ(?)

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

����

タブ(?)

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

����

Top 10 trends

7

先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

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

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

����

他の事例

装飾が目立つ数値

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

����装飾が目立つ数値

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

����シンプルな数値表現�������������

����シンプルな数値表現�������������

����

Top 10 trends

6

先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

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

����

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

����

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

����

もう一つのベンチマーク

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

����

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

����

Top 10 trends

5

先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

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

����

他の事例

最初は背景画像を表示�������������

����

Top 10 trends

4

先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

注目のグロナビとアクセシビリティツール

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

����グローバルナビゲーションに注目������
�������

����

右下の車椅子マークは?

グローバルナビゲーションに注目������
�������

����

Top 10 trends3

先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

構成を割り切る������
�������

����構成を割り切る�������������

����

Top 10 trends2

先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

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

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

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

����

Top 10 trends

1

先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

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

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

����

海外大学Webサイトデザイントレンドまとめ!

日本においても UI の定形化が進んでいるが、海外 (アメリカ) でも定形化は進んでいる!

日本が大学のカラーを主体にするのに対して、地域のカラーを押し出すサイトも多く見られる!

全てを作らず、専用のツールを導入することも多い!

ユーザーにして欲しいことを明確にしている矢野の目2019年中旬からinstagramがいいね非表示テストを開始
Facebookもいいね非表示を検討※いいね非表示＝投稿者以外はいいね数が見えなくなる状態

いいね非表示のねらい• 投稿者へのプレッシャーを軽減• インフルエンサー水増し問題への対応• SNS離れの防止

学 性 所
歴 別 得Community Appの急成長

Discord（US）
Soul（上海）

YoutubeもThey just wanna have a communication…

海外Web

世界の大学

グローバル500

上場企業

グローバル500企業編

グローバル企業サイトのリニューアル数 2019!"#$$

Top 6 trends

6 1➡

Top 6 trends

6先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

安心感��������������

安心感��������������

ちょっと、ハンバーガーナビをみてみる安心感����������

����

Top 6 trends

5先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

読み応えのある記事が豊富�������
�������読み応えのある記事が豊富�������
�������Top 6 trends

4先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

明るくなる�������
���

����

明るくなる�������
�������明るくなる�������
���

����

明るくなる�������
���

����

Top 6 trends3

先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

グローバル展開のときのメインイメージ����������

����グローバル展開のときのメインイメージ����������

����

Top 6 trends2先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

線画マップ����������

����

線画マップ��������������

線画マップ����������

����

他の事例

線画マップ����������

����

線画マップ����������

����

Top 6 trends

1

先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

SPA化は進むか?

����������

����

坂本の目

海外Web

世界の大学

グローバル500

上場企業編

上場企業

上場企業サイトのリニューアル数 2019

#%%

&#$$

Top 10 trends

10 4➡

Top 10 trends

10

先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

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

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

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

����

Top 10 trends

9先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

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

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

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

����

Top 10 trends

8

先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

ターゲット別スプラッシュページの影響��������������

����ターゲット別スプラッシュページの影響�������
�������

����ターゲット別スプラッシュページの影響�������
�������

����

Top 10 trends

7

先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

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

����

Top 10 trends

6

先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

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

����

波残し

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

����

波残し

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

����

Top 10 trends

5

先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

ブランド感を推し進めたリニューアル��������������

����ブランド感を推し進めたリニューアル��������������

����ブランド感を推し進めたリニューアル��������������

����

Top 10 trends

4

先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

下付きヘッダーの行方�������
�������

����

Top 10 trends3

先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

日本式ハンバーガナビ

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

����

日本式ハンバーガナビ

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

����

Top 10 trends2

先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

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

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

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

����

Top 10 trends

1

先進度 ★ ★ ★
普及度 ★ ★ ★
注目度 ★ ★ ★

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

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

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

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

����

海外Web

世界の大学

グローバル500

まとめ上場企業

斜め上のカテゴリのトレンドを取り込もう

Content is notking anymore.

腹八分目のアニメーション

CSS Nite LP66「デザイントレンド特別版」

Web デザイントレンド［特別版］

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

Image :https://www.pexels.com/photo/backlit-bright-clouds-cloudscape-355508/