１．ホームページの基本のレイアウトを知ろう

ホームページのレイアウトは、どのような種類のものでもたいてい、

• ヘッダー
• コンテンツ
• フッター

に分けることができます。

さらに細かく見ていくと、ヘッダーの中にはロゴやグローバルナビゲーションが、コンテンツにはメインコンテンツやサブメニューが、フッターにはフットメニューやコピーライト表記などがあります。

２．日本語の表記について考えよう

日本語には縦書きと横書きがあります。行数が増える際、縦書きは右から左へ、横書きは上から下へ、文章を並べていきます。

ホームページで日本語を表記する際、縦書きでも横書きでも構いませんが、縦書きにする場合はできるだけ文章やリストを右から左へ並べて書きましょう。そのほうが自然で読みやすいです。

また、縦書きと横書きを混ぜたホームページは一見見にくくなります。そのような場合は、縦書きのものを明朝体にしたり画像にしたりしてデザイン性を持たせると、見やすいホームページになります。

日本語を縦書きにしたホームページの例。

池亀酒造 – 時代に寄り添う酒造り（福岡・久留米・城島の酒蔵）

３．重要なものほど、左上に配置しよう

一般的によく言われていることに、ホームページは「F（エフ）」の文字のように読まれる、というのがあります。つまり、これはページ上部はしっかりと読まれるけれども、下のほうになるほど読まれない（あるいは流し読みをされる）ということです。

そのため、特に検索エンジンからの閲覧者には、どのようなホームページかを一瞬で判断されてしまいます。その際に、どのようなホームページかがわからなければすぐにページを閉じられてしまうでしょう。それを回避するためにも、一番左にはサイトのロゴや、サイトの説明文を記載するのが望ましいと言えます。

４．アイキャッチ画像を活用しよう

さて、先程ホームページの下のほうは読まれないと言いましたが、読まれるようにするにはどうしたらよいと思いますか？

解決方法のひとつにアイキャッチ画像を活用方法があります。

テキストだらけのホームページはどうしても読みづらくなります。そのような場合に画像を配置すると、そこに自然と目が止まります。画像は特になくても困らないものでよいです。挿絵のように考えていただけると幸いです。

５．下層ページまで読まれるようにする工夫

ホームページのインデックスページ（トップページ）はよく読まれるのに、下層ページのアクセス数が少ない場合、下層ページへのメニューを工夫するとよいです。

例えば、メニューを画像化します。

先ほど、例に挙げたホームページを見てみますと、ヘッダーのグローバルメニューの他に、画像つきのメニューがズラリと並んでいます。テキストだけのメニューより画像つきのメニューのほうがクリックしたくなりませんか？

このように画像を使用することにより、目線を惹きつけることができます。文章だらけになってしまっていると感じたら、イメージ画像を入れてみるのが有効的ですね。是非、参考にしてください。

そこでいくつかの方法があります。

１．DreamWeaverというオーサリングソフトを使用する

DreamWeaverは、Webデザイナーさんが使っている、ホームページを作るための専用のHTMLエディタです。HTMLエディタの機能の他に、WYSIWYG（ウィジウィグ）と呼ばれるHTMLタグを記述することなくホームページが作れる機能、また、直接Webサーバーに接続できるFTP機能などが備わっています。

このDreamWeaverには、テンプレート機能をいうものがあり、ヘッダー、メニュー、フッターといった共通部分をテンプレート化（一元管理）することができます。例えば、ページをたくさん作っていて、新しくメニューの項目をひとつ増やそうとしたら、普通であれば、これまで作った全てのページのメニュー部分をひとつずつ手作業で修正していかなければなりませんが、テンプレート機能を使用すれば、テンプレートだけ修正して更新すれば、ページのほうに一切手を加えることなく、メニュー部分を修正することができます。

難はこのDreamWeaverというソフトは非常に高価ということです。通常価格で約5万円もします。ただ個人的には、ホームページビルダーを購入するくらいならDreamWeaverを購入することをお勧めします。

