プロの手要らず、素人の味方!サイトの全てが思いのままに

6パート構成

検索エンジンに対する最適性 基本設計・・デザインレイアウト

開発者:亀田博士の説明より、抜粋してみました。


使い易い【究極のデザイン・レイアウト】・・6パート構成

6part06.png
  • ヘッダーのロゴはホームページの「顔」
  • ナビゲーター(水平メニュー)・・リンク表示の1
  • メニュー(縦長メニュー)・・リンク表示の2
  • 本文・内容の表示部分
  • ナビゲーター2(下段の水平メニュー)・・リンク表示の3
  • フッター部分HP管理者の情報・著作権などの表示

コンピュータシステム全体を管理し機能させる「基本ソフトウェア」OS(オペレーティングシステム)の仕組みが変わらない限りホームページのスタンダード・レイアウトである。

  • 大手の電機メーカーや銀行などのホームページ・・或いは・・あなたも、私も、よく使う
  • メールソフトWebメールのホームページもそうですよね!

本文内容を除く【5つのパートが常に表示】される・・これが、とても重要

5つのパートが常に表示される

・・サイト内のどのページに飛んでも【相互リンク状態】・・

[check]利用者に安心感を与える、統一感があり
[check]情報を探し易く・アクセスし易いリンクが常に表示され
[check]利用者にとって読みやすいを実現しています。

全てのページから、他のページへのリンクが存在するので、内部リンクが増え、SEOにも有効です。

同時に、検索エンジンにとっても有効なデザイン

  • 検索エンジンにとって、読みやすい
  • 検索エンジンにとって、重要と判断される・・「」になります

検索エンジンの順序決め基準に「被リンク数」(プラス重要度)があり
たくさんリンクして貰っているページほど、良いページだ!だと言う基準です。

6パートデザイン・・テンプレート自体で統一感を実現・・ 

PukiWikiというオープンソースの欠点が、デザインのダサさのようです
数枚の使えないHTMLファイルのテンプレートが数万円で売られている中

デザインとカラーが統一された多彩なデザインテンプレートが用意されています。
01〜05 06〜11 12〜17 18〜23 24〜29 30〜35 36〜41 42〜47 48〜53 54〜59 60〜65(クリックしてみて下さい)



コンテンツの【読まれ方】について・・眼の動きはFの法則

利用者はどんな風にページを読むのか?眼の動きはFのパターン

Webユーザビリティの研究で著名な、Jakob Nielsen博士のAlertboxからの出典による
非常に興味深いサイトがあります。軌跡はFを描くです。

  • 232名のユーザーさん協力の元
  • 数千に及ぶウェブページの視線追跡調査からの報告です。

#ref(): File not found: "F01.png" at page "6パート構成"

  • 最初に・・Fの上の横棒部分・・
    コンテンツ上部水平移動の視線で流し読む
  • 次に、少しページを下ってから・Fの下の横棒部分を
    2度目の水平移動の視線で流し読み、最初より少し短い距離で止まる。
  • 最後に・・・Fの縦棒部分を
    �コンテンツの左端部分上から下へ縦に読み進む

それ以外は、殆んど読まない。但し、商品画像には眼が行く!


Fの法則とも言われています。そして、調査結果を踏まえたガイドラインが示されています。

軌跡"F"が意味するもの

  • 大多数のユーザーが書かれた内容をじっくりと読まない
  • 重要な情報は、冒頭2つ目の段落(Fの横棒2箇所)までに盛り込むこと
  • 分かり易い小見出しを付け、段落や箇条書きの冒頭にも、
    端的に内容を伝えられる言葉や表現
    を用いること。

ユーザーがFの縦棒を描く際の視線運びに困らぬ様な目印を置く事と記されています。
(縦に読ませる工夫ですね)

非常に、参考になるウェブリポートだと思っていたところ

【Fの法則】はとっくに承知済みで、設計済みの読まれ易いデザイン

だったのがQHMでした。うかつでした。
使い始めは知りませんでした。ようやく分かった次第です(苦笑い)

見た目を楽しんでもらうよりも
[check] 「自分の言いたい事」を「チャンと読んでもらう」のが最優先との観点から

[check] 標準文字サイズは・・14px(レターページは15px)を採用。
[check] 行間は・・150%を設定。
[check] 行幅は・・全角38文字で折り返すように設計されてます。

  1. き過ぎず、小さ過ぎ無い文字サイズ
  2. 適切な、読みやすい行間
  3. 多すぎず、かつ、少なすぎ無い適度な文字数での改行
    1. 横にスクロールする位の分量では、読むのが嫌になります

ものすごく小さい文字だったり、文字色がうすいグレーだったりと非常に、「読みにくいサイト」がいっぱい在りますよね!
私はQHMに慣れて来たので、それが又よーく感じられるんです(笑)


6パート、それぞれの役割

ヘッダーのロゴ・・オリジナルに幾らでも変更可!

ヘッダーのロゴ・・常に表示

横幅は748pxと決まっていますが、縦幅は変えられます
ホームページの顔と言えるシンボル
第一印象の8割がここで決まる
ホームページの雰囲気は、ロゴで左右される
といっても過言ではありません。(もちろん、統一感あっての話・・・)

ご自分でオリジナルのロゴを用意すれば、
オリジナルホームページへと、簡単に変身します

「全くその通り」使ってみると、直ぐ納得します。
私も色々やってみました(笑)それがこちら!?


ナビゲーター部分

ナビゲーター・・常に表示

