CSS Nite in KOFU Vol.8に参加しました

今年も「CSS Nite in KOFU」に参加させていただきました！

6月24日（土）に開催された今回は第8回目。
今回はアンティー・ファクトリーの中川さんとスイッチの鷹野さんをお招きして、
デザインをするためのプロセスについてのお話がメインでした。

デザインのお話がメイン、そしてがっつりワークショップがあるということだったので、デザイン勉強中のワタナベ的にはとても楽しみな回でした。

ということで、今回は実例紹介と実際に手を動かすことが多かったので、少ないですがざっくりメモでレポートしたいと思います。

中川流！？間違いのないWebデザインの極意＆実践

講演者 ：中川 直樹（アンティー・ファクトリー）

【前半：講義】

ブランディングを意識したwebデザイン　そのプロセスと方法について

・デザイン確認の戻りや感覚の差異が生まれないように
・「本当のデザイン」「意味のあるデザイン」
＝C.I（コーポレート・アイデンティティ）やB.I（ブランド・アイデンティティ）
会社のアイデンティティを理解した上でデザインを開発する
➡︎「間違いのないデザイン」

・確認をし合いながら進めて出戻りのないデザインへのプロセス
➡C.IやB.Iをクライアント側・制作側で共同して確立することで可能にできる。
＝デザインの方向性としての指標・共通言語になる。

・クリエイターの地位向上（予算ありきになりがち）
― ホームページはなくてはならないものになりつつある。
＝「ホームページがある」だけでは競合他社との差別化にならない。
➡自社特有のサービスを伝えるツールとしてホームページを作り上げる必要性が強くなっている。
＝作り上げるためのプロセスは価値が高いはずである。

・C.I、B.Iを統一するメリット
1. 双方で方向性を共有しているので出戻りが少なくなる
2. 企業のアイデンティティデザインをすることで企業内の意識改善につながる
― C.Iで会社内の意識統一ができるにつながる。
➡リクルートの際に会社の指標をぶれずに伝えられることができるようになる
＝その会社の方向性に合う社員が集まる。
― 多店舗あっても意識設定ができる。（エリア的に広範囲でも）
＝意識統一でメニュー開発やスタッフ育成にもつながる。
3. 企業理解が深いのでウェブ以外のデザインなども統一して任せられる。
＝Webディレクター・デザイナーからアートディレクターとしての役割へ

ブランドイメージを分解して再構築していくプロセスについて。#cssnite #cssnite_kofu8 pic.twitter.com/9d4CGlkUWl— CSS Nite in KOFU (@cssnite_kofu) 2018年6月23日

イメージボード制作の意味

1.良し悪しの軸として
― 好き嫌いではなく良し悪しの軸を持つ
サービスや企業を知り、ターゲットを吟味した上で意識統一するべき
➡︎イメージボードを作ることで社内外に共有できる会社の方向性の軸という共通言語ができる

2.ブランドパーソナリティ、サイトパーソナリティ
― 会社自体、ブランドについてを人に例えるとどんな人なのか、人柄などを考察
➡︎ブランドパーソナリティの確立 ➡ サイトパーソナリティ ➡ サイトデザイン（ビジュアル）へ落とし込む

イメージボード制作のステップ

1.現状と理想のパーソナリティを知る
－会社の現状と理想をカテゴライズしてそれぞれのパーソナリティを設定する
（①機能的価値、②情緒的価値、③心理的価値）
－現状：従業員やお客様など外部の人に会社についてのアンケートをとって分類。
－理想：社内で理想をカテゴライズしていく。

2.現状と理想のブランド資産の差異を埋める
－①保全・付与、②意味の変換・昇華、③廃棄　に分けて方向性を定める。
➡︎変換方法のビジュアライゼーションやコンテンツを考える
➡︎見た目だけでなく、音楽やコピーなど様々な角度で検証する
－マイクロインタラクション（動き）もパーソナリティに沿った動きを考える
＝ちょっとした動きも深層心理へ有効に働きかける

3.イメージを作る
－策定したパーソナリティに合わせてイメージボードを作成していく

★ペルソナ（ターゲット）ではなく、あくまでも企業のパーソナリティ

※事業体が複数ある場合などはパーソナリティを一人に絞らない・絞れない場合がある➡︎ただし、その事業部に対してもブレないようにしていく

【後半：ワークショップ】

