スタイルシートを制する者はHPを制する、HPの基本 創刊準備号
スタイルシートを制する者はHPを制する、HPの基本 創刊準備号
2006/06/26
インフォプレナー研究会 近藤利明
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
---------- M E N U ----------
○ 始めに
○ 今週のTips
○ 次回のTips
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
○ 始めに(ここはいつも同じです)
はじめまして。インフォプレナー研究会 近藤利明と申します。
インフォプレナーとは、インフォメーション(情報)とアントレプレナー
(起業家)を合わせた造語で、情報起業家と呼ばれています。
あなたのホームページ開設の目的は何ですか?
商品の販売・アフィリエイト等での副収入・個人的な情報発信等
色々とあると思います。
ホームページはアクセスがあって始めて用をなします。
そして、アクセスを集めるためには、色々な方法があります。
このメールマガジンでは、その内の基本的なこと
ホームページ作成におけるTipsをご紹介していきたいと思います。
まず、第一回目はユーザーインターフェイス(訪れた人の使いかって)
を、アップするための基本です。
○ 今週のTips
□タイトルロゴはトップページにリンクしよう
あなたのホームページ上で、「タイトルロゴ」や「タイトル文字」
をクリックしたら、どうなりますか?
もし、どこにもリンクしていないのなら、トップページへリンク
してみましょう。
とっても簡単なことですが、ずいぶん便利になります。
■タイトルをクリックできると何が便利?
様々なホームページを閲覧しているときに、手っ取り早くトップページに
戻りたい場合、どうしますか?
私は、ページ上部の「タイトルロゴ」をクリックする方法をよく試します。
多くのホームページでは、「タイトルロゴ」を使わなくても、トップページ
やその他のコーナーへ移動するナビゲーションが用意されていますね。
でも、タイトルロゴをクリックする方が便利な点がいくつかあるのです。
■トップページへのSEO効果が期待できる
すべてのページから、トップページに対して同じ言葉(ホームページ名)
でリンクすることになるので、 (検索エンジンによって)トップページ
がホームページ名と関連づけられやすくなります。
そうすると、ホームページ名やそれに近い単語で検索された場合に、
自分のホームページが検索結果の上位にヒットする可能性が高くなります。
※SEO(=Search Engine Optimization)とは「検索エンジン最適化」
のことで、検索結果の上位に表示されるようにページを最適化する方法です。
■クリックしやすい
ナビゲーションに使われる文字や画像のサイズは、ホームページによっては
かなり小さいことがあります。
その場合、クリック可能な面積が狭いので、うまくその位置にマウスを合わ
せないとクリックできません。
隣接するリンクとの距離が狭い場合、誤って隣のリンクをクリックしてしまう
可能性もあります。
タイトルロゴは、たいていは大きなサイズで掲載されているので、適当な位置
でクリックしても、正しくクリックできます。 その分、早く移動できます。
■縦長ページでもすぐにクリックできる
ページが縦に長い場合、スクロールした結果、ナビゲーションが全く見えなく
なることがよくあります。
その状態からナビゲーションリンクを使うには、スクロールしてナビゲーション
の位置を探す必要があります。
タイトルロゴは、たいていページの最上部(付近)にあるので、キーボードの
[HOME]ボタン1発でアクセスできます。
■探す必要がない
ページ移動のためのナビゲーションの位置は、ホームページによって様々です。
上部に横長に設置されていたり、左端に縦長に設置されていたりします。
場合によっては、デザインに溶け込んでいて、一瞬では場所が分からないことも
あります。
タイトルロゴは、たいていページ上部に目立って存在するので、探す必要がありません。
その分、素早くクリックできます。
また、利点を考える以外にも、次のような理由もあります。
■アクセス者が期待するから
多くのホームページでタイトルロゴがクリック可能になっていると、
「タイトルロゴからトップページに戻れる」と期待するアクセス者も多くなります。
アクセス者の期待に背かないナビゲーションを提供することが、ユーザビリティ
(使いやすさ)の向上に繋がります。
ですから、「アクセス者がそう期待するから」
という点も、タイトルロゴをクリック可能にする理由になるでしょう。
タイトルクリックでトップページに戻すホームページ
例えば、次に挙げるホームページでも、すべてタイトルロゴがトップページ(※)
へのリンクになっています。
Google (例:検索結果ページ)
Yahoo! Japan (例:検索結果ページ)
CNET Japan (例:ニュース記事ページ)
MYCOM PC WEB (例:ニュース記事ページ)
e-Words (例:用語解説ページ)
Amazon.co.jp (例:書籍詳細ページ)
Technorati Japan (例:ブログ検索結果ページ)
※Yahoo! Japanでは、各コーナーごとにタイトルロゴが用意されていて、
ロゴをクリックすると、そのコーナーのトップページに移動するようになっています。
(例えば、「Yahoo!オークション」内のページでロゴをクリックすると、
「Yahoo! Japan」のトップページではなく、「Yahoo!オークション」の
トップページへ移動します。)
コンテンツの多いホームページの場合は、そのようなスタイルの方が便利なことも
あります。 (他には、Microsoftでもそのようになっています。)
なお、「トップページに存在するロゴ」は、リンクにしているホームページと、
リンクにしていないホームページがあります。
例えば、Googleのトップページに存在するロゴは、クリックできません。
しかし、Amazon.co.jpなどでは、トップページに存在するロゴもクリックできます。
(リンク先が自分自身なので、クリックしてもどこにも移動はしません。)
これは、どちらのスタイルでも構わないでしょう。
※Googleでは、暦のイベントに合わせて特別なロゴを掲載することがあります。
そのときは、トップページのロゴがクリック可能になっていて、特別なロゴに
関するページなどが閲覧できるようになっています。
■簡単なのでぜひ
個人のホームページでは、試行錯誤を繰り返してページを増築していくことが多く、
なかなか全体で統一したナビゲーションを提供できないことがあります。
各ページの上部にあるタイトルロゴやタイトル文字をトップページにリンクさせて
おくことなら、 それほど手間をかけずに実現できるでしょう。
それだけでも便利なナビゲーションになりますので、ぜひ試してみて下さい。
○ 次回のTips━━━━━━━━━━━━━━━━━━━━━━━━━━━━
次回は、スタイルシートの基本をお話ししていきます。
現在ホームページを表示させるのに、コンテンツ以外の見た目(スタイル)は
スタイルシートを使って、作成するのが推奨されています。
イ┃ン┃フ┃ォ┃プ┃レ┃ナ┃ー┃研┃究┃会┃
━┛━┛━┛━┛━┛━┛━┛━┛━┛━┛━┛━━━━━━━━━━━━━
■URL : http://no1blog.jp
■ご感想 : tk@no1blog.jp
■登録・解除 : http://blog.mag2.com/m/log/0000199647/
■発 行 : インフォプレナー研究会 近藤利明
■発行システム : まぐまぐ http://www.mag2.com
★本メールマガジンは知り合いの方への転送大歓迎です!!
口コミをあなたから起こしてくださいね!
★各種コンテンツに転載する場合は事前に当研究会までご連絡下さい。
★本メールマガジンは受信者個人の責任においてご利用ください。
★本メールマガジンにより生じる損害等について責任は負いません。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

- 登録した方には、まぐまぐの公式メルマガ(無料)をお届けします。


![転職なら[en]社会人の転職情報!転職成功者続出 転職なら[en]社会人の転職情報!転職成功者続出](http://kamogawa.mag2.com/bn/recommend/sya.gif)
![派遣のお仕事探しなら[en]派遣のお仕事情報 派遣のお仕事探しなら[en]派遣のお仕事情報](http://kamogawa.mag2.com/bn/recommend/haken.gif)
![アルバイト探しは[en]本気のアルバイト アルバイト探しは[en]本気のアルバイト](http://kamogawa.mag2.com/bn/recommend/baito.gif)
![就職サイトは[en]学生の就職情報 就職サイトは[en]学生の就職情報](http://kamogawa.mag2.com/bn/recommend/gakusei.gif)
![転職なら[en]転職コンサルタントキャリアを活かした転職に! 転職なら[en]転職コンサルタントキャリアを活かした転職に!](http://kamogawa.mag2.com/bn/recommend/consul.gif)