既存のホームページの作り方を変えたくないけど、もっと便利に更新したいという方にお勧めの方法です。

２．PHPでテンプレート化する

WebサーバーがPHPを使用できる環境にある場合に限られますが、PHPというプログラムを使用することで、ファイルをテンプレート化します。それほど難しい作業にはならないのですが、理解するのが結構難しいと思います。難しいプログラミングをするわけではありませんが、それなりにPHPの記法を知らないといけないですし。

ここではその方法は割愛しますが、以下のサイトを参考にしてみてください。

• テンプレートを用いる(スキン) – PHP/データベース

HTMLエディタに5万円も出せない・・・という方にお勧めの方法です。

３．CMSを利用する

CMS（コンテンツマネジメントシステム）と呼ばれる、Webサイトやブログを作成するシステムを導入します。要はブログみたいなものです。無料のものであれば、WordPressとMovableTypeが有名です。その他にbaser CMSやSOY CMSなど国産の無料で使えるCMSもあります。

ひとつ注意ですが、MovableTypeはオープンソースのものとそうでないものがあります。商用利用する場合は、オープンソースでないものは有償になります。

これらもWebサーバーがCGIやPHPを使用できる環境にある場合に限られます。また、データベースと呼ばれる、コンテンツを管理するシステムも必要です。CGIやPHPといったプログラミングの知識もある程度は必要になります。ただ、WordPressやMovableTypeはマニュアルもありますし、プラグインもたくさんありますので、PHPの知識全てが要るわけではありませんし、どちらかと言うと、そのCMS自体の独自タグを覚えなければならないでしょう。

ページを量産するときは問題ないのですが、テンプレートの方に手を加えようと思ったら、全てがシステムで管理されていますので、間違った記法をしてしまうと、エラーが出てしまって非常に焦ってしまう状態になりますので、もしCMSを使ってホームページの管理をご自身でしたい場合でも、一度プロのWebデザイナーさんやWeb制作会社に依頼して、導入してもらうことをお勧めします。

４．ホームページ作成サービスを利用する

ブログサービスのようにホームページを作れるサービスです。要は、自分でCMSを導入する手間を省いたサービスです。すでにホームページの種別に見合ったデザインテンプレートが用意されていて簡単にデザインも修正できますし、ページの編集、追加も簡単にできます。この手のサービスはだいたいが月額制で、月1,000円～でしょうか。

• みんなのビジネスオンライン
• ホームページ作成サービス「グーペ」

HTMLやCSSがわからないけど多少ランニングコストがかかってもよいと思っている方にお勧めです。

色って一体何なんでしょうか？科学的に言うと、光の波長ですね。ある物体に当たった光のうち反射したものを色として認識しています。また、人が見える光の波長の範囲も決まっています。不思議ですね。

そんな不思議だけど、当たり前のように目に触れる色。ホームページを作る際にも、色は非常に大切です。なぜならば、そのホームページの第一印象を決定づける要因の一つになるからです。そのことに関しては後述します。

色は非常に奥深いです。ここでは、Webサイトを作成するために最低限必要な知識について説明しますね。

色は3属性と呼ばれる、色にしかないものを持っています。それが「色相」「明度」「彩度」です。

色相

色みのことです。虹は7色と言いますよね。Webの世界では、マンセル・カラー・システムと呼ばれる、色を定量的に表す手法がよく用いられます。

一般的には「赤」「黄赤（橙）」「黄」「黄緑」「緑」「青緑」「緑」「青」「青紫（紺）」「紫」「紫赤（桃）」の10種類に分類され、円（環）で表します。これを色相環と言います。

補色

色相環で言うと、円の反対側にある色のことを補色といい、これらの色同士は横に並べるとお互いを際立たせますが、混ぜてしまうと無彩色（に限りなく近い色）になってしまうという性質があります。

例えば、「赤」の補色は「青緑」、「黄緑」の補色は「紫」になります。

明度

明度は明るさの強弱のことです。無彩色の場合は、白に近いほど明度が高く、黒に近いほど明度が低くなります。

