4kaku design

マーケティングを勉強しているWebデザイナーのノート

2016年4月23日(土)開催の「WCAN 2016 Spring」に参加しました。今回は配色やグラフィック、Webサイトに見るデザインのトレンドを追ったデザイナー向けの内容でした。


目次



ライトニングトークやりました


ライトニングトークの5分間をいただいて、この春デザイナーになった方・勉強を始めた方に向けてデザインの集め方・使い方をご提案しました。自分の脳みそから出てくるものだけでは早々に行き詰まるはずなので、ストックは大切です。



Webデザインの収集なら「hypershoot」はおすすめです。


Session-1「2016年 Web配色のイロハ」


1つめのセッションは、フォルトゥナの坂本 邦夫さん。Webサイト「基礎からわかるホームページの配色」では勉強させていただいてます。

最近のホットトピック「色数の減少」

最近のいちばん気になる傾向は「色数が減った」ことだと坂本さん。スマートフォンが主流になり、端末が小さくなっているのが原因です。このお話で意外だった(かつ来週から対応しなくちゃと慌てた)のが、定番のベースカラー・アクセントカラー・サブカラーの配色パレットがスマートフォン向きではないということです。

たしかに、スマートフォンサイトを作っていて、このパレット通りのバランスで1画面に収まることはまずありません。ここで坂本さんが提案されているのは「ロゴ+写真+トーン展開」という新しい配色パレットでした。

今はOGP画像がデザイナーの腕の見せどころ

以前は検索エンジンで来た人を「追い返さない」のがデザインでした。ところが、Facebookからの流入が増えてOGP画像の存在感が増しました。「訪問される前にデザインをみてもらえる」という今までになかったチャンスといえます。デザイナーの腕の見せどころはちょこっと移動しただけでまだまだたくさんあると感じました。


Session-2「グラフィックでDL数を稼ぐ方法」


バイドゥ株式会社 矢野りんさんに、「Simeji」のGoogle Play向け画像を作成し、実際に出た結果をお話いただきました。

アプリのCVで想像以上に重要なアプリストアの画像

ストアは「消費者との最後の接点にして、確実に製品をダウンロードしてもらえる」ところ。テレビCMやマス広告をいくら打っても、ダウンロードしてもらえるかは最後の最後のアプリストア用画像(ストア画像)だそうです。ご紹介いただいたGoogle Playのアプリランキングの評価要素は推測だそうですが、評価軸としては納得でした。Webサイトでも訪れてもらっておしまい、というわけではないのとよく似ています。

クリエイティブは戦略ありき

「なんのために、どのように、作るのか」ということをチーム全体が理解していないといけないのがアプリストア戦略だそうです。これはそのままWebサイト制作にも言えることですね。

クリエイティブのポイント

Webデザインというよりは、バナーを作るときに気をつけるべきポイントとよく似ていました。つい見た目(色やフォント)にとらわれすぎてしまうので反省です。アタリ画像だからといって、大切なキャッチコピーが入るテキストに「アタリ」と書くのはやめます。(最近はもうあんまりやらないんですが、忙しいとたまにやってしまうので)

「つよい言葉」で構成を作る

最初に決めるのは色でもフォントでもなく、「キャッチコピー」というのは意外でした。アプリストアは数枚の画像(8枚くらい?)を載せられるんですが、ストイックに画像を載せていくだけでは初見のお客さんに機能が伝わらない。というわけで、アプリのキャプチャのなかに機能名や伝えたいテキストを載っけるべきとのことでした。

「バランス悪い」ほど字は大きく

読み飛ばしたときにひとかたまりで理解できる文字数が25文字程度だそうです。少ない文字を有効活用するためにも、(文字が大事なのは当然として)グラフィックで伝えられるところは伝えていくしかないのかなーと思いました。

必ず実機でチェックする

