Webサイトに搭載できる機能一覧を解説！効果的な事例も紹介

自社の会社概要や商品を紹介する際にWebサイトを制作する会社は多いでしょう。そして、制作を行う際には、自社の開発担当者や制作会社の担当者とやり取りを行うことになります。

Webサイトに搭載されている機能の名称やその詳細、メリットについて把握しておき、それを搭載することでWebサイトをより便利なものにできます。また、制作担当者とのコミュニケーションもスムーズに行えるでしょう。

この記事では、Webサイトに搭載される機能を一覧で紹介します。Webサイトの機能について確認しておきたい方はぜひご確認ください。

Webサイトに搭載される機能一覧

ここから、Webサイトに搭載される機能を一覧で紹介します。Webサイトを制作する際には、様々な機能や挙動が用いられます。この記事では、多数ある機能を以下の2つに分けてご紹介します。

• Webサイトの見た目に関する基本的な機能・挙動
• Webサイトのデータベースを使用した機能・挙動

Webサイトの見た目に関する基本的な機能・挙動

まずは、Webサイトの見た目に関する機能・挙動について解説していきます。Webサイトで使われている基本的な要素となるので、業務の会話で使用される言葉も多いでしょう。

改めて確認すると、意外と知らない機能もあるかもしれません。用語の意味から具体的な機能まで解説しますので、ぜひご確認ください。

アイコン

アイコンとは、指定しているものの内容を図形やイラストで表したものです。メニュー表示を行う際に使用されます。

また、アイコンを使用することで、ユーザーの目に留まりやすくなります。そのため、ユーザーにクリックしてほしい箇所や、アピールしたい箇所に使用すると効果的です。

ファビコン

ファビコンとは「favorite icon」の略で、Webサイトのシンボルマークとして使用されるアイコンです。

ブラウザでWebサイトを開いた際のタブ部分に表示されるため、Webサイトを表示した際に目にすることが多いでしょう。複数のページを開いている際に、指定のサイトのページを見つけるための目印となります。

また、ファビコンは他にも以下の箇所にも使用されます。

• 検索エンジンでの検索結果ページに表示されるアイコン
• WEBサイトをショートカットに設定した際のアイコン

ファビコンを設定する際は正方形の画像を使用します。また、ファビコンにはそのサイトのロゴを使用することが一般的です。

サムネイル

サムネイルとは、画像や文書の内容を縮小表示したものを指します。一般的には、多くのファイルやコンテンツを一覧で表示する際に使用されます。

サムネイルを制作する際は、そのコンテンツの中身を画像に落とし込みます。そのようにすることで、コンテンツの内容を開かなくても、サムネイルを見るだけでその内容を確認できるようになります。

サムネイルは目的のコンテンツへの誘導のために使用されます。そのため、そのコンテンツに対してのリンクを付けて掲載されます。

カルーセル機能

カルーセル機能とは、写真や画像を横にスライドさせられる機能のことを指します。この機能を活用すると1つの表示領域に複数のサムネイルを表示できます。そのため、多くの表示領域を用意しなくても効率的に情報を伝えられます。

中心にメインとなるコンテンツが表示され、一定時間ごとに次のコンテンツが中心に移動してくる設計が一般的です。

次に表示されるコンテンツも見えるようにしておくことで、よりユーザーの興味を惹けるでしょう。また、次のコンテンツを表示するためのボタンを入れておくことでユーザーのストレスを減少させられます。

バナー

バナーは日本語に訳すと「旗」「のぼり」という意味となり、商品やサービスなどを紹介するための画像のことを指します。Webサイト上に表示され、クリックすると他のページに遷移します。

サイズは正方形のものから長方形のものまで幅広いですが、一般的とされるサイズは10種類程度となります。一般的とされているサイズを把握したうえで制作するとよいでしょう。

また、バナーの内容によってクリックされる確率が変わります。制作と効果測定、改善を繰り返すことで、クリック率を上げていきましょう。

カーソル

カーソルとは、表示している画面の中で現在の位置を指し示す図形のことを指します。マウスを使用して動かすため、「マウスポインタ」とも呼ばれます。