よく「コンストラクト」が強い・弱いという言い方をしますが、コンストラクトが強いというのは明度差が高く、コンストラクトが低いというのは明度差が低いことを言います。

彩度

彩度は色み（鮮やかさ）の度合いのことです。同じ色でもくすんだ色に見えたり、目が痛くなるような鮮やかな色みであったりします。

トーン

音や色の調子を表すときに「トーン」という言葉を使いますよね。色のトーンは、「明度」「彩度」によって決まります。例えば、彩度が100%で明度が60%は「ビビットカラー（鮮やかな色み）」、彩度が70%で明度が90%は「パステルカラー（柔らかい色み）」というトーンになります。

色のイメージを理解する

色にはその色が持つイメージというものがあります。また、トーンによって、同じ色でも持つイメージが異なります。

ここからが本題になりますが、Webサイトを制作する際、Webサイトの色は非常に重要になってきます。先ほど述べたように、Webサイトの色みによって、Webサイトそのもののイメージが決定されてしまうからです。

例えば、幼稚園のサイトは、「かわいい」「安心」「明朗な」「豊かな」「楽しい」「賑やかな」といったイメージを付加したいと思うはずです。その場合、選ぶ色としては、「紫赤（桃）」「黄」「黄緑」がベストでしょう。逆に、「黒」や「青」といった色は持たせたいイメージとは異なるため、メインの色として使用するのは避けたほうが良いかもしれません。

配色のルール

1色だけでホームページを作るということはほとんどありませんよね。普通は数色を使うと思います。しかし色の組み合わせをどのようにしたらよいか迷いますよね。そこで先程出た色相環を参考に色の組み合わせを考えるとわりとうまくいきます。

１．共通性の調和

１－１．同一色相の調和

色相が全く同じで、明度や彩度、トーンなどを変化させた色の組み合わせ。よくまとまった印象になります。初心者の方に一番お勧めする色の組み合わせです。ただし、1色だと単調になりやすくなります。その場合、グラデーションやテクスチャを使うと変化が出やすくなります。

• テーマカラー1色をメインに用いたWebサイト50 | Webクリエイターボックス

１－２．隣接色相の調和

色相環が隣同士の色の組みわせ。例えば、赤と橙。これもよくまとまった印象になります。

１－３．類似色相の調和

色相環が隣の隣同士の組み合わせ。色の幅が広がるので、まとまりがある中にも変化が付きます。

１－４．トーン共通の調和

色は異なるがトーンが同じ色の組み合わせ。つまり、彩度と明度が同じで、彩度が違う色の組み合わせです。様々な色があるので華やかさがあります。

２．対比の調和

２－１．中差色相の調和

色相環の90度に位置する色同士の組み合わせ。ただし、トーンを合わせるなどしないと調和しない場合もあるので注意です。少し難しい組み合わせです。

２－２．対象色相の調和

色相環の正三角形の2点に位置する色同士の組み合わせ。例えば、赤と緑と青。ただし、トーンを合わせるなどしないと調和しない場合もあるので注意です。少し難しい組み合わせです。

２－３．補色色相の調和

色相環の反対に位置する色同士の組み合わせ。例えば、赤と青緑（シアン）。反対の色なのでハレーションを起こしやすいので注意です。使いどころが難しいです。

２－４．トーン対照の調和

トーンが異なる、あるいはかけ離れた色同士の組み合わせ。トーンはホームページのイメージをコントロールする作用がありますので、むやみに変化させると調和しない場合もあります。

ホームページの配色に役立つサイト・書籍

色の組み合わせはほぼ無限大です。イメージにあった配色を見つける手助けをするサイト・書籍を紹介します。

ホームページの配色に役立つサイト

• ウェブ配色ツール Ver2.0
• ウェブ配色の見本 Web Color Sample – eWeb
• Technicolor
• HTML Color Code Combination Chooser | Resources for Web Design For Developers
• Color Scheme Designer 3
• カラーピッカー – 原色大辞典

