ホームページづくりにおいてやるべき流れを簡単に紹介する、初心者向けエントリーです。
突然、上司に「会社のホームページを作れ」と言われて戸惑っているあなた。 もしあなたが完全に素人で、まったく自信がなくても大丈夫。 ポイントさえ抑えれば、ホームページなんて簡単なんです。
（元看板職人の私でも仕事にしているくらいですから本当です）でも細かい点はググってください。
- 目的と心がけ
- 制作前の準備
- 自作？外注？
- 自作：自作に必要なもの
- 自作：無料作成サービス
- 外注：依頼の流れ
- 外注：制作会社を選ぶ
- 外注：納品後のチェック
- 更新する・ブログを書く
- アクセス解析で成果を確認する
- まとめ
目的を決める
まず、ホームページを作る目的を明確にしましょう。 目的により、マーケティング戦略やコンテンツの優先順位も変わってくるからです。
商品を売る？ブランドを広める？ 前者は商品の詳しい説明や他社との差別化も必要でしょう。 後者はまず信頼を勝ち取ることが優先です。そのため、ナレッジの公開も必要かもしれません。
目的を達成するためにターゲットの趣向を研究して、コンテンツの方向性を決めましょう。 漠然とサイトを作ると主観的になりがちです。
- 入り口ページを作る
- Flashが中心、または画像が多くて重い
- ナビゲーションが凝っている・テキストが隠れている
- 文字が小さい
- 英語が中心（日本語がない）
上記のように見難い・使いづらい・理解しにくい自己満足的なデザインはダメ、絶対！
ホームページはユーザーの行動を喚起するものでないといけません。 利便性を第一に心がけるとよいでしょう。
- シンプルで読みやすい
- 情報がもれなく、重複なく整理されている
- 商品の他社に比べ魅力的である
- ユーザーがなにをすべきか、明確である
制作前の準備
ホームページ制作は最初の設計が肝心です。下記はイメージを明確にするために決めることです。
- 目的を明確化する
- 目標を立てる
- コンテンツ計画に落としこむ
- 画面遷移図を作る
- ワイヤーフレームを作る
- デザイン要件をたてる
- 原稿を作る
目的を明確化する
まず、前述したように目的を明確化しましょう。 簡単でもいいので要件を取り纏めたうえ、社内のコンセンサスをしっかりとり、共通の目的意識をもつことが重要です。
目標を立てる
目的を達成するためには指標を作り、目標を立てるとやるべきことが明確になります。 たとえば目的が集客であった場合の指標の例です。
| 指標 | 説明 |
|---|---|
| 訪問者数 | サイトに訪問したユーザーの数 |
| ページビュー数 | ユーザーが閲覧したページの数 |
| コンバージョン数 | 目標の達成数（商品の注文数や問い合わせ数、資料請求など成果を設定） |
| 獲得単価 | 成約・目標達成にかかった金額 |
| 総売上 | ホームページから上がった売上 |
| 購読数 | Facebookページ、Twitter、RSSの購読者数 |
これらはGoogleアナリティクスなどアクセス解析ツールによって数値をとることができます。
コンテンツ計画に落としこむ
目標達成のために必要なコンテンツ要素を考えます。 ターゲットの訪問数を獲るために、どんなページがどれくらいの数必要なのか？ 競合など、たくさんページを見てエクセルなどで書き出してみましょう。
画面遷移図を作る
コンテンツがある程度定まったら、整理しましょう。 画面遷移図は、トップから下層ページまでの遷移を絵にしたものです。 なるべくすべてのページへの簡単に遷移できるよう、クリック数を少なく済む設計にしましょう。 cacooなどのフリーツールやExcelでも作れます。
ワイヤーフレームを作る
ページの構成を絵で書いてみます。 なるべくシンプルにして、読みやすく、ユーザーがアクションしやすい構成します。 例えば、
などなど。 私の場合はAdobe Fireworksでデザインの下書きも兼ねています。 ちなみに画面遷移図とワイヤーフレームは上司に中間報告として提出すると有効です。 具体的な完成イメージが湧きやすいからです。
デザイン要件をたてる
ようやくデザインを考えます。 ここまでをしっかり考えていれば、大きくデザインの方向を間違うことはないでしょう。デザインコンセプトはおのずと「目的を明確化する」の項で決めたターゲットユーザーで決まるからです。 各分野で成功している、いろいろなサイトのデザインをたくさん見て参考にしましょう。
コンテンツを作る
あとはコンテンツ計画にしたがって原稿を書いて、書いて、書きまくる！
自作？外注？
ホームページを作るためには、大きく分けて2通りの手段があります。
- 社内でホームページを自作する
- ホームページ制作会社に依頼する
社内でホームページを自作するメリット
- 費用が安い
- いつでも更新できる
- 思い通りのホームページができる
ヘタに制作会社に頼んだら初期数十万、月1回の更新で数万なんてのはザラです。 それにくらべ自作の場合は最低限、ドメインとサーバーで年数千円＋社内コストのみ。 いつでも思い通りに、安く更新することが可能です。
社内でホームページを自作するデメリット
- 手間と時間がかかる
- 勉強と知識が必要
ホームページは手を加えて改善するほど集客力を増します。 しかし通常業務と並行してホームページを運用するのは工数的に厳しいし、専門知識が必要なトラブルが起きた時にお手上げだったりします。
ホームページ制作会社に依頼するメリット
- 時間の節約
- 専門知識が不要（補完してくれる）
- 使い勝手が良く、きれいなデザイン
いうまでもないですが、プロに任せれば安心です。 さらに、集客ノウハウを持っている会社だったらいろいろなアドバイスをうけることができるでしょう。 とにかく手っ取り早いです。
ホームページ制作会社に依頼するデメリット
- 高価だし、営業してくる
- 社内にナレッジ（知識）が蓄積されにくい
制作会社をコントロールするためにはコスト管理やコミュニケーションなど、ある程度のビジネス能力が必須です。 丸投げするとホームページ会社のいいなりになってしまうこともあるので注意が必要です。 責任の所在や対応フローもあらかじめ明確にしておきましょう。
自作：自作に必要なもの
上記設計が終わったらいよいよ制作にとりかかります。 基本的な流れは以下です。
デザインを制作する
ワイヤーフレームを元にデザインを作ります。 正直、ホームページ制作をするうえで一番悩むところです。
ホームページはヘッダー（タイトルロゴ、グローバルメニューなどが置かれる上部）、フッター（copyrightなどが置かれる下部）、サイドバー（メニューなどが置かれる※ないこともある）など全ページ共通部分があります。
それら共通部分で構成したHTMLとCSSのセットを"テンプレート"と呼びます。 テンプレートはサイトにより1つの場合もあれば、数十におよぶ場合もあります。
特にトップページとそれ以外が別テンプレートになることが多いです。 その他、デザインのポイントです。
また、人は画面の左上＞右上＞左、中部～左下部に目線を走らせます。
目立たせたいキャッチやメニューは左上に置き、右下には詳細まで読んでくれるユーザーのための機能を置くとよいでしょう。 ※正確な測定にはヒートマップ解析やアナリティクスのウェブ解析機能などを使います。
デザインは専用ツールを使うのが一般的です。 有名なのはAdobe IllustratorやPhotoshopですね。私はメインでFireworksを使っています。 無料のPhotoshopの簡易版ツールやPhotoshop Express Editor、オープンライセンスのGIMPもあります。
コーディングする
デザインが完成したら画像を切り出しHTMLとCSSで組み立てなおします。 基本的にはWindowsに標準でついているNotepadや秀丸などテキストエディタで作成できます。
若干高価ですが、DreamweaverやCodaといった効率よくコーディングできるツールもあります。 初心者にとってHTMLは難易度が高く、正念場となるでしょう。 私もよく見るHTMLリファレンスへのリンクを貼っておきます。
CMSを検討する
ホームページのコンテンツを管理画面で管理でき、SNSとの連携や自動バックアップなど機能を追加できるWordPressの導入をおすすめします。 これがあればHTMLの知識がなく、複数の同僚とコンテンツを作成できますね。 http://ja.wordpress.org/
ドメインを準備する
ホームページのURLになります。 会社のブランドはとても重要です。独自ドメインの取得をおすすめします。 （名刺に記載されるURLですからね） ドメインの取得サービスは下記があります。
サーバーを準備する
WordPressとメールくらいの使用だったら安めのレンタルサーバーで十分です。 下記サービスはどこも安くて安定しているうえに、容量や機能は十分です。 独自ドメインとセットで申し込むと楽ですね。
ドメインとサーバーは基本的に固定費となり、年に数千円程度のイメージです。 eコマース機能やSNSなど特別な機能を使うことになったら別途高機能なサーバーを検討しましょう。
ホームページをアップロードする
ドメインとサーバーの準備ができたら、FTPクライアントソフトを使ってサーバーにHTMLファイルや画像素材をアップロードします。 FTP情報はレンタルサーバーの管理画面などから取得します。 FTPクライアントソフトは下記がおすすめです。
以上が大体の流れです。
自作：無料作成サービス
初心者の担当者がすべてをやりぬくのは大変！ ホームページ制作がうまく進んでいても他の業務が手につかなければ、上司はプラマイゼロ評価にするしかありません。
無料ホームページ作成サービスを利用する
そこで、デザインやHTMLの知識がなくても簡単にホームページが作れる無料ツールやサービスが存在します。
- strikingly ：デザインがきれいでモバイルにも対応しています。おすすめ。
- Webnode ：eコマースが月792円から作れてしまう。テンプレートも多様。これもおすすめ。
- BASE eコマースサイトが無料で作れるオシャレサービス。
- Jimdo ：ドラック&ドロップでグラフィカルにサクサク制作できます。国内で一番シェアが高い…と感じています。
どれも独自ドメイン、問い合わせフォームや、広告非表示など。カスタマイズもできて多機能なものばかり。無料サービスは進化しましたね！ 個人的には、お金をかけなくても上記サービスで十分立派なサイトが作れると考えています。
デメリットとしてはやはり自由度。 多機能とはいえ、無限ではありません。デザインの微調整やマーケティングの組み込みをとことんやろうとすると難しいかもしれません。
また、存続が運営サービスに依存してしまうので、突然の値上げや有料化、閉鎖は受け入れる必要がありますね。
無料テンプレートを利用する
デザインやコーディングだけが苦手…でもその他は自由にしたい！ という方にはテンプレートだけ無料のものを利用する手もあります。
- Nikukyu-Punch ：テンプレート数が多く、比較的きれいなものが多いです。おすすめ。
- TempNate ：有名な無料配布サイトです。コーポレートサイトに向いているかも。
- pondt ：珍しい1カラムのデザインがあります。
これらはカスタマイズ性も高く思いのまま。SEOやマーケティングの実装もとことんやれるのが特徴です。
デメリットといえば、あくまで静的テンプレートなのでブログやフォームなどの機能はもちろんありません。 また、デザインが若干古いところが多い気も…。クレジットや規約にも注意してください。
外注：依頼の流れ
通常業務でいっぱいなのに、さすがに作っている余裕がない。もしくは社内コストが高くつきすぎると感じたときは、専門家に相談して検討しましょう。 ある程度の設計さえ整っていればそれをもとに見積りを出してくれます。
もしくは設計の段階から相談に乗ってくれる会社もあります。プロの意見を聞きながら設計するとスムーズでしょう。 繰り返しになりますが、目標・KPIは必ず共有しましょう。 最初から完璧なホームページはありませんが、スモールスタートしてPDCAを回し、毎月110%ずつぐらい成長させていく…そんなイメージを抱いてください。 そこに対してあまりに無関心な会社は避けたほうがいいです。経験上、作りっぱなしでアフターフォローがないパターンに陥りがち。
外注：制作会社を選ぶ
ついまず価格に目が行きがちですが、頼むからには長く付き合えて、ともに戦えるパートナーとなってくれる会社を選ぶことが大前提です。 必ず制作会社のホームページや相見積をとって、比較・チェックすべきポイントを下記に記載します。
- 戦略立案・マーケティング施策
- デザインの柔軟性・幅の広さ
- アフターフォロー（対応のはやさ・親身）
- 価格
戦略立案・マーケティング施策
会社が持つべき目標、目標達成に向けて具体的な施策を提示してくれる会社かどうか。 検索エンジン・ソーシャルメディア・メルマガ・広告で集客し、LPO（ランディングページ最適化）EFO（エントリーフォーム最適化）を駆使して成約力を上げるマーケティング技術があればベストです。
数値のロジックがしっかりしている会社ほど実力があっていろいろ相談できるため、長くつきあっていけますよ。
デザインの柔軟性・幅の広さ
制作会社も効率化のためにある程度デザインテンプレートを準備しています。 それ自体は悪いことではありません。 しかし願わくば商品、ターゲットにベストマッチしたインターフェイスとデザインを提案してくれる会社を選びましょう。
多彩なデザインの実績があるか否かです。 デザインはどうしても非常にやりとりが多くなります。 撮影やインタビューなど短期間で段取りをしてくれるディレクターさんがいいですね。。 制作スケジュールをどの程度細かく出してくれるか、事前に問い合せてもいいかもしれません。
アフターフォロー（対応のはやさ・親身）
運用も任せるなら、どこまでの範囲を頼めるか、どれくらいの期間で対応してくれるか確認します。 制作会社の運用は工数（人日）ベースで価格が決まることが多いです。 そのため、限られた運用費で対応してもらう内容は計画的に組むべきです。
価格
アフターフォローとも関連しますが、同じ価格（工数）でも、会社によってできることに差があるのが現実です。 バナー作成は？ページ増量は？マーケティング施策のチューニングは？などできることを比較し、技術力を把握しましょう。
外注：納品後のチェック
検収期間はしっかり設け、最低限下記をチェックしましょう。
要件に沿っているか
あたりまえといえばあたりまえですが、チェックリストなどを用意し、要件を満たしているか必ずチェックしましょう。
動作は正常か
わざわざ要件を詰めないことが多い基本的な動作に関しても、チェック時に必ず確認しましょう。
- 極端に表示が重くないか
- リンク切れしていないか
- フォームは正しく動作するか
- 各デバイスで正常に閲覧できるか
など
成果を正確にカウントできるか
アクセス解析などを設置して、目標に対する成果が可視化している状態かどうか。 コンバージョン設定など、リリース前にしっかり設定しましょう。
SEO
SEOに関してはコンテンツが揃ったら、サイトの設計時にキーワードプランニングを実施し、事前に組み込むことが前提です。
SEOはテンプレートの調整ですべて終わるわけではありませんので、無料ツールやテンプレートの「SEO対策実施済み」という文言は参考程度にしておいてください。 タイトルへのキーワードの組み込みなど、レギュレーションを作成してしっかりチェックしましょう。
更新する・ブログを書く
ネットで集客するためには、ネット上で営業しなければいけません。 つねに有益な情報を発信し続けることでリピーターが増え、コミュニケーションが発生することではじめて商品への理解やサービスへの信頼が生まれてきます。
WordPressはどんな社員さんでも更新できる機能があります。 担当および社員全員にホームページを"運用する"体制ができ、目標を共有できたら成功が見えてきます。
アクセス解析で成果を確認する
運用が始まったら毎週、毎月のサイクルで成果をチェックします。 最初はアクセス数が増えずに悩むかもしれません。 しかし挫けず粘り強く、手を加えることでホームページは必ず応えてくれます。 課題を調査しては考え、トライ・アンド・エラーを繰り返してはアクセス解析を見て… 試行錯誤の連続となるはずです。
うまくPDCAが回りはじめれば、飛躍的にアクセスはあがるでしょう。 ともに親身になってアドバイスしてくれる制作会社がパートナーである場合は、成功までの時間はさらに短縮されるはずです。
まとめ
ひとつひとつ細かく突っ込むとキリがないので、以上がおおまかな流れです。 最後のほうは運用にも触れました。 スピード感のある会社ではリリースまで2、3ヶ月と上司から期限を切られることもあるかもしれません。
慣れない業務をやり遂げるためには相当忙しいと思いますが、やり遂げたとき、成果が上がった時の喜びはほんとに大きいですよ！ がんばってください。