読者です 読者をやめる 読者になる 読者になる

LOGzeudon

名古屋で働いているWebデザイナーのブログです

WCAN 2016 Springに参加してきました

イベント・勉強会レポート

WCAN 2016 SPRING

WCANに参加したレポート記事です。あのWeb業界では有名なイベント「Webデザイントレンド」が、名古屋で初めて開催されました!

イベントについて

wcan.jp

名古屋でWeb関係のイベントといえばWCAN。4回目の参加です。
今回、コードの話はほとんど無く「デザイン」が中心の回でした。

名古屋開催への主催者の想いを、登壇者の一人、原一浩さんが記事にされています。

designudge.org

感想

WCAN 2016 SPRINGの会場

坂本さんのセッションでは、マルチデバイスの時代に最適な配色の考え方やトレンドを指南いただきました。

矢野さんのセッションでは、GooglePlayStoreのストア画像での試みを例に、ある目的(戦略)の中でデザインをどうつくるのか、その実践過程を丁寧に紹介いただきました。

そして、デザイントレンドのセッション。そもそもトレンドとは何か、トレンドから何を学ぶのかといったところから丁寧に入り、登壇者がセレクトしたWebサイトを事例にその変化を追いました。バラエティ的なノリで楽しく、具体例が豊富で説得力がありました。

共通していたのは、デザイン(表現)は何か目的を達成するための手段であるということ。
他の人のデザイン視点や思考プロセスを聞けるのは貴重な機会だったので、良いと思ったところをしっかり取り入れていきたいです。

各セッションで印象的だったこと

個人的なチョイスでピックアップして箇条書きにしています。

2016年 Web配色のイロハ

2016年 Web配色のイロハ|フォルトゥナ 坂本 邦夫さん

フォルトゥナ 坂本 邦夫さんによるセッション。

  • 配色の傾向(トレンド)について
    • 色の数は少なくなってきている傾向があり、スマホなど端末画面が小型化してきたことが一因
    • 読みにくいものを作るより、情報の伝わりやすさを重視した配色の方が大事!
    • 外でスマホで見ることを考慮して、コントラストは高くなってきている
  • 配色の役割について
    • Webサイト内の配色はサイトに訪問した人が見るもので、サイトへの流入を促すものではない
    • 流入を考えるなら、OGP画像やアプリアイコンなどの方が大事で、そこで配色が活かせる
  • 配色手法について
    • Webの配色は、「ロゴ・写真・トーン展開」の組み合わせが主流になってきている
    • 「基本配色パレット5〜11色」は元々インテリアの配色手法で、マルチデバイスには不向き
    • 色は大まかに11色に分類でき、各色が連想イメージと連想されるモノを持っているので検討・説明材料にする
    • いい意味・悪い意味を把握して使うことで、きちんと「こういう悪い意味で伝わる可能性もある」ということをクライアントに伝えて吟味できる
    • アクセシビリティ規格は満たすべし
  • 少ない色数を、色の意味を吟味して使いましょう
  • Webで主要な各サービスのテキストカラー表(pc、スマホ)

グラフィックでDL数を稼ぐ方法

グラフィックでDL数を稼ぐ方法|バイドゥ株式会社 矢野りんさん

バイドゥ株式会社 矢野りんさんによるセッション。

  • アプリをダウンロードしてもらうためにできること
    • ランキング上位に載るようにがんばる
    • ストア内検索の最適化(キーワード:顔文字、着せ替えなど)
    • アプリ詳細ページ内の「ストア画像」(アプリの紹介画像)の最適化
  • どうしたらランキング上位に載るのか
    • 色々ネットで推測されている(Google検索みたいなもの。ダウンロード数だけではなく、Googleの“ユーザーに有益なコンテンツを作る”という方針に遵守する必要がある)
    • ユーザーニーズにフォーカスし、自然流入のダウンロード効率を上げることで、“結果的に”ランキング上位になり得る
    • ダウンロードしてもらえるかどうか、最後の宣伝チャンスがストア画像
  • クリエイティブ(表現)のコツ
    • 「つよい言葉」(=キャッチコピー)で構成をつくろう!
      • キャッチコピー、15~30文字くらいで
      • グローバル展開しているなら別だが、日本の場合はキャッチコピーで説明した方が「ウケる」(〜〜ダウンロード達成!など。楽天的なアレ)
    • 必ず実機でチェックしよう!
      • A4チラシ作ってるノリでストア画像作ると、実機で見たときにめちゃくちゃ小さくなる
      • 全画面表示はほとんどされない!小さなサムネイル画像のときに見やすいサイズ感でつくること
      • PCで見たときに見切れないように、上部に重要なコピーは寄せる
    • 他者からのレビューを受けよう!
      • 訴求ポイントが理解できるかどうか、そのアプリらしさがあるか、よりよくできるところがあるか等
      • 制作者以外の人の意見は、消費者目線に一番近い

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

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

先の登壇者お二人に、Greative.GK 原一浩さんを加えた3名で進行したセッション。

  • トレンドとは最先端ではない。時代に最適化されつつある現象である
  • どのようにWebデザインが変遷してきたのかを追うことで、どんな課題にどう先人たちが対処してきたのかを学ぶことができる
  • どんな歴史のもとに今のWebデザインがあるのかを知れば、これから先のWebデザインの変化を予測するヒントとなり、実務にも活かせる
  • 2015〜2016海外サイト・グローバル企業サイト編
    • 表現周り
      • フラットな装飾表現の変化 玉ボケからローポリへ…
      • パステルマット…画像の背景がパステル調でテキストが載せやすい。2016年のパントーンカラー2色もパステル感
    • 機能周り
      • 珍バーガーナビ…賛否あるハンバーガーナビのBad事例
      • フルーセル…画面全体(フルサイズ)なカルーセル。工夫しないと下へスクロールできることがわかりづらい
      • ファーストビュースプラッシュ…ぱっと見ファーストビューで完結しているのに、下へスクロールできるページ(問題点はフルーセルと同じ)
      • ホイール付きアイコン普及…下にスクロールできることを示すアイコンとして広まってきている
    • オウンドメディア乱立
    • アイコン多過
  • 2015〜2016国内企業サイト編
    • レインボーナビ復活
  • 2015~2016国内自治体サイト編
    • フッター山…フッターに山のイメージが置かれている(地域ブランディングのためか。そこしか地域らしさを出せるところがなかったのか…)
    • ゆるキャラ…一時は主役として扱われることが多かったが、今は…
    • コンシェルジュ…話題になった神戸市のサイト。他の自治体サイトでも似た機能が見られる
    • Webの駅…自治体が持ってる特設のコミュニティポータルサイト。ネーミングがいい感じ

※文字だけ読んでも全然ピンとこないと思うので、ぜひ参加しましょう!

まとめ

デザインに関する具体的な話が、いろんな角度で聞けてよかったです。ありがとうございました。

(c) rokuzeudon