色の組み合わせだけ知りたいならこちらも便利です。

• kuler
• ColoRotate
100 Delightful and Pleasing Color Palettes and Swatches

ホームページの配色に役立つ書籍

初心者向けなのでとてもわかりやすいです。最初の一冊目としては最適です。

ホームページ向けの配色辞典ではないのですが、色について学ぶには易しく書いてあるので初心者でもわかりやすいです。非常に面白い内容なので読み物としてはよいですよ。

イメージ別に色がわかるチャートです。イメージから色を決める際、最初のメインカラーを決定するのには非常に役に立つ書籍です。

参考サイト

数が多いですが、配色に関するヒントがたくさん散りばめられたサイトです。時間があれば是非目を通してください。

• 色彩センスのいらない配色講座
• 配色パターンからWebデザインを考える | Webクリエイターボックス
• 配色に自信がなくても！Webデザインが好きになる配色ツールと使い方 | Webクリエイターボックス
• 配色のルールと注意点 – Web配色の見本
• 同色系でまとまりのある配色、WebデザインにするためのTips
• カラフルでもまとまりのある配色、WebデザインにするためのTips
• プロフェッショナルなWebデザインに見せるための配色を選ぶフレームワーク
• よりよいWebデザインにするための配色のセオリー :: Love & Design ::
• 色彩心理学に学ぶ Webサイトの色選び / ウェブデザインライブラリー
• webサイト作成時にサイトカラーを決められない人の為のwebサービスいくつか*ホームページを作る人のネタ帳
• 坂本邦夫の「基礎からわかるホームページの配色」

その中でも「ホームページを作る上で絶対やってはいけないこと」を3つご紹介します。これからホームページを作られる初心者の方、是非ご参考ください。また、心当たりがある方は、今一度ホームページを見直してみてください。

１．無断で他人のイラスト、画像、文章を利用する

その気は全くないのに、知らないで著作権侵害をしてしまう場合があります。

他の人のホームページで公開しているイラストや画像を無断で使用したり、文章を丸ごとコピーしたりするのは著作権侵害になります。もし、利用したい場合は必ず許可を取りましょう。

著作権に関しては、以下の記事をご参考ください。

• ホームページを作るときは｢著作権｣に気をつけよう

２．ファイル名に日本語を使う

例えばエクセルのファイルなど、日本語やスペースも使用できるので、ついついその感覚で、HTMLやCSS、画像のファイル名に日本語やスペースを使ってしまいがちです。

実際、ローカル上で閲覧している場合、つまりPCに保存してあるHTMLファイルをブラウザで閲覧した場合、ちゃんとCSSや画像も反映されてします。しかし、サーバにアップした際、ファイル名が文字化けしてしまい、正常に表示できなくなってしまいますので注意です。

HTML、CSS、画像などのファイル名、およびフォルダ名には、必ず「半角英数字」を使い、「スペース」は含めないでください。

３．メガ単位の画像を使用する

最近は、デジカメだけではなく携帯電話のカメラ機能ですら画素数もすごく、高画質な写真を取ることが出来ます。しかし、その分、写真のサイズが大きくなってしまいます。

例えば、500万画素のデジカメで写真をとったとします。ピクセル換算すれば、横2560px×縦1920pxとなります。容量は、デジカメの種類にもよりますが、少なくとも5MBはあるでしょう。

HTMLで写真を表示する際、設定で本来横が2560pxあるものを320pxに縮小して表示することが可能ですので、写真そのものを縮小しないで元のサイズのまま、サーバにアップロードしてしまう人もいます。たとえ、320pxに表示するとはいえ、元のサイズを読み込むわけですから、ホームページの表示が遅くなってしまうだけでなく、よけいな転送量がかかってしまい、閲覧者に相当の負担をかけてしまいます。

写真を使用する際は、必ず表示するサイズにリサイズしたものをご使用ください。写真そのもののサイズを縮小するには、いろいろと無料のソフトやオンラインサービスがありますので、そちらをご利用ください。

