color-patterns

Webデザイナーとして依頼を受けると、「コンセプトは…」という話が出ることがたまにあります。

ただし、この「コンセプト」について良くわからない…といった方もいらっしゃるかと思います。そこで、今回はコンセプトやコンセプトメイキングの説明から、コンセプトシートの作り方やメイキング方法・運用法、独学での学び方などを初心者にもわかりやすくお伝えしようと思います。

コンセプトとは?

email 4044165 640 530x335 - コンセプトメイキングとは?手法・具体例・決めておいた方が良いポイント・学び方などのまとめ

まず、コンセプトとは何かについておさらいをしておきましょう。

コンセプトとは「全体を貫く基本的な概念」です。たとえば「清潔感」とか「明るさ」「暖かさ」「優しさ」みたいに表現をする方もいれば、もっと具体的にする方もいます。

ただし、筆者が個人的に感じているのは、マーケティング用語として「コンセプト」と言っている時と、Webデザイナーに向けて「コンセプト」という時は、意味合いがちょっと違うかな?ということです。

Webデザインにおけるコンセプトとは?

holiday shopping 1921658 640 530x353 - コンセプトメイキングとは?手法・具体例・決めておいた方が良いポイント・学び方などのまとめ

基本的に、マーケティングであれ、Webデザインであれ、クライアントが依頼してくる「コンセプト」は一緒です。

つまり、提出してくるコンセプトの文言が変わるわけではないということです。ただし、Webデザイン的な意味で使われるコンセプトとしては、「お客さんにどんな印象を持ってもらいたいか?」という意味合いが強いように思われます。

一方で、マーケティング用語としては、「お客さんに最終的にどうなって欲しいか?」の方が強いように思われます。デザインのみを重視した場合と、マーケティングを重視した場合とで、若干のズレがあると言えるでしょう。

とはいえ、コンセプトがどのようなものか?、コンセプトメイキングとはなんなのか?、まだイメージがつきにくいと思いますので一つ例を紹介します。

コンセプトメイキングとは?その具体例は?

「価値の交換をよりシンプルにし、世界中の人々が最適な経済活動を行えるようにする」

base - コンセプトメイキングとは?手法・具体例・決めておいた方が良いポイント・学び方などのまとめ

たとえば、こちらはECショップを提供する「BASE」さんのミッションです。

こちらはコンセプトというよりミッションですが、例えば、このミッションからサイトのコンセプトを作るとします。その場合、そのサイトには「シンプルさ」や「先進性」などが必要になったりするのかなと思います。

このように、実際にコンセプトからwebデザインに落とし込んでいく過程を、コンセプトメイキングと言います。

コンセプトメイキングの手法(手順)とは?4ステップに分けて解説

office 625892 640 530x352 - コンセプトメイキングとは?手法・具体例・決めておいた方が良いポイント・学び方などのまとめ

それでは、実際にコンセプトからwebデザインに落とし込んでいく過程(=コンセプトメイキング)についてお伝えします。

1. コンセプトを書き出す

まずは、紙か何かに「コンセプト」を書き出します。

「コンセプト」を口で言っただけだったりしますと、お客様から見た印象が分かりにくい上に、時間が経つと細部の表現が変わってしまう時があります。特に、表現が変わってしまう時が怖いので、実際に文字として形に残しておいた方が良いでしょう。

2. カラーシートを作成する

次は、カラーシートのようなものを作ります。

カラーシートと呼ばれている訳ではないですが、要は「サイトに使う色をまとめておいたもの」です。カラーコードまで含めて、全て保存しておきます。エクセルやスプレッドシートにまとめておくのがおすすめです。

3. デザイン規定(のようなもの)を作る

次は、サイト全体のデザイン規定(デザインのガイドライン)を作ります。

デザイン規定とは言っても、そんなに固くならなくて大丈夫です。例えば、「グラデーションは使うかどうか?」「アニメーションはいれるかどうか?」などは最低限決めておくのがおすすめです。