実際に老舗のきもの屋さん（架空）のリニューアルプロジェクトの概要に沿って、前半で聞いたプロセスを使い、各自でブランドパーソナリティを設定します。
その後、導き出したパーソナリティをもとに、用意された素材を使ってイメージボードをコラージュで作成していきました。

ほんとに楽しそう✨楽しい✨#cssnite pic.twitter.com/HrOZHWerlN— 小野文子☆AYA☆ (@and_A910) 2018年6月23日

本来は検証からイメージボード作成までに3か月要するというところを90分でやるということで、時間が足りない！となりながらもコラージュを作成していきます。

最終的にはグループ内で自分が設定したパーソナリティと出来上がったイメージボードの発表をしました。

▼ワタナベがつくったイメージボードはこんな感じ。

昨日のワークショップで作ったイメージボードはこんな感じの仕上がりに！私が考えたブランドパーソナリティは水原希子ちゃん的な感じでした#cssnite #cssnite_kofu8 pic.twitter.com/11mLZnRW8O— YUKA.wat (@wat_yuka) 2018年6月24日

【ワタナベのヒトコト】
中川さんの講義は、以前東京で行われた「CSS Nite LP52」でもイメージボードについてお話を伺いましたが、今回は他の実例をご紹介いただいて、より詳しく理解できました！またワークショップで実際に手を動かすことで、プロセスもより身につけられたと思います。
LP52の時にも感じたのですが、やはり今すぐに山梨でイメージボードを作成してWebリニューアルをしましょう！ということは難しいと思います。懇親会で伺ったお話でも、まずはプロセスの実績を作ることが第一ということなので、自社サイトなどで試して、よりクライアント様に喜ばれるデザインとして示すことができればいいなと思います。
デザイナー（見習い）としては、イメージボード作成のプロセス＝企業理解のプロセスを意識しながらビジュアルに落とし込むという小さい部分から取り入れていきたいです。

The right tool for the right job

講演者 ：鷹野雅弘（スイッチ）

・ツールを俯瞰してみる
①虫の目：物事を狭く、深く、多角的にみる
②鳥の目：広い視野で物事全体をみる
③魚の目：流れを読み、トレンドを知る

★得意なツールに固執しすぎない
➡︎一人完結では良いが、共同で作業をするときには時にマイナスになる

・Webデザインのカンプ＝photoshopで作ることが多い
➡︎本来は写真のツールで図形作成は向いてない
デバイスプレビュー・designpreviewがなくなる
➡︎Adobe XDにシフトしつつある

Adobe XDについて

・プロトタイプの設定が簡単にできる！
－デバイスでプレビュー（実機確認）が可能・変更してもすぐに反映・実際のサイズ感で見ることができる

・リピートグリッドが便利！
－写真やテキストなど規則がある項目をまとめて編集が可能。
➡ただし、エクセル形式ではなく、まだテキストファイルでの挿入が必要

・機能が最小限だから使いやすい！
➡︎その他はUI Kitなどで補う

・共有が簡単にできる
－プロトタイプ、デザインのプレビューをインタラクションしながら見ることができる、コメントも出来る
➡クライアントとの新たな赤入れツールとして活用ができる

・無料スタータープランでの使用が可能
－ソフトを購入しなくても無料で使用が可能
➡プロトタイプ公開は１点のみ（クライアント側が確認するには問題ない）

ツールを適材適所で使用することでワークフローの効率に。

【ワタナベのヒトコト】
「得意なツールに固執しすぎない」はとても耳が痛かったです…。
弊社ではワイヤーフレームを作成するためにXDを使用しています。
ソフトが軽く操作がしやすいためワイヤーフレームの作成にはとても重宝しているのですが、お客様との共有はまだpdfや画像での書き出しが多く、「完全に」は使いこなせていないのが現状です。
お客様としても慣れ親しんだ紙での赤入れのほうがやりやすさがあると思うので、「赤入れツール」としてXDを導入していくのは時間がかかるのかもしれませんが、導入方法なども検討できれば良いなあと思います。
個人的には、おまけのTipsでやっていた非破壊データでのモザイクのかけ方についてがいろんな意味で面白かったです。笑
 

今回はメインの講義がっつり！という感じだったので、理解としてはかなり深めることができたなぁと思いました。
今回の学びをそのまま仕事に使うというのは、少し難しいかもしれませんが、山梨でのwebシーンにあった方法を模索しながらアレンジして活用していければ、お客様にもより良い提案ができるのではないかと思います！
ワタナベはまだまだ見習い中ですが、少しずつでも取り入れて、頑張っていきたいと思います。