Webサイト制作の流れ

では、実際にどのようにWebサイトを制作していくか簡単にご紹介いたします。WEBサイトの制作は大まかに以下のような手順で進みます。

 

どのように遠隔地でWebサイトを制作するのか?

stockvault-world-grunge-map141902

ネットにつながってパソコンがあれば、Webサイトはどこでも制作可能です。ただ、クライアントにとってはやはり顔を見て意見を交換しながら、制作を進めたい、というのが心情ではないでしょか。

中川はフランクフルトに住んでいるので、日本や他の国のクライアントとは実際にお会いすることはありません。会えない代わりにSkypeやLINEなどのツールでTV会議をしながら、話をします。制作期間中は、毎週、進捗報告をしながらTV会議を実施して、コミュニケーションします(フランクフルトの場合は会いに行きます!)。

このようにして「クライアントがぼんやりイメージ」しているものを表現し、形にしていきます。デザインに納得がいかない場合は何度も修正を加え、納得がいくまで対応をします。うまく表現できない場合は少し時間がかかりますが、必ずクライアントが納得し、クライアントの「達成したい事」を実現できるよう最善を尽くします。

 

クオリティーが高いサイトを作る

looking-man-mountains-2857

今の時代、Webサイト制作サービスのテンプレートを使うなどして、簡単にWebサイトが制作できます。しかし、自分の作品、お店、企業のイメージに合うテンプレートを探すのも一苦労です。厳密に言えば、ピッタリ合うようなものはないと思います。それもそのはず、一人一人個性があり、考えがあり、コンセプトも異なるからです。

Webサイトを公開するということは、世界中に「自分、お店、企業」を公表し、閲覧者にイメージと思いを共有するということです。言い換えれば、「自分を表現する場所」です。

既成のテンプレートでは表現しきれない、クライアントのコンセプトにそったデザインをすることで、新しいイメージを構築し、クライアントの「達成したい事」に近づけるようなWebサイトを制作したい。その思いを胸に日々、Webサイトを制作しています。

 

サイトのコンセプトを決める

まずはクライアントのリクエストをメールにてヒアリングします。

apple-bag-collaboration-154

①Webサイトを使って、何をしたいのか明確にする

集客をしたい、情報発信をしたい、ブランディングをしたい、ネット上で商品を売りたい、などクライアントの要望をヒアリングします。

②どんな人に来てほしいか?

Webサイトを見て、次の行動に動いてくれる対象を明確にします。

③どんな情報を掲載するか?

Webサイト上でどのような情報を掲載するか、ヒアリングします。

④どのようなサイトをイメージしているか?

クライアントより参考サイトをいくつかピックアップしていただきます。

 

まとめ

以前制作したフランクフルトの美容室を例にすると

  • ①複雑なプライスリストを整理し、わかりやすく伝え、ネットから集客をしたい
  • ②20代以上でかつフランクフルト在住の日本、中国、ドイツ人の女性
  • ③サービス内容、スタッフ紹介、問合せページ

となりました。

 

この情報を元に④参考サイトを参考にしつつ、サイトのコンセプトを練っていきます。

例:「フランクフルトに住む人が見る、上品でシンプルな多言語化されたヘアーサロンサイト」といった感じです。

 

ポイント(強み)を整理する

15115777092_31c07f2fd2_k

自分だけにしかない強み、ベネフィットを明確にします。フランクフルトの美容室の場合

  • 日本人が経営しているので、日本流のサービスができる
  • ドイツでも日本の最新のヘアースタイルを提供できる
  • ヘアーサロンだけではなく、ネイル、マッサージと他のサービスも提供している

という強みがありました。この強みをWebサイトで表現(文章+イメージを使い)します。

 

情報をインプットする

サイト(ロゴ)を制作する際は、クライアントの業務内容、ビジネスの内容を理解しなければなりません。

例えば、

  • 和牛焼肉のサイトを作る場合は「和牛とは何か?」ということを理解するため、1冊本を読む
  • テニスのサイトを作る場合はテニスアニメ「Baby Step」を見て、テニスを理解する

などなど、本や雑誌、アニメ、ドキュメンタリーなどからインプットをします。

このインプットを行っていないと、クライアントが伝えたいことを「わかりやすく伝える」ということがデザインに反映できません。

 

また多くのクライアントは通常業務があるため、サイト制作のためのテキスト作成は非常に時間がかかります。そのため、中川が内容をヒアリングし、テキストを作成することもあります(あまり専門的な内容でない場合)。

デザインの一要素である見出し、本文、キャッチコピーは非常に重要です。遠回りかもしませんが、情報をインプットするという工程は必ず設けるようにしています。

 

Webサイトの構成・仕様を決める

14625076141_ba9d0d94c3_k

WEBサイトの戦略

WEBサイトを使って商品を売りたい、情報発信のツールとして使用したいなどクライアントの要望を踏まえて、どのような機能を盛り込むか検討します。

例えば、情報発信をしつつ、商品を販売したい!という要望がある場合、WordpressでWebサイトを作成し、スマートEC(BASE、STORES.jp..etc)とリンクさせるなど、ご提案いたします。またfacebook、twitterなどのソーシャルツールとの連動も検討いたします。

WEBサイトを表示するデバイスを決める

PC用のサイトにするか、スマートフォン向けのサイトにするか、またPC、タブレッド、スマートフォンすべてで閲覧できるレスポンシブのサイトにするか、決めましょう。

キーワードを決める(SEO施策)

Webサイトにどのようなキーワードを盛り込むか検討します。Googleなどの検索エンジンから検索されるために、Webサイトに正しいキーワードを設定する必要があります。Google Adwordsのキーワードツールを使用し、検索ボリュームを調査し、クライアントに適したキーワードを選定します。

