はじめに
皆さんこんにちは！
今回はCSS Niteさん主催のセミナー
BISCOM流 デザインとディレクションの関係で学んだ事を書いていきます！
YouTubeにて視聴したのでリンクを置いておきます！
実例で解説するデザインBefore/After
セミナーの名前はデザインとディレクションの関係でしたが、
その前に今回のセミナーの講師を務められていた加藤 千歳さんが経営するBISCOMさんが手掛けた
実例を交えてのワイヤーフレーム(情報設計) → デザインについての思考のポイントのお話がありました。
こちらもWebデザイン初心者としてとても勉強になりました。
デザインを広げるアイデア
一つの連想から複数のアイデアを出すことでデザインにオリジナリティが生まれる
例：ページトップに戻るボタンの装飾・実際にお店にある物を装飾に使うなど
↓
少しの工夫でそのお店の世界観を楽しんでもらえるWebサイトになる
⚠️やりすぎ注意・バランス大事。隠し味位が丁度良い
触ってみたくなるデザイン
一つ一つの記事に影をセンターに配置。
ぼかしが広いので記事が浮いている様になる
↓
触れる(押せる)雰囲気を演出できる。
影をつけるだけで立体的になって他のデザインとのメリハリが生まれる。
デザインを単調にさせないコツ
🐥一旦写真をブラウザ幅一杯に表示させる
↓
要素の間に入れることで
その上下のレイアウトが同じでも単調な印象にならない。
(一度視覚がリセットされるイメージ)
🐥見出しのあしらいを全て同じにしない
⚠️違和感の無いようにするのが大事
🐥情報整理ができている
↓
デザインは大きく変えていても
見出しはワイヤーフレームに忠実なので見やすい
🐥何でもかんでも一辺倒にしない
デザインを使い回す方が簡単だけど一手間かける。
見せ方を工夫することが大事。
🐣加藤さん流：デザインの崩し方がわからない時の簡単アドバイス
① そろえる
文字や写真をまずは揃える。
② ずらす
揃えたところをずらす(はずす)ことでデザインに動きが出る。
③ はみだす
わざと枠からはみ出すことで
人の脳が見えない部分を補完して全体像を認識する(アモーダル補完)
この三つを必ず使うことでワイヤーフレームのままにならないデザインが作れる。
バナーデザインにも有用できるそうです。
但し⚠️デザインが崩れないようにバランスは大事。
BISCOM流ディレクションの７ヶ条(ワイヤーフレームのつくり方)
BISCOMさんでは
・ワイヤーフレーム→デザインの変化で(いい意味で)お客さんの期待を裏切りたい
・ワイヤーフレームのままのデザインは作らない
こちらを大切にしている様です。
しかし、
ディレクターが作ったワイヤーフレームをデザイナーは
どの程度まで崩していいのでしょうか？
デザイナーに丸投げされても判断が難しい(ワイヤーフレームのままがいいこともある)
上記からデザイナーとディレクターの信頼関係が大切だと考えられています。
そこで加藤さんはデザイナーがデザインに専念して
存分に本領を発揮できるようなディレクターになろう！と実践したそうです。(すごい)
ワイヤーフレームにデザイン要素を盛り込まない
なぜ：デザインは、視覚設計として再定義するものだから。
(ワイヤーフレーム＝情報設計)(デザイン＝視覚設計)
その為ワイヤーフレームから崩しやすいワイヤーフレームを作る。
視覚設計側は
守：ワイヤーフレームを守ったデザイン
破：自分なりの工夫でワイヤーフレームを破りアレンジする
離：ワイヤーフレームから離れてオリジナリティを出す
この三つを意識すると良い
デザイン要素を盛り込まないと言ってもキャッチアップしたい部分など、情報の強弱は共有するべき。但し、イメージを縛り付けないように注意が必要です。
ワイヤーフレームはモノクロ限定
なぜ：上記にもあるが、デザインのイメージをつけないようにしたいから。
BISCOMさんの場合はクライアントさんの間違い対策にもなっているそうです。
(ワイヤーフレームがデザインだと間違えられる)
・フォントはゴシック体を基本
・イメージがあるものについては写真を入れておく
⚠️その写真が絶対か、寄せるか、おまかせかは共有しておくことが大事
ワイヤーフレーム・素材・情報は揃えて支給する
なぜ：デザインを視覚設計として再定義しやすいように
情報共有や素材の用意をすることで
デザイナーがデザイン制作に専念できるから
デザインは感覚だけで作っているのではなく、
意味があるのでひとつを差し替えるだけで全替になってしまうこともある。
後からこれは？という確認がないようにしたい。
わかりにくい指示は避ける
情報共有する文章もひとつひとつも読みやすいか、
わかりやすいかをチェックしてデザイナーへ
コンセプトや依頼の背景は丁寧に伝える
(意図のあるデザインを作り上げることができる)
デザインの直接的な指示よりも情報を共有することが大事
会社の雰囲気、色、文化、社長の様子、置いてある物などを共有してもらえるとアイデアが浮かびやすい。
デザイナーにイメージを表現してもらうための情報整理。
決まりきった文字情報やロジカルなことだけでなく、
情緒的な思考を言語化する(ディレクターの向き不向きはある)。
デザイナーに共有するだけではなく、
正しい情報をユーザーに正しく伝えるため。
実際に自分の目で見て、
お話を聞いて体感して、
間違った情報を発信しないことも制作側の責任。
デザイナーが違和感を感じないワイヤーフレームをつくる
なぜ：なぜここにこのボタンを置くの？
これはどのページに遷移するの？
違和感のあるまま作ると違和感のあるデザインを生むことになるから。
デザインには必ず意図がある。
デザインはなんでも良いから作っておいて、だと良いものはできない。
デザインのすり合わせをする
なぜ：お互いがそれぞれ不安もあるので
コミュニケーションが大事
(クライアントと制作会社(制作者)も)
・あらかじめ、ワイヤーから崩してもOK(NG)を伝えておく
・ベンチマークサイトを共有する
・ファーストビューあたりまでで一旦見せてもらい方向性のすり合わせをする。
⚠️クライアントにはしていない。
クライアントはファーストビューで良し悪しの判断はできない。
中途半端な状態で見せてしまうとかえって違和感や不信感が生まれる。
デザイナーの特徴を見極める
・ビジュアル訴求タイプ(人の心を動かす)
・整理整頓タイプ(情報や要素の整理が上手)
・オペレータータイプ(手が速い)
信頼関係を築く
どこまで崩して良いのかを判断するために
デザイナーとディレクターとの信頼関係の影響が大きい。
「ここまで変えてもOK」と言ってもらえる
安心感があると、デザイナーも思い切ってワイヤーから外せる。
ワイヤーを崩しきれないケース
・ディレクターに力量がありすぎる
・上下関係でデザイナーが潜在意識で萎縮してしまう
信頼関係を築くために日頃からできること
🐥「修正」という言葉は使わない
デザイナーに限らずBISCOMさんでは
パートナーや社内でも、すべて「調整」で統一されています。
なぜ：【修正】良くない点を改めること
発注側の不備にも関わらず「修正してください」だと違和感があるから。
🐥お客様からの嬉しいお言葉は必ず共有、些細なことでもデザイナーに伝える
🐥印刷デザインは仕上がったら実物をお渡しする
🐥スケジュールは発注の3ヶ月位前から打診しておく
こういった日々のやり取りが良いデザインが生まれる肥料となるそうです。
デザインとディレクションの関係とは？
デザインとディレクションの関係とは
対等のパートナーとして良い仕事ができる関係
そして、何よりもお客様(ユーザー)のために
ディレクターとデザイナーが一緒になって良いサイトを作っていくことが大事。
感想
かなり濃い内容でまだまだwebデザインの勉強を始めたての私には
勉強になる事ばかりで面白かったです。
ここに書かせていただいた内容以外にも、
実際の一つのデザインが出来上がるまでの工程がわかるお話や
完成するまでの苦労、その中でも大切にすべき事などがわかりやすく資料やお話で纏められていました。
デザインのお話はデザインの言語化の大切さに加え、
今からでも実践できるデザインのあしらい方などを教えていただけたので
早速実践してみたいと思います。
ディレクションのお話では一緒に働く人に対しての配慮の大切さ、
仕事をスムーズに進められるようにする工夫がとても考えられていると感じました。
私も就職した際に職場で信頼関係を築ける人間になれるよう頑張ります🐥！！
今回のCSS Niteさんの各種リンクはこちらから！
講師のBISCOM：加藤千歳さんの各種リンクはこちらから！