2016年6月18日(土)開催のCSS Nite LP46「ビジュアル・ドリブンのデザイン」を聴講しました。「なるほどデザイン」の筒井さん・関口さんのセッションが一番のお目当てだったんですが、全編通して感動したり反省したりと楽しいセミナーでした。以下、自分のための備忘録です。
もくじ
- わずかな工夫で劇的に変わるデザインの対話術 長谷川恭久さん
- 築城10年、落城3日。 こだわりあるWebデザイン、やるからには本気で良いものを! 中川直樹さん
- クリエイティブ・ディレクション 〜リアルダメ出しから発掘するデザインのヒント〜 李優未さん
- エディトリアルとウェブ、コンテンツファーストでつながるビジュアルドリブン 筒井美希さん、関口裕さん
- スマホアプリにおけるUIのトレンドと、動的デザインの重要性 〜テクニカルクリエイターが担うサービス開発の今後〜 佐藤洋介さん
- Webデザイントレンド2016年（半期決算）原一浩さん
- PVを稼ぐグラフィックの作り方 矢野りんさん
- Webデザイナーにはオススメのセミナーでした
わずかな工夫で劇的に変わるデザインの対話術 長谷川恭久さん
デザイナーにとって「話せる」ことは「作れる」ことと同じくらい大切
なぜなら、作ったもののことを一番わかっているから。（ここを怠ると後から不本意な修正依頼が飛んでくる） デザイナーの伝える力が話題になるとよく出てくる「良いモノは見れば理解できる」という論調があんまり好きではないので、「迷信です！」と言い切られて痛快でした。
01. 批評のフレームワーク
「批評」＝批判ではない、という前提で以下のような批判のためのフレームワークをご紹介いただきました。伝え方としても尋ね方としても使えそうです。
- デザインの目的は何か？
- 目的に関係したデザイン要素はどこか？
- その要素は目的を達成するための効果的な方法か？
- なぜそう思うのか？
02. 自信をもって接する
作り手としては、デザインには正解がないので自信満々！ということは正直あんまりありません。しかし、自信のなさが透けて見えると良いことはないので、「〜〜だと思います」という言い方から「〜〜です」と言い切れるようになるのが大切。
03. ツアーガイドから卒業する
ツアーガイドとは、Webデザインの「見たままをそのまま説明している」こと。制作者同士なら技術やトレンドの話はとても楽しいんですが、お客さまにとってはピンときません。そのサイトがどういう効果をもたらすか、どんな調査に基づいているかを話せれば、ツアーガイドから卒業できます。
デザイナーがデザイナーの知識や観点を前提に話をしていると、その他の分野の人に「デザインって面倒くさい」「わかりにくい」と思われてしまう、という話にひやっとしました。（個人的には、どこかのロゴコンペの話が脳裏をよぎりました……）
理解してもらえるからこそ、ビジネスとして成立する
「同業者以外の方へ伝える」「一緒に考える」姿勢を身につけることで、ビジネスとして成立する（＝お金がもらえる）というのは、今後のわかりやすい課題になりました。
築城10年、落城3日。
こだわりあるWebデザイン、やるからには本気で良いものを! 中川直樹さん
プロに頼むのは、最小限の予算で最大限の効果を得たいから
Webデザイナーにとってデザインをすることはビジネスです。仕事を頼むクライアントは「最小限の予算で最大限の効果が得たい」からプロに依頼しています。それを前提に、お金をもらうプロとして必要な能力が提示されました。
衣装を施すセンスとテクニック（あって当たり前！） + 情報設計 行動設計 ブランドへの理解力
デザイン・ディペロップの手法
un-T Factoryさんでは、依頼が来た際に以下のようなことを行うそうです。
- ブランド定義（ブランド・パーソナリティ）の確認
- イメージの共通言語化（イメージボードの作成）
- サイト・パーソナリティの設定
○○と思われている（＝現状）と△△と思われたい（＝戦略）を調査し、△△に入る内容を分解して、それを達成するための具体的な施策にまで落とし込むための工程だそうです。
ディスカッションは資料をザッピング
un-Tさんの打ち合わせの手法が面白かったです。書店を併設している書籍持ち込みOKのカフェで「△△らしい」本や資料をかき集めて、キーワードに沿ったイメージボードを作成するそうです。目指す方向が見える化できて、デザインの方向性が目でわかるようになりそうですね。これで目指すところが固まれば、土壇場でひっくり返ることはないでしょう。
「デザインは真似っこから始まる」というのはデザイナーとしてはとても心強い言葉でした。
デザインの良し悪しの基準ができれば、手戻りを減らす
一緒に考える・目に見えるカタチにする、ということは関係者の納得をもとに進むので、あとあとの手戻りが減ります。
- クライアントと制作側がイメージ共有できる
- 理念や方向性をビジュアルで明確化できる
- 社内外にアイデンティティを伝達できる
リ・デザインの取り組み
制作プロダクションとしてのクオリティ維持のために、過去にやった制作案件を何年か経ってから作り直してみるというプロジェクトをやっていらっしゃるそうです。お問い合わせフォームのリ・デザインは見ていて興味深かったです。
セッションの最後に言われた「信頼を失うには3日あれば十分」という言葉がぐさっと来たので、丁寧な仕事と頭を回し続ける必要性を強く感じました。
クリエイティブ・ディレクション
〜リアルダメ出しから発掘するデザインのヒント〜 李優未さん
死んだデザインと生きたデザインの見分け方
現在進行形で使われているWebサイトと、それ以外の見分け方について。Webサイトをパッと見で「しばらく更新されてなさそう」「古そう」と感じることはあっても、その感想がどこからくるかを考えたことはなかったので新鮮でした。（もちろん、古い＝悪いではない）
- 活発に更新されているか
- メインの情報が30秒くらいで探せるか（軸となるコンテンツ、アクセス、連絡先、費用など）
- リピーターを生み出せるか
- インパクトがあるか
- コンテンツが明確になっているか
良いWebデザインの基準は、「パッと見でわかる」かどうか
- ビジュアルデザインは、30秒以内に判断される
- 目的（ゴール）が明確になっているか
- しつこいツメで完成度UP
しつこいデザインはクオリティアップにつながります。（しつこいと異性ウケはいまいちですが、クライアントにはモテるそうです）
ダメ出しのポイント
良いデザインのためには、良いダメ出しが必要です。デザイナーとしては、提出前にこのポイントをもとに振り返って、あんまりダメ出しを食らわないようにしたいです。（私だったらノーガードで「これダサいよ」なんて言われたら心が折れるので…）
- ぱっと見の印象を直感で判断する
- ファーストビューから、レイアウトのバランス、写真、配色、タイポグラフィなどのプロポーションをチェック
- 完成度アップのために1ピクセルまでチェック
しっかり改善したら、ヒートマップなどを使った評価も忘れずに、とのことでした。ダメ出しは直感的でも、評価や裏付けはロジカルなのが興味深かったです。
デザイン後のダメ出しはクライアントの力も借りる
ブラウザ上でデザインを確認できるようにしても、全部見てくれるお客さまはめったにいません。なので、リーグラフィーさんでは全ページをスマートフォンサイズで印刷して持ち込むそうです。そこで、制作者だけでは気づけない修正点が見つかったり、自分ゴトとして認識してもらえるようになります。たしかに、パッと付箋を貼って指摘できたほうが指摘のハードルも低くなりそうです。
ダメ出しには、隠れたヒントが詰まっている
ふんわりしたダメ出しワードを読み解くためのノウハウを共有していただきました。お客さまからならともかく、自社メンバーからは噛み砕いた状態で意見をもらいたいという甘ったれた心もなきにしもあらずですが、ちょっとした感想もデザインに活かせるようになりたいと思いました。（全編通して、最初の長谷川さんのセッションとのスタンスの違いが面白かったです。）
エディトリアルとウェブ、コンテンツファーストでつながるビジュアルドリブン 筒井美希さん、関口裕さん
見栄えと機能や意味を近づけようとするのは「自然な欲求」
幼稚園児の男の子からの文字組みへのダメ出しをもとに、予備知識がない人から見ても見栄えを整えたいというのは自然な欲求だというお話がありました。Web制作者は文字揃えや改行がマルチデバイス対応で台無しになることを知っているので抵抗がありますが（もちろんそっちのほうが美しいのはわかっているんです…）、エディトリアルデザイナーさんはやっぱり整えたいとのこと。
内容にもとづいて見栄えを整えるのは「コンテンツファースト」
Webは技術ありきの面があるので、できること・できないことが明確です。しかしエディトリアルは紙面の制限はあれど、厳密な見栄えの調整ができます。エディトリアルの考え方は、コンテンツありきの「コンテンツファースト」です。
「一体化」と「分離」、どちらもコンテンツファースト！どちらもビジュアルドリブン！
雑誌の華やかな誌面のように情報を複雑に組み合わせるのがコンテンツの「一体化」、情報サイトのように複数の情報を2カラム3カラムで並べていくのがコンテンツの「分離」とします。「一体化」の方がコンテンツありきのような気がしてしまいますが、雑誌の誌面もダミーテキストだらけの状態でデザインする場合もあるので、どちらもコンテンツファーストで良し悪しがあるとのことでした。
コンテンツの一体化
コンテンツに合わせてスタイルを作る（例 自由なレイアウトの雑誌の特集ページ）
コンテンツの分離
スタイルを作り、そこにコンテンツを流し込む（例 情報ポータルWebサイトの詳細ページ）
「なるほどデザイン」が出版されるまで
筒井さんの著書「なるほどデザイン 目で見て楽しむデザインの本」のコンテンツ（内容）を決めるためのラフスケッチや台割（書籍のページ構成表。Webでいうサイトマップのこと。）を作る工程をご紹介いただきました。
「なるほどデザイン」の言語・非言語のページが大好きなので、「写真で伝わっていれば、文字はいらないかもしれない」という言葉には納得です。Webサイトの場合はアクセシビリティへの技術的な配慮（altつけたりetc…）が必要なので、写真で伝えつつ、それをテキスト化したらどうなるか、ということも考えたいです。
プロジェクトに合わせて最適な「ビジュアルドリブン」の手法を選ぼう
凝った「コンテンツ構造一体化」と比べると見劣りしがちな「コンテンツ分離」ですが、スピーディーに追加・更新ができるという強みがあります。これもひとつのコンテンツファーストです。
- コンテンツファーストには「分離」と「一体化」がある
- ビジュアルデザインのために、手法からデザインしよう
エディトリアルデザイナーさんの考え方に触れるのは初めてだったので、情報の見せ方についての新しい選択肢をいただきました。分離だけでなく、一体化も武器として使えるようにビジュアライズの腕を鍛えます。
スマホアプリにおけるUIのトレンドと、動的デザインの重要性
〜テクニカルクリエイターが担うサービス開発の今後〜 佐藤洋介さん
静的なデザインだけでは仕事として成立しなくなってきた
プロトタイピングツール「Prott」などの技術とデザインの中間にあるようなツールがたくさん出てきています。デザイナーだけでも、デザインの「動き」を考えられるようになりました。世間の流れを受けて、サイバーエージェントでは実装表現ができるデザイナーを育てる方向にいっているそうです。
- 技術の垣根を越えて「テクニカル」に「クリエイティブ」できる人材
- 一人で領域広くカバーしてハイクオリティなアウトプットができる人材
- 業界のトレンドに敏感で常に新技術を追える人材
現実世界の動きとアニメーションの間にギャップを作らない
現実世界では、ものを引っ張ったら近くに来るし、押したら離れていきます。また、必ず奥行きもあります。サイバーエージェントでは、モックアップの段階で「現実的な動き（モーション）」に気をつけているとのことでした。
クオリティーアップのための取り組み
UI・グラフィックのクオリティーを維持するためのポイント
- AppleやGoogleなどのプラットフォームのガイドラインに沿っているか
- 造形美が保てているか
- 使いやすく、わかりやすいか
- 独自性 or 新規性があるか
他にも、インタラクション（動き）の実装についてのTipsをデザイナーとエンジニア間で共有したり、責任者が定期的にプロダクトのレビューをしたりしているそうです。
今後、サービスをデザインするデザイナーに求められるスキル
デザイナーとエンジニアの垣根がなくなってきてはいるが、どちらかの十分なベーススキルがなければ「ただの器用貧乏」。「エンジニアリングにも強いデザイナー」のような垣根を越えて、新しい役割を担う人材が必要とされているとのことでした。
「テクニカルクリエイターになりたい！」と思えるセッションでした。
Webデザイントレンド2016年（半期決算）原一浩さん
原さんのセッションは、4月に名古屋で聴いています。とはいえ、かなり更新されていました。→「WCAN 2016 Spring 参加レポート」
ローポリの派生系が出てきた
4月に聞いたトレンドのひとつ「ローポリ」が以前普及し続けており、まだまだ広がっていくとの予想。ハードさを抑えてかわいさ重視の派生も生まれています。
派生系「ノード」
D3.jsでそこそこ簡単に作れる点と線の集合体を「ノード」として紹介されていました。個人的には、国内外のデザイナーのポートフォリオサイトで背景に使われているイメージがあります。
派生系「カレイドスコープ」
万華鏡のように三角形や四角形がちりばめられている。個人的には、このデザインは漫画の装丁でもよく見かける気がしています。
波のシェイプが使われ始めた
「Williams Jet Tenders」の見出し下にある波型ボーダーがかわいらしいデザインです。海や水に縁があるサイトに多いのかと思ったら、消印がルーツではないかという説もあり。フラットデザインに不足しがちなキュートさ、やわらかさを与えるために使われていそうです。
NEWSコンテンツの存在感が薄れている？
今までコーポレートサイトの主役だったお知らせコンテンツの扱いが小さくなったり、日付がなくなったりしているそうです。（プレスリリースは置いておいて）コンシューマー向けの情報はSNSに移行したのかなーと思いつつ聞いていました。
自治体はゆるキャラの復権に注目
ゆるキャラブームが収束したという話だったんですが、2016年のコンシェルジュ（神戸市のようなどーんと検索バーがあるデザイン）の流行に伴い、コンシェルジュ役としてゆるキャラが復活してきました。（ちなみに、岐阜県のしずくっぽい彼はミナモといいます）
PVを稼ぐグラフィックの作り方 矢野りんさん
PVはメディアの価値を測る指標になる
「ひと月何万PV（ページビュー）！」というのはWebサイト（特にメディア系）の価値を測る非常にわかりやすい指標です。しかし、数字として分かりやすい分、PV稼ぎがすべてにならないように気をつけたいなと思いました。
SNSからの流入を促す
TwitterとFacebookでは、URLを貼り付けたサイトのOGP画像が表示されます。この縦横比（表示原寸は1200x630px、正方形トリミング版もよく見かける）を意識すると画像がおかしなトリミングをされません。（私事ですが、これはWCANのバナー作成でも意識しています。）
SNSから来た閲覧者に「同じサイト！」とわかってもらえるように、共通のイメージを使うことも重要だそうです。
グラフィックの品質（Quality）は仕様（Spec）ができる筋道（Logic）に由来する
写真素材のクオリティーを追求したり、配色を統一してデザインのクオリティーを上げていくことはできますが、まずはSNSで意図した見栄えになるようにしましょう。写真素材についてものすごく気を使っている例として、「アルジャジーラ」のWebサイトが挙げられました。各記事にメインイメージとして写真が載っているんですが、中央でトリミングされても写真の価値と意味が変わらないように構図が考えられています。
PVを稼ぐグラフィック作りのステップ
- PV工場のロジックを理解する
- 複数の流入経路（チャネル）ごとの画像スペックを把握する
- ビジュアルをスペックに合わせて作る
デザイナーには「1インプレッションたりとも無駄にせずクリックに変えてみせる！」という気概がほしい、と矢野さん。スマートフォンで撮ったような写真でも、セピア調にしたり、キャッチコピーを入れたり、加工で工夫してインプレッションをPVに変える努力ができます。（ブログのOGP画像をいつも適当なサイズに作っているので、ここは反省点）
Webデザイナーにはオススメのセミナーでした
「これから先の5年をいかにして食べていくか」というのが最近の個人的な課題ですが、ヒントをたくさんいただきました。満員御礼だったので、今週末に再演版を開催されるそうです。空席があるかはわかりませんが、キャリアの長さを問わず、Webデザイナーさんにはオススメしたいセミナーです。