基本的には、本屋さんで手にとって中身を見ていただくのが一番だと思います。あと、できるだけ新しい本を買うようにしてください。と言うのも、昔はそれでよかったけど今はそのやり方はだめ！という情報もありますので。

「超」初心者向けの入門書

ホームページを作るのも初心者だけど、パソコンを触るのも初心者！という方にお勧めするのがこちら。

できるホームページ HTML&CSS入門 Windows 7/Vista/XP対応

HTML/CSS辞典

ホームページを作成するときに必ず手元に置いておきたいのが、「HTML/CSS辞典」です。タグの意味を調べるタイプと、目的別にどのようなスタイルを指定すればよいのかわかるタイプの二種類があります。両方持っていると便利なのですが、個人的には、最初に買う方は、「目的別にタグを引けるタイプ」がお勧めです。

タグから意味を調べるタイプ

詳解HTML & XHTML & CSS辞典

目的別にタグを引けるタイプ

ホームページ辞典 第4版

ホームページ作成のプロセスを学ぶ本

どのような意気込みで、どのような手順で、ホームページを作ったらよいかわかる本です。2005年刊行で少し古いのですが、とても初心者向けにわかりやすく説明してあります。

プロがこっそり教えるウェブ制作術 改訂第2版

Webブランディングの本

ホームページをビジネスのツールとして活用したい人必見です。

Webブランディング成功の法則55

読みやすい文章を書くための本

読みやすい文章は、SEO対策やアクセスアップにもつながりますよ。

プロフェッショナルWebライティング

これは「効く!」Web文章作成&編集術逆引きハンドブック

スタイルシートレイアウト/デザイン本

意外なことにこの手の本をほとんど持っていないのです。どちらかと言えば、ソースコードの指南書よりデザイン本ばかり持っているので、あまり紹介できないのですが、その中でも初心者向けの本をいくつか。

HTML/XHTML&スタイルシートデザインブック

HTML&スタイルシート レイアウトブック 3rd Edition

• ずっと使えるデザインテクニック。すっきり美しく見せる『余白』と『文字』の使い方。 (フェンリル | デベロッパーズブログ)

さらに、より読みやすくするデザインテクニックをいくつか紹介します。

１．フォントの種類を「メイリオ」にする

ホームページで表示するフォントの種類は、閲覧者のPC内に入っているフォントに依存するのですが、どのフォントを優先的に表示するかはCSSで指定できます。

その際、フォントの種類を「メイリオ」、Macの環境であれば「ヒラギノ」を指定しておくと、文字が綺麗に見えます。

当サイトで比較してみます。当サイトでは、フォントの指定を

body {
   font-family:"ＭＳ Ｐゴシック", sans-serif;
}

というように、「ＭＳ Ｐゴシック」を優先的に表示し、あとはユーザのPC内にあるゴシック系のフォントを表示するように指定してあります。

これを、フォントの種類を「メイリオ」に変更してみます。

body {
   font-family:"メイリオ", sans-serif;
}

ＭＳ Ｐゴシックで見られた文字の縁のぎざぎざ感がある程度なくなり滑らかに表示されていますね。10px以下のようなあまりにも小さい文字ですとつぶれて見えますので注意です。

ただ、これは個人的な好みがあると思いますので、お好きなフォント指定してみてください。

２．行間に余裕を持たせる

文字がぎっしりと書かれている場合、行間が狭いと読みにくくなります。行間を文字の1.2倍から1.8倍くらいにすると読みやすくなります。これもCSSで指定します。

p {
   line-height:1.4;
}

ポイントは、単位をつけないことです。単位をつけてしまうと、例えば段落中で一部分だけ文字を大きくしたときなど、文字が重なってしまう場合がありますが、単位をつけないとそれを回避することが出来ます。

３．一行の長さを40文字前後にする

書籍でもそうなのですが、だいたい一行の長さが40文字程度になっています。恐らく、この長さが目に負担をかけないで読める長さなのではないでしょうか。

４．段落間に余白を設ける

