Webサイトはもはや誰でも制作できるものになり、個人でもWebサイトで情報を発信している方がたくさんいらっしゃいます。しかし集客ツールとして本格的にWebサイトを作るには、それなりの手順を踏む必要があります。
「自社でWebサイト制作が必要になったが、制作手順が分からず困っている」という場面に直面する方もいらっしゃるでしょう。どのような流れで本格的なWebサイトが制作されるかインプットしておき、すぐにアウトプットできるようになればスムーズにWebサイトを製作可能です。
今回は初心者でもすんなり理解できるように、実際のWebサイトの作り方を必要な知識も交えながらご紹介していきます。
Webサイトの種類について紹介
Webサイトには、以下のような種類があります。基礎として、どんなWebサイトがあるのか理解しておきましょう。
・ECサイト
・WEBマガジン
・コーポレートサイト
・ブランディングサイト
・ポータルサイト
・ポートフォリオサイト
ECサイト
いわゆる、ネットショッピングサイトです。「ヤフーショッピング」や「楽天市場」のような、商品を購入できるサイトを制作します。
最近は自社で制作した専用ECサイトで収益を挙げる事例も増えてきており、それに伴ってECサイトに関する技術も重要度が増しています。
ECサイトには
・商品をお気に入り登録する機能
・カートに入れる機能
・指定決済方法で支払いを行う機能
などさまざまな動的な機能を実装するので、「Java Script」や「PHP」といったプログラミングに関する技術が必要です。
Webマガジン
Webマガジンは、名前の通りWeb上の雑誌（読み物）です。ユーザーが興味のありそうなコンテンツを、順次更新しながら公開を行っていきます。
「コンテンツマーケティング」の一環として、事業規模にかかわらず集客を行えるWebマガジンの需要は高いです。
Webマガジンにはある程度個性的なデザインも必要ですが、それ以上に重要なのは「いかにターゲットユーザーの疑問や悩みを解決できるコンテンツをアップロードし、長期的集客につなげられるか」です。
コーポレートサイト
コーポレートサイトは、企業が自社の紹介などを行うためのWebサイトです。
コーポレートサイトで自社の理念や実績、活動内容などを詳しく掲載しておくと
・会社として信頼度が高くなる
・採用希望者を広くインターネットで集められる
・取引先が増えるきっかけになる
など、さまざまなメリットがあります。
ブランディングサイト
ブランディングサイトは、「ブランディング（商品やサービスの認知度や信頼度などを高めること）」用のWebサイトです。
特定の自社ブランドや商品、サービスのブランド力を高めるためには、そのイメージを前面に打ち出して宣伝を行う必要があります。宣伝を行うために、ブランディングサイトを制作する企業は多いです。
ポータルサイト
ポータルサイトは、あらゆる情報の入り口となるようなWebサイトを指します。
・Yahoo! Japanなどの検索型サイト
・食べログなどの店舗紹介サイト
・婚活用のマッチングサイト
などがポータルサイトに該当します。
ポートフォリオサイト
ポートフォリオサイトとは、自己紹介や実績紹介などに使われるサイトです。Web業界では、ポートフォリオサイトの内容を一つの採用基準にする企業もあります。
自分の実績や経歴などを公開することで、広いユーザーに自分のことを知ってもらえるメリットがあります。
ポートフォリオサイトは個人が制作する場面が多いですが、デザインの参考として企業サイトにも十分取り入れられる高品質なものも多いのが特徴です。
どんなWebサイトを作りたいのか
Webサイト設計の際は、次のポイントを考えると安心です。
・webサイト構築の背景
・ターゲット層
・web サイト構築の目的・目標
・web サイト構築のコンセプト
・サイトページ構成を決める
Webサイト構築の背景
まずは、なぜWebサイトを構築しようと思ったのかを考えましょう。当たり前のように思えますが、「とりあえず他社が作っているから、自社もWebサイトを作ろう」と考え失敗する企業が多いです。
おろそかにせずに、構築背景は明確にしておく必要があります。
・自社の商品やサービスをネットで販売したい・・・ECサイト
・自社の基本情報が記載されているサイトを制作したい・・・コーポレートサイト
・自社の商品やサービスのブランドを確立したい・・・ブランディングサイト
と、構築背景が分かればどんな種類のWebサイトを制作すればよいか自然と決まります。
ターゲット層
ターゲットユーザーを決め、焦点のあったWebサイトを制作しましょう。ターゲットユーザーを「ペルソナ」として設定し、ペルソナに合わせたWebサイト作りを行うのがポイントです。
・化粧をする時間がない、30代の1人暮らしOL
・転職を検討していて、楽しく働けるWeb制作企業を探している20代男性
・IoTに興味があり、詳しくさまざまな情報が掲載されているコンテンツを探している30代男女
など、なるべく自社が保有しているデータに合わせてペルソナを細かく設定していくとよいでしょう。
Web サイト構築の目的・目標
Webサイト構築でどんな目的や目標を達成したいかも、決めていきましょう。
・ECサイトを構築し、売上を前年比30％上げる
・コーポレートサイトを構築し、自社認知度を前年比50％アップさせる
・Webマガジンを構築し、1年でコンバージョンを5％ほど見込めるまで成長させる
などが目的・目標として考えられます。
Webサイト構築のコンセプト
Webサイト構築の際、どのようなコンセプトで制作を行うのか考えるのも重要です。
・ECサイトとして、カートに入れてから決済を行うまで直感的に操作できるよう工夫する
・コーポレートサイトとして、自社の知られていない秘密などを掲載して魅力度を上げる
・Webマガジンとして、数分でユーザーの疑問や悩みが解決するコンテンツを制作する
など、目的・目標を達成できるコンセプトを考えましょう。
サイトページ構成を決める
コンセプトが決まったら、次は細かくWebサイトのページ構成を決めていきます。
・ECサイト・・・個別の商品紹介ページやセール情報ページ、タイムセールページ
・コーポレートサイト・・・自社歴史、事業内容、理念、採用などに関するページ
・Webマガジン・・・カテゴリごとの一覧ページ、コンバージョン用の問い合わせページ
など、必要なページ構成はさまざまです。
またページ構成だけでなく、どの場所（ディレクトリ）にどのページが配置されるのかという「サイトマップ」も予め考えておきましょう。
たとえばコーポレートサイトの場合、
・トップページ→自社歴史や事業内容などのページが一つ下→さらに下層で細かい内容を説明する
といったサイトマップになります。
Webサイトの作り方を順番に解説
Webサイトの設計を決定したら、次はWebサイトを実際に制作していきます。ここからは、Webサイトの作り方を順番に解説していきます。
1.サイトを構築するためのサービスや技術を決定する
2.サーバーやドメインを準備する
3.サイトのレイアウトを決めて、ワイヤーフレームを作っていく
4.サイトデザインを行う
5.サイトのコーディングを行う
1.サイトを構築するためのサービスや技術を決定する
Webサイトを構築するには、さまざまな手法があります。
・WordPressなどを利用する・・・初級～、カスタマイズ性と時間効率の両立を重視
・ホームページ作成サービスで制作する・・・超初級～、簡単さと時間効率を重視
・HTMLやCSSでコーディングする・・・中級～、オリジナリティやカスタマイズ性を重視
など、自社の制作スキルや時間に合わせて手法を決定します。
ちなみに、外注してWebサイトを制作する場合もあると思います。その際は実装手法も含めて、どんな設計にしたいかなど最低限の事前情報は提示できるように準備しておきましょう。
2.サーバーやドメインを準備する
Webサイトを公開するには、
・サーバー・・・Webサイトを公開するためのハードウェア
・ドメイン・・・Webサイトのインターネット上の住所（例：https://example.comの「example.com」の部分）
の2つも必要です。
「wix」といったホームページ作成サービスを利用する場合は、最初から用意されたサーバーにアクセスする形でWebサイトを作成していきます。しかしWordPressやコーディングなどでサイト作成を行う場合は、レンタルサーバーなどを自分で用意して必要なデータをアップロードする必要性があります。
またドメインは、なるべく簡単で分かりやすい文字列が推奨されています。あまりにも長いドメインはユーザーが見たとき分かりにくく、ユーザビリティ上が低くなります。サイト内容が伝わるシンプルな独自ドメインを考えて取得を行いましょう。
ドメインは、「お名前.com」といったドメイン販売サイトで取得可能です。
3.サイトのレイアウトを決める
Webサイトの作成方法やサーバー、ドメインなどの事前準備を行った後は、サイトのレイアウトを決めていきます。
単純にレイアウトと言っても、
・ヘッダー、フッター、サイドバー、内部コンテンツに分かれる基本的なレイアウト
・1列の、シンプルな構成のレイアウト
・画像が大きく前面に配置された、大胆なレイアウト
など実装方法はさまざまです。
どのレイアウトでも、必ずレスポンシブデザインへの対応（スマホやタブレットで見る際は、2列から1列のレイアウトになるなど）が必須です。どんな端末でも、きれいに見えるようなレイアウト調整を行いましょう。
4.サイトデザインを行う
ワイヤーフレームができたら、次はサイトデザインを行います。Webサイトに落とし込む際基準となるので、細かいところまでしっかりと作りこんでいきましょう。
・フォントデザインは大きくするか、太くするか
・余白はどのタイミングで、どの程度設けるか
・色遣いは高級感のあるものにするか、ポップなイメージにするか
など、各要素によってWebサイトのイメージが大きく変わっていきます。
サイトデザインは、
・Photoshop・・・写真加工などに便利
・Illustrator・・・イラスト作成などによく使われる
・Adobe XD・・・チームでのデザイン制作に特化したツール
など「Adobe」系ソフトウェアがよく使われます。
「Figma」といった他のデザインツールもあるので、自社の予算などに合わせてどのツールを使うか検討しておきましょう。
5.サイトのコーディングを行う
サイトデザインが完成したら、次にデザインを基準にしてWebサイトのコーディング（実際のホームページを制作する）を行っていきます。
「HTMLやCSSを細かくカスタマイズして、オリジナルのWebサイトを作りたい」という場合は、別に詳しい記事を用意しています。
下記にリンクを用意したので、ぜひアクセスしてみてください。
ホームページ 作成 htmlの記事リンク
まとめ
今回はWebサイトの作り方を、基礎知識などとともに詳しく解説してきました。
今回ご紹介した作り方は、自車作成の際も外注の際も役立ちます。代替でもよいので流れを理解して、スムーズにWebサイトを制作しましょう。
ちなみにWebサイトを制作する際は技術のほうに目が行きがちですが、一番重要なのは「なぜWebサイトを作りたいのか、そしてどんなターゲットにどんな情報を届けたいのか」などを明確にすることです。
まずはWeb設計を細かく行い、確実に成果の出るWebサイトを完成させましょう。