ホームページを作成するときに必ず理解しておきたい機能10選

更新日:2017年07月16日 | 公開日:2017年07月16日

ホームページを作成するときに必ず理解しておきたい機能10選

いろいろなホームページを見ていて、「自分の会社のホームページを作るときにこんな機能があったら便利そうだな。でも難しそう…」と思ったことはありませんか。

実は、一般的なホームページを作成するならいくつかの機能についてきちんと理解しておくだけで、使いやすいホームページを作成することができるんです。

今回の記事では、これからホームページを作成しようと思っている人はもちろん、すでにホームページを持っている方にも必ず理解しておいてほしいホームページの機能を厳選して10個ご紹介します。
さらに、紹介した機能を効果的に使っている実際のホームページの例もまとめましたので、参考にしてみてください。

1. 知っておくべきホームページの機能

ここで紹介する10個の機能はホームページを見ていれば必ず目にしているもので、おそらく多くの皆さんが名前くらいは知っていることと思います。
でも、ホームページを制作するなら、具体的に「どんな機能なのか」をきちんと理解しておく必要があります。

1-1. アイコン

アイコンとは、内容や機能などを図や絵柄で表したものです。
メニュー表示に使われるのが一般的で、アイコンを作る際の鉄則は「文字による説明がなくても、国籍や年齢を問わず誰にでもわかりやすいものにする」ということです。

1-2. バナー

バナーとは、英語で垂れ幕や横断幕という意味で、ホームページ上に表示される帯状の広告のことです。
一般的にはホームページの両端や上部などに設置されます。
バナーはユーザーがクリックすることで、他のサイトへ誘導したり、見てほしいコンテンツへ導く重要な機能ですので、効果的に使いましょう。

お店の前に看板がなければ、お客さんはお店の場所がわからず、来店をあきらめてしまいます。
それと同じで、ホームページ上にもユーザーを導くバナーがなければ、サイト内でユーザーは迷子になってしまいます。

1-3. サムネイル

サムネイルとは、画像や文章ファイルを縮小したものを指し、多数のファイルを一覧表示する際に使われます。
ホームページではほとんどの場合、記事やコンテンツへの誘導を目的として使われます。
このため、サムネイルをクリックすることで、目的の記事やコンテンツに飛べるようにリンクを付けて設置されています。

1-4. カルーセル

カルーセルとは「回転木馬」を意味する英語で、ホームページでは写真や画像を横にスライドする機能のことを指します。
ホームページのTOPページで、カルーセルを使い、商品やサービスに関する写真や画像を効果的に紹介している企業が多くあります。

1-5. テキスト

ホームページの画面に表示する文字情報のことをテキストと言います。

画像や動画を使っているページであっても、紹介文やコメントなどは欠かせません。
その意味でテキストはホームページの基礎となる欠かせない存在です。

1-6. タグ

タグとは、「荷札」や「付箋」といった意味を持つ言葉で、ホームページ上では印として使われています。
ホームページを見ていると、急に文字が大きくなっていたり、色文字になっていることに気が付くことがあると思います。
これはユーザーにより伝えたい部分であることを強調しているもので、これらを「タグ付けされている文字」と呼びます。
タグを使って別のページへの誘導を指定することもでき、ユーザーにホームページのなかの見てほしい部分を伝えるための重要な機能です。

1-7. コンテンツ

コンテンツには、「内容」や「中身」という意味があります。
ホームページにおけるコンテンツとは、掲載されている1つひとつの情報のことを指します。
例えば、「会社概要」や「商品紹介」といった情報はそれぞれが1つのコンテンツとなります。
ですから、「このサイトはコンテンツが充実している!」というのは、ユーザーの役に立つ内容や中身があるという意味になります。

ホームページを運営するにあたっては、ユーザーのニーズを満たすコンテンツを用意することが重要になります。

1-8. エントリーフォーム

エントリーフォームとは、ユーザーが情報を入力する機能です。
会員登録やメールでの問い合わせ、あるいは資料請求などのために使われることが多く、エントリーフォームはホームページをビジネスに活用する上で欠かせない機能と言えます。