伝えたい情報をまとめる

WEBサイトで必要となる情報とキーワードをまとめます。情報をカテゴライズして、Webページを分割し、各ページどのようにリンクされるか、サイトマップを作成し、設計します。大体、何ページぐらい作成するかここでわかります。

Webページ内のレイアウトを決める

各ページのコンテンツをレイアウトしていきます。初めは手書きでざっとイメージを書きますが、最終的にワイヤーフレームを作成します。まずはトップページから作成し、次にその他のページを設計します。

機能を決める

1.更新について

WEBサイトをクライアント自身が頻繁に情報を更新する場合、WordpressといったCMS型システムを使います。WEBサイトは必要な情報だけ表示し、あまり更新を行わない場合はクライアントに簡単な更新の仕方(HTMLの修正)をレクチャーいたします。もしくは中川の方で更新作業を引き受けることも可能です。

2.WEBサイトの動きを決める

トップページの画像をスライドさせて表示する、スクロールしたらエフェクトが入るなどWEBサイトの動きを予めクライアントとすり合わせます。

 

Webサイトをデザインする

83H

イメージコンセプト

ヒアリングした内容を元にサイトのイメージコンセプトを明確にします。

例:「上品で落ち着いた感じ」「アナログでレトロ可愛い」など

サイトで使用するテーマカラーも検討します。

素材の準備

クライアントより必要なロゴデーター、写真素材、テキストなどを提供していただきます。素材の受け渡しはGoogleドライブ、OneDriveまたはDropboxにて行います。例えばメインイメージとなる高品質の写真素材がない場合は中川の方で商用無料素材を用意いたします。

テキスト素材はまずはクライアントからテキストを作成していただき、中川が編集を加えます。

デザイン

まずはトップページからデザインを行います。トップページのデザイン、テイスト&世界観でOKの場合、同じようなテイスト&世界観で他のページを作成します。トップページのレビューは細かいところまで、しっかり確認していただきます。

デザインまとめ

トップページのデザインが完了後、デザインで使用した「カラー」、「フォント」などデザインに必要な要素をまとめます。

Webサイトをコーディングする

js

HTML、CSSでWebページを作成する

デザインカンプの通りにHTMLとCSSを作成します。WEBサイトに動きを加えるjavascript等のプログラムも稼働確認し、準備いたします。

wordpressを使用する場合はwp化をする

サイトをCMS化する場合(ブログを作成する場合)は作成したHTMLをphpに変更します。

Webサイトをテストする

aa

作成したWEBサイトを複数のブラウザでテストします。またPC、タブレッド、スマートフォンと対応したレスポンシブデザインの場合は各デバイスで確認をします。

リリースする

06

いよいよサイトのリリースです。サーバにWEBサイトのリソースをアップすれば、サイトオープンになります。

予めサイトをどのように展開し、周知するか検討しておきましょう。

  • 検索エンジンから検索される(サイトオープンして3カ月くらいかかります)
  • 顧客用メーリングリストを作成し、サイトオープンメールを出す
  • facebook、twitterなどでサイトオープンの投稿を行う
  • ブログでサイトオープンの投稿を行う
  • ダイレクトメール、フライヤーなどの販促物にサイトURLを記載する
  • 名刺にサイトURLを記載する
  • 他のサイトにバナー広告を出す、または相互リンクを張る
  • リスティング広告を出す
  • Webデザイン登録サイトにデザイン登録依頼を出す(中川が行います)

Webサイトを運用する

app-store-device-macbook-air-1171

BLOG、SNSの更新

facebook、twitter、ブログ、メルマガ・・・などどのように情報を発信していくか、予め決めておく必要があります。例えば、

  • ブログはオフィシャルな情報を記録として共有する際に使用する。
  • facebook、twitterは簡単に気楽な情報を共有する際に使用する。
  • メルマガは新メニュー、イベントなど有益な情報のみ提供する。その際、BLOG、facebook、twitterとも連動し、多くの人に伝わるようにする

サイト制作の際にどのように「うまく伝えられるか?」を検討し、戦略を一緒に練ります。また制作後も無料で相談を受けつけています。

新規事業立ち上げの場合は、自分のノウハウの記録として、ブログを書き、たまってきたらそれを書籍とする。その書籍は自分の有益な記録として多くの方と共有でき、ブランディングにも最適です。興味のある方はこちらの記事を参照ください。

Webサイトから本へ。好きな事をとことん突き詰め、出版するノウハウ!

各種Webツールを使い、データを分析する

サイトを制作した後に使うのが、アクセス解析ツールです。

  1. Googleアナリティクスでアクセスを解析する
  2. Google Search Consoleでサイトを追加し、サイトマップを登録して、Google、Yahoo等の検索にWebページを登録する。また検索クエリー等の解析も行う(BingのWebマスターにも登録する)
  3. Google Adowordを使い、検索キーワードを確認し、新しくWebページを作る際のSEOを意識する
  4. Google Adsenseを使い、サイト上に広告を出す

など、Googleが提供しているツールを使えば、サイト運営に必要なことはほぼ可能です。どのようにこれらのツールを使ってサイトを運営していくかは、制作完了後に対面、またはSkype等のビデオチャットで話ながら、解説していきます。

最後に

Webサイトを作成し、オープンしてからが本当のスタートです。

どのように集客し、ユーザーにとって、有益な情報をわかりすく伝え、ファンを作るかが重要になります。わからないことがあれば、Webサイト制作終了後も、遠慮なくご質問ください。

自分が制作したWebサイトは一生見ていきたいと考えています。