ページデザイン

　ホームページで何を発信したいかを明確にします。このホームページでは「デジタルカメラを使うと、オリジナル画像でホームページの内容が豊かになりますよ！」ということを伝えたいのです。

　すなわち、デジタルカメラを使ってホームページ用の素材やコンテンツの作り方を説明することです。そこで、必要なカメラとソフトの選び方と写した写真の処理の仕方を載せることにします。写真の処理の仕方では、写真そのものを見せる場合と、背景やアイコンなどに使う場合に分けて説明することにします。

　マニュアル的なホームページなのでトップページに目次を置き、そこから各章にリンクする構造にします。

６．２トップページ

　トップページは、そのホームページの顔であり、アクセスしてきた人がこれを見て中まで見るかどうかを決める大事なページです。トップページに求められる項目は、次のとおりです。

　このような内容のホームページは、頻繁には更新しませんが、新しいアイデアの発現や新しいソフトによる新手法の発見などで更新があるので、各章毎に最新の更新日を記載するようにします。

６．３各章毎のページ

　本文は文字主体になるので、本文の背景は単色にして文字を読み易くします。

　各章からトップページに戻ってから他の章へ行くのは煩わしいので、フレーム構造を使って、左側のフレームに目次を、右側のフレームに本文を配置します。左側の目次の項目をクリックすることにより、右側のフレームに各章の内容が表示されるようにします。

　なお、ロボット検索サイトからの検索に対して有効に検索されるために、トップページはフレーム構造にはしません。また、検索サイトから各章のページに直接リンクされるとフレーム構造が機能せず、それ以上どこへもリンクできないので、トップページへのリンクだけは付けます。

６．４補助的な説明のページ

　各章をさらに説明するページは、別のウインドに表示させて、本文と対比しながら見れるようにします。

　<A HREF="リンク先 TARGET="betuwind">
とすれば別のウインドにリンク先が表示されます。新しく開くウインドの大きさを指定したい場合は、「エム氏のホームページ入門講座」の「８．一歩進んだホームページ」のページを参考にして下さい。

６．５背景や文字の色

　文字をじっくり読ませるページは、背景の色と文字の色および大きさに注意しましょう。明るい背景色の場合は文字色は黒、暗い背景色の場合は文字色は白が読み易いですね。但し、背景色を白や黒にするとコントラストが強すぎて目が疲れます。

　例えば背景色を緑(#006600)にして文字色を白(#ffffff)にすると読みやすいですよ。
　　<BODY STYLE="background:#060;color:#fff">

　このページの背景色は（#ffffcc）で、文字色は黒です。
　　<BODY STYLE="background:#ffc;color:#000">

（色はＲＧＢ各色１６進２桁（#006600）で表しますが、１桁（#060）で表すこともできます。）