WebDesign

【自己防衛】Webデザイン前のコンセプト確認【遭難するか避難できるか】

Nao_G
Nao_G
やぁ!みんな!元気?

クリエイターの@Nao_Gです。

Webデザインのコンセプトって何だろう?そもそもなんでコンセプトが必要なのだろうか?

これからWebデザイナーとして活動していきたいので、コンセプトの考え方やコンセプトをどうやってデザインに活かしていくのかを知りたいです。

こういった疑問に答えます。

この記事の信頼性(著者は実務経験者)

  • デザイン歴は5年ぐらい
  • 現在の月単価60万超え
  • 現在はフリーランスのWebデザイナー

コンセプトを意識しながら仕事でデザインを行ってきたので、信頼できるかと思います。

目次

  • コンセプトって何?
  • 何故コンセプトが必要なのか?
  • デザイナーが確認しておくべきコンセプト
  • 目的地を決めて確実にゴールしよう

ではさっそく見ていきましょう。

コンセプトって何?

コンセプトとは、制作を行う際に目的を決め、そのプロジェクトの基本となるルールのことです。

コンセプトの具体例

  • 10代の男の子に向けたカードゲーム
  • 20代の女性に向けた小顔効果が高いノーズシャドウ
  • 40代の男性に向けた自宅でできるフィットネス商品

上記のとおり。

プロジェクトによってこの様にコンセプトがあり、その目的を果たすためにプロジェクトに関わるメンバーは業務を遂行します。

なので繰り返しになりますが、コンセプトとは、制作を行う際の目的を果たすためのルールです。

何故コンセプトが必要なのか?

結論、制作物を売るためです。

なぜかというと商品やサービスを売るにはターゲットを明確にする必要があるからです。
このターゲットをマーケティング用語でペルソナとも言います。

ターゲットの具体例

  • 子育てで時間が取れない主婦
  • 疲れを癒したいサラリーマン
  • 転職を検討している社会人

上記のとおり。順番に解説します。

子育てで時間が取れない主婦

ターゲットに応じてサービスを考えてみる

  • 子育ての時間をより楽にする便利グッツ
  • 子育てをしながら自宅でも勉強ができる学習サービス

「子育てで時間が取れない主婦」がターゲットの場合は上記のようなサービスが考えられます。

子育てをしながら勉強すると思うと大変ですよね。
隙間時間に自分のペースで学べる授業があったら助かりますよね。

疲れを癒したいサラリーマン

ターゲットに応じてサービスを考えてみる

  • 仕事帰りに立ち寄れるリラクゼーション
  • ランチと足湯を兼ねている食堂

「疲れを癒したいサラリーマン」がターゲットの場合は上記のようなサービスが考えられます。

お昼休みにちょっとしたリラックスが出来たら最高ですよね。
午後の仕事のモチベーションにもなりますよね。

転職を検討している社会人

ターゲットに応じてサービスを考えてみる

  • 仕事帰りに学べるスクール
  • 転職先を紹介してくれるエージェント

「転職を検討している社会人」がターゲットの場合は上記のようなサービスが考えられます。

仕事をしながら全く違う畑に転職しようと思うと学習の仕方に迷いますよね。
そんな時に仕事帰りに学べるスクールがあったら、助かりますよね。

この様にターゲットに応じて商品やサービスが作られています。

なので繰り返しになりますがコンセプトが必要な理由は商品やサービスを売るためです。

デザイナーが確認しておくべきコンセプト

続いて具体的にデザイナーがデザインを行う上で、確認しておくべき要素です。

  • ターゲット層
  • フォントの指定
  • デザインテイスト
  • 配色の指定
  • 参考画像
  • その他

順番に解説します。

ターゲット層

ターゲット層の確認を行ないます。

なぜかというとターゲット層に応じて作るデザインが全く異なるからです。

同じ商品でターゲット層による違いを確認してみる

こちらは「ASTALIFTさん」の化粧品です。

ナノの赤の美容成分「ナノアスタキサンチン」や「ナノリコピン」を配合しており、ナノの力でしっかり浸透させる、キレイになりたい全ての女性がターゲットです。

こちらは「NULLさん」の化粧水です。
こちらの商品は髭剃り後の肌荒れや乾燥肌に悩んでいる男性がターゲットです。

この様に同じ商品でもターゲットに応じてデザインが全く異なります。
同じ化粧水でも男性向けか女性向けかで全然デザインが違うの面白いですよね。

なので繰り返しになりますが、ターゲット確認を行います。

フォントの指定

