ホームページ制作手順の基本的な流れ

Web

「作りたい」という理由だけで、企業がWebサイトを制作することはありません。目的をもって制作を決定しているはずです。しかし、目的が多岐にわたっていたり、関係する部署や担当者が多く複雑だったりすることにより目的が不明瞭になりがちです。 関係部署へのヒアリングや調整により目的の明確化から始めましょう。

サイト制作の一般的な流れ。

STEP 01:発注
STEP 02:ホームページの企画策定
STEP 03:全体像の設計
STEP 04:実際のホームページ制作
STEP 05:公開・運用

デザインの方向性の決定

ヒアリングによる提案内容の確認

最初に制作会社によるヒアリングからスタートします。ホームページ制作においてヒアリングは、成果物のクオリティを決める重要な作業です。ヒアリングの段階で「制作の目的」「ペルソナ」「予算」「完成イメージ」「サイトの規模」などをすり合わせることで、認識のズレを防ぎ、制作会社から正確な見積を出してもらえます。

ある程度内容を固めてからヒアリングを受けなければ、認識のすり合わせに時間がかかりますし、見積金額にもズレが生じるかもしれません。万が一、認識がズレたまま制作段階に入るとあとから修正する手間が増えるため、必ず制作の目的や予算感などは詳細に洗い出しておきましょう。

目的とターゲットの策定

見積もりの段階で、ある程度ホームページ制作の目的やターゲットを共有しているはずです。企画策定の段階では、すり合わせた目的やターゲットを入念にブラッシュアップしましょう。目的については、数値目標を立てることがオススメです。数値目標を設定することで、ゴールまでの進捗を把握しやすくなり「達成までどのくらい足りないのか?」「ギャップを埋めるために何をすべきか?」などを判断しやすくなります。

コンセプトの決定

上記で収集した制作の目的やターゲット、差別化ポイントなどを参考にして、具体的に「ホームページを通じて誰にどんな価値を提供するのか?」というコンセプトを設定しましょう。

コンセプトでホームページ全体の方針を端的に表現することで、必要なコンテンツやデザインで迷った際の道標になります。

サイトマップの作成

要件定義を作成し全体像を把握したら、サイトマップを作成しましょう。

サイトマップとは、ホームページの全体設計を階層構造として具体的に落とし込んだ図のことです。以下のような形になります。情報をサイトマップに落とし込むことで、コンテンツ同士の関連性を視覚的に整理し、以下のような観点で適切な判断を出せます。

  • ユーザーに必要な情報が抜け漏れなく含まれているか?
  • ユーザーにとってわかりやすい内容で情報を提供できているか?
  • 階層は「浅すぎず・細かすぎず」適切な深さで掘られているか?
  • ユーザーが知りたい情報までスムーズに移動できる設計になっているか?

デザインの作成

サイト全体の設計が完成したらデザインを進めましょう。

ホームページにおけるデザインは、単に「ビジュアルを整える」というだけのものではありません。ホームページの目的やペルソナから逆算して、「どのようなデザインであればユーザーは満足するか?」という視点で考えることが重要です。制作会社と打ち合わせを重ねて、サイトのトンマナ(ホームページの雰囲気に一貫性を持たせるためフォントやカラー、レイアウトなどを統一すること)をすり合わせながら、自社の目的やペルソナに沿ったデザインを仕上げていきましょう。

必要に応じて、依頼者側でも画像や動画などの素材集めが必要になります。依頼者側の動きによってもデザインの進捗度合いは変わるため、タスクが発生したら適宜進めていきましょう。デザインについては「TOPページ→下層ページ」という順番で決めていくことが一般的です。

デザインを決める際は、制作会社とこまめに認識をすり合わせておきましょう。適宜デザインを確認しなければ、納品前に「やはり全体的に見直してほしい」など大幅な変更が発生することもあり、スケジュールにも影響を与えます。大幅な修正は追加の費用が発生することもあるため、必ずデザインはこまめにチェックしておきましょう。

コーディング

コンテンツやデザインが完成したら、コーディングを行い実際のサイトに反映させましょう。コーディングは主に以下の2種類に分けられます。

<1>フロントエンド:


ユーザーが直接目にするビジュアル部分を実装する役割を持ちます。HTMLやCSS、JavaScriptを使うことが多いです。

<2>バックエンド:


サーバーの設定や問い合わせフォーム、受付メールの処理など、裏方の環境を整える役割を持ちます。ワードプレスを使うことが多いですが、制作会社によってはオリジナルのCMS(ホームページの構築要素を一元管理するシステム)を活用することもあります。

コーディングの段階では制作会社が作業を担当するため、基本的に依頼者側で行うことはありません。ただし、必要に応じて「サーバーやドメインの契約」「コンテンツ用の原稿提出」などを求められるケースもあるため、事前に準備しておきましょう。

公開・運営

制作が完了したら、最終的なリリース作業に入りましょう。

5-1:納品物の最終チェック
5-2:リリース
5-3:公開後の数値管理

コンテンツの作成と組み合わせ