カーソルで使用される図形は矢印が一般的ですが、丸やⅠなどの記号も使用されます。文字にカーソルを合わせたときには「Ⅰ」が使用されるなど、記号に意味を持たせることで、より使いやすくなる工夫が施されています。

マウスオーバー

マウスオーバーとは、Webサイトの中の画像やテキストにカーソルを合わせたときに、カーソルの図形が変わる仕様のことを指します。

カーソルを乗せたコンテンツがクリック可能なことを示すときに使用されます。一般的には、カーソルの図形が人差し指の図形に変わりますが、丸の図形が大きくなるなど、他の図形が使用されることもあります。

マウスオーバーは、Webサイトの回遊率に影響が出る重要な機能です。

カラム

カラムとは、Webサイトにおいては縦の区切りのことを指します。ここでのカラムは日本語にすると「段組み」という意味となります。

一般的には表示される画面を「メインコンテンツ」と「サイドメニュー」の2つに分ける2カラム構成と、3つに分ける3カラム構成が一般的です。

カラムを2つ用意することで、サイドメニューに他のコンテンツに誘導するためのバナーなどを掲載できます。その結果、Webサイトの回遊率を向上できることがメリットです。

グローバルナビゲーション機能

グローバルナビゲーションとは、ページの上部に設置されている、主要なコンテンツへのリンクがまとめられているメニューのことを指します。この機能は、Webサイトの全ページで表示されます。

これにより、サイト全体のコンテンツカテゴリをわかりやすくユーザーに共有できます。その結果、ユーザーは目的のページにたどり着きやすくなります。

グローバルナビゲーションを制作する際には、コンテンツのカテゴリを設計し、そのカテゴリを表示できるように制作するとよいでしょう。

パンくずリスト

パンくずリストとは、Webサイトの中でどの位置にいるのかをユーザーに示すための表示のことを指します。Webサイトの階層が左から右に進むようにリンクが表示されます。

一般的には以下のように表示します。

「HOME>カテゴリ名>コンテンツのタイトル」

パンくずリストがあることによって、ユーザーが探している情報にアクセスしやすくなります。また、検索エンジンが情報を取得しやすくなるため、検索順位の向上も期待できます。

検索機能

検索機能は、Webサイト内のコンテンツを検索できるようにする機能です。検索窓をWebサイトの中に設置し、ユーザーはそこに検索KWを入れることでコンテンツの検索をできます。

ただ検索窓を設けるだけでなく、虫眼鏡のアイコンを入れたり、事前に文字を入れておくことで、ユーザーが検索できることに気づきやすくなるような工夫が施されます。

これを設置することでユーザーは自身が知りたい内容にすぐたどり着けます。ユーザーにとって、非常に便利な機能といえるだけでなく、顧客の満足にもつながる重要な機能です。

検索機能を活用した事例はこちらから確認可能です。ぜひこちらもご確認くださいね。

タグ

タグは日本語だと「付箋」という意味になり、Web制作ではテキストに指示を与えるためのコードを指します。HTMLにタグコードを書き込むことで、文字に装飾を反映したり、テキストにリンクを付与できます。

タグには様々な種類がありますが、特にページのタイトルを表すtitleタグや見出しを表すhタグはSEOにとって重要なタグとなります。

タグの意味や特徴について理解しておくことはWebサイトの制作にとって非常に重要です。

レスポンシブ対応

レスポンシブ対応とは、ユーザーが使用しているデバイスの画面サイズに合わせてデザインやレイアウトを最適化する対応のことを指します。

現在、ユーザーはPCだけでなくスマホやタブレットなど、様々なデバイスでWebサイトを閲覧します。デバイスによって画面サイズも様々なため、Webサイトも画面サイズに合わせて表示するコンテンツのデザインを変更する必要があります。

レスポンシブ対応を行うと、1つのファイルで様々な画面サイズのデバイスに対応できます。

ポップアップ機能

ポップアップ機能とは、ブラウザ上で特定の操作を行った際に、最前面に新しいウィンドウが飛び出す機能のことを指します。ポップアップ表示が出た際には、指定の操作しかできないような仕様になっていることが多いです。ウィンドウ上の×マークを押すことで元の画面に戻れます。

コンテンツの入力フォームをポップアップで表示し、集中して入力できるようにする場合や、広告をポップアップで表示し、よりクリックしてもらいやすくする際に使用されます。

