MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
これがあればデザイナーは助かる!修正を最小限に抑えるためのデザインディレクション

これがあればデザイナーは助かる!修正を最小限に抑えるためのデザインディレクション

公開日:2016年12月08日
最終更新日:2019年05月28日
オンスタ運営
デザイン
Webデザイン
ホーム > 全記事一覧 > 制作 > デザイナー > デザイン > これがあればデザイナーは助かる!修正を最小限に抑えるためのデザインディレクション

こんにちは!Grow Groupのデザイナーさとおです。

業務としてはWebサイトのデザインだけでなく、ロゴマークやパンフレットなど、デザイン全般を担当しております。

早速ですがディレクターの皆さん、デザイナーにこんなことを言った経験はありませんか?

「とりあえず作ってみて」 実はこれ、デザイナーにとってはとっても困るセリフなんですね。

 

そこで今回は、普段デザイナーが考える、クライアントに本当はどんなことを聞いてきてほしいのか、どんな情報やデータがあるとデザインしやすいのかというデザイン部分のディレクションについて、ディレクターの皆さんに知っておいてほしいなぁと思ったことを書いていこうと思います。

はじめに

デザイナーにとって、クライアントの要望を聞き出すための ヒアリング 工程が非常に重要と言えます。

Webサイトのデザインでは、見た目の美しさはもちろん、 クライアントの要望を元に目的を達成するため の構造や、そこにたどり着くための動線、アニメーションなども考える必要があります。 プラス、レスポンシブデザインともなれば頭の中をフル回転させながらデザインしなければなりません。

そして、そのヒアリングの内容から設計に落とし込んでいくわけですが、特にデザインの方針を決める部分が曖昧な場合は次のような事態を引き起こす可能性があります。

大幅なデザイン修正の原因

そもそも、大幅なデザイン修正をする羽目になる原因はどこにあるのでしょうか?

よくある例として、冒頭でもお話しした「とりあえず作ってみて」という言葉が挙げられます。

この言葉から読み取れる一番最悪の事態は、とりあえず少ない情報からデザイナーが何とか意図を汲み取ってデザイン

クライアントが確認して「違うなぁ、もっとこう何ていうか…」

デザイナーはほぼ作り直し

ディレクションの中でもデザイン部分は曖昧になる場合が多く、このように後々で認識の相違が生まれてしまうことも少なくありません。

このような事態を避けるためには、今後どのように進めていくのが良いのかを、デザイナーの立場から共有していきたいと思います。

クライアント側とのイメージ共有のために

クライアントからのデザイン修正を最小限に留めるためには、やはりクライアントからのヒアリングや、社内に持ち帰ったあと担当デザイナーに受け継ぐ際のMTGで、 いかに同じイメージを共有できるかが大事だと思います。

曖昧なまま進めず、ここにしっかり時間をとって丁寧にやるかやらないかで、成果物の質にも影響してくると思いますし、しっかりイメージ共有できた上で改めて提案することによって、提案自体もより的を得た的確なものになります。

デザインの目的を整理する

よくやりがちですが、「ターゲットは40代女性なので落ち着いた感じで!よろしく!」と曖昧なイメージで指示するのはNGです。

まずはwebサイトを作る目的に従って、デザインの方向性を整理しましょう。

一つ知っておくべきなのが、クライアントはとにかく目的(お問い合わせを増やしたい、知名度を上げたいetc…)を達成するために依頼していて、デザインに詳しいわけではないので、そもそも的確なイメージを共有してもらえることはほとんどないということです。

そんなクライアントから核心を聞き出すためには、設計の段階で ユーザに伝えたい事に順位づけをすることも一つの方法です。

構成の中でどこを目立たせたいのか、そのクライアントが「お問い合わせを増やしたい」という目的でWebサイトを作るのであれば、1番に目的である「お問い合わせ」を設定しますよね。

そして2番目にはどこを目立たせたいのか、3番目には…と決めていきます。

こののような、目的がはっきりしている場合はスムーズに組み立てることができますね。

ですが例えば「初めて会社を立ち上げたから、とにかく子どもからお年寄り、取引先にも信頼を得たい」というような少し欲張りな要望について、この順位づけは力を発揮します。

広いユーザ層を満足させる製品を作ろうとしたら、理屈から言えば、機能をなるべく多くして、最大の人間に対応できるようにするべきだということになる。この理屈は間違っている。たった一人のためにデザインした方が、ずっと成功するのだ。-アラン

という言葉があるのですが、その通り、情報やコンテンツを詰め込みすぎて結局何が言いたいのかわからなくなってしまっては意味がありません。

目的に順位をつけて、下層に来てしまったコンテンツに関しては、カラーでカバーすることも一つの手段です。

カラーイメージを明確にする

「ピンク」と一言で言ってもたくさんの種類があります。

薄いピンクは優しいイメージを与えますし、濃いピンクは若さや奇抜さ、シアンをプラスすると渋い印象になったりと、同じ「ピンク」でもカラートーン・彩度・明度によって与える印象が全然違ってきます。

カラーイメージが明確になれば、フォントの選定やサイズ感も汲み取りやすくなるので、しっかり決めておくことをおすすめします。 ついでに、カラー選定に役立つツールをいくつかご紹介します。

カラーにはそれぞれ意味があって、意外と深いんです。詳しくはまたブログに書きたいと思います!