文章を書く際は、段落を意識しましょう。区切れるところは区切って、その間に一文字程度の余白を設けましょう。個人的な感覚ですが、一文は4段くらいまでに収めると読みやすいと思います。段落はpタグで囲んで、CSSで下に一文字程度の余白を入れてみましょう。

p {
   margin-bottom:1em;
}

５．見出しと段落にメリハリをつける

見出しは見出しと分かるように、段落とは区別をつけましょう。

1. 文字を一回り大きくする
2. 背景色をつける
3. 先頭に画像などでマークをつけて目立たせる
4. 見出しと段落の間に数ピクセルの余白を設ける（あまり空けすぎると見出しと段落の関係性が薄まるので注意です）

などの工夫をしましょう。

６．関連性を余白でコントロールする

これは上記で言ってきたことの総論みたいなものですが、要素の周りに余白をあけるほど、その周りの要素との関連性が薄くなります。逆に余白が狭いほど、関連性は強まります。これだけではわかりにくいのでお勧めの記事を紹介します。この記事の「１．近接」を参考にしてみてください。

• デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則

そういう場合でも、ホームページを編集しているとレイアウト崩れが起こってしまう場合があります。ブラウザによってもレンダリング方法が違うので、IEではちゃんと見れていたのに、Firefoxで見るとレイアウト崩れが起こってしまっている、ということもしばしばです。

そこで、レイアウト崩れが起こったときの対処法についてご紹介します。

１．DOCTYPE宣言を確認する

DOCTYPE宣言というのは、HTML文書のバージョンを定義するもので、これによりHTMLの使えるタグが異なります。通常、HTMLファイルの一番最初に記述します。

何のことか分からない方は、もしかしたらDOCTYPE宣言を定義していないかもしれません。そうすると、ブラウザによってレンダリングが異なってしまうので、必ずDOCTYPE宣言をしましょう。全くの初心者で、何を記述してよいのか分からなければ、

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

と記述してください。

２．ソースコードのスペルミスをチェックする

正しいソースコードを記述しないと、レイアウト崩れの原因になります。まずは、正しいソースコードで記述しているかチェックをします。チェックするためのサービスがありますので、そちらをご使用ください。HTMLソースコードチェックのほうは英語版しかないのが難点です。

• HTMLソースコードチェック：Markup Validation Service
• CSSソースコードチェック：W3C CSS 検証サービス

オプションで、HTMLやCSSのバージョンが選べます。ちゃんと、HTMLタグの使い方が正しいか、CSSの記述が間違っていないか確認してみてください。

３．確認するブラウザをFirefox、あるいはGoogle Chromeにする

もし、IEを普段使われている方には申し訳ないですが、ホームページを制作する際は、Firefox、あるいはGoogle Chromeをご利用ください。

これらのブラウザであれば、バグ（誤り、不具合）チェックができるアドオンがありますので、飛躍的にバグを見つける時間が短くなります。

そして、以下のFirebugというアドオンをインストールしてください。

• Firefox版Firebugのインストールはこちらから
• Google Chrome版Firebugのインストールはこちらから

４．CSSのスタイルを確認する

例えば、謎の空白が空いているとか、カラム落ちしているとか、そういうのはほとんどがCSSの設定によるものです。なので、個別にどのようなスタイルが適用されているか確認していきます。

その際、便利なのが、先ほどのFirebugというアドオンです。このアドオンは、個別にどのようなスタイルが適用されているか確認できます。また、HTMLやCSSの中身を確認できるだけでなく、動的にHTMLやCSSを編集できたりもします。（ただし、元のファイルが編集できるわけではなく、例えば、元ファイルを持っていないサーバにアップされているWebページを擬似的に編集できるというものです。）

ここでは、Firebugの使い方は割愛させていただきます。以下のblogをご参考ください。

• 意外と知られていない機能が多い！？Firebugの使い方 | THE HAM MEDIA BLOG

５．正しく記述しているのにおかしい動作をするときはブラウザのバグ