ヘッダーロゴの下に位置する横長のメニュー一覧です。
あなたが「必ず見て欲しい」と思う特に重要な情報へのリンクを表示するところです。

  • お勧めを表示する・・また
  • 訪れた人が「見たい!」と思う情報
  • 意思決定に関わる情報を表示する




メニュー部分

メニュー・・常に表示

画面左部分に縦長で表示される2番目のリンク表示
あなたのホームページが持つ様々な情報を
解りやすいよう、ツリー状態に「まとめ上げて」利用者のクリックを促す。

  • 特にリピーター(再度の訪問者)には有効で
  • 目的の情報をこのメニューから探し出し易い。

情報のアウトラインをここに作る。


メニューを右側に移動する事も可能

「軌跡はFを描く」の項でお話したように、ホームページの構成上

  • 視線は自然と左から右へ→読み進みますよね・・横書きですから!
  • メニューを左側に配置するのは当然だと思うのですが

右側がメニュー・・と言うサイトも結構あります
実は、QHMもメニューの右側配置が出来ます。
但し注意点として

  • 基本設計が左配置なので、システムのバージョンアップ毎に
    書き直す必要があるということです・・FTPソフトを使って・・

書き方が詳しく出ていますので・・慣れてきたらやって見るのも良いと思います。

コンテンツ(内容)部分は・・白地を採用

コンテンツ部分は白地
  • 大手の情報提供ホームページが、必ず白地である事、又
  • 読みやすさと、色弱の人に配慮する法律の関係もあり。

ホームページ自体の雰囲気は
ロゴやメニューの色で十分出すことができます。

使っていると、自然に納得します!

仮に、コンテンツ部分まで黒を採用した場合
リンクの色、訪問済みリンクの色など、すべてを変更する手間がかかる。
それに利用者からすると、ただただ見づらい


ナビゲーター2の部分

ナビゲーター2の部分は常に表示

下の部分に位置する3番目のリンク表示部分です。
ホームページの読み方は
上から下に、スクロールして(下がって)いきますよね
・・マウスを使って
本文(コンテンツ)最下段の下、に位置するものが、ナビ2です。

  • ここが意外とクリックされ、興味を引き込める部分です。
  • 「シッカリと見て欲しい情報のリンク」を貼る部分になります。
  • 上部のナビと違って、2段、3段になっても、うっとうしくなりません
  • キャッチコピーを使ってクリックを誘導させましょう!


フッター部分 ・・・一番最後の締めの部分 

フッター部分は常に表示

常に

  • あなたの会社、お店、屋号など
    ・・著作の管理元(コピーライト)が表示される。
  • 著作権対策にも有効。
  • 住所、電話番号を表示できます。



たった5つの書き方で・・実現するサイト作り

  • try.png

こちらのサイトで「動画解説」をクリックし、ご覧頂くと納得出来ると思います!

「お前のホームページ・・汚ったねー!」なんて言われたくありませんよね(笑)


先ず

見出しを・・適切に使うこと。

見出しは、どんな内容なのか、伝えたい事をわかり易く提示する役割を担います。

読む人が、「何がこの先書かれているのか?」
直感的にわかりやすい見出しをつけることが、その先の文章を読んでもらう鍵となります。

大見出し(章題):そのページの一番言いたいことを書く。 
中見出し:内容が幾つかに別れる時、これを用いて小分けする。 
小見出し:さらに内容が分かれる場合・・に使用します。 

見出しは3つ・・用意されてます。


次に

箇条書きで・・適度に列挙すること

[check]単純箇条書き

  • 見出し
  • 箇条書き
  • 強調(太字・蛍光ペン)
  • 改行・空白行
  • 画像の貼り付け

[check]番号付箇条書き

  1. 見出し
  2. 箇条書き
  3. 強調(太字・蛍光ペン)
  4. 改行・空白行
  5. 画像の貼り付け

こんな感じになります。
見出しと同様に3段階(3階層)用意されています。


3番目に

文字の強調表示・・です。  

文章の中で、特に強調したい言葉文章中に埋没してしまったキーワードをアピール(強調)出来ます。
文章にメリハリも付きます。

  1. 文字サイズの変更→文字を大きくしたり、小さくしたり
  2. 文字を太くする→文字を太くする
  3. 蛍光ペンでマークする
  4. 文字を下線引きする
  5. 文字色を変える

といったことが出来ますが「これもホドほどに!」しましょう(笑)

入力支援ボタンで簡単表現



4番目として

改行・空白行を使い・・文章をブロック化(小塊化)する。

  • ズラズラずらー・・と書かれた文章や
  • 隅から隅まで、目一杯綴られた文章は

読みにくいし、頭に入りにくいですよね・・そう思いませんか?
この点に関して私は、初めから [check]超大賛成派(笑)です(手前味噌ですが

びっしり記載のチラシや書籍とは役割が違う!・・個人的にも・・そう思います。

縦スクロール(上下移動)は気になりませんが、横スクロール(左右移動)はホドほどに!・・って感じです・・如何でしょうか?

5番目に

お待ちかね!の画像貼り付け

基本的な画像貼り付けは簡単なんですが、多彩機能のQHMでは画像貼り付け方法もワンパターンじゃないのです。

基本的な画像貼り付けから実行していきましょうね(笑)

私がお奨めする理由は、ズバリこちらです!?

a:847 t:3 y:0

powered by Quick Homepage Maker 4.91
based on PukiWiki 1.4.7 License is GPL. QHM

最新の更新 RSS  Valid XHTML 1.0 Transitional