4kaku design

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

2015年4月11日(土)開催のWCAN 2015 Spring に参加しました。今回は実装からデザイン、キャリアデザインと幅広いトピックが聞けました。個人的に気になった実例や内容をメインにまとめます。


WCAN 2015 Spring


  • Webの表現の今、もうすぐ、そして未来(株式会社ピクセルグリッド小山田晃浩さん)
  • これからのデザイナーに必要なこと - デザインナレッジの共有を目指して -(ザ・マーズナレッジ株式会社 石嶋 未来さん)
  • Webの変化の中で、ワクワクを実装し続け、求められ続ける人材でいつづけるためのスキルについて。(BASE株式会社 藤川真一さん)

Webの表現の今、もうすぐ、そして未来

ヨモツネットの小山田さんのセッションは、ブラウザの進化によって実装が現実味を帯びてきた新しい技術について。SVGもCanvasも、今まではプラスアルファの装飾として考えがちでした。しかし、思っていたよりも現実的な手段として使えることがわかりました。

SVG

シンボルフォントの生成元ファイルとしては身近なSVG。Webサイトのロゴにも使えるイメージはありました。しかし、IE8のサポート終了に伴い、もっと実用性が増すとのことでした。(IE9以降がSVGとCanvas2Dに対応)


Seize Your Power キャプション

Seize Your Power


WWFの化石燃料についての特設サイト。動画コンテンツ以外はほとんどSVGで作られているようです。SVGへのイメージが変わる繊細なアートワークです。


個人的な感動ポイントはJavaScriptフレームワーク「Snap.svg」を利用した2つのベクターのアニメーション。(ご紹介いただいたものと同じものか自信はないんですが)以下のサイトで紹介されているサンプルが面白かったです。


Elastic SVG Elements

Canvas

以前ドットインストールで勉強したときは簡単な図形を描く程度に留まっていたんですが、いまはここまでできるのかとFlashライクな動きに感動。


千葉県木更津市の産婦人科 加藤病院 キャプション

千葉県木更津市の産婦人科 加藤病院


ナビゲーションの画像リンクがとても気持ちいい動きをしています。

SVGとcanvasの使い分けについて

スクリーンサイズが大きいと、Canvasはパフォーマンスが落ちるそうです。対して、SVGはたくさんのオブジェクトがあるときパフォーマンスが落ちるとのこと。そんな悩みを一気に解決するならWebGL。(ただしIE11以降対応)
CanvasはCPUだけを使っているけれど、WebGLはCPUとGPUの両方を使っています。だからこそ処理が早い!

まとめ

今現在Webで一捻りした見せ方をしたいなぁと思うとパララックスを選びがちですが、最新だと思い込んでいたSVGなどの技術も実用性が高まってきていることがわかりました。


これからのデザイナーに必要なこと - デザインナレッジの共有を目指して -


ウープスデザインブログのまめこさんこと石嶋未来さんからは、商業デザイナーとして「伝えるデザイン」をするためのお話。

商業デザイナーは100人中100人に同じ行動をとらせなければならない

「デザインはセンスですか?」という問いから始まったセッション、正解はもちろん「NO」でした。アーティストの製作物には、それを見た人の数だけ解釈があります。しかし、デザイナーがものを作る目的はあくまでビジネス。商品の広告だったら、それを見た人が商品を買いたくなるようにしなければなりません。ついつい色や形などの視覚表現に頼りがちですが、今回の主役は「文章」。

要素の配置のしかたやトーン&マナーといった話題にも触れられましたが、本題は「デザイナーが他の人にデザインをレビューしてもらう重要性とその方法」でした。

伝えるデザインの工夫

デザイン(アウトプット)だけで評価されるのはデザイナーとしてはとても嬉しいことですが、同時にとても難しいことです。手戻りを減らすためにも、制作物を伝えるためのスキルは磨いておいた方が良いと感じました。

たとえば、「ロゴの位置が厳密に真ん中じゃないけどこれでいいの?」と訊かれたら、錯視などの例を出してきちんと意図を伝えなければなりません。他の方に話を聞いても、いざ実装者にお願いしたらきっちりセンター配置にされた話なども多々あるようなので、あらかじめ伝えておく気遣いが必要です。

修正指示の裏側にあるもの

よくある修正で、「◯◯の部分をもっと大きくして!」と言われてしまう場合があります。そもそもなぜその修正が起こるかというと、「情報の優先順位・ニュアンスを間違えている」から。Webサイトを作る我々はWeb制作のプロですが、そのWebサイトで扱う商品やサービスについてのプロフェッショナルはクライアントさん。クライアントさんとデザイナーの情報の擦り合わせができていないから起こる問題です。(これは本当に耳が痛かったです)
よくある「この文字赤く・大きくして!」という指示にも、裏側にはその部分を目立たせたいという意図があります。