ブラウザも万能ではなく、正しいソースコードを記述していても、思ったとおりの動作をしてくれないときがあります。特にIE6以前のブラウザはバグが多いです。

現在、IEの最新バージョンは9です。6以前のバージョンに対応する必要はほとんどないと考えます。ただし、企業のパソコンなどはいろいろなシステムが絡んでくる都合上、いまだIE6を使用されているユーザも多いと思います。

FirefoxやGoogle Chromeで動作確認していて問題がないのに、IEで見ると何かおかしい・・・というときは、IEのバグである可能性が非常に高いです。その際は、インターネットで「IE　バグ」というように検索してみてください。

ここで、IEで遭遇しやすいバグのベスト3を挙げてみます。

1. marginなどのCSSが有効にならない
2. floatした要素にmarginを指定すると値が2倍になる
3. 途中でテキストやボーダーが切れてしまっている

１．marginなどのCSSが有効にならない

これの原因は、hasLayoutプロパティがtrueになっていないためです。hasLayoutプロパティはIEの独自のプロパティで、レイアウト情報を保持しているかどうかを示すものです。

• ウノウラボ by Zynga Japan: hasLayoutとは何か

基本的に横幅（width）を指定すると、hasLayoutがtrueになって、要素に指定しているスタイルが有効になります。横幅が一定でない場合などは、「zoom:1;」というようなCSSハックを使用しなければなりません。

２．floatした要素にmarginを指定すると値が2倍になる

これもよく遭遇するバグです。対処法はこちら。

• IE6で、floatした要素にmarginを指定すると値が2倍になる – CSSデザインノート

３．途中でテキストやボーダーが切れてしまっている

これもたまに遭遇します。対処法はこちら。

• IE6でborderが表示されない – CSSデザインノート

１．ロゴにトップページのリンクをつける

トップページはインデックスページとも呼ばれ、ホームページのインデックス（目次）となる部分でもあります。簡単にトップページに戻れる仕組みを作りましょう。 一般的に、ロゴをクリックするとトップページに戻る、という認識があるので、ご自身にそういう習慣がない場合でも、是非とも設置しておきましょう。

２．トップページへの戻りリンクをつける

トップページへの戻りリンクをつける、ひとつの理由は、ページの上部にグローバルナビゲーションがあるので、そこに簡単に戻るようにするためです。

逆を言えば、フッター部分に導線となるリンクがあれば、トップページへの戻りリンクをつける必要はないかもしれません。

３．パンくずリスト（トピックパス）をつける

ホームページは大きくなるほど階層が深くなり、現在の場所がわからなくなります。また、ホームページを訪れる人は必ずしもトップページから訪問するわけではありません。 そのため、パンくずリスト（トピックパス）と呼ばれる、現在の位置を示すナビゲーションをつけましょう。

さらにもっと読まれるようにする工夫

１．フッターナビゲーションをつける

ヘッダーにメニューがある場合でも、同様のものをつけておくとよいでしょう。
重要性の低いもの、表示が義務付けられているもの（個人情報や特定商取引法に関すること）を表示したりもします。

２．ページの最下部に関連のあるページへの一覧をリンクする

よくブログに見られる手法ですが、ページの最下部に、そのページに関連する記事（ページ）へのリンクをつけてみましょう。
そのページに興味を持った人は、他の関連するページにも興味を持ってくれる確率は高いはずです。

３．検索窓をつける

例えば、数多くの商品を紹介しているサイトなど、ページ数が膨大なホームページは、検索窓をつけるのもひとつの手です。検索窓の設置方法については以下の記事ページをご参考ください。

• ホームページに検索窓(サイト内検索)を設置する方法

• Webデザイナー必読？！ 著作権について知っておくべき10のこと : Web Design KOJIKA17

１．写真にも著作権がある

基本的に、写真は撮った人に著作権がありますが、撮られた対象にも肖像権や著作権があります。人物や他人が所有するものを撮影する場合は、許可をとりましょう。

