ホームページに必要な要素12選 : パーツ名称と役割を解説
クオリティの高いホームページは、ホームページを構成する各パーツが自然に組み合わされて構成されています。要素を、ユーザーが使いやすいように構成することで、初めてプロフェッショナルなホームページに仕上がるのです。
この記事では、ホームページを構成するさまざまな要素（パーツ）の名称や目的をひとつひとつ詳しく説明していきます。初めての Web デザインで失敗しないために、使いやすいホームページ制作のコツとポイントを押さえましょう。
すぐにでもホームページの作成に取り掛かりたい！という人には、パーツについて学びながら作業を進められる Wix のホームページ作成ツールをおすすめします。実際に、ホームページを作りながら、本記事を参考にホームページをデザインしましょう。
ホームページの基本要素
ホームページの構成要素の中には、ウェブデザインにとって不可欠なものがあります。サイト全体を正しく機能させるために必要であり、これらを組み合わせることで、ホームページの骨格が形成されます。
01. ヘッダーとメニュー
ヘッダーとは、ホームページの上部にあるエリアを指します。サイトを訪れたとき、最初に目にするのがこの部分です。多くの場合、ブランドロゴとヘッダーメニューが表示されています。ヘッダーメニューは、サイト内の案内としての役割を果たし、訪問者が求める情報を見つけやすくするための Web デザインパーツです。ここから、商品詳細や会社情報などのページに移動できます。
ヘッダーの基本は重要なページを表示することですが、ホームページの種類によってメニューを工夫できます。たとえば、ネットショップを運営している場合、販売する商品の種類によってヘッダーをカテゴリー分けすると、より見やすくなります。非営利団体のホームページであれば、ヘッダーに寄付募集ページへのリンクを設けるのもよいでしょう。ヘッダーに適切なメニューを設定し、訪問者が使いやすく、目的を達成できるようにデザインすることがポイントです。ホームページの成功と失敗は、この設定によって決まると言っても過言ではありません。
02. メインビジュアル
ヘッダーのすぐ下には、画像や動画を設置します。ヘッダーとメインビジュアルは、ホームページの最初に表示されるエリア（ファーストビュー）を構成します。この２つが、サイトの第一印象を決める要素となります。特に、メインビジュアルが与える印象は、訪問者の行動を大きく左右します。訪問者がホームページに留まるのか、数秒後に離脱してしまうのかは、メインビジュアルがいかに信頼感やプロフェッショナリズムを伝えられるかにかかっていると言えます。
その観点から、ここに設置するビジュアルは、ブランドや会社の本質を伝えるものでなければなりません。商品やサービスの画像、ブランドのイメージが伝わるビジュアルなど、サイト全体との関連性を持たせることが重要です。プロフェッショナルな印象を与えるために、トップページに一番ふさわしいと思われる画像を選んでください。プロの写真家による商材写真の使用がおすすめです。まWix が提供するフリー画像や動画素材から、サイトに使えるビジュアル素材があるかどうかもチェックしてみましょう。
03. コンテンツ
すべてのサイトにはコンテンツが含まれています。ホームページのコンテンツはさまざまです。一般的にコンテンツとは、ブランドやサービスを説明する文章や、ボタンに配置される一言の文字といった、サイト上の文字情報を意味します。
ボタンやメニューに添えられる短い言葉のコンテンツは、小さな要素に思えるかもしれません。しかし、このコンテンツこそがサイトの存在目的なのです。「今すぐ購入する」「カートに追加」などの言葉を駆使して、訪問者を顧客にコンバートできるからです。
ホームページを訪れた人にブランドや会社のことをよく理解してもらえるよう、時間をかけて慎重にコンテンツを工夫しましょう。
04. フッター
フッターとは、サイトの最下部のエリアのことです。サイトマップが設置されていることが多く、サイト内の他ページへのリンクが含まれています。返品ポリシーやよくある質問ページなど、ヘッダーには記載できなかった情報もサイトマップの一覧で紹介でき、必要な情報がどこにあるのかを一目で把握できます。
また、顧客がサイトオーナーに問い合せをしたい場合や、実店舗を探すときのために、フッターに基本的な連絡先を記載する場合もあります。このような情報の掲載は、ビジネスの成功に非常に有効です。
さらに、SNS に誘導するため、SNS のアイコンを用いたシェアボタンをフッターに設置することもできます。これにより、SNS 上のフォロワーを獲得し、ブランドの認知度向上とビジネスの成長に繋げられます。
ホームページの追加要素
上記のような要素を盛り込んだホームページは、すでに完成されたサイトと言えます。しかし、さらにレベルアップを図りたい場合は、以下の要素の追加をおすすめします。特に、ビジネスサイトや企業サイトを制作している場合にぜひ検討しましょう。企業サイトに入れるべき6つの要素は、こちらのおすすめ記事でも詳しく紹介しています。
05. ロゴ
ブランド構築に欠かせないロゴは、ホームページでも定番の要素です。ロゴはブランドや会社を象徴するもの。ロゴによって、既存顧客と潜在顧客の両方がブランドや会社を認識し、記憶できます。
ロゴは通常、ホームページのヘッダーの左側上部にあります。このロゴをクリックすると、訪問者はサイトのトップページに戻ることができます。ロゴを作成してサイトに簡単に埋め込むには、カスタムロゴを自動的に作成できるロゴジェネレーターが便利です。
06. CTA ボタン
CTA（call-to-action）とは、顧客がサイト上で次のステップに進み、セールスファネルを通過していくのを誘導する短いテキストのことです。通常、CTA はボタンとして表示され、「今すぐ始める」「購入する」など、アクションを表す言葉が含まれています。CTA のテキストは、顧客に特定の行動を取るように促し、ボタンをクリックするとどういうステップに進むのかをわかりやすく伝えるものです。
CTA は、実際にサービスを利用したり、商品を購入したりという訪問者の行動を喚起するもので、ホームページの重要な要素です。このボタンを設置しない場合、売上が減少したり、訪問者が Web サイトでの目的を完了せずにページを離脱する確率が高くなる可能性があります。
07. サイドバー
多くのホームページでは、画面の横にサイドバーと呼ばれる縦長のバーを設置し、リンクや情報を表示しています。サイドバーは、サイトのもう一つのナビゲーションとして機能し、訪問者が必要な情報を見つけるのに便利な要素です。ヘッダーの情報と比べると、優先順位の低い内容が表示されます。
一般的に、サイドバーにはサイト内の他のコンテンツへのリンク、メールマガジンの登録方法、広告などが含まれます。このスペースを広告に活用すると、ホームページのマネタイズに繋がり、ビジネスを成長させることにもなります。また、このスペースで商品を宣伝しておくと、訪問者が商品ページをチェックする前の段階であらかじめ商品を確認できます。
しかし、ページが縦長の場合は、サイトバーが使いづらい場合もあります。パーツを固定してメニューを表示する「アンカー」の設定方法もご覧ください。
08. ブログ
ブログは、ビジネスに関連するさまざまなトピックについての記事や投稿をまとめたものです。最近では、企業が自社サイトにブログを追加することが、より一般的になってきています。ブログは単独のサイトとしても立ち上げられますが、既存のホームページの一部として追加すれば、企業のマーケティングツールとしても機能します。
ホームページへのブログの追加は、いくつかの目標を達成するために効果を発揮します。まず、顧客に商品や業界のより幅広い情報を提供できます。それによって、顧客を育成し、彼らのビジネスへの理解を深められます。
また、ブログはホームページに多くのトラフィックをもたらします。さまざまなトピックを深く掘り下げておくと、人々が Google 検索しようとする内容への答えを提示できます。たとえば、提供しているサービスと間接的な関係しかないトピックについての記事でも、ブログで十分な情報を提供することにより、商品やサービスを必要としていないユーザー層の潜在的な興味を引き出し、新たな顧客層として取り込むことができます。
コミュニティブログを運営するなら、登録済み会員のみがアクセスできる会員限定ページを追加することをおすすめします。会員限定ページは他にも、ユーザー投稿型サイトや、ファンコミュニティの運営にも応用できます。
09. 入力フォーム
入力フォームは、一般的に情報収集のために使用されます。ホームページに埋め込み、さまざまな用途に合わせて活用できる要素です。たとえば、問い合わせフォームを設置すると、訪問者がサイトから直接問い合わせられるようになります。また、登録フォームのように訪問者の情報を集めるフォームは、見込み顧客の獲得に役立ちます。
フォームを設置する際は、使用するフォームの種類によって、サイト内の設置場所に十分配慮しましょう。一般的に、問い合せフォームをトップページに設置するのは、少し積極的すぎるアプローチと言えます。別のウェブページや、サイトの下の方など、埋め込む場所を検討してください。
ヒント：要素のレイアウト
ホームページに含める要素が決まっても、それらをどうレイアウトすべきか悩むところです。ホームページのレイアウトにはさまざまなパターンがあります。それぞれの利点を考慮し、すっきりと見やすいホームページを保ちましょう。
最も一般的なホームページのレイアウトは、トップページと、読者が探している情報を掲載する複数の下層ページから構成されています。もうひとつの選択肢としては、シングルページのホームページデザインがあります。これは、すべての情報をスクロール可能な縦長ページに配置するものです。このレイアウトには、訪問者が探しているものすべてを一度に見つけられるというメリットがあります。このレイアウトを採用する場合、各セクションを明確に区別しましょう。また、ヘッダーにページ内リンクを設置することで、各セクションへのナビゲーションをスムーズにできます。
レイアウトを工夫したい場合は、「カラム」機能もお試しください。ホームページのコンテンツを横並びに分割し、写真や動画、問い合せセクションなど、さまざまなパーツを見やすく表示できます。
ホームページに必要な他の要素
ホームページそのものに含まれる要素ではありませんが、サイトを確実に稼働させるために必要不可欠なものがあります。ホームページの作成を始めるにあたり、少なくとも以下の３つの要素については、十分に理解しておくことをおすすめします。
10. Web ホスティング
Web ホスティングとは、簡単に言うと、ホームページがオンラインの状態でいるための場所です。見た目ではわかりませんが、すべてのホームページはサーバーのスペースにアクセスし、保存されます。サーバーはデータの格納庫のような存在です。ネットワークに接続され、他のコンピューターにファイルやデータなどの情報を提供するメインのコンピューターを指します。サーバーは、ホームページがオンラインにあり、ユーザーが検索したときにアクセスできることを保証します。
Wix なら、無料 Web ホスティングが組み込まれているので、ホームページを作成して公開すると、自動的に信頼性の高いマルチクラウドホスティングシステムでホスティングされるようになります。つまり、外部のホスティング会社を探すことも、ホスティングサービス料を支払うことも心配する必要はありません。
11. ドメイン名
ホームページの作成を考えたとき、ドメインという言葉を耳にしたことがあるでしょう。ドメインとは、簡単に言えばホームページのオンライン上の住所のことです。会社名やブランド名と同じであることが多く、ユーザーがアクセスするときに目にするため、記憶に残るドメイン名であれば印象づけることができます。たとえば、あなたのブランドが「Rosa」であれば、ドメイン名は「rosa.org」や「rosa.com」などが考えられます。
ユーザーにホームページを簡単に見つけてもらい、覚えてもらえるよう、ぜひ個性あるドメイン名を取得してください。たとえば、何かについて検索したいとき、もっと情報を知りたいとき、何を思い浮かべますか？ 多くの人が最初に思いつくのは、google.com ではないでしょうか。このように、人々に幅広く認識され、すぐに思い出してもらえるドメイン名というのは、ホームページをより大きな成功へと導いてくれます。
12. SEO
SEO（サーチエンジン最適化）とは、検索エンジンで自分のサイトが検索されやすいように調整することです。検索エンジンがホームページをよく認識できるように、サイトのコンテンツ、画像、デザイン、構造などを最適化するのです。認識結果により、Google は関連する検索クエリに対応するホームページを表示します。
SEO は、さまざまな側面を包含する複雑な世界です。SEO に不慣れな人には、Wix SEO Wiz の利用をおすすめします。このツールを活用すると、Google にインデックスされやすいサイトを構築できます。また、どのようにサイトを最適化すべきか、実行に移しやすい施策の提案を行い、上位表示の達成を助けるツールとなっています。
まとめ
ホームページを構成するパーツ名称や要素を理解すると「パーツごとにデザインの参考を調べられる」「ホームページで追加してみたい機能を探しやすくなる」といったメリットがあります。
本記事で紹介したパーツ名称と要素は、どんなホームページでも使える、必要な機能です。お持ちのホームページにまだない機能があれば、ぜひ追加を検討してみましょう。初めてホームページを作成する人は、ホームページを作成する手順と基礎知識についての記事もおすすめです。
Wix は無料でホームページ制作ができるサービスを提供しています。豊富な料金プランから、ご自身のニーズに合ったサブスクリプションの選択も可能です。機能性に優れたホームページ制作プラットフォームをぜひお試しください。
編集者：Miyuki Shimose
ブログ コンテンツマネージャー