フォントの指定があるかどうかの確認を行います。

なぜかというと、企業のブランディングの関係で、使用して良いフォントが決まっている場合があるからです。

ブランディングによるフォント指定の例

  • 女性向けの繊細な化粧品→細い明朝体
  • 戦国時代をテーマにしたゲーム→筆文字
  • 四角がコンセプトの車→角ばったゴシック体

例えば上記のとおり。

なので繰り返しになりますが、フォントの指定があるかどうかの確認を行います。

デザインテイスト

デザインテイストも確認する必要があります。

デザインテイストとは、デザインの雰囲気です。
同じコンセプトでもデザインのテイストによって全くデザインが異なるからです。

かわいいデザインテイストを考えてみる

  • ガーリーなデザイン
  • ポップなデザイン

上記のとおり。
例えばかわいいという括りの中にも、ガーリーやポップなどのデザインテイストがあります。

ガーリーなデザイン

ガーリーとは子供っぽいや、女の子らしいという意味です。
このデザインかわいいですよね。

ポップなデザイン

ポップとはコントラストがはっきりしている、はじける、ごちゃ混ぜなどの意味があります。

この様にかわいいという括りを一つ考えてみても無数のデザインテイストがあります。
なので、繰り返しになりますが、デザインテイストも確認する必要があります。

配色の指定

配色の指定を確認します。

なぜならディレクターのイメージやクライアントのイメージが明確な時があるからです。

イメージの具体例

  • 子供向けの商品→明るくてポップな色を使いたい
  • 高級感のある商品→黒をメインで使いたい

上記のとおり。

この様にイメージが明確な時があるので、あらかじめ認識がずれない様に確認を行います。
また要望がある場合は下記の三つのカラーの確認もしておくとより安心です。

  • メインカラー※メインで使う色
  • サブカラー※メインの次に使う色
  • キーカラー※メインやサブの色とは異なる差し色

上記のとおり。

ちなみに配色に関してのテクニックは下記の書籍で学べます。
配色選びに自信がある方は買わなくで大丈夫です。

繰り返しになりますが、配色の指定があるかどうかの確認を行います。

参考画像

デザインを作成する前に参考画像を集めます。

なぜなら、ディレクターやクライアントとの方向性にズレがないかの確認ができるからです。

体験談:プロは無駄な手は動かさない。

私が勤めていた制作会社では、ほとんどのデザインで一発OKを出す先輩神デザイナーが複数しました。

先輩神デザイナーに共通していたことは、デザインを作る前に参考画像などをディレクターに共有することでした。

体験談:参考画像収集において「Pinterest」は神ツール

参考画像を集める際には「Pinterest」というWeb上の画像をストックできる無料サービスを利用するのがおすすめです。

業界では有名なツールでデザイナーは使い倒しています。
カテゴリを自分で分けられたり、作ったカテゴリーを共有することも可能です。

その他

最後にその他の確認です。

なぜなら上記以外の項目でも部分的な指定や要望はちらほら出てくるからです。

目的地を決めて確実にゴールしよう

制作前のコンセプト確認は自分を守る意味でもとても重要です。

なぜなら認識を示し合わせることで、デザイナーもディレクターもクライアントも皆、仕事を円滑に進めることが出来るからです。

ぶっちゃけここがぶれると一生仕事が終わらないという負のスパイラルに突入するので気をつけましょう。

一生懸命デザインしているのに、いつまでもOKが出ないのって正直しんどいですよね。

コンセプト確認を簡単に要約してみる

みんなで目的地を決めて確実に辿りつこう

いきなり手を動かすということは目的地を決めずに自ら遭難するようなものです。
私は遭難しまくって、終電や土日出社をしていたので、あなただけは気をつけてください。

最後に自分のコピペ用の為にもデザイナーが手を動かす前に確認するべきことをまとめておきます。目的地への地図を無料配布です。

  • ターゲット層
  • フォントの指定
  • デザインテイスト
  • 配色の指定
  • 参考画像
  • その他
【無料あり】デザイナーの私がおすすめするWebデザインスクール3社 クリエイターの@Nao_Gです。 Webデザインを学びたいけど、どんなスクールが良いのだろう。 調べてみるとデザインスク...
【無料テクニックあり】おすすめのフォント本まとめ【プロがガチで推奨する】今回はデザインの重要な要素である『フォント』のおすすめ本についてまとめました。こちらの本はフォントの基本が全て集約されています。とりあえずこの本を一冊持っていればフォント関連の知識としては安心です。 ...