自分で撮影したり、ロイヤリティフリー（著作権利用料が不要）の写真を購入するほうがよいのですが、自分で撮るのが手間だったり思ったように撮れなかったり、写真素材は比較的高価ですので支払いが困難である場合は、フリー（無料）の写真素材を利用するのがおすすめです。

フリー（無料）の写真素材を配布している、以下のWebサイトがお勧めです。フリー（無料）の写真素材は基本的にリンクウェア（リンクをしなければならない）や著作権表示が義務付けられたもの多いのですが、これらはどれも著作権表示なしやリンクなし（リンクフリー）で商用利用できるふとっぱらなサイトです。

• 写真素材 足成【フリーフォト、無料写真素材サイト】
• PAKUTASO(ぱくたそ)-すべて高解像度の無料写真素材/商用可能
• パブリックドメインの写真 – フリー写真素材
• プロカメラマンのフリー写真素材 無料画像素材のプロ・フォト
• 女性モデルのフリー画像 無料人物写真素材のモデル・フォト
• ブログ用フリー画像素材・写真素材のblog.フォト

２．フォントにも著作権がある

｢自分のパソコンの中にあるフォントだから自由に使ってよい！？｣
そんなことはありません。パソコンに初めからインストールされているフォントは、パソコンを使用するためにあるのであって、ホームページを作成するためにあるわけではありません。そのため、ホームページに使用するバナーなどの文字に使用したい場合は、著作権を持っている会社に許可を取るかお金を支払わなければならないこともあります。

無償で商用利用できるフォントもあります。最近は、JIS第二水準漢字の日本語フォントも多くなり、非常に助かります。以下、まとめ集になりますがご参考ください。

• 自由に使えるオープンソースの日本語フォント – SourceForge.JP Magazine : オープンソースの話題満載
• 商用サイトでも無料で利用できる日本語のフリーフォント集 | コリス
• 漢字も使える手書き風の日本語フォントのまとめ | コリス

３．ホームページにも著作権がある

ホームページそのものにも著作権はあります。基本的に、ホームページを作った人または会社に著作権があります。例えば、Web制作会社に自社サイト制作を依頼したら、Web制作会社にホームページの著作権があります。納品の際に著作権を譲渡するのが一般的ですが、そこをしっかりと明らかにしておかないと、後々もめることにもなります。

また、ホームページのデザインを真似ることも著作権侵害に当たる場合があります。参考程度ならよいのでしょうが、明らかにそっくりにならないように気をつけましょう。

手前味噌になりますが、当管理人が別サイトで配布しているホームページ用のCSSデザインテンプレートは、商用利用可能、著作権表示なし、リンクなしでご利用いただけます。

• 無料HTML+CSSホームページテンプレート [Cool Web Window]

独自で検索スクリプトを作ると大変なので、Google カスタム検索というのを利用します。ものの5分程度で設置できます。

Google カスタム検索をホームページに設置するためには、Googleのアカウントが必要です。もっていない方は、以下のページから登録してください。

• Google アカウント

カスタム検索のソースコードの取得は以下のサイトから行います。

• Google カスタム検索 – サイト検索をカスタマイズ

「カスタム検索エンジンの作成」というボタンがあるのでクリックしたら、ナビゲーションにしたがって項目を埋めていきます。ソースコードが表示されるので、コピーして、ホームページの任意の場所にペーストして、設置が完了です。

また、Google カスタム検索には検索ページに表示される広告がクリックされた場合Google Adsenseの収益となる「検索向けAdsense」もあります。これは、Google Adsenseの管理ページから設定できます。

Google Adsenseの管理ページを開いたら、上部のタブから「広告の設定」を選びます。左のメニューに「検索向け AdSense」というのがあるので、クリックすると、設定画面が表示されます。あとは、カスタマイズするとソースコードを取得できるので、ホームページにコピーアンドペーストして設置します。

注意点としては、検索するURLを例えば｢http://www.coolwebwindow.com/*｣というようにURLの最後にアスタリスクをつけないと、検索範囲がサイト内の全てのページにならないので気をつけてください。