必要なページとコンテンツを洗い出す

目的達成に必要なページは先程のような目的達成に直結するページだけではありません。

企業ホームページであれば会社概要や提供サービスを紹介するページも必要でしょう。これらが無ければどのような事業をおこなっている会社なのかが分からず不信感につながりかねませんよね。

採用ホームページであれば求人情報だけでなく、会社で働く社員の紹介や生の声、ビジョンといった入社後のイメージが出来るページもあった方が良いでしょう。求人情報だけでは応募し辛いし、応募を迷った末に見送る人が増えては機会損失につながってしまいます。

このようにホームページの目的に関連するページを整理し、ユーザー視点で必要なページの不足がないかを考えながら洗い出しましょう。

コンテンツのカテゴリーと構成を決める

ホームページのコンテンツ設計とは、『ホームページに載せる情報(=コンテンツ)を洗い出して、階層構造化して整理すること』です。サイトマップを作る作業と言い換えても良いかもしれません。

本の目次をイメージするとわかりやすいでしょうか。目次を見れば、情報がひと目でわかりますよね。本でも同じようにコンテンツを設計しているといえます。

Webサイト制作に必須な7個のスキル

ホームページはどうやってるくるのか。Web制作の流れで必須となる7個のスキルは、下記の通りです。

  • HTML.
  • CSS.
  • Javascript.
  • 画像編集(Photoshop、Illustrator)
  • Webデザイン
  • Webライティング
  • セキュリティ

HTML


htmlは、プログラミングをしたことのない方でも、聞いたことのあるワードではないでしょうか?

マークアップ言語と言われる言語の一つで、Webサイトの要素を作る言語です。
テキストを入力したり、画像を配置したり、どの要素とどの要素をグループにするか等すべてHTMLで記述していきます。

HTMLのスキルなしでは、Webサイトを理解し、制作することはできません。
HTMLのスキルを身につけるためには、「Progate」がオススメです。

未経験の方も、入りやすい言語ですので、ぜひ一度チャレンジしてみてください。

CSS


CSSは、HTMLで作り上げた要素を装飾するための言語です。
CSSを書かずに、HTMLだけでサイトを制作すると、非常に無機質でつまらないページとなります。

CSSでは、幅や色、大きさや動きまでを指定することができるため、現代のサイトにおいて必須となる良い見栄えを作り上げることができます。

CSSも難しい言語ではないため、学びやすいスキルでしょう。
こちらも「Progate」での学習をオススメします。

Javascript


Javascriptのスキルがなくてもサイトを制作することはできます。
しかし、Javascript(主にjQuery)を学ぶことで、サイトに動きをつけることができたり、フォームの送信でシミュレーション機能を作成することが可能となります。

最近のサイトでは、動きをつけることが主流となってきていますし、実際にクライアント様から動的コンテンツの要望も多くいただきます。
そのため、本記事では必須スキルとしました。

Javascriptは人気のプログラミング言語であり、フロントエンドでもバックエンドでも多く使用されています。
ザ・プログラミング言語という感じで、少し難しく感じる方も多いかもしれませんが、挫折せず続けた方がエンジニアに向いている証拠です。

「Progate」で学んだあとに、自分で制作をしてみると理解が早まります。
また、勉強が目的となってしまっては意味がないため、制作したいものを決め、それに必要なコーディングを調査しながら学んでいきましょう。
それを繰り返すうちに、いつのまにか習得済みスキルへとなるでしょう。

画像編集(Photoshop、Illustrator)


画像編集技術も、最近のサイト制作においては必須スキルとなっています。
クライアント様から「ホームページ上にバナーを配置したい」、「会社のアピールができるメイン画像を作ってほしい」等様々な要望をいただくことがあります。

Photoshop、Illustratorを扱う技術があれば、基本的に問題はありません。
Adobe製品は、非常に似通った操作感であるため、どちらかを習得するともう一方は時間かからずに習得できるでしょう。

画像編集は極めようと思うと、かなりの時間を要してしまいますが、一般的なメインビジュアルの作成やバナー作成であれば学んで実践を繰り返すのがベストでしょう。
「Udemy」や「YouTube」で操作方法を学び、実際に画像編集をしてみることでスキルの習得へとつながります。

Webデザイン


画像編集に近いスキルにはなってしまいますが、Webサイト全体の構成やフレームワークの作成、テキストのデザイン等を完結できるスキルがWebデザインスキルとなっています。

Webサイトを制作する工程として、「ヒアリング→Webデザイン→コーディング」となります。
Webデザインのスキルがなければ、コーディングへ移ることができず、サイトは制作されません。

Webデザインのスキルとしては、画像編集だけでなく、Adobe XDなどのソフトを使用してサイト全体のデザインをすることが必要となります。

このようなスキルを身につけるためには、画像編集同様「Udemy」
や「YouTube」での学習をオススメします。

Webライティング


Webサイトを制作する理由としては、「ユーザーに自社の価値を感じてもらいたい」というのが最も大きなものでしょう。
サイトを訪れたユーザーは、主にテキストからその会社の価値に気づく必要があります。
テキストで人の心を動かすのは、Webライティングの力です。

