HPは設計が重要

HP（＝サイト）作成で一番重要なことは、最初の設計です。

自作する場合も、業者に依頼する場合も、HPの完成度は最初の設計で8割決まります。

最初にデザインはもとより、今後の運営方法や展開など細部まで決めることにより、後々の手直しが少なくなり、時間の短縮とコストの削減につながります。

設計から作成までの流れ

【1】HPの目的と特徴を考える
【2】ターゲットを考える
【3】競合サイトを研究する
【4】掲載する内容の分類と重要度のランキング付けをする
【5】デザインを決める
【6】使用する写真画像・イラスト・素材をピックアップする
【7】作成に入る

それでは、ここからは、東京都北区在住の女性が、化粧品メーカーでの美容部員経験（5年）を経て自宅でカラーサロンを開いて独立する際に立ち上げるHPを想定して、進めていきます。

【1】HPの目的と特徴を考える

HPがあれば、「顧客獲得ができる」「売り上げが上がる」わけではありません。目的があいまいなまま立ち上げると、無数あるサイトの中に埋もれてしまい、失敗の原因となります。

また、同じようなサイトはあると思って良いでしょう。今回の場合、実際にカラースクールやカラーサロンのサイトはたくさんあります。

この中で、いかに自社だけの特徴を打ち出していけるかを考える必要があります。

【目的】

「HPでより集客し規模を拡大、将来事務所を借りてスクール業を行う」

【特徴】

「カラーだけでなく、本格的なメイクとアドバイスができる」

ここで決めていく項目

（1）短期運用なのか長期運用なのか
（2）拡張性

（1）HPが短期運用なのか長期運用なのか

まず、運用スパンを明確にすると、技術的基盤が決まります。

今回のケースは長期的運用が目的ですので、拡張性と更新頻度を考えると(x)htmlとcssを使ったサイト設計となります。全面Flashサイトは短期運用向きです。

htmlとcssで構造とデザインを分けることにより、デザインの変更やコンテンツの追加等に対応しやすくなります。

（2）HPの拡張性

HP運営をしていくと、業務の拡大とともにコンテンツが増えていきます。

今回の場合、最初のサービスメニューはパーソナルカラー診断とフルメイクサービスだけかもしれませんが、順調に成長した場合、色彩検定対策講座やアナリスト養成講座などのサービスメニュー増えていくかもしれません。また、企業向けの依頼が多くなり、企業セミナーが仕事の半分を占めるかもしれません。スタッフ紹介ページも増える可能性もあります。

HPを立ち上げ後に、設計を修正することはコストと時間がかかりますので、最初にHPの拡張性を、目的に合わせて設計します。

【4】「掲載する内容の分類～」もご参照下さい。

【2】ターゲットを考える

まず、ターゲットを明確にしないと、【1】で挙げた特徴を発揮しきれずに、目標が達成できなくなる可能性が高くなります。

それはターゲットとする客層によって、HPのデザインも変わってくるからです。（男性なのか、女性なのか、子供なのか、大人なのか、20代なのか、60代なのかなど）

【ターゲット】

「20～40代女性」

【3】競合サイトを研究する

競合サイトは大変参考になります。デザインや文章キャッチコピーやイベント、コンテンツ内容まで。とにかく、たくさんの競合サイトを見て、HPの構造を研究することをおすすめします。特に、自社HPがヒットさせたいキーワード（例えばパーソナルカラー診断　メイク）で検索して、ヒットしたサイトは参考になると思います。

研究することにより、【1】で考えた特徴が、本当に自社だけの特徴になり得るのかを、客観的に知る機会にもなります。

例えばカラーナビの場合、競合サイトは「ケイコとマナブ」です。

はっきり言って、サイトの規模や集客力では相手になりません。どこで特徴を出すかというと、

（1）カラースクールに特化したサイト
（2）コラムやお仕事ファイルなどから、講師の声や雰囲気を発信する
（3）色合わせゲーム等の遊びコンテンツから、カラーの楽しさを発信する

特に、カラーナビでは（2）に力を入れています。これは、スクール選び・先生選びのポイントで「スクール・先生の雰囲気が合うかどうか」が大きな意味を持つからです。

たとえ大手サイトには集客力では勝てなくても、訪問してくれたユーザー様がレッスンを予約する確率が高ければ、集客効果が見込め広告効果が高まります。

従って、カラーナビはこの「いかにユーザー様に有益な情報を提供できるか」をポイントにサイト設計を行っています。実はこのポイントは他の競合サイトでもポイントにしていますが、（1）のカラースクールに特化するからこそ、できることがありますので、（2）の内容がより濃密になると思っています。

他のサイトにもあるコンテンツや特徴でも、取り組み方によっては自社だけの特色になる可能性もありますので、他のサイトの特徴をリストアップして比較するのがおすすめです。

【4】掲載する内容とその重要度のランキング付けをする

先にも説明しましたが、立ち上げ後に設計にないコンテンツを増やそうと思っても、コストや時間がかかります。

また、HPには一般的にグローバルナビゲーション（このページでは、営業資料・広告資料・web資料・写真・素材の４つが該当）を設置します。画像を使って設置している場合は、あとでの追加が大変です。

一番良いのは、今後に行っていくサービスや行いたいサービスなど、掲載したい内容を思いつくだけ書き出してみることです。