Webサイトのデータベースを使用した機能・挙動

次に、Webサイトのデータベースを使用した機能や挙動を解説していきます。Webサイトに様々な機能を導入することで、サイトの管理者やユーザーにとって便利に使えるWebサイトになります。

Webサイトを制作する前に、このような機能についても確認しておくとよいでしょう。

データベース機能

データベース機能は、Webサイト上でデータベースを活用できる機能のことを指します。Webサイトからデータの登録、検索、集計、出力などができます。

Webサイトに搭載することで、複数人が同時にデータにアクセスし、データの操作や参照などができます。

また、データベース機能はWebサイトに搭載される他の機能の基本となる機能でもあります。

会員登録機能

会員登録機能は、会員登録をしてもらうことで、閲覧できるページを調整できる機能のことを指します。

ユーザーは会員登録をすることで、会員限定のページにアクセスできるようになります。会員になる際には氏名やメールアドレスなどの情報を記載する必要があります。

この機能を搭載することで、企業はユーザーの情報を収集できるため、見込み客のリストを確保できます。会員登録の際に記載してもらう情報は、営業のために必要な情報を指定するとよいでしょう。

また、最近ではSNSのアカウントを活用した会員登録もできるようになってきています。

会員登録機能を活用した事例はこちらから確認可能です。ぜひこちらもご確認くださいね。

決済機能

決済機能は、Webサイト上で決済ができるようにする機能です。ECサイトやサービスページ等で使用されます。決済をスムーズにできるかどうかは、商品の購入完了率に繋がります。

一般的にクレジットカード決済が活用されますが、キャリア決済やオンライン銀行決済、QRコード決済サービスが活用されることもあります。

ユーザーが使いやすい決済機能を選択するとよいでしょう。

決済機能を活用した事例はこちらから確認可能です。ぜひこちらもご確認くださいね。

エントリーフォーム機能

エントリーフォーム機能とは、ユーザーが情報を入力できるエントリーフォームを搭載する機能のことを指します。一般的にエントリーフォームは、会員登録や問い合わせなどに使用されます。

エントリーフォームでの入力項目の数や内容は自由に設定できます。対応のために必要な情報を設定することが必要です。ただ、入力項目が多ければ多いほどユーザーの手間が増え、登録や問い合わせの完了率が低下します。

コンテンツ管理機能

コンテンツ管理機能とは、Webサイトのコンテンツを管理できる機能のことを指します。一般的には、Webサイトを編集するためにはHTMLやCSSなどの知識が必要とされます。

しかし、CMS（コンテンツマネジメントシステム）というシステムを導入すると、そのような知識が無い人でもWebサイトの編集や管理を行えます。

CMSを使用してコンテンツを管理することで、SEOで必要とされるタグを簡単にコーディングできます。また、コンテンツを作成して投稿することで、ニュース配信なども可能です。

オウンドメディアの構築方法や、CMSの構築費用についてはこちらの記事で解説しています。ぜひこちらもご確認ください。

ユーザー管理機能

ユーザー管理機能は、Webサイトを運用する担当者にユーザーアカウントを発行し、アクセスできる範囲を管理できる機能です。

データベースへのアクセスやWebサイトの編集、コンテンツの管理などの権限をユーザーごとに付与できるため、機密情報の漏洩やコンテンツの編集ミスを防げます。

サイトマップ

サイトマップとは、Webサイトを閲覧しているユーザーや検索エンジンにそのサイトの全体の構造を伝えるためのページやファイルのことを指します。

ユーザーに対しては、1つのページにサイトに存在するページの内容とリンクを掲載することで、サイト内の主要なページのタイトルと位置を伝えます。このページはHTMLサイトマップと呼ばれます。

検索エンジンに対しては、ページの情報を記載したファイルを共有することで、このサイトの中にどのようなページが存在するのか、どのような新規ページが生まれたのかを伝えます。このようなファイルはXMLサイトマップと呼ばれます。検索エンジンに対してサイトマップを作成することで、サイト上のページを把握してもらえるため、SEO上での効果が見込めます。

SNS連携機能

SNS連携機能とは、Webサイト上のページやコンテンツをSNSで簡単に共有できるようにする機能のことを指します。SNS連携では、X(Twitter)やLINEなどが活用されます。