ただし、入力項目が多くなるほどユーザーの手間が増えるため、必要最低限の情報を簡単に入力できるようにすることがポイントとなります。

最近では、手軽に入力できるようにFacebookなどのSNSのアカウントを連携させて登録できるようになっているエントリーフォームを設置するホームページも増えています。

1-9. カーソル

カーソルとは、今どの部分を操作しているのかを画面上に表示するマークのことで、指示や操作を指し示す機能です。
点滅して文字の入力位置を示す「Ⅰ」や、マウスを操作した際に位置を示す矢印形のものがあります。

1-10. マウスオーバー

先ほど紹介したカーソルを合わせたときに、色が変わったり、下線が引かれるといった機能のことを言います。

マウスオーバーを用いることで、ユーザーは「ここでクリックできる」と確認できるので、クリック率にも大きく影響が出る重要な機能です。

2. 効果的な機能の使い方の例

それでは次に、実際に機能を効果的に使っているホームページをまとめましたので、参考にしてみてください。

2-1. サムネイルを効果的に使っている例

I/O 3000

出典1/O 3000

webデザインに関わる人のためのギャラリーサイトです。
サムネイルをシンプルに大きく表示しているので、それぞれの画像がとても見やすくなっています。

カラー別や職種ごとにサムネイルを見ることもできるので、サムネイルを活用したいと考えた場合には参考にすべきサイトです。

2-2. エントリーフォームを効果的に使っている例

Airbnb

出典Airbnb

Airbnbは、世界中のユニークな宿泊施設や体験できるアクティビティをインターネットで探したり、予約することができるコミュニティサイトです。
エントリーフォームは非常にシンプルで、場所、日時、人数の3つを入力するだけで、ユーザーに合わせたおすすめの情報が表示される仕組みになっています。

また、アカウント作成のエントリーフォームもFacebookアカウントかGoogleアカウントで簡単に登録することができるほか、メールアドレスでの登録でも名前と生年月日、ログインパスワードを入力するだけでアカウントを作成できます。
情報が必要最小限のため画面をスクロールせずに入力を終えられる点がポイントです。

2-3. マウスオーバーを効果的に使っている例

またあした

滋賀県守山市・野洲市でデイサービスを運営している特定非営利活動法人またあしたのホームページです。

画面の中央に並んでいる本のイラストをマウスオーバーすると、半回転して背表紙部分に書かれた見出しが見える仕組みになっています。
遊び心のある作りで、柔らかいタッチのイラストとも相まってクリックして記事が読みたくなるような楽しい仕掛けになっています。

【まとめ】機能をうまく組み合わせて使いやすいホームページを作りたいなら

いかがでしたでしょうか? この記事では厳選した10個の機能を紹介しました。

また、ここでは特徴的な使い方をしているホームページを取り上げましたが、実際にはさまざまな機能をうまく組み合わせて、より見やすく、使いやすいホームページを作ることが必要となります。
もちろん、あれば便利な機能は紹介したもの以外にもまだまだあります。

しかし、ホームページを作成したことがなかったり、あまり経験がない人にとって、たくさんの機能をうまく組み合わせて操作性などが統一されたホームページを作ることは、現実的にかなり難しい作業になります。

そんなときは、外部の力を使うことをおすすめします。
実績のある外部の制作会社に作成を依頼することで、機能をうまく組み合わせて使いやすいホームページを作成することができます。

日本最大級の発注業者比較サイト「アイミツ」では、経験豊富なコンシェルジュがあなたの要望に合わせた、最適な制作会社をご紹介いたします。

見積もり、取ってますか?

発注をする際に最も大切なことは適正価格を知ることです。
3~4社から見積もりを取ることで、
発注への納得度を高めることができます。

コンシェルジュ

発注は時間も手間もかかりますよね?

コンシェルジュが解決します!

コンシェルジュに相談、あなたにあった業者を提案、発注の手間を削減!

完全無料

まずはお気軽にご相談ください