また、SEO順位の向上を目指すためにもライティング技術は必須となります。
明確な答えが出ない分野でもあり、プログラミングより難しいと感じる方もいるでしょう。

少しずつ改善し、成果が出たときには、何にも代えがたい達成感を感じることができます。

Webライティングは本で学ぶことをオススメしています。
特にオススメの本としては、「沈黙のWebライティング」「ザ・コピーライティング」の2冊です。

上記2冊を学ぶだけでも、かなりのライティング知識が身につきます。

セキュリティ


サイバー空間は、現実世界と同じく常に安全というわけではありません。
攻撃者はどこに潜み、情報を窃取しているかもわかりにくく、現実世界よりも危険な空間であるとも考えられます。

インターネットを使う上で、欠かせないのがこのセキュリティスキル。
セキュリティ技術はトレンドの移り変わりが非常に早く、情報を掴むのが追いつきにくい分野でもあります。

常に最新情報を入手し、攻撃者の攻撃手法を知ることが重要となります。
まずは基礎的なセキュリティ知識を本や動画で学び、Webにおける攻撃手法とその対策法を学んでいきましょう。

amplitのブログでも、セキュリティに関する情報発信を行ってまいりますので、ぜひご覧ください。

公開後のサイト管理と定期的な内容の更新

ユーザーに有益な情報を提供するには更新頻度が大事

上記のようにSEOと更新頻度には直接関係はありませんが、間接的には更新頻度はSEOに影響します。ホームページは何年も放置すれば、コンテンツの鮮度が劣化してしまいます。

ホームページのコンテンツの内容が古くて更新されていない情報だと、常に最新情報に更新している鮮度の高いコンテンツよりも価値が低いと検索ロボットに評価されてしまいます。

よって、SEOの観点から言えば、意味もなくサイトを更新し続ける必要はありませんが、コンテンツの鮮度が劣化しないようにホームページの更新をした方が良いです。

更新されていないホームページは不安になる

更新情報が掲載されているホームページで、しばらく更新されていないホームページを見るとユーザーは不安になります。

1年も更新されていないホームページを見ると、ユーザーは「このサービスはもう終了したのではないか」「利用者が少ないのではないか」という印象を受けてしまいます。

その結果、せっかくアクセスを獲得したのに、ユーザーがホームページ内を回遊せずに早期に離脱することが考えられます。

定期的にチェックする人が少なくなる

また、更新頻度が低いホームページは定期的にチェックする人が少なくなります。

更新頻度の高いホームページは何か情報が更新されていないのかと特に用事が無くてもリピート閲覧が発生する可能性があります。

これに対してホームページが更新されていないと、どうせ更新されていないので見る必要が無いだろうとユーザーに思われ、多くの場合はそのまま忘れられてしまいます。

ユーザーに定期的にチェックしたいと思われるためにもホームページの更新頻度は重要です。

通販事業の業績アップの秘訣は季節毎の販促

通販に限らず、小売業において重要なのは販促イベントです。例えばクリスマスや正月、バレンタインデーなど、新商品の発売、在庫売り尽くしセールスなど小売業にはさまざまなイベントがあります。

このイベントを上手く活用して売上を作るのが小売業の業績アップの秘訣です。これは実店舗だけではなく通販事業にも同じことが言えます。季節のイベントや新商品に合わせて特集ページを作って販促を行う必要があります。

もちろん、そのためにはホームページの更新頻度はとても重要です。販促用の特集ページを作る必要がありますし、新商品が発売されればきちんとホームページの内容を更新する必要があります。

ホームページの更新をしないということは、店舗の商品の陳列や内装をずっと変えないことと同義で、もちろんそのような店舗は売上をあげることができません。

小売業に限らず、ホームページマーケティングによってユーザーを獲得したいのならば、ホームページの更新は必須とも言えます。

ホームページの内容を最適化する

また、ホームページは作った段階ではユーザーにとって使いやすくないかもしれませんし、時代とともにホームページに求められることも変化します。

ホームページの内容は、ユーザーに合わせて、時代に合わせて、最適化していくことが必要です。

例えば、ホームページマーケティングで業績をあげている企業はコンテンツの配置だけではなくボタンの色にまでこだわります。ボタンの色を変えるだけで押される確率が変わる可能性があるからです。

業績を上げている企業はABテストと言って、サイトのボタンの色などちょっとした違いがある複数のパターンの違いを分析して、常にホームページがユーザーにとって使いやすく成果が出しやすいように細かい改善活動を積み重ねています。

また、ホームページに求められるデザインなども時代とともに変わっていきます。

例えば近年ユーザーのほとんどはスマホに移行しているので、いかにスマホで見やすいホームページを作るのは非常に重要です。

スマホに対応していないホームページだとSEOでも不利に扱われますし、見にくいのでユーザーも離脱してしまいます。

このように作ったときから新しいトレンドが発生した際にはそれに合わせてホームページも更新していく必要があります。

コメント

タイトルとURLをコピーしました