このデザイン規定がないと、特定のページだけ雰囲気が異なったり、印象の違うボタンができたりしてしまいます。参考程度にGoogleのマテリアルデザインのガイドラインを見てみるのもおすすめです。こういう規定があると、一気にデザイン案が決めやすくなります。

4. 画像を選抜する

最後に、画像を選抜します。なお、画像を最後に選ぶようにしたのには理由があります。

画像を決めてからカラーシートを作ったり、デザイン規定を考えたりすると、その画像にあわせたものを作りかねないからです。ですので、基本的には画像は最後に選ぶのがオススメです。

ヒアリングシート+コンセプトシートを用意しておく

socialmedia 952091 640 530x354 - コンセプトメイキングとは?手法・具体例・決めておいた方が良いポイント・学び方などのまとめ

ここからはwebデザイナーとして筆者が働く上で、個人的に行っていることを紹介します。

今回のようにコンセプトから色を決めたり、デザインを決めたりしていると、毎回同じような手順で具体化していくことに気づくはずです。そこで、Webデザイナーとしての準備物として、「ヒアリングシート」に加えて「コンセプトシート」を揃えておくのがおすすめです。

コンセプトシートの構成はオリジナルで作ってかまわないと思うのですが、筆者が入れているのは、

  • コンセプト(無ければミッション)
  • サイトを通してユーザーに与えたい印象
  • メインカラー・サブカラーの指定(無ければ無し)
  • 動きを入れたいか入れたくないか

みたいなものです。この辺りは何度かクライアントとやりとりするうちにブラッシュアップされていくようにも思われます。

コンセプトメイキングからサイトの運用までについて

programmer 1653351 640 530x368 - コンセプトメイキングとは?手法・具体例・決めておいた方が良いポイント・学び方などのまとめ

実際の所、コンセプトをもとにサイトを作った後、その後の運用はクライアント様が全て行うのが普通です。

ただし、Webデザイナーが運用部分も一緒にやることもありますので、その運用の際に気をつけておくべきポイントをお伝えします。運用中に気をつけておかないといけないポイントは、“後から追加する要素”です。

Webサイトを立ち上げる頃は、コンセプトを意識して画像を選んだり、文章を選んだりするので、まとまりが良いです。ですが、運用していく間に、コンセプトを含めて色々とごちゃごちゃになってしまうことがあります。

筆者らwebデザイナーとしてできることは、Web担当者にアドバイスしておくことくらいですが、言うのと言わないのでは全然違うかと思いますので、気づいたことがあればお伝えした方が良いとは思われます。

コンセプトメイキングに関するまとめと初心者のデザインの学び方

screen 1839500 640 530x354 - コンセプトメイキングとは?手法・具体例・決めておいた方が良いポイント・学び方などのまとめ

以上、いかがでしたか?

今回は、サイトのコンセプトの話しから、コンセプトメイキング、コンセプトシートや実際のサイトの運用についても少しだけご紹介しました。今後はWebデザイナーはデザインの知識だけでなく、こういったマーケティング的な話しも理解できる人が求められていくようには思われます。

プログラミングスクールのTechAcademyではデザイン+Webマーケティングについても学べますので、デザイン以外の知識を身につけたい方にはおすすめです。筆者も実際にTechAcademyのwordpressコースとwebデザインコースを受講しましたが、きちんと課題をクリアして前に進んでいく形式でスキルが身につきますのでおすすめです。

テキストは完全オンラインで受講が可能で、わからない点はSlackで質問ができます。また、現役エンジニア/デザイナーによる週2回のオンライン面談がありますので、モチベーションも維持しやすく、キャリア相談や他の相談なども気軽にできる点がよかったです。

TechAcademyは無料体験レッスンもやっていますので、気になる方はまずは無料体験レッスンを受講されてみてはいかがでしょうか。それでは最後までお読み頂き、ありがとうございました。

TechAcademyの無料体験レッスンはこちら0 - コンセプトメイキングとは?手法・具体例・決めておいた方が良いポイント・学び方などのまとめ

TechAcademyの詳しい口コミはこちら

おすすめの記事