グラフィックデザイナーの意外な落とし穴だと思ったのが、この「実機確認」でした。印刷物(A4サイズなど)のデザインに慣れたデザイナーが気をつけなければならないのが、「作っているときのサイズ感で仕上げてはいけない」とのこと。Photoshop上で見たときには十分な文字サイズだったのに、実機で見ると意外と小さくて目立たないということはWebでもよくあります。デバイスによる画像の見切れも考慮すると、大切な文字情報は「大きく」「上の方に配置」することが大切だと学びました。

他の人に見せてがっかりするのが大事

制作が佳境になるとついつい他の人に意見を聞くのが億劫になりがちなんですが、Webでもアプリでも営業さんやエンジニアさんの意見を聞くのは大切です。「なんかこれ好きじゃない」というふんわりした意見でも、消費者目線には間違いありませんからがんばって掘り下げてみましょう。


Session-3「Webデザイントレンド2016春の陣 in Nagoya」


3つ目は座談会スタイルで、坂本さん、矢野さん、グレーティブ合同会社の原 一浩さんのデザイントレンドについてのセッションでした。一昨年・東京のShift8で拝見した「Webデザイントレンド」を久しぶりに観られて、以前(デザイナー1年目)よりも話についていけるようになっていたことが個人的に感慨深かったです。内容盛りだくさんなので、刺さったことをメモ程度に。

全体の傾向

全体的な傾向は「安心とおだやか」ということで、フラットデザインの派生が多く見られました。カラフルだけどおだやかでパステルトーンなサイトはたしかによく見かけます。

自治体のWebサイト

  • 自治体はサイト名(=市町村名)にふりがなやローマ字。たしかに読めない町名多いですよね。
  • 災害などの緊急時のWebサイトは「いかにトラフィック軽減と運用の対策をあらかじめしておくか」
  • 自治体は近くの市町村をベンチマークにするので、1つのサイトで目新しいものが取り入れられると周辺にも波及する。
  • フッターに山のイラストがあるとなんだか落ち着くけど、あんまり凝ったイラストが載っていると(他人事ながら)予算配分が心配になる。
  • 検索窓を押し出したサイトが増えてきた。(コンシェルジュスタイル)
  • Webの駅(コミュニティーポータルサイト)という命名が素敵。

あんまり縁のない分野ですが、コーポレートと違うトレンドがあるので前回も楽しかった自治体サイト編。お役所の受付で質問をするという体験をWebサイトのUXに落とし込むと検索窓になるのかなあという印象です。

海外サイト

  • ランディングページ型の大きくメインビジュアルを見せるサイトの「下にもコンテンツがありますよ」アピールに矢印だけでなくホイールつきマウスのアイコンが使われるように。
  • 以前はコーダーとデザイナーだけでなんとかなっていたWebデザイン、現在はマーケティング担当やソーシャル担当、法務の専門家も絡んでくる。
  • DiorのサイトはPinterestっぽい。ブランドサイトというよりはオウンドメディア。
  • アイコンは便利だけど、増やしすぎる(チャンク数の7を超える場合)とかえって理解しづらそう。

国内上場企業サイト

  • レインボーナビゲーションが10年ぶりのカムバック。項目が多いとレインボーが2周する。(楽天セブンアンドアイが好例)
  • 色でコンテンツの区別をしているわけではない。

薄幸系デザイン

坂本さんが「薄幸系サイト」と称して、文字が小さめ薄めで余白が大きいサイトを取り上げました。コーポレートサイトには企業のすべての情報が載っていて、重要なものほど明確な動線が確保されていると思いがちです。しかし、ECサイトなどのほかの物販ルートがあれば必ずしもそうではないというのは目からウロコでした。

まとめ

今回はデザイナー向けということで、明日から使えるテクニックや最新情報が色々仕入れられました。ただ、全編通して見映えだけ頑張って作っていればいい時代は終わったんだなーという印象です。それなりの(せめて叩き台になる程度の)キャッチコピーを書けるようになるのが直近の課題になりました。