「パーソナルカラー診断」「センセーション」「1000円体験講座」「色彩検定1・2・3級対策講座」「アナリスト養成講座」「アナリスト入門講座」「メイク講座」「出張メイク」「出張パーソナルカラー診断」「営業社員向けイメージアップセミナー」「エグゼクティブ向けセミナー」「スクール案内」「代表者プロフィール」「代表者メッセージ」「スタッフ紹介」「地図」「問い合わせフォーム」「クーポン」「サイトマップ」「利用規約」「カラー商品販売」「著書紹介」「スクールブログ」「パーソナルカラーについて」「カラーセラピーについて」「パーソナルカラーの活用事例」「ビフォーアフター」「お客様の声」「メルマガ」など

一通り挙げたところで、これをカテゴリーごと分類します。

例えばこの場合、レッスンのカテゴリーができると思います。そこには「パーソナルカラー診断」「センセーション」「1000円体験講座」「色彩検定1・2・3級対策講座」「アナリスト養成講座」「アナリスト入門講座」「メイク講座」「出張メイク」「出張パーソナルカラー診断」が当てはまります。

これを更に重要度が高い順からランキング付けします。

今回の例であれば、「パーソナルカラー診断」「メイク講座」の重要度が高くなります。

このような方法をとることで、よりユーザー様の視点に近いサイトの設計を行うことができます。

ユーザー様の視点に近い設計というのは、重要度が高い項目に、少ないクリックでたどり着ける設計、つまり必要な情報が整理されて、見やすくストレスの少ない設計です。

この例で言えば、「メイク講座」は重要なので、2クリックで内容を確認できるページにたどり着けるようにしたいですね。

これが4クリックもかかってしまうと、ユーザー様にとって利便性が低く、サイトの目的を達成するのが難しくなるでしょう。

ユーザー様が見てくれるクリック数（コンテンツの深度）の目安は、3クリック以内と言われています。

【5】デザインを決める

デザインは見た目だけを決めれば良いわけではありません。ユーザー様の利便性を考えること、立ち上げ後の運営を考えることも、デザインの重要な要素です。

デザインというのは、HPの目的を達成するためのものです。

目的が定まらず、運営中に方針がどんどんぶれてしまうようでしたら、最初に作ったデザインでは、目的を達成することができないでしょう。

【1】の目的と特徴、【2】のターゲット層、【4】の内容を効果的に掲載できることを考えてデザインを決めていきます。

【6】使用する写真画像・イラスト・素材をピックアップする

HPの印象は写真画像・イラスト・各種素材パーツ（グローバルナビゲーションやボタンなど）によって決まるところが大きいです。写真が命と言っても過言ではないでしょう。

例えば、文章だらけのページ（今見ているこのページが典型です）は、ぱっと見たときに全部読もうと思いますか？

相当な目的意識がないと、文章だらけのページは見てもらえません。

ここにビジュアルがあると、そこから内容をイメージすることができるので、ページを見てもらえる可能性は高まります。

「ホームページは見た目が大事？」もご参照下さい。

【1】～【5】で決めた内容に対応する写真や素材をできる限り集めていきます。

足りない素材もでてくるでしょう。業者に頼む場合は、この素材の種類・数量・クオリティーで料金が変わってきます。

ちなみに、HP作成業者にHP作成を依頼する場合、提供できる画像の数が多ければ多いほど、作成費を削減できる可能性が大きくなります。

できるだけ自分で撮影したり、作成するのが良いのですが、ほとんどの場合は、素材集を巡って集めることになります。

もちろん、同業他社や他のサイトから盗用するのはもってのほかです。

集めるのは労力と時間、コストがかかります。ただ、これを惜しんでしまうと、それなりのものしかできなくなりますので、あきらめずに頑張って下さい！

カラーのお仕事に関しては★カラー専用写真素材★もあります（広告です）

【7】作成に入る

イラストレーターやエクセルなどで、実際と全く同じデザインのHPの設計図を、ページの数だけ作ります。ソフトが使えない環境でしたら、手書きでも構いません。

このとき、どのボタンをクリックするとどのページに移り、そのページのどのボタンをクリックすると・・・といったように、HPの階層やページ間の移動のチャートを作ります。

ポイントは、1px単位で正確なデザインで設計図を作ることです。（この画像の幅は320pxで、画像の横のマージンは各10pxなど）

その設計図には、htmlのタグ要素や、cssのdivをすべて記載すると良いでしょう。

チャートは漏れがないようにすべてチェックすることが大事です。

ここに手落ちがあると、後で困ることになり、最悪すべてを作り直すことになりますので、ご注意下さい。

私も一度作り直しで、2倍以上時間がかかってしまった経験があります。

やはり一人では、見落としたり、気づかない点がありますので、実際の作成に入る間に、第三者にチェックしてもらうのをおすすめします。

もちろん、専門家の方にチェックしてもらうのが良いと思いますが、最後だけチェックしてくれる業者はなかなか見つかりませんので、ご友人で詳しい方に依頼するとよいかと思います。

【著者】八幡優
カラーナビ企画・サイト作成と運営責任者カラーナビは、ユーザー様にとって面白く、有益な情報を提供することにより、より多くの「カラーとの出会い」を創り出すことがテーマです。この「カラーナビ for school and consultant」では、これからプロとして活動する方・現在プロとして活動している方への情報を発信することにより、個々のカラーコーディネーター様の活躍にお役立てできればと思っています。
カラーナビへの広告掲載
info@colornavi.net
AISホームページ
http://www.ais-ais.co.jp