また、提出する前に考え直さなければならないのは「デザイナーの趣味・手癖で作った部分はないか?」ということ。たとえば、「なぜ写真を大きくするんですか?」という疑問には「人の視線の動きを考慮して…」などの答えが出せます。制作物を掘り下げて「ここはなぜこうなっているのか?」という疑問を掘り起こさないといけません。

「なんとなく」自分の趣味で作ってしまった部分をなくすためにデザイン意図を言語化すれば、自分に足りないスキルも見えてくるとのこと。たしかに得意な手法は多用しがちなので納得です。

ノンデザイナーがデザインについての議論をするために重要なのは「デザインを考える順番」

「制作の目的」をきちんと伝えて、それを達成できているかを評価してもらうためのポイントをご紹介いただきました。この手のミーティングはついついWebサイト全体の話題にまで発展しがちですが、デザインから脱線しないためにもアジェンダ(検討課題の一覧)は重要だそうです。

デザインを評価してもらうために

  • アジェンダを用意する
  • 前提条件(クライアントや案件について)を伝える
  • 話題をずらしすぎない
  • 取捨選択の権利はレビューされる側のデザイナーにある

「このデザインどうですかね?」とふわっとした訊き方をすれば、返す方もふわっとした好みや印象でしか話せなくなりがちです。「◯◯という製品の特徴を表現できていますか?」というイエスかノーかで答えられる質問に落とし込めば、たしかにセンスに自信がなくても評価をレビューができます。

Webの変化の中で、ワクワクを実装し続け、求められ続ける人材でいつづけるためのスキルについて。

ネットショップを簡単に作成できるWebサービス「BASE(ベイス)」を開発されているえふしんさんこと藤川真一さんのお話。長くWebの世界に携わってきたえふしんさんから見たWeb制作者の勉強に対する姿勢についてのお話が印象に残っています。(話題が多岐に渡ったので、聴く人のキャリアによって印象が大きく変わりそうですね)

Webにおけるワクワクとはなにか?

ワクワクというと「なんとなく楽しいもの」というイメージがありましたが、それは自分のワクワクの場合。お客さまにワクワクを提供すれば立派なビジネスになります。

かつてはWebサイトを持つだけで「ワクワク」につながっていましたが、今では使用者も制作者も増えて「ワクワク」が「日用品」になっています。これは「普及すると単価が下がる法則」ともご紹介されていました。供給が大きくなればライバルも増えますが、普及することによってユーザー側からの裾野が広がり、市場自体が大きくなってお仕事も増えたならそれはそれでありとのこと。

精神的価値は意外と無視できない

年代ごとのマーケティングのお話をされていたのがとても印象的でした。藤川さんは40代ということで、ベビーブーム世代です。「だから自分たちがマーケティングの中心にいると思っていたんですよね」という言葉通り、たしかにそれくらいの世代は人数が多い。しかし、音楽や趣味嗜好の分野で自分たちにドンピシャなコンテンツが他世代に刺さらないということがとても強烈な印象があったそうです。

Twitterのフィロソフィーを例に

システムやサービスを提供していると、クライアントさんからの要望によって機能が追加されたりするのはよくあります。もちろんそれでよくなるケースも多々ありますが、サービスそのものの精神がぶれてしまうくらいなら今のスタイルを守ることも大切だと感じました。Twitterが140文字を守っていることが代表的な例ですね。

次のワクワクは何だろう?

えふしんさんが話題に出されていたのは、やっぱりというか「Apple Watch」。正直どんなものなのかイマイチ実感できていなかったのですが、Apple watchはブラウザ、iPhoneはサーバーという考え方をするとピンと来ました。同じことをiPhoneでもできるけれど、Apple Watchならもっとスピーディーに欲望を叶えられそうなので、ニッチな需要に対応するのがApple Watchの狙い目なのかなぁと感じました。

実装を学ぶことの重要性

余談ですが、冒頭にご紹介いただいたBASE(とてもデザインファースト!)のデザイナーさんの職域の広さに驚きました。オールラウンダーを求めると人を探すのが大変なんじゃないかと思いましたが、デザイナーが良いUIを作るためには(新人さんは特に)一通り勉強する必要があるのは納得でした。(Swiftの勉強をさぼってしまっているので反省です…)

おまけ・司会をやってみての反省

勉強会の感想は以上です。ここからは司会をやってみての反省と覚え書き。

一番重要だと感じたポイントは、スライド配布の有無を冒頭できちんと伝えること。登壇者がスライドを出しながら話をするタイプの勉強会に参加したことのある方はぴんとくると思いますが、後日スライドの配布があれば、スライドの内容自体のメモよりも所感や余談を書き留めることに専念できます。(自分は結構細かくメモを取るタイプなので特にこれ重要です)
WCANの聴き手としての経験を活かして、よりセッションが聴きやすくなるような進行をしたいと思いました。

そんなWCAN、次回は2014年7月11日(土)です。詳細はWCAN公式サイトへ!