ウェブサイト設定・内容作成と更新・公開の全てが出来るシステマチックなウェブツール

　基本設計・・デザインレイアウト

• 勝手に検索エンジン対策とは！

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

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

• ヘッダーのロゴはホームページの「顔」
• ナビゲーター（水平メニュー）・・リンク表示の１
• メニュー（縦長メニュー）・・リンク表示の２
• 本文・内容の表示部分
• ナビゲーター２（下段の水平メニュー）・・リンク表示の３
• フッター部分・HP管理者の情報・著作権などの表示

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

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

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

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

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

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

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

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

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

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

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

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

---

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

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

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

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

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

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


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

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

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

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

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

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

だったのがＱＨＭでした。うかつでした。
使い始めは知りませんでした。ようやく分かった次第です（苦笑い）

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

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

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

---

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

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

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

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

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

---

ナビゲーター部分

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

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

---

メニュー部分

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

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

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

---

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

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

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

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

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

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

コンテンツ（内容）部分は・・白地を採用

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

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

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

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

---

ナビゲーター２の部分

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

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

---

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

常に

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

---

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

• 

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

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


先ず

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

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

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

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

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


次に

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

単純箇条書き

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

番号付箇条書き

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

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


3番目に

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

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

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

といったことが出来ますが「これもホドほどに！」しましょう（笑）

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

4番目として

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

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

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

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

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

5番目に

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

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

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

• 検索エンジンの側に立ったSEOとは

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

a:1149 t:1 y:1