Webデザイナー必見!Web制作を失敗しない為のコンセプトシート

もう10年以上デザインを行い100は越える制作をしてきましたが駆け出しの頃はノイローゼになるは、何度もこの業界を辞めよようと思ったか。。そんな苦労を皆様にして欲しくないと思い僕の制作ノウハウをお伝えし更に「コンセプトシート」「ヒアリングシート」をプレゼントします。Webデザイナーをこれから志す人や、未経験だけどWebデザイナーになりたい人にも必見です。

a0002_007981_m

デザインの仕事は本当に大変

WEB制作(ホームページ制作)をしている方は必ず悩む事、それはWEB制作をいかにスムーズにするかという事です。
中でもとびきり面倒な事として上げられるのがクライアントから「デザインを作っても何度もリテイクをくらう」ということです。
更に制作したのは良いが効果が出ないとクレームが来ることです。。。

a0001_016740_m

制作の進め方は個人に依存してしまう。

過去私も同じような経験をしております、この業界色々な事が出来る分制作の方法はその会社や個人に依存してしまい、その結果クオリティが非常に影響してしまう事があります。
今回はそんなたくさんの失敗から学んだ事を活かし、これ以上失敗する人を減らす目的で制作したコンセプトシートと制作の進め方についてまとめます。


まずは、僕の自作のシートをダウンロード下さい。

ヒアリングシート

コンセプトシート

※コンセプトシート、ヒアリングシートに関してのいかなる損害やトラブルについても責任を負いません。ご自由にご使用下さい。

それではダウンロードをして頂きヒアリングシートとコンセプトシートの使い方をお教えします。

a0002_011015_m

家を建てるのに住む人の事を知らないで建てるわけがない。


■ヒアリングシート

ヒアリングシートは基本的にディレクター相手に使う事も想定しておりますが、実際お客さんに聞いてもほとんどが「わからない」という答えしか言いません。ですので、こちから聞き出す事や技術が必要です。
そしてここで重要なのがお客様は素人と言う事です。とくに予算もハッキリしないお客様にほど、最大限の提案をすべきです。
それも集客目的です。提案がよければお客様は銀行からお金を借りてきてもあなたに払うでしょう。


■コンセプトシート

コンセプトシートは元々ディレクターが考えるモノだっと思います。しかし最近はデザイナーが方向性を示す事が非常に重要だと思います。その為、デザイナーがお客様の所でヒアリングシートを使い情報を引き出し、コンセプトシートにマーケティング力を絞り落とし込みます。この過程がないとデザイン作業をしててもまったく意味の無いデザインになってしまいます。



a0001_016186_m

失敗しない為の方法と注意点と方法論について

1.ヒアリングシートを元にクライアントにヒアリング

趣旨としては制作する意図をシッカリ汲み取るという所です。
・受注が決まり既に提案をしているかと思いますので、今回なぜWEBサイトを制作するのか意図を聞き出す。
・お客様とヒアリングする前に、事前に競合サイト最低でも10サイトをチェック
・Yahoo! 知恵袋、おしえてgoo でクライアントのユーザーの悩みをチェック、ここでも最低10の悩みをチェック
・ヒアリングシートを使いクライアントから情報を引き出して下さい。


2.ヒアリング内容を元にコンセプトシートを記入

・お客様からのヒアリングした結果を元にいよいよコンセプトシートに記入します。


3.コンセプトシートを元にデザインを開始

・デザインする上で重要な事は検索してきた人の欲求を満たす事、それが出来なければサイトにアクセスがこなくなる。
・まずは悩んでいる人をメインターゲットとしたサイト作りを行う事。


4.3ステップでクロージングする事

・サイトをつくる上で、お問合せや資料請求等までをクロージングと言います。クロージングするまでに必要な事は、3番の通り悩んでいる人を前提に考える事です。そもそも検索する動機として悩んでいるかた検索するのです、探しているから検索するのです、ただただ、それだけです。

・よく考えれば検索するという動機自体が何か疑問があったり悩んでいるから検索するのです。クリックとは違って検索することは自発的な悩みがあるからです。

・大まかにクロージングするための3ステップとして
 1.悩み共感ブロック(安心・共感)
 2.悩み解決ブロック(ベネフィット)
 3.商品説明ページ(クロージング)
の3段階に分かれると思います。人間は初めてみる商品に関して必ず不安を抱き、商品の説明をした所で本当に腑に落ちてハラで納得しなければ購入するという動機が生まれないのです。少しでもおかしい所があれば察知されます。なのでまずは「悩み共感ブロック」で「あなたの事はわかっているよ」と共感するのが必要なのです。


5.コピーライトは短く、悩んでいる人に刺さる文言を

・コピーライトは非常に重要です、コピーが悪いとすべてが台無しです。ハッキリいいます。写真より文字です。
写真はあくまでもイメージです。(商品写真は別です)文字は言霊と言って言葉は見た人を操る事もできます。悩んでいる人を調べてささる言葉を短くして下さい。決して難しくはありません。


6.カッコよいサイトを作って下さいは危険

・よくクライアントで「カッコよいサイトを作って下さい」という要望があります。このような要望は一番危険なのです。ですがクラインとは素人です、自分の趣味思考でサイトがカッコいいか決まります。ですので、こちらもプロとしてコンセプトシートをつくり効果のを得る為にターゲットを意識したサイト構築が必要なのです、その為のコンセプトシートなのです。

7.デザインをクライアントに提出する時の注意点

・せっかく頑張ってデザインした内容をクライアントにだす際には、必ず説明する義務がありますので、パワポ等に落とすなどしてクライアントに説明して下さい。コンセプトシートがあれば一貫性のあるサイトが構築できるので自身を持って説明しましょう。


