Webデザイン

【丁寧に解説】成果が出るWebサイト作りはコンセプト設計で決まる!

この記事は次のような方に向けて書きました。

・Webサイトを制作するにあたってコンセプトの立て方を知りたい

・クライアントや制作チームの間でWebデザインの完成イメージを共有させたい

・Webサイトを訪れたターゲットにサイトの要点を正しく伝えたい

この記事を読むことで、これらの問題を解決できるWebサイトの最終目的を実現することができるようになります。

どうぞ最後までご覧になってください。

Webデザインにはコンセプトが必要

先生
先生
デザインというのは、先人たちが長い時をかけて作り出した法則があって、意味を持って使いわけられているんだ。

デザイニャー
デザイニャー
感覚だけでデザインとして配置されているわけじゃないんだニャン。

先生
先生
意味がないデザインを行ってしまったら最悪で、伝えたいのと違ったメッセージになってしまうんだ。

デザイニャー
デザイニャー
それだと、それが邪魔して本当に伝えたいメッセージが伝わらなくなってしまったら、意味がないもんニャン。

デザインを制作する時には、クライアントとのヒアリングで意思疎通を円滑にすることも大切なのですが、エンドユーザーに伝えたい正しい意図が伝わらないことになってしまうことにならないように、正しいメッセージを伝えることも重要な仕事になります。

デザイニャー
デザイニャー
そういった意味でも、コンセプトってデザインにとってとても重要になるんだニャン。

デザインコンセプトって何?

デザイニャー
デザイニャー
デザインを制作するのにコンセプトが重要だということは理解できたけれど、そもそもコンセプトっていったいなんなんだニャン?

Web制作におけるコンセプトというのは、「誰に何を伝えるのか」という指標に当たります。

さらにもう少し付け加えると、「全体を貫く基本的な骨格」のことを指します。

先生
先生
つまり、 Webデザイナーが、作品や商品に込めた目的や意図・思いなどの世界観を表現しているんだ。

Webサイトには必ず達成したい目標があって、それを達成できないと、Webサイトを作った意味がなくなってしまいます。

・商品を売りたい

・サービスを紹介して成約させたい

・企業のブランドを認知させたい

など、そのWebサイトを運営することによって最終的に何を得たいのかというところを明確にしておくことが必要です。

先生
先生
それがデザインの指針となって、「どういうふうに表現するか」というデザインの方向性が決まるのだけれど、これが「デザインコンセプト」なんだ。

Webサイトの世界観を決めて、クライアントだけでなくWebサイトの制作に関わるメンバー内で、イメージを共有する手段を組み立てることをコンセプト設計と言います。

デザイナーやディレクター、コピーライター、コーダーなど、色々な職種のスタッフと協力しあって、ページ制作を進めていくのですが、そのチームが同じ目的地を目指していくための方向性を「コンセプト」と言います。

デザインコンセプトを明確にしないとどうなる?

先生
先生
もし、コンセプトを設計せずに Web制作の作業を進めるとどうなると思う?

そうなると、プロジェクトメンバーの中で完成イメージに微妙な差が生じて、目指す方向性がバラバラになります。

そして、ターゲット設定も曖昧になるので、ユーザー目線の設計ができなくなって、クライアントが求めていないデザインが完成することになります。

先生
先生
これでは、Webサイトの目標も達成できないことになって、存在意義のないものになってしまうね。

やり直すことができれば良いのですが、クライアントから見込みがないと判断されて、二度と仕事の依頼が来なくなってしまうことにもなりかねません。

どんなに見た目の良いデザインや設計でもコンセプトに沿って作られていなければ、クライアントからのニーズに答えられません。Web制作に携わる全員の中でコンセプトや目指すべきゴールを共有することが、求められるWebサイトができるために大切なことです。

そして、コンセプトの共有は、チームのメンバーの分業をスムーズにすることができます。

複数の工程を積み上げるときに、それぞれが別々に作業を進める際にも、同じ世界観に統一することができるからです。

デザイニャー
デザイニャー
この世界観の一致こそがコンセプト設計をするメリットというわけなんだニャン。

Webサイト制作の流れ

 Webサイトの制作の現場でよく使われるのは次の3つの単語です。

・テーマ

・コンセプト

・アイディア

Webサイトを制作する過程で見てみると、まず最初に「テーマ」があって、それに合った「コンセプト」を作って、そのコンセプトのための「アイディア」を出していくという流れになります。

先生
先生
でも、この3つの単語のそれぞれの違いがはっきりわかる?

デザイニャー
デザイニャー
同じような意味に思えて、違いを答えるのは難しいニャン。

テーマ

先生
先生
「テーマ」というのは、何のためにあるWebサイトなのかという主題のことを指すんだ。

「主題」という意味は、「扱いたいものの中心になっている核心」となる部分のことで、つまり、何のためのWebサイトを作るのかということを考えます。

作ろうとしているWebサイトのテーマは何なのかを考えて決めます。

先生
先生
テーマについて、具体的な例を挙げてみると次のようなものだよ。

・転職:エンジニアに特化した転職サイト

・会社案内:化粧品を開発している企業のコーポレートサイト

・ネット通販:女性用の洋服の通販サイト

企業ブランドのイメージや商品のことについてを世間に広めて、サービスや商品を購入してもらうということがテーマになります。

テーマは一つに絞るようにしましょう。

コンセプト

「コンセプト」とは、テーマを考えた後から更に、ターゲットは誰なのかを考えて、ターゲットに何を伝えたいのかを明確にしたものです。

女性用の洋服の通販サイトについて、コンセプトの具体例を挙げてみましょう。

・オシャレ好きな女性に洋服を購入してもらいたい。

・店まで行かなくても手軽に洋服を選んで購入してもらいたい。

先生
先生
イメージが具体的になって、デザインの方向性が見えてきたでしょう。

アイディア

先生
先生
「アイディア」というのは、コンセプトを「どんな切り口でアピールする」かについての具体策だよ。

アイディアは、コンセプトを表現するための問題点はどこにあるのかや、足りないものがないかを考えることで生まれます。

「女性用の洋服の通販サイトに載せる洋服」を例にすると次の通りです。

・綺麗め大人のコーディネートの参考になるような洋服の組み合わせ

・若い女性に人気のある洋服を比較的安値で提供する

・ジーパンに合う洋服を紹介する

・40代・50代の女性に人気がある落ち着いた中にファッショナブルなものがある洋服

ここまで思い浮かぶと、Webサイト全体のデザインイメージがはっきりとしてきましたね。

デザインコンセプトで定めておくべきこと

先生
先生
コンセプトを設計していくときには、「誰に何を伝えるのか」を考えるんだけれど、もう少し詳細を設定していこう。

Webサイトの要点を正しく伝えるためには、「5W1H」を元にコンセプトを整理していくとやりやすいです。

先生
先生
5つのWとは、次の通りだよ。

What:何を

Who:誰に

Why:なぜ

When:いつ

Where:どこで

What:何を

Webサイトの要点のことで、サイトを通して何を伝えたいのかや、Webサイトを運営する最終的な目標は何かを設定します。

Who:誰に

ターゲットは誰かを決めます。

ターゲット像を具体的にするために、

・年齢

・性別

・職業

・性格

・趣味

といったペルソナを細かく設定します。

ペルソナを設定してWeb制作に取り掛かることで、ターゲットに沿ったデザインを作ることができます。

Why:なぜ

ターゲットがどうして何を求めてWebサイトを訪れるのかという理由を明確にします。

When:いつ

ターゲットがいつ、どんな状況でWebサイトを訪れるのか。

・仕事中

・昼休み

・通勤時間

・休日

・1人でいるとき

・友人と一緒の時、

・家族でいる時

・何の情報を知りたいとき

など、想定できる状況を設定しましょう。

Where:どこで

ターゲットがどのような場所でどんなデバイスを使ってWebサイトに訪れるのか

例えば、

・自宅のパソコン

・会社のパソコン

・電車の中でスマートフォンを使って

など、それぞれの状況でデザインは異なってくるので、可能性が高い状況を想定することが必要です。

How:どうやって

ターゲットがどのようにしてWebサイトに辿り着いたのかを想定します。

・検索上位に出てきたから

・広告が目に止まったから

・話題になっているから

などが想定できれば、Webサイトが成功する可能性が高まります。

コンセプトの構成の立て方

先生
先生
クライアントからWeb制作の依頼を受けた場合、どのようにコンセプトを設計して良いのかのプロセスは次の通りだよ。

・ヒアリングで得た情報を整理する

・目指す方向を提案

ヒアリングで得た情報を整理する

Webサイトのテーマからコンセプト設計までは、全てデザイナーが想像して勝手に作っていくものではありません。

Web制作の前にまずは、クライアントからの依頼内容や概要をヒアリングして、最終的に目標が達成するWebサイトができるようにします。

先生
先生
そのために最初にすることは、情報取集と整理だよ。

ヒアリングで、必要な情報を引き出すことが、コンセプト設計に活かされます。

初めに聞きたい内容を箇条書きにするなどの準備も大切です。

ヒアリングシートを作って、聞き漏らしがないようにしましょう。

先生
先生
まずは次のような基本情報を確認しよう。

・Webサイトの要点

・Webサイトでアピールするポイント

・Webサイトのイメージ

・Webサイトに載せる内容

・コンテンツ素材を提供してもらう

【徹底解説】Webデザインやサイト制作に必要なヒアリングのポイントこの記事は次のような方におすすめです。 ・初めてWebサイト制作を依頼された。 ・Webサイトを作る際のヒアリングはどん...

Webサイトの要点

どういう理由でWebサイトを制作したいのかをヒアリングして正しく把握します。

サイトリニューアルの依頼である場合は、今の課題を聞き出しておきましょう。

Webサイトでアピールするポイント

競合他社との差別化や商品の特性や強み、そしてそれを選ぶ付加価値なども聞き取りましょう。

そして、ターゲットにしたいエンドユーザーもここで明確にします。

Webサイトのイメージ

・Webサイトを訪れたターゲットにどんな印象を持ってもらいたいか

・イメージの参考になるサイト

・競合他社のサイト

など、思い描いているイメージがある場合は、それを共有しましょう。

Webサイトに載せる内容

・商品についての情報

・ターゲットに伝えたいメッセージ

・実績やお客様の声

・Webサイトに載せたい事柄

・Webサイト全体のボリューム

などについても確認しておきましょう。

コンテンツ素材を提供してもらう

使いたいテキストや写真などのコンテンツ素材があれば、提供してもらいましょう。

また、新たに制作する必要があるコンテンツがあれば、事前に伝えてもらいましょう。

クライアントから詳しく聞き出せるほどにコンセプト設計はしやすくなりますので、参考サイトなどをみながら、イメージを言語化していけるとなお良いです。

気になるキーワードが浮かんできたら付箋に書いたり、リストアップしておくと、デザイン制作に役立つこともあります。

目指す方向を提案

クライアントとヒアリングして引き出した情報を元にコンセプト設計をしていきます。

先生
先生
さっき紹介した5W1Hを抑えながら、それらの項目をさらに具体的にしていこう。

例えば次のように網羅したコンセプトシートを用意して、フレームワークに沿ってWebサイトの方向性を整理していきましょう。

・誰にどんなメッセージを提供したいか

・エンドユーザーに提供する情報は何か

・Webサイトにどんな印象を持ってもらいたいか

・Webサイトの中で一番重要な情報とは何か

・最終的なターゲットに起こしてもらいたい行動は何か

・ターゲットを具体的に設定する

・ターゲットがWebサイトに来る方法は?

・ターゲットに行動を促す一押しに有効なものは何か

・商品の強み・価値・特性は?

・他の会社と競っているのはどんな点か

これら情報を整理したコンセプトを、まずはクライアントにみてもらいます。

もし認識の違いがあった場合は、この段階で修正します。

クライアントとコンセプトイメージを共有できたら、Web制作のチームのメンバーとこれらを共有しましょう。

デザイニャー
デザイニャー
デザイン制作に入る前に、これらの情報を整理してまとめるだけで、ずいぶん時間がかかるんだニャン。

先生
先生
でも、ここを疎かにしないで、丁寧に行っていけば、この先の作業をスムーズに進められることができるし、何よりも成果の上がるデザインを作り上げることができるんだ。

デザインコンセプトの作成工程についてのおすすめ記事

ここで、デザインコンセプトの作成の工程について詳しく解説されている記事を見つけましたのでご紹介します。

>>デザインコンセプトの作成方法

一度考えたデザインコンセプトは変更しない

一度決めたデザインコンセプトは、できるだけ変更しない方が好ましいです。

サイトコンセプトを決めたら、コンテンツを作っていくことになります。

コンテンツは決められたコンセプトに沿って作るため、統一感があり、ターゲットに伝わりやすいサイトになるのです。

その柱となるコンセプトがコロコロ変わるようでは、意味がなくなります。

デザイニャー
デザイニャー
じゃあ、コンセプトは絶対に変えてはいけないものなのかニャン?

先生
先生
実はそれは違うんだ。

時代の流れや事業内容が変わったりすることで、設定していたコンセプトが合わなくなる場合も出てくるので、そのような状態になったら、コンセプトを変えないといけなくなります。

明らかにコンセプトが合っていなくて、変更する必要があると判断した場合は変更してもかまいません。

先生
先生
でも、変更する場合は慎重にすることが大事だよ。

まとめ

先生

先生
先生
この授業では次の18個のことについてお話ししてきたよ。

・Webデザインにはコンセプトが必要

・デザインコンセプトって何?

・デザインコンセプトを明確にしないとどうなる?

・Webサイト制作の流れ

・テーマ

・コンセプト

・アイディア

・デザインコンセプトで定めておくべきこと

What:何を

Who:誰に

Why:なぜ

When:いつ

Where:どこで

・コンセプトの構成の立て方

・ヒアリングで得た情報を整理する

・目指す方向を提案

・デザインコンセプトの作成工程についてのおすすめ記事

・一度考えたデザインコンセプトは変更しない

先生
先生
デザインを制作するために、コンセプト設計がどんなに重要かがわかってもらえたかな?

成果が出るWebデザインにするためにも、コンセプト設計を丁寧に行えるかどうかが肝心です。

コンセプト設計を正しく作ることで、

・ターゲットにWebサイトの要点を正しく伝えることができる

・クライアントとの完成イメージのズレをなくせる

・制作に関わるチームでイメージ共有ができる

・Webサイトの最終目的を実現するデザインを作ることができる

というようにメリットがたくさんあります。

Web制作をするときの多くが、クライアントとのヒアリングをして、それをもとに情報整理をしてコンセプトの設計までも行います。

デザイナーとして携わる仕事を総合的に捉えることで、効果がより発揮でき、作ったWebサイトが目的をあh他して成功することの一端を担えるのであれば、やりがいがますますモテるようになります。

私たちは頑張るあなたを応援しています。