創業の地 名古屋で開催されるWCAN 2016 Springに、Webデザイントレンドがやってきます | designudge | storyWCAN 2016 Springで単独セッションとWebデザイントレンドに出演します | 大阪のフォルトゥナCSS NITEで人気のコーナー「Webデザイントレンド」が、名古屋で初開催でした!感想坂本さんのセッションでは、マルチデバイスの時代に最適な配色の考え方やトレンドを指南いただきました。矢野さんのセッションでは、GooglePlayStoreのストア画像での試みを例に、ある目的(戦略)の中でデザインをどうつくるのか、その実践過程を丁寧に紹介いただきました。そして、デザイントレンドのセッション。そもそもトレンドとは何か、トレンドから何を学ぶのかといったところから丁寧に入り、登壇者がセレクトしたWebサイトを事例にその変化を追いました。バラエティ的なノリで楽しく、具体例が豊富で説得力がありました。共通していたのは、デザイン(表現)は何か目的を達成するための手段であるということ。他の人のデザイン視点や思考プロセスを聞けるのは貴重な機会だったので、良いと思ったところをしっかり取り入れていきたいです。各セッションで印象的だったこと2016年 Web配色のイロハフォルトゥナ 坂本 邦夫さんによるセッション。配色の傾向(トレンド)について 色の数は少なくなってきている傾向があり、スマホなど端末画面が小型化してきたことが一因 読みにくいものを作るより、情報の伝わりやすさを重視した配色の方が大事! 外でスマホで見ることを考慮して、コントラストは高くなってきている配色の役割について Webサイト内の配色はサイトに訪問した人が見るもので、サイトへの流入を促すものではない 流入を考えるなら、OGP画像やアプリアイコンなどの方が大事で、そこで配色が活かせる配色手法について Webの配色は、「ロゴ・写真・トーン展開」の組み合わせが主流になってきている 「基本配色パレット5〜11色」は元々インテリアの配色手法で、マルチデバイスには不向き 色は大まかに11色に分類でき、各色が連想イメージと連想されるモノを持っているので検討・説明材料にする いい意味・悪い意味を把握して使うことで、きちんと「こういう悪い意味で伝わる可能性もある」ということをクライアントに伝えて吟味できる アクセシビリティ規格は満たすべし少ない色数を、色の意味を吟味して使いましょうWebで主要な各サービスのテキストカラー表(pc、スマホ)グラフィックでDL数を稼ぐ方法バイドゥ株式会社 矢野りんさんによるセッション。アプリをダウンロードしてもらうためにできること ランキング上位に載るようにがんばる ストア内検索の最適化(キーワード:顔文字、着せ替えなど) アプリ詳細ページ内の「ストア画像」(アプリの紹介画像)の最適化どうしたらランキング上位に載るのか 色々ネットで推測されている(Google検索みたいなもの。ダウンロード数だけではなく、Googleの“ユーザーに有益なコンテンツを作る”という方針に遵守する必要がある) ユーザーニーズにフォーカスし、自然流入のダウンロード効率を上げることで、“結果的に”ランキング上位になり得る ダウンロードしてもらえるかどうか、最後の宣伝チャンスがストア画像クリエイティブ(表現)のコツ 「つよい言葉」(=キャッチコピー)で構成をつくろう! キャッチコピー、15~30文字くらいで グローバル展開しているなら別だが、日本の場合はキャッチコピーで説明した方が「ウケる」(〜〜ダウンロード達成!など。楽天的なアレ) 必ず実機でチェックしよう! A4チラシ作ってるノリでストア画像作ると、実機で見たときにめちゃくちゃ小さくなる 全画面表示はほとんどされない!小さなサムネイル画像のときに見やすいサイズ感でつくること PCで見たときに見切れないように、上部に重要なコピーは寄せる 他者からのレビューを受けよう! 訴求ポイントが理解できるかどうか、そのアプリらしさがあるか、よりよくできるところがあるか等 制作者以外の人の意見は、消費者目線に一番近いWebデザイントレンド2016春の陣 in Nagoya先の登壇者お二人に、Greative.GK 原一浩さんを加えた3名で進行したセッション。トレンドとは最先端ではない。時代に最適化されつつある現象であるどのようにWebデザインが変遷してきたのかを追うことで、どんな課題にどう先人たちが対処してきたのかを学ぶことができるどんな歴史のもとに今のWebデザインがあるのかを知れば、これから先のWebデザインの変化を予測するヒントとなり、実務にも活かせる2015〜2016海外サイト・グローバル企業サイト編 表現周り フラットな装飾表現の変化 玉ボケからローポリへ… パステルマット…画像の背景がパステル調でテキストが載せやすい。2016年のパントーンカラー2色もパステル感 機能周り 珍バーガーナビ…賛否あるハンバーガーナビのBad事例 フルーセル…画面全体(フルサイズ)なカルーセル。工夫しないと下へスクロールできることがわかりづらい ファーストビュースプラッシュ…ぱっと見ファーストビューで完結しているのに、下へスクロールできるページ(問題点はフルーセルと同じ) ホイール付きアイコン普及…下にスクロールできることを示すアイコンとして広まってきている オウンドメディア乱立 アイコン多過2015〜2016国内企業サイト編 レインボーナビ復活2015~2016国内自治体サイト編 フッター山…フッターに山のイメージが置かれている(地域ブランディングのためか。そこしか地域らしさを出せるところがなかったのか…) ゆるキャラ…一時は主役として扱われることが多かったが、今は… コンシェルジュ…話題になった神戸市のサイト。他の自治体サイトでも似た機能が見られる Webの駅…自治体が持ってる特設のコミュニティポータルサイト。ネーミングがいい感じ※文字だけ読んでも全然ピンとこないと思うので、ぜひ参加しましょう!まとめデザインに関する具体的な話が、いろんな角度で聞けてよかったです。ありがとうございました。