最新コラム
-
-
-
-
-
Webサイト制作サイト制作
articleとsectionの違いと使い分け【HTML】
-
Webサイト制作
【WorldWideWeb】URLの仕組みついて
「サイドバーはWEBサイトにとって本当に必要なのか」、最近、サイトの運営者には今まで疑問を感じなかったこの点に問題提起をする人がでてきました。全てのサイトになくてはならないものという訳ではないですが、自社のサイトに期待する効果を得るにはサイドバーが必要な存在になる場合があります。
であればどのようなサイドバーが有効に活用されるのか。今回は有益なサイドバーの設置や運営の方法をご紹介します。
サイドバーとはサイトの画面の横に設置されたメニューや広告のことを言います。多くの情報を扱っているサイトを訪れるユーザーにとっては情報迷子にならずに知りたい内容にたどりつくことができる便利なツールです。それではサイドバーを設置することでサイト運営者、ユーザー双方にどのような効果が生まれるのでしょうか。
サイドバーはユーザーにとって知りたい情報を手早く得ることができるありがたいツールです。見たいサイトにすぐに移動できるだけでなく、例えば通販サイトを利用する際にサイドバーを利用して「サイズ」「色」「材質」などを絞り込むことで膨大な商品の中から欲しい商品を絞り込むことができます。
サイトの運営者にとってはどうなのでしょう。自身が運営しているサイトが何を目的にしているのか、ユーザー目線を重視するのかによってサイドバーの必要性は変わってきます。
また現在、サイドバーの存在を疑問視するサイト運営者もおり、ブログなどではサイドバーを無くしたサイトを作成している運営者もいます。実際にあれもこれもとサイドバーを設置すればサイトが煩雑で重要なポイントがわかりにくい画面となり逆効果になる可能性あります。
それでは必要なサイドバーとはどのようなものでしょうか。ユーザーが必要なページに辿り着くというユーザー目線も必要ですが、サイト運営者にとって実際の収益につながることが大切です。通販サイトでサイズなどが絞れるというのはその典型ですが、その他にはメルマガや会員登録フォームへの誘導などユーザーが何度でも訪れるサイトにするためのサイドバーの設置はサイト運営者にとって発展的なものと言えます。
まずはサイドバーのメリット、デメリットを検証してまいりましょう。
サイドバーを設置するとユーザーはサイドバーから知りたい情報に簡単に辿り着くことができます。ユーザーは一目で何のためのサイトかわからなければすぐに離れてしまいます。1つの画面でユーザーの次の興味を引くことができ、長く自社のサイトに滞在してもらうためにもサイドバーは大切なものです。
また問い合わせのフォームなどと合わせることによってコンバージョン率(閲覧したユーザーが商品購入、資料請求など収益に結び付く行動をすること)を上げることができます。
デメリットの起こる原因は簡単に言ってしまえば「乱発しすぎ」。あのページもこのページもと訪問してもらいたいあまりにサイドバーを貼りすぎて画面が見にくく煩雑になってしまうこともあります。
またサイドバーの枠が画面で主張をすればするほどメインの画面に目がいかなくなるなり、何をアピールしたいのかわからないまま次のページに移動してしまうこともあります。
サイドバーとは言っても色々な例があります。それぞれ自社のサイトがどのような目的をもっているかによってサイドバーの設置の理由も変わってまいります。ここではデザインの一例を案内いたします。
サイドバーを利用してユーザーが情報を絞り込み、膨大な欲しい商品にいち早く辿り着くための重要なツールになります。ショッピングサイトではあまりにも多くの商品が出てくるので利用するユーザーも多いはずです。
YOUTUBEでは選んだ動画のページの右に関連の動画と広告が配置されるようになっており、ユーザーが続けて興味のある動画を視聴しやすく、滞在時間をより長くすることができます。
一例としてYahoo!のニュースサイトでは「経済」「エンタメ」「スポーツ」トップ画面で興味を持った話題のページを訪れたユーザーに対してのサイドバーは広告と興味のあるカテゴリを設置しています。またその話題を話題を閲覧やコメントの多いランキングなどの方法で設置するということで新たな価値を提供しています。
小売りをする企業のサイトは様々な人が訪れます。商品の情報が欲しい人はもちろん、キャンペーンに興味のある人、株主、就活とそれぞれ目的が大きく違うユーザーが訪れます。ある特定の情報をじっくりと閲覧したい人が情報迷子にならないためにもサイドバーで誘導をすることが必要です。
またページの邪魔にならないよう通常は小さく表示し、マウスをあてるとサイドバーが見られるような仕組みを取り入れるサイトもあります。
それではサイドバーにはどのような書き方があるのでしょうか。htmlとcssでの書き方をご紹介します。
見本のサイトの画面は、下記のテキストからできいます。
HtmlはWEBサイトの基礎を作るものとなります。ここではhtmlの書き方のサンプルをご紹介いたします。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta name="generator" content="HeTeMuLu Creator Ver.1.10a"> <title></title> </head> <body bgcolor="#ffffcc" text="#000000" link="#0000ff" alink="#ff0000" vlink="#800080" style="text-align: center;"> <div style="background-color: #ffffff; padding-top: 20px; margin-left: auto; margin-right: auto; padding-bottom: 20px; width: 600px;"> <div style="margin-bottom: 20px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #000000;text-shadow: 10px 10px 10px #80FF52;"> <h1>楽しい休日</h1></div> <div style="border-left-width: 1px; border-left-style: solid; border-left-color: #000000; margin-bottom: 20px; width: 400px; float: right;"> こんにちは<br> ●●●のブログにようこそ<br> <img src="無題.png" alt="" width="300" height="406"></div> <div style="text-align: left; margin-left: 20px; margin-right: 20px;"> <h2>プロフィール</h2> <p><a href="html2.html">アクセス</a></p> 私は<br> ●●●と申します。<br></div> <div style="border-top-width: 1px; border-top-style: solid; border-top-color: #000000;margin-left:20px;margin-right:20px; clear: both;"> よろしくね♪ </div> </div> </body> </html>
Cssはhtmlで作成されたものにデザインをつけていくものです。Htmlでもフォントのサイズや色は変えることができますが、cssを使用するとさらに魅力的なサイトを作ることができます。それではcssの書き方のサンプルをご紹介いたします。
TwitterやInstagramなどのSNSに誘導してさらに深くユーザーと接点を求めるサイドバーもあります。サイトを見て、興味を持ったからと言ってわざわざSNSで該当のアカウントを探して登録をするユーザーは多くありませんが、運営者にとってはユーザーを逃がさないためにもSNSの登録は促したいものです。サイドバーで登録を促すことにより、常時、ユーザーに知らせたい情報を送ることができます。
サイトの閲覧とは違い、SNSには閲覧した人が他人に伝えたいという気持ちを「いいね」や「リツイート」を利用して表現することができます。この効果は「登録者一人に伝える」、というだけでなく新しい閲覧者を得ることが可能となります。
SNSでフォローをしている人は知人や自身が「この人の情報はきっと価値があるはず」と認めた情報の発信者であることから、そのユーザーの「いいね」はただ情報ではなく「面白いはずの情報」に変わります。これは情報発信者にとってとても心強いユーザーとなります。
インターネットが普及し、あれだけ珍しかったWEBサイトの検索は今では会社でも家でも当然のように行われています。
色々なものに流行があるように、サイトのデザインにもその時の流行と進化があります。当たり前のように設置されるサイドバーも時代に合わせて書き方も変化し、配置次第では有益にも手間がかかるだけのものにもなります。
サイトの運営者は自社のサイトの特徴、時代の流れ、データの有効活用などを検討し、より良いサイト運営を目指していきたいものです。
受付時間:平日10:00~19:00(土・日・祝日を除く)