WEB部ログ

WEB部メンバーの勉強用ブログです。

WEB部メンバーの勉強用ブログです。

WCAN 2016 Springに参加しました①

こんにちは、佐々木です。

4月23日に開催された「WCAN 2016 Spring」に参加させていただきました。
今回も資料収集の方法や配色など、様々なことを学ぶことができました。
また、先輩方がライトニングトークでお話ししていたのも、とても印象に残っています。
私も堂々と大勢の人の前で話せるようになりたいです。

多くを学んだ今回のWCANのなかから、セッション3について書かせていただきます。

 

Webデザイントレンド 2016 春の陣 in Nagoya

f:id:web_bu:20160503125244j:plain

原一浩さん、矢野りんさん、坂本邦夫さんのお三方に、2015年から2016年にかけてグローバル企業や上場企業、地方自治体などのサイトで行ったデザインリサーチの結果についてお話ししていただきました。

「トレンド」とは最先端ではなくその時代に最適化されつつあるもの、のことです。

 

2015年から2016年上半期までの全体の傾向

  • 安心と穏やか
  • フラットデザイン
  • 色は華やかに

 

海外デザイン

玉ボケからローポリへ

玉ボケ…画像に玉がぼけてる感じに浮かんでいるようにする手法

ローポリ…何かを重ねてカクカクしたモザイクにしたように見える手法

海外サイトを中心にローポリが流行しています。今回のWCANのバナーなどもローポリでした。

ローポリの作り方はとても簡単で、画像とフィルターを用意し、その二つを合わせて透過度を上げたものをもとの画像に重ねるだけです。

かっこいいイメージを作りたいときに効果的な手法だなと思いました。

 

パステルマット

パステルマット…背景がパステル調の画像

ちょっと前までは女性向けのグッズサイトなどでよく見られましたが、最近では男性向けの彩度を落とした渋めのパステル調も広く使われているようです。

参考サイト:A Splash Of ColorHelbak CeramicsTerritory Dog Collection

 

2016年春のトレンドカラーもパステル!

Pantoneという企業が選んだ2016年のトレンドカラーは「ローズクォーツ」と「セレニティ」という淡いピンクとブルーの組み合わせです。
2色合わせて使用するのがトレンドのようですが、使いどころに迷いそうです。

 

珍バーガーナビ

メニューを表示させるために使われるハンバーガーナビが、グローバルナビゲーションの一つに含まれていたりと、変わった使われ方をしているサイトがあるそうです。私はこういった珍バーガーナビを見たことがなかったので驚きました。

 

「下へ」はホイールアイコン

ホイールアイコン…ページが下に続いていることをユーザーに分かってもらえるようなマウスの形をしたアイコン

ページが続いていることが分かりづらい「ルーセル」(カルーセルが画面全体)や「ファーストビュースプラッシュ」(ファーストビューが全て画像)のようなスクリーンで覆いつくされている系のサイトでよく用いられています。

個人的にはホイールアイコンが登場する以前によく用いられていた方法として紹介されていた、下向き矢印のアイコンが好きです。

f:id:web_bu:20160503141721p:plain

 

グローバル企業

オウンドメディア

オウンドメディア…消費者に興味を持ってもらえるよう、企業から消費者へ発信するメディア

50文字以上でないとSEO上ではじかれてしまうため、おもしろい長文が書けるオウンドメディアの形で、価値のあるコンテンツを作るようになったそうです。

私がオウンドメディアと聞いて思いついたのはLIGさんです。
たしかに、記事を読んでいるとその企業自体にも興味がわいてきます。

 

大量アイコン

アイコンはユーザにとっても便利なものですが、多すぎるとかえって混乱させることにもなります。
特にグローバル企業はコンテンツがたくさんあるので、少しユーザ的にはきついかもしれません。最高で7つが適切です。

例としてあげられたサイトのアイコンの多さにはとても驚きました。

f:id:web_bu:20160503165407p:plain

 

上場企業

かえってきたレインボーナビ

レインボーナビでは、サービスやカテゴリーごとに色を分けるといったパターンがありますが、カテゴリー分けをしていないサイトもあるようです。

レインボーナビの代表格、楽天では、色が一周してまた戻ってきています。

セブン&アイ・ホールディングスでは、自社のブランドカラーを用いてレインボー風にデザインしています。
七色よりもなじみのあるカラーで素敵ですね。

ただ、トレンドとしてはもう終わってしまっているそうです。

 

薄幸系デザイン

薄幸系デザインの特徴は、「文字が小さく、色がうすい」「余白が広め」「PC版とスマートフォン版が同じ表示」です。

訪問者への面白みはあまりありませんが、株主に向けて必要な情報が発信されるようなっており、企業の都合に最適化されたデザインだといえます。

参考サイト:株式会社ベルーナカネヨウ株式会社ダイヤモンド電機株式会社

 

ルーセルや薄幸系デザインなど、知らない知識が盛りだくさんでした。

また、海外デザイン編で多くトレンドの手法を話されたことから、海外のサイトを見ていくことの大切さを感じました。