| 本講座のゴール | 成約を獲得すること |
| 目安の受講期間 | 1ヶ月 |
1. WEB制作の仕事の流れを理解する
動画
スクールや独学でWEBサイトを制作する技術は学べたかもしれないですが、そもそもWEB制作をどのように進めるのかを理解していないと、うまく提案できません。
WEBデザインスクールではそこまで教えてくれるところは少ないので、「どのように進めれば良いのかわからない」といったお困りの声を聞くこともよくあります。今回は私の制作の細かい進め方をすべて公開します。
WEB制作の仕事の進め方
あくまでも私の進め方なので、こちらを元に自分流にアレンジしていただいて構いません。
ヒアリングやご提案に使用している私の資料などはこちらにアップしていますので、こちらも合わせて参考にしてみてください。
打ち合わせの使っている資料
まずは、お客さまのご要望やお悩みをヒアリングします。ヒアリングした結果を受けて、提案書にまとめます。ご提案が気に入っていただければ成約となります。(この辺りの詳しい流れは次の項目で説明します。)
制作スケジュールを提示します。お客様がいつ何を用意すべきかなど担当者と作業内容、作業期間がわかるようにご提示しましょう。
Webサイトで実現したいこと、ターゲット層、検索で狙うキーワード、サイトマップ(サイト全体のページ構成)など、お客様としっかりすり合わせを行います(このすり合わせが出来ていないと、あとで双方の認識のズレが生じてスムーズに進まない)。
決めたペルソナに合わせたデザインの方向性(色、使う画像の雰囲気、フォント、ボタンのシェイプなど)をご提案します。
お客さまがまだ自社の立ち位置やターゲット層に関して迷っている場合は、自社のポジショニングやペルソナ設計などのブランディングからお手伝いすることもあります。
ワイヤーフレームとは、Webサイトのレイアウトやページを構成するコンテンツの配置を決定するための設計図です。
画像やテキストの配置などサイト全体の構成や階層構造、HTMLタグなどのマークアップ、レスポンシブ対応なども意識しながら設計していきます。
ちなみに私はAdobe XDを使用して作成しています。作成、共有、コメントなどとても使い勝手が良くておすすめです*
Webサイトの詳細なデザインを制作します。メインビジュアル、写真素材の選定や加工、装飾、フォントやフォントサイズなどサイト全体のデザイン面を作り上げていきます。
お客様とデザインのすり合わせをせずにいきなりコーディングに入ってしまうと、度重なる修正が続き、コードを書き直すことがとても非効率です。
まずはデザインカンプでしっかりとすり合わせを行うとその後の作業がスムーズに進みます。(複数人でサイト制作をする場合も、このデザインカンプを元に制作が進みます)
こちらも私は基本的にはAdobe XDを使用して作成し、画像の加工や装飾など必要に応じてPhotoshopやIllustratorをたまに使用します。
コーディングとは、デザインカンプをもとに、HTML(プログラミング言語)やCSS(スタイル指定言語)を記述してWebサイトの実装を行う工程を言います。
STEP5〜7でしっかりと認識のすり合わせを行なっておくと、このコーディングの段階はかなり楽になります。逆にそれぞれの工程での認識合わせができていないと、コーディングのタイミングでデザインや構成を大きく変えたいと言われたり、トラブルに発展しかねません。
それぞれのタイミングでの認識合わせを忘れないように意識しましょう。
既存のWordPressテーマを使用して制作している場合は不要ですが、自分でオリジナルテーマを作る場合はHTMLで静的コーディングを作成してからWordPressに組み込む作業が必要です。
自信がない方やスキルがない方は、この部分だけ依頼できるパートナーを探しておくことをおすすめします。
ここまでの流れの中でも、ステップごとに確認はしっかり行いますが、
WordPressの組み込みまで終わったら最終確認です。まずは自分で、基本動作のほか、外部リンク・ページ間リンクの遷移や誤字脱字まで細かくチェックを行い、動作不良や誤りがあれば修正します。その後はお客様に最終確認をしてもらい、問題があれば修正します。
最終確認で承認が取れたらいよいよ本番環境で公開です。
公開後のアフターフォローも忘れずに。最後にブログの更新方法のレクチャーと保守や運用サポートなどアフターサービスの説明をします。
2. お問い合わせ〜成約までの流れを理解する
動画
次に、お客様からお問い合わせが来てから成約までの流れも理解しましょう。
こちらも私の場合のケースですが、参考にしていただければ幸いです。
お問合せフォームやDMなどのコンタクトツールからお問い合わせが入ります。
お問合せ時は「見積もりだけください」や簡単な質問だけのことも多いです。ここでポイントなのが「メールでの返答だけで終わらせない」ということ。 その後の打合せにいかに繋げていけるかが成約率アップのための第一関門です。メールだけのやり取りは極力せずに、「お客様のご要望やサイトの規模によってもご提案が大きく変わるので、まずは直接ヒアリングさせていただければと思います。」などとお伝えして、直接の打ち合わせにつなげていきましょう。
お客さまのご要望やお悩みをヒアリングします。ヒアリングした結果を受けて、提案書にまとめます。
打合せ時にヒアリングをする方もいますが、私の場合はヒアリングシートを作って事前に入力してもらうようにしています。そうすることで、簡単なご提案と概算見積もりを最初のお打合せ時にお伝えすることができるので、何もベースがない真っ白な状態よりも話がスムーズに進みます。
ご提案書が出来たら、提案したWEBサイトを制作する場合の概算見積もりも出します。(成約前なので、時間をかけすぎず、どんな構成のサイトができるのかが分かる程度のサイトマップのような提案書でOK)
お打ち合わせで提案書とお見積りの説明をして、お客さまに契約するかご検討いただきます。
ヒアリング内容をもとに、簡単なご提案と概算見積もりを作ります。これがあることで、それをベースに「このページも入れるといくらになるか?」「このページは減らして予算に収めたい」などの議論がスムーズに進みます。また、どんなサイトができるのか、未来を見せてあげてワクワクしてもらうことが成約率アップのための第二関門です!
最初の打ち合わせでは、自分の強み(他者と何が違うのか)もしっかり伝えるようにしましょう。
無事成約となった場合は、着手金として半額をご請求し、契約書も締結します。
いよいよ制作スタートです。先ほどお伝えしたWEBサイト制作の流れに沿って進めていきます。
3. 必要書類の作り込み
WEB制作の流れと問い合わせから成約までの流れを理解できたら、いよいよ本番の打ち合わせに向けて資料の作り込みと準備をしましょう。
少し恥ずかしいですが、今回は特別に私が実際に使用していたヒアリングシートなどを全て公開しちゃいます!
こちらを参考に、自分のオリジナル資料を作っていただければと思います。
(ヒアリングシート、自身の強みや特徴の説明、保守サービスなどアフターサポートの説明、注意事項、契約書を掲載)
ワーク1. 初回打ち合わせに必要な資料を準備しよう
私の資料を参考にしていただいても結構ですが、皆さんの個性や強みを合わせてオリジナルの資料を作ってみてください*
資料のリストとチェックリスト
3. お問い合わせ後、初めての打ち合わせの進め方
初めてのお打ち合わせは、その後契約してもらえるかどうかが決まる勝負所!
打ち合わせの進め方もデザイナーによって様々で、やっていく中で自分のやり方が確立していくとは思いますが、最初は何もない状態で生み出すのは大変です。私の進め方をここでレクチャーさせていただくので、最初のうちは参考にして打ち合わせを進めてみていただければと思います。
安齋 茉利子参考までに、私の成約率は約8割(分母はご相談に来てくれた方)。自分で言うのもなんですが、これはだいぶ高いほうだと思います。
成約につなげるにはブランディングや集客動線ももちろん重要ですが、初回の打ち合わせでの印象がかなりポイントになってくると思っています。
今までの経験の中で試行錯誤しながら固まった「成約率アップの打ち合わせの進め方」を、特別に伝授させていただきますので、ぜひ参考にしてみてください*
直接会って打ち合わせをしても問題ないですが、ウェブ会議ツールなら全国どこでもやりとりができるのでおすすめ。私のお客様も北海道〜沖縄、さらにハワイにまでいらっしゃいます。
お問い合わせがあったら日程調整をして、当日使用するZOOMのリンクをお送りします。スカイプやGoogleMeetなど別ツールでも良いのですが、ZOOMが一番浸透していてお客様にも馴染みがある事が多いので、ZOOMが一番おすすめです。
打ち合わせ当日は明るい笑顔で、挨拶から始めましょう!
まずは自分の経歴やスキル、事業内容について簡単に説明しておくと、強みも合わせてアピールできるのでおすすめです。
事前にお送りしたヒアリングシートの内容を一緒に確認しながら、更に深堀りして聞いていきます。
打ち合わせの中でもヒアリングが一番大事です!相手の悩みや現状を知らないと適切な提案ができないですし、自分のサービスでそれを叶えることができるかもわからないので、しっかり確認しましょう。
実際にサイト制作を進めなかったこともあります(動画)
ヒアリングの時点である程度お悩みは把握しているはずなので、打ち合わせまでに簡単なご提案を用意しておくと、より打ち合わせの内容が充実します。
事前にヒアリングしていた内容を元に、おすすめのサイト構成(サイトマップ)と概算見積もりを提示しましょう。
このタイミングで提示することで、お客様もサイトの構成や金額感のイメージがつかみやすくなり、具体的な話に進めやすくなります。
ホームページ制作は二人三脚で進めていきます。お客様へお願いしたいことや気をつけていただきたいこともあるので、私はこのタイミングで提示しています。
私がお願いしている内容は、資料のP◎に掲載しているので参考にしてみてください。
アフターサポートの手厚さも成約に関わってくると思います。納品後にどんなサービスが有るのかも合わせてご紹介しておきましょう。
行った岩内を防ぐためにも資料で残しておく(動画で伝える)
ワーク2. 打ち合わせのロープレをしてみよう
打ち合わせのスタートからゴールまでをロープレしてみましょう!
私自身も最初の頃はお客さまとの打ち合わせの前に、挨拶からクロージングまで通しでロープレをしていました!
打ち合わせ前には、進め方の目次をメモしておいたり(当日はそれを見ながら進める)、聞きたいことや確認すべきこともメモで残しておくと、スムーズに進めやすいのでおすすめです。
STEP3の振り返りチェック
STEP3の講座の内容ができたか確認しましょう!
- 「WEB制作の流れ」と「お問い合わせから成約までの流れ」を理解できた(不安な部分は今後の強化ポイントとして把握)
- 打ち合わせに必要なヒアリングシートや資料の準備が完了した
- 打ち合わせのロープレを録画して改善点を把握した
WEBデザイナースタートアップ講座まとめ
開業前のマインドセットや準備タスクから始まり、お問い合わせ獲得の方法や成約率アップのためのコツに関する私のノウハウを全てお伝えさせていただきました。
最初にお伝えしたとおり、起業当初にいちばん大切なのは「行動」→「反省」→「改善」のサイクルです!
本講座の振り返りと反省、改善も必ず行いましょう。
つまづきポイントチェック表にて、どこで躓いているのかをチェックし、再度戻って学習をしてみてください。
打ち合わせまでいって案件が獲得できない倍 →資料の準備が不足、未来を見せてあげれていない、自信がなさそうにしていないか ※そもそも問い合わせが来ない →露出のポイントに戻ってやり直そう。自ら営業メールを送ってみよう、モニター募集のキャンペーンを諦めずに続けよう ※問い合わせが来るけど打ち合わせができない →最初のメールで情報を出しすぎてない?ファーストコンタクトは迅速に、
つまづきポイントチェック表



