ホームページの基本構成や制作するために必要な知識をわかりやすく解説

ホームページを見たことは何度もあるが、実際に作るならどういう構成にすればいいかわからない方もいるでしょう。

アクセスしたユーザーが興味を引く魅力的なホームページにするために必要不可欠な基本構成を紹介します。また、ホームページ制作に必要な基礎知識やスキルを紹介するため、参考にしてみてください。

【無料お役立ち資料】
初心者でもよくわかるお問い合わせを増やすWEBサイトの作成方法

資料内容

WEBサイト作成の流れと説明

各フェーズでの重要ポイント

問い合わせを増やすための最終チェックリスト

制作後の運用方法

制作の進め方と注意すべき点

サイト制作を依頼する際に知っておくべき内容になっていますのでぜひ無料でご覧ください。

資料ダウンロードはこちら

ホームページの基本構成

ホームページの基本構造は以下の5つです。

ヘッダー
ナビゲーション
ファーストビュー
メインコンテンツ
フッター

ヘッダーは、全ページに変わらず表示される部分です。スクロールしても企業のロゴなどがずっと表示されていることがあるでしょう。この企業ロゴの部分をヘッダーと言います。

ナビゲーションは、ページ上部に表示されている案内です。目的のページにすぐたどりつける分かりやすいホームページ制作に必要とされています。

ファーストビューは、ホームページを開いたとき、一番最初に表示される部分です。アクセスしたユーザがもっと見てみたいと思えるようなデザインにすることで、ホームページの滞在時間延長を期待できます。

メインコンテンツとは、商品紹介ページや会社概要などのホームページの中身です。このコンテンツが無いと、ホームページを作っても会社情報や商品に関して伝わりません。

フッターとは、ホームページの下にある、サービスの利用などを促す箇所です。クリックするとお問い合わせページの飛べるようなものがフッターだと思って構いません。

定型文でさまざまなページの下部に表示され、商品の購入やサービスの利用を促します。

これらの5つの構成がホームページを作る際に必ず必要です。

サイト別！ホームページの基本構造

先ほど、ホームページの基本構造を紹介しましたが、サイトによっても必要なコンテンツが異なります。そこで、サイト別のホームページの基本構造を階層に分けて紹介します。

コーポレートサイト
サービスサイト
ECサイト
採用サイト

コーポレートサイト

コーポレートサイトとは、企業を多くの人に知ってもらうための情報を公開するサイトのことを指します。コーポレートサイトで使用するべき基本構造は以下の通りです。

第1階層	第2階層
トップページ	事業紹介各事業の概要事業の専用サイトがあれば、そこへの導線
会社概要	社名設立年月日所在地代表取締役事業リスト資本金従業員数主要取引先許認可情報メディア掲載履歴ビジョン、ミッション沿革
事例・実績	–
お知らせ	–
会社ブログ	–
採用情報	募集要項職種紹介社員紹介働くことで得られるメリット選考プロセス代表メッセージオフィス紹介
お問い合わせフォーム	–
IR	–
プライバシーポリシー	–

このように、コーポレートサイトは事業内容や会社概要などを充実させます。それにより、多くの人から自社についての理解を得られるでしょう。

サービスサイト

サービスサイトに掲載すべき内容は、以下のようなものがあります。

第1階層	第2階層
トップページ	特徴機能紹介料金導入事例、お客様の声よくある質問導入の流れ運営会社（会社のホームページにリンクを貼る形も可）お知らせブログ資料ダウンロードコンタクトフォームプライバシーポリシー特定商取引法に基づく表示利用規約

トップページから各情報へすぐにアクセスできるようにすることで、ユーザーが求めている情報へたどり着きやすくなります。

サービスサイトを閲覧する人は、サービスの料金や口コミなど求めているものが多数あるため、様々なニーズに応えられるページ構成にすると効果的です。

ECサイト

ECサイトとは、ネット通販サイトのことで、商品がわかりやすい構成にする必要があります。

第1階層	第2階層	第3階層
トップページ	商品一覧	商品詳細
買い物ガイド	–	–
キャンペーン情報	–	–
カート、決済	–	–
会員ページ	–	–
お知らせ	–	–
運営会社（会社のホームページにリンクを貼る形も可）	–	–
コンタクトフォーム	–	–
プライバシーポリシー	特定商取引法に基づく表示	–
利用規約	–	–

