ホームページ制作にはどんな工程がある?ライティングやコーディングなどの流れを解説
企画・設計の工程を経て、ホームページの材料が揃いました。
次はいよいよ、実際にホームページを形にしていく制作の部分です。
- ライティング
- デザイン
- コーディング
- ワードプレス構築
実際の制作現場では多少前後することがありますが、基本的に上記の順番で作業を進めます。
そうすることで、修正や変更が発生した場合に作業が煩雑になるのを防ぐことができ、ひいてはホームページの品質を高めることにつながります。
ライティング
ホームページに掲載するコンテンツ(文章・テキスト)を作成する、「ライティング」の工程です。
企画と並んで、ホームページ制作においてもっとも重要な工程のひとつが、このライティングです。
ライティングの良し悪しが、ホームページの成否に直結すると言っても過言ではありません。
とはいえ、ホームページ制作におけるライティングというのは、正しい文法や文章表現で… という種類のものではありません。
大切なのは「顧客の求めている情報を、顧客と同じ視点で伝えてあげる」ことです。
これを忘れてライティングに入ってしまうと、顧客を置いてけぼりにして「私の商品は、ああで、こうで…」と自分や自分の商品の説明ばかりの文章になってしまいます。
もちろんホームページのどこかで商品について伝える必要はあるでしょうが、顧客があなたの商品を「自分に必要なものだ」と思っていない段階で必死に伝えたところで、残念ながらまったく響きません。
ですので、顧客の立場になって、伝えるべきことを順番に伝えてあげる必要があるわけです。
企画の段階で、 自分・ライバル・ターゲット顧客についてリサーチしましたよね?
その中で、
- 自分の強み・弱み
- 顧客の抱えている悩み・問題
- 顧客が感じるであろう不安
- 顧客が手に入れたい未来
がどんなものかというのが分かりました。
それらすべてが、コンテンツの材料となります。
それらの材料を組み合わせて、
- あなたは、こんな悩みを抱えていませんか?
- その問題を抱えていると、こんな苦痛を感じますよね?
- 実は私も、あなたと同じような悩みを持っていました。
- その悩み・問題の原因となっていることは何でしょう?
- 試行錯誤した結果、私はこのような方法を見つけました。
- なぜこの方法で解決できるかというと、~だからです。
- 今なら、あなたにその方法をお伝えすることができます。
- 興味のある人は、今すぐお問い合わせください。
というような感じで、顧客の持っている悩みの共有からスタートし、最終的に解決策を提示し、行動を促してあげるという流れで伝えます。
いきなり商品を売りつけられると、人は間違いなく拒否反応を示します。
でも、顧客の側に立って、顧客と同じ視点で話を始めると、格段に話を聞いてもらいやすくなるわけです。
ホームページのライティングでやることは、言ってしまえばこれだけです。
細かいことを言えば、もっとテクニック的なこともありますが、いつも心に留めておきたいのは「顧客視点のメッセージ」です。
デザイン
コンテンツの作成ができたら、ホームページの見た目の部分をデザインしていきます。
「ホームページ制作」と聞くと、多くの人はここからの作業をイメージするかもしれませんが、実際にはここに至るまでにたくさんの工程を踏んでいるわけですね。
先にコンテンツ作成をしておくことのメリットは、次の通りです。
- ホームページの方向性が固まるため、デザインのテイストを確定しやすい
- テキストのボリュームなどが事前に把握できるため、デザインの細部まで早期に作り込みやすい
- 伝えるべきメッセージが分かっているため、デザインの要所を把握しやすい
デザイン制作でもっとも注意したい点は、デザインはあなたのためでもデザイナーのためでもなく、顧客のためにするものだということです。
つまり、あなたの好きな色やデザイナーの好みではなく、「顧客がどう感じるか?」を第一に制作することが大切ということですね。
この工程でも、企画の段階でのリサーチが活きてきます。
リサーチをすることで、
- あなたの商品を必要とする人の性別・年齢・趣味趣向
- 成約に至るまでに感じるであろう不安
- 悩み・問題を解決することで手に入れたい未来
などが、すでに分かっています。
その人物像に響かせるためには、どんなデザインをするべきか?
その視点が抜けてしまうと、顧客はあなたのホームページが「自分に向けて作られたもの」だと気づいてくれません。
ホームページが失敗するひとつの原因として、デザインとアートの混同が挙げられます。
デザインは「設計」、アートは「芸術」です。
そこの線引きをしっかりしないと、ホームページがあなたやデザイナーの自己表現の場となってしまい、「顧客のためのホームページ」という本来の存在意義がブレてしまいます。
ホームページの目的は、顧客にとって必要な情報を整理して届けてあげることで、あなたとの関係を構築し、信用してもらった上で商品の購入へと動いてもらうことです。
デザイン制作のはじめから終わりまで、このことを忘れないようにしましょう。
コーディング
デザインができたら、今度はWebブラウザでホームページを表示できるようにコーディングしていきます。
コーディングとはそのまま「コードを書くこと」。
つまり、プログラミング言語などを使ってプログラムを書いていくことです。
ホームページの場合は、HTMLというマークアップ言語を使って記述していきます。
記述したものは「ソース」とか「ソースコード」などと呼ばれます。
デザインが出来上がった段階では、それはただの画像データにすぎません。
それがコーディングという作業を経ることで、動きを持ったホームページへとなっていくわけです。
実際の制作現場では、コーディングという作業は駆け出しのエンジニアなどキャリアの浅い人が担当するケースが多いです。
しかし実のところ、コーディングはSEOに深く関係していますので、とても大事な工程になります。
同じ見た目のページでも、そのソースコードは書いた人によって千差万別です。
文法が間違っていたり、SEO的に問題があるような記述でもパッと見は分からないので注意が必要です。
また最近では、検索エンジンはページ表示速度を非常に重視しています。
また表示に5秒以上かかると、人がホームページを見ずに帰ってしまう確率が38%も増えるというデータもあります。
ソースコードに無駄な記述があったり読み込むファイルの数が多かったりすると、その分だけページの読み込みが遅くなります。
そうなればもろにページ表示速度に影響してきますので、「いかに読み込みを早くするか」まで考えてコーディングする必要があります。
ワードプレス構築
ホームページを成功させるためには、継続的な情報発信が不可欠です。
何も情報が更新されなければ誰も見に来なくなってしまいますし、検索エンジンからも評価されなくなってしまいます。
また、ライバルの動向によってスピーディーな対応が必要なときもあるので、ホームページにとって「いかに運用しやすいか?」は非常に大事なわけですね。
そういう事情もあり、最近では設計のところでもお話ししたCMSの導入が一般的になっています。
なお、フリータウンでは特別な事情がない限り、世界シェアNo.1のCMSである「ワードプレス」を利用しています。
ワードプレスを利用することで、以下のようなことが実現できます。
- コンテンツの追加がスピーディーに行える
- 自分で更新できるのでランニングコストを削減
- メールフォームなどのさまざまな機能が手軽に導入可能
- 検索エンジンと相性がいいので、SEOに強くなる
- 必要なら独自の機能を組み込むことも可能
ワードプレスでは、プラグインというものを利用してさまざまな機能を追加することができます。
プラグインには、ホームページに必須とも言えるメールフォームをはじめ、SEO支援やソーシャルメディアとの連携、セキュリティ対策、記事作成支援など、本当にさまざまなものがすでに用意されています。
必要であれば、独自のプラグインを作成して導入することも可能です。
またデザイン(見た目)の部分は、「テーマ」とよばれるホームページのテンプレートのようなものを使って管理します。
テーマには既存のものが無数にあり、制作会社によってはそれを元にしてデザインを作っていくところもあります。
しかしテーマによってはSEO対策が甘かったりセキュリティ面で重大な欠陥がある場合もあるので、フリータウンでは既存のテーマは使わずにゼロから作り起こします。