SNSのアイコンをシェアボタンとして掲載することで、クリックすればコンテンツを共有できることをユーザーに伝えられます。

SNS連携機能を活用した事例はこちらから確認可能です。ぜひこちらもご確認くださいね。

RSS配信機能

RSSとは、Webサイトの新着・更新情報を配信するために利用されている技術です。RSSを活用すると、Webサイトの見出しや更新情報、要約した内容が配信できます。このような機能をRSS配信機能と呼びます。

ユーザーはRSSリーダーを活用し、Webサイトの更新通知を受け取ります。そのため、定期的に更新を行うWebサイトで活用されます。

Webサイトの機能を効果的に使用している事例

ここからは、紹介した機能を効果的に活用している事例について解説していきます。Webサイトを制作する際に、機能の特徴を把握したうえで搭載することで、Webサイトの効果を最大化できます。

どのように機能が活用されるのかについて確認しておくとよいでしょう。

特殊法人 / デジタルスタンプラリー

全国30ヶ所以上の施設や会場運営を行う特殊法人がデジタルスタンプラリーを実施し、約8万人が現地に足を運びました。弊社では、デジタルスタンプラリーのシステム提供、キャンペーン企画、デザイン、開発を行いました。

このデジタルスタンプラリーは、会員登録したユーザーがプレイできるものとなっています。このイベントを行った結果、既存顧客とのタッチポイントの向上と新規会員の獲得を達成できました。

このキャンペーンでは、スタンプラリーやクイズ、人気投票などのコンテンツを用意し、それぞれを達成するとスタンプを獲得できるような設計を行いました。スタンプを集める達成度合いに応じて段階的なインセンティブ設計を行っています。

会員ページ機能を搭載することで、ユーザーは自身が獲得したスタンプやインセンティブを確認できます。会員ページによって、その会員の行動履歴を残せるのです。これを活用して様々な施策を実施できることが会員ページ機能を搭載するメリットです。

また、今回の制作の概要についてはこちらで確認できます。ぜひ確認してみてくださいね。

株式会社明治 / プロビオヨーグルトR-1 抽選キャンペーン

株式会社明示は「明治プロビオヨーグルトR-1 ドリンクタイプ 満たすカラダ」の発売にともない、「大切な人へ贈ろう。」キャンペーンの抽選キャンペーンを実施しました。弊社では、抽選キャンペーンサイト制作を担当しました。

このサイトでは、R-1のボトルに日頃の感謝を記載したメッセージ画像を作成できます。そして、その画像を大切な人に贈れるものとなっています。受け取った相手には抽選で商品ギフト券が当たります。

このキャンペーンサイトには、SNS連携機能を搭載しました。メッセージ画像が作成された画面には「LINEで贈る」ボタンが掲載されています。そのボタンを押すだけで作成した画像を大切な人に贈れるような工夫を行っています。

制作の概要についてはこちらで確認できます。ぜひ確認してみてくださいね。

Airbnb

Airbnb（エアビーアンドビー）とは、世界中で利用されている民泊サービスです。このサイトでは、世界中の宿泊施設の検索と予約ができます。

エントリーフォームが非常にシンプルで、場所、日時、人数の３つを入力するだけで、ユーザーに合わせたおすすめの情報が表示される仕組みになっています。また、会員ページ機能では、Googleやfacebook、Appleのアカウントを連携することで簡単に会員登録ができます。決済機能は、クレジットカード情報と電話番号を登録するだけで利用可能です。

このような検索から予約までの機能が非常にシンプルな設計で利用できるため、スムーズな購買体験となっています。様々な機能を組み合わせてサービスを提供している例となります。

Webサイトの制作はBALANCeにご相談ください

この記事では、Webサイトで活用される機能を一覧でご紹介しました。Webサイトを制作する際には、利用される機能の用語や詳細について把握しておくことが重要です。

ぜひWebサイトの機能について確認したうえで制作を進めてみてはいかがでしょうか。

弊社では、Webサイト制作の企画から実装まで対応可能です。サービスに最適な機能もご提案いたします。Webサイト制作を検討している方はぜひこちらからお気軽にご相談ください。