商品一覧から、販売している商品を多数表示し、それをクリックすることで商品について詳しく知れるような構造がECサイトでは一般的です。

ただ、商品紹介だけあればいいのではなく、信用性を高めるためにも、会社情報などを乗せる必要があります。

採用サイト

採用サイトでは、会社の情報や求職者がほしい情報を的確に載せることが大切です。

第1階層	第2階層
トップページ	募集要項事業紹介職種紹介社員紹介ビジョン、ミッション働くことで得られるメリット選考プロセス代表メッセージオフィス紹介よくある質問説明会エントリーフォームプライバシーポリシー

事業内容や社員の紹介だけでなく、オフィスの写真を載せたりすることで就職した後の自分を想像しやすくなるでしょう。

就職後のギャップがあると、退職や転職に繋がってしまい、長期的な人材の確保が難しくなるでしょう。そうならないよう、しっかりと就職後の仕事内容などが伝わるホームページを制作しましょう。

ホームページにおけるデザインの基本4原則

見やすいホームページを実現するためのデザインの基本4原則を紹介します。

近接
整列
強弱
反復

近接

近接とは、文字や画像の距離を近づけることです。文字などが全部等間隔で表示されていると、何の説明なのか、関連する情報はどれか判断できません。

そのため、関連するもの同士を近づけることで、目で見ただけでグループ化され認識しやすくなります。

整列

整列とは、文字や画像を揃えることです。文字や画像がバラバラだと、見た目が悪いだけでなく、情報が頭利は要りにくくなってしまいます。

ぱっと見て情報を頭に入れるためには、画像や文章を揃えましょう。

強弱

強弱も、閲覧しやすいホームページ制作に重要です。もし、ホームページの文章が全部同じ文字の大きさだったら、何処が大事かわかりませんよね。

全部読んでもらえれば商品や自社サービスの魅力が伝わるかもしれません。しかし、ただ長いだけの文章を長時間かけて読まないでしょう。

ユーザーは、一目見て自分が求めているであろう情報を探し、見つけたらその部分だけ詳細を読みます。ホームページを全部一言一句閲覧するわけではありません。

だからこそ、注目してほしいところは大きく表示し、目を引くようにするとよいでしょう。

反復

反復することも、印象に残るホームページ制作に重要です。ホームページで伝えたいことを反復することで、より読者の印象に残ります。

アクセスしても印象に残らないと効果は無いため、ホームページを訪れたターゲットの心をひきつけるために反復する方法は有効です。

ホームページのデザイン基礎知識

ホームページのデザイン基礎知識を3つ紹介します。

レイアウトの種類
配色パターンの種類
フォントの種類

レイアウトの種類

レイアウトの種類が、何通りもあります。レイアウトは自分で決めることも可能ですが、だいたい見易いレイアウトにはパターンがあります。

そのパターンを使用し、アレンジを加えることで見易くオリジナリティあるホームページを制作することが出来るでしょう。

配色パターンの種類

配色パターンにもいくつかの種類があります。好きな色をただ選ぶと、何処が強調される部分か判断できず、見づらいホームページになってしまう恐れがあります。

そのため、まとまりのあるホームページにするために配色パターンからホームページの色を選ぶと良いでしょう。

フォントの種類

フォントも数多く存在します。自社商品やサービスにあったフォントを選択することで、良い印象をもたれることもあります。

また、違うフォントを使い分けることで、読者に強調したい部分が伝わりやすくなるような工夫も出来ます。ホームページで商品やサービスの魅力を伝えるために、フォントも有効的に活用しましょう。

ホームページ制作で用いられる基本用語

ホームページ制作で用いられる以下の基本用語を紹介します。

ドメイン
サーバー
HTML
CSS
SSL
レスポンシブデザイン
フレームワーク

ドメイン

ドメインとは、ホームページの住所のようなものです。ネット上には無数のサイトが存在し、的確に検索できないと二度と同じサイトへたどり着かない可能性もあります。

そうならないよう、ドメインがあります。正確に言うと、IPアドレスという数字の組み合わせでホームページがどこにあるのか定められています。しかし、数字だけでは覚えにくいので覚えやすいドメインを定めることができます。

ワンページ株式会社のドメインは「onepage.co.jp」で社名が入っており、覚えやすいですよね。このように、独自のドメインを取得することでよりわかりやすくなります。

サーバー