より具体的に伝える

こちらもカラーと同じ原理ですが、例えば「明るい感じ」という言葉。

カラー的になのか、もしくは内面の気持ち的な意味なのかで、作るデザインは全く違うものになります。

前者の場合は彩度を上げるか明度を上げるかを考え、後者の場合は構造や装飾を考え考えます。

また、言葉で伝えるのが難しい場合などは、参考サイトを提示する方法もあると思います。

ここにも1つ注意点を上げるとすれば、そのサイトの参考にしてほしい部分はどこなのかを明確にしておくことです。

全体のカラートーンはこのサイト、フォントの使い方や大きさはこのサイト、ただこのサイトのフォントだとうるさすぎる、というようにNGな部分も上げつつ、指示するとより正確なイメージを比較的うまく伝えることができるのではないかと思います。

大雑把な指示ではイメージと違うデザインになってしまう可能性もあるので、具体的に指示するようにしましょう。

デザイン方針定義書の作成

上記内容が固まったら、デザイン作業の前にデザインの仕様書を作って、見える形でお互いの認識を一致させるとなお良いと思います。

クライアントからの要件や目的を洗い出し、配色やフォントの方針、参考サイトやUIの方針、デザインする中での注意点(レスポンシブデザインの場合は、画像の比率を気をつけるなど。)まで具体的に仕様を作成することで、後からデザインがブレる可能性も防ぐことができます。

ちなみにGrow Groupでも「デザイン方針定義書」をデザイナーが作成し、ディレクターからその方針で問題ないというOKが出てからデザインしていくというフローを業務の中に組み込んでいます。

さいごに

デザインは感覚的なものなので、具体的に認識を統一することが比較的難しい分野です。

デザインの表現方法は無限にありますが、そこから最善の方法を選び出すことが成果につながります。

だからこそヒアリングというインプットの情報が多ければ多いほどで表現方法が絞れるので、より的を得たものを、スピーディーに作ることができます。

また、その後のデザイン方針もきっちり詰めておく事で、デザイン管理も驚くほどスムーズにいきます。

イメージの共有を曖昧にせず、デザイン方針定義書を作成して具体的に認識を統一することが、デザイン部分のWebディレクション(クライアント→ディレクター→デザイナーまで)を円滑に進めていく最重要事項だと思います。

関連コンテンツ

デザイナーが成長するには(デザイナーがキャリアアップするための道のり-其の2)
デザイナー
デザイン
公開日: 2017年01月16日
最終更新日: 2019年05月28日
デザイナーが成長するには(デザイナーがキャリアアップするための道のり-其の2)
オンスタ運営
オンライン学習サイト比較!Webデザイン・プログラミングを学ぶならココ!(2019年版)
Webデザイン
オンライン学習
プログラミング
マークアップ
公開日: 2019年06月20日
最終更新日: 2019年09月05日
オンライン学習サイト比較!Webデザイン・プログラミングを学ぶならココ!(2019年版)
  • # cocoda!
  • # pickup
  • # Schoo
  • # TECHACADEMY
  • # Udemy
  • # オンライン学習
オンスタ運営
知っておきたい!Photoshopを使ってできることを大公開
Webデザイン
公開日: 2019年06月14日
最終更新日: 2019年06月18日
知っておきたい!Photoshopを使ってできることを大公開
  • # Photoshop
  • # pickup
  • # できること
オンスタ運営
パンフレット・リーフレットの違いと活用方法
デザイン
パンフレット
公開日: 2018年09月06日
最終更新日: 2019年05月28日
パンフレット・リーフレットの違いと活用方法
オンスタ運営
Adobe XDに待望の新機能!共同編集機能がリリース!webデザイナーさん必見です!
Webデザイン
web担当者
ツール
デザイナー
制作
公開日: 2019年11月06日
最終更新日: 2019年11月06日
Adobe XDに待望の新機能!共同編集機能がリリース!webデザイナーさん必見です!
  • # Adobe XD
  • # 共同編集
  • # 新機能
オンスタ運営
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
デザイン
マークアップ
公開日: 2019年03月30日
最終更新日: 2019年09月02日
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
オンスタ運営
残り5時間!Udemyで新規受講生向けのセール実施中!新規ユーザー向けに対象コースが¥1,320から
エンジニア
オンライン学習
オンライン学習キャンペーン情報
デザイナー
デザイン
プログラミング
制作
公開日: 2019年11月07日
最終更新日: 2019年11月07日
残り5時間!Udemyで新規受講生向けのセール実施中!新規ユーザー向けに対象コースが¥1,320から
  • # Python
  • # Udemy
  • # セール情報
  • # タイムセール
オンスタ運営
シンプルなデザインについて考えてみる
Webデザイン
デザイン
公開日: 2017年07月25日
最終更新日: 2019年05月28日
シンプルなデザインについて考えてみる
オンスタ運営
【Webデザイン検証.その1】ホームボタンってグローバルナビ に必要なの?
Webデザイン
デザイン
公開日: 2019年03月26日
最終更新日: 2019年05月28日
【Webデザイン検証.その1】ホームボタンってグローバルナビ に必要なの?
オンスタ運営
グリットデザインを使いこなそう!
Webデザイン
デザイン
公開日: 2018年08月10日
最終更新日: 2019年05月28日
グリットデザインを使いこなそう!
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。