コンセプトシートの大切さ

この様なステップを用いてサイトを構築していきます。ですがその為には絶対的にコンセプトシートが必要なのです、コンセプトシートはヒアリングシートがないと意味がありません。更にコンセプトシートがあるからデザインにブレがないのです。


まとめ

今のデザイナーに必要な事は、マーケティング力です。これにつきます。結局企業のウェブサイトはモノを売るか集客するか、問い合わせを多くするかの3つに絞られるのです。その結果なにが必要かというと売る技術なのです。なのでマーケティング力が必要になるので、小手先の技術はググればいくらでも出ます。繰り返しになりますがマーケティング力が重要なのです、今のデザイナーには非常に足りない部分だと思います。

下記は参考書籍です。僕はマーケティングの本を変なのも含めて50冊は読んだと思います。
その中でもとても参考になる書籍をピックアップしておきます。買うなら絶対おすすめ。

以上Webデザイナー必見!Web制作を失敗しない為のコンセプトシートでした。気に入ってくれたらシェアしてね!

関連記事

410cb567eef6283065274df2547a2b9a_s

Webサイトで問い合わせが来る必要なマーケティング・デザイン手段5選

久々の更新… さて今回はWebデザインを続けていくと、Webサイ...

記事を読む

smartphoneIMGL0018_TP_V

UIデザインの幅に関しての基本的な考え方と理論

全く更新できず時間が過ぎていく…気ままに更新していきますのでたまに見て...

記事を読む

skitched-20180814-223313

今日からあなたもデザイナー!?忘れがちな商業デザインの配色テクニック

デザイナーの商業デザイン配色テクニック 配色については過去ある程度テ...

記事を読む

domain_cms

今年こそWebデザイナーになりたい!現役Webデザイナーに必要なサーバー・ドメイン・CMS 基本知識について

今回で第5回を迎えました。なんとか頑張って続けていきます!Webデザイ...

記事を読む

cssjshtml_img15

今年こそWebデザイナーになりたい!Webデザイナーに必要なコーディングスキル編(html/css/js)

今回はコーディングスキル編として、Webデザイナーとして就職するために...

記事を読む

新着記事

_4da9d299-fa39-4639-bd84-79ffedfd71e9

指示をするということはプログラミングする事と一緒

ほとんど更新してませんが、ひっそりとオランダで生きてます(笑)オランダ...

記事を読む

410cb567eef6283065274df2547a2b9a_s

Webサイトで問い合わせが来る必要なマーケティング・デザイン手段5選

久々の更新… さて今回はWebデザインを続けていくと、Webサイ...

記事を読む

smartphoneIMGL0018_TP_V

UIデザインの幅に関しての基本的な考え方と理論

全く更新できず時間が過ぎていく…気ままに更新していきますのでたまに見て...

記事を読む

PASONAZ160306470I9A2122_TP_V

ECサイトに必須!商品検索したあとの検索結果の正しい表示について考える

ECサイトに必須!商品検索したあとの検索結果について考える ECサイ...

記事を読む

skitched-20180814-223313

今日からあなたもデザイナー!?忘れがちな商業デザインの配色テクニック

デザイナーの商業デザイン配色テクニック 配色については過去ある程度テ...

記事を読む

Comment

  1. shinji より:

    記事読ませていただきました。
    すごく参考になり助かります。
    1つご質問ですがコンセプトシートの
    【ターゲットセグメンテーション】で
    ・ユーザーの脳を3つ確認
    とありますが、これはどういうことでしょうか?

    とても参考になるコンセプトシートでしたので、余計気になってしまいました。
    お忙しいと思いますが、ご回答いただけると嬉しいです。

    • admin より:

      コメントありがとうございます。急いで作った為誤字がありました。大変失礼しました。
      正しくは、「脳」ではなく「悩み」です。
      新たにPDFを修正しましたのでそちらをご覧下さい。
      コンセプトシート

  2. […] 個人的に良かったのは、「Webデザイナー必見!Web制作を失敗しない為のコンセプトシート」にある、「コンセプトシート」「ヒアリングシート」です。今現状の状態からどう改善したいかのヒアリングから、制作前のコンセプトに繋がる具体的な提案までこの2つのPDFで解決できる内容が多く、すごくいいシートだと思います。 […]

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

_4da9d299-fa39-4639-bd84-79ffedfd71e9
指示をするということはプログラミングする事と一緒

ほとんど更新してませんが、ひっそりとオランダで生きてます(笑)オランダ

410cb567eef6283065274df2547a2b9a_s
Webサイトで問い合わせが来る必要なマーケティング・デザイン手段5選

久々の更新… さて今回はWebデザインを続けていくと、Webサイトの効

smartphoneIMGL0018_TP_V
UIデザインの幅に関しての基本的な考え方と理論

全く更新できず時間が過ぎていく…気ままに更新していきますのでたまに見て

PASONAZ160306470I9A2122_TP_V
ECサイトに必須!商品検索したあとの検索結果の正しい表示について考える

ECサイトに必須!商品検索したあとの検索結果について考える ECサイト

skitched-20180814-223313
今日からあなたもデザイナー!?忘れがちな商業デザインの配色テクニック

デザイナーの商業デザイン配色テクニック 配色については過去ある程度テク

→もっと見る

  • -売る技術-

    ウエブデザイン暦21年目。犬をこよなく愛するデザイナー。今はディレクションとデザイン を中心に制作全般をしてます。主にマーケティングを軸にデザインを組み立て商品が売れるサイトを構築しています。 デザインとマーケティングについて研究の日々。現在はオランダでWebデザイナーとして働いています。

    ツイッターやってます。
  • Amazonアソシエイト・プログラム規約による記載

    売る技術はamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

PAGE TOP ↑