サーバーとは、ホームページの情報を保存し、ユーザーの要望に沿って正しくホームページを開く働きをします。このサーバーが働かないと、ホームページが正しく表示されないなどのトラブルになります。

HTML

HTMLとは、ホームページに何が書いてあるのかパソコンが理解できるように変換する言語です。私たちが打っている文字をパソコンは理解できません。そのため、この言葉でパソコンに指示してもまったく反応せず、正しく表示されない場合があります。

そのため、ホームページが正しく表示されるようHTMLに翻訳してあげる必要があります。

CSS

CSSは、文字の色やデザインなどをパソコンに指示する言葉です。この部分だけを赤い文字で表示すると打ち込んでも反応しないため、パソコンでも理解できる言語で指示してあげる必要があります。

SSL

SSLとは、インターネット上での通信を暗号化し、他人にわからないようにすることです。インターネットでは簡単にサイトへアクセスし、どのような情報をやり取りしているのか確認できてしまいます。

第三者が勝手に情報を捏造したり、悪用したりしないようSSL化しておく必要があります。

レスポンシブデザイン

レスポンシブデザインとは、パソコン以外の端末からアクセスしても見やすいデザインのことを言います。現在はパソコンよりスマートフォンからアクセスするユーザーが増えています。

しかし、スマートフォンに対応していないデザインだと文字の大きさやリンクの場所など閲覧しにくくなり、サイトから離脱されてしまう可能性があります。そのため、スマホやタブレットからでも見やすいデザイン作りが重要です。

フレームワーク

フレームワークも、見やすいホームページ作りに有用です。フレームワークとは、ロジックツリーやピラミッドストラクチャーなどのことをいい、一目で関係性がわかります。

ホームページを閲覧する人は、全部の文字を丁寧に読むわけではありません。いかに短時間で内容が伝わるデザインにするかが重要です。

そのため、フレームワークを活用しわかりやすいサイト作りを心掛けましょう。

ホームページ制作に欠かせない基本スキル

ホームページ制作に欠かせない必要スキルは以下の6つあります。

Webマーケティングスキル
Webデザインスキル
コーディングスキル
Webライティングスキル
コミュニケーションスキル
WordPress（CMS）の運用スキル

Webマーケティングスキル

Webマーケティングスキルはホームページ制作に重要です。マーケティングは一見関係ないように思えますが、マーケティングについて知らないと効果的なホームページになりません。

ライバル会社や市場調査を行い、ターゲットを絞ったりアプローチ方法を工夫したりすることでやっと効果的なホームページになります。また、広告の活用方法など、Webマーケティング独特の知識も重要なので、身につけておくことが大切です。

Webデザインスキル

Webデザインスキルもホームページ制作には必要不可欠です。ホームページにとってデザインは、アクセスしたユーザーの関心を引くかどうかを決めるとても重要なポイントです。

魅力的だと思われなければ、すぐにブラウザバックしてホームページを閲覧してくれないでしょう。そのため、ホームページをデザインする能力はとても重要です。

コーディングスキル

コーディングスキルも大切です。コーディングとは、ホームページに入稿する作業です。ただ文章を書くだけでなく、ページの表示の仕方などを指示することで魅力的なホームページになります。

このコーディングができないと、うまく表示されず伝えたいことが伝わらない可能性もあります。そのため、コーディングについても学ぶ必要があります。

Webライティングスキル

アクセスを増やすには、ライティングにスキルも必要になってきます。ライティングスキルがあれば、アクセスした人の関心を引き付け、商品の購入などへ誘導できます。

しかし、それだけでなくライティングスキルがあればアクセス数も増やせます。具体的にはSEOライティングといい、グーグルなどで検索したとき上位表記されるためのコツがあります。

そのコツやスキルを知っていると、より多くの人にホームページを知ってもらえるでしょう。

コミュニケーションスキル

コミュニケーションスキルも、ホームページの開設には必要です。ネット上で多くの人とやり取りをすることがあります。そのため、見えない相手を想像し、不快にさせないコミュニケーションスキルを身につけましょう。

WordPress（CMS）の運用スキル

WordPress（CMS）の運用スキルも重要です。WordPressとは、簡単にホームページを制作できるCMSです。CMSを使ってホームページをつくるだけでなく、運用していかないといけません。アクセス数なども確認できるので、そういった情報をもとにアクセス数が増えるような運用をすることが大切になります。