|
せっかくホームページを作るんだから、見やすく綺麗なホームページを作りたいですよね(^^♪
このページでは初心者の方向けに見やすく綺麗なホームページを作成するコツを説明していきます（●＾o＾●）
それから作成する前に注意点を少しまとめてみましたので参考にしてみてください☆
注意点として素材集などの画像メインのホームページやなんらかの図解解説のページでないかぎりは画像はほどほどにしておいたほうがいいです(^_-)-☆
なぜかというと画像は容量が重いために、あまり使いすぎるとページ「が重くなってしまいなかなか開きません…ブロードバンド化が進んでいるとはいえ、あまりにもページが重く開くのに時間がかかるようではせっかくきてくれた訪問者の方がほかのホームページに行ってしまう可能性があるからです。
動画なども一緒なので注意しておいたほうがいいですが、視覚効果てきなものを考えると若干の使用はいなめないと思いますのでくれぐれもほどほどに
（といいつつも虎丸も画像の力に若干頼りぎみですが…）
あとはページが開くといきなり音がなったりする場合がありますが、皆さんも経験がないでしょうか…いきなり音楽が鳴ってビックリした経験とか…
基本的にお小遣いサイトではそういった技術は訪問者の方達も求めていないので音がいきなりなるようなページはお小遣いサイトでは作らない方がいいと思われます
あとはリンクの効果ですがこれもほどほどがいいでしょう(^^♪
例えばボタン効果やリンクの上にカーソルがのると若干色が変わったり下線が表示されたりとかは、訪問者が、これはリンクだなってわかりやすいので良いと思われます。
まず大事なのが表（テーブル）の幅を決めようでも説明したようにホームページの幅とレイアウトです(^^♪
レイアウトと幅が決まったら次は文字の大きさ、行間と字間です
判りやすく↓に例をあげて説明していきます
まずは行間からです
| こんな感じに見えるんです。この場合、行と行の間が詰まりすぎてかなり文章が読みにくくなってると思います。ちなみに行間は１３ピクセルで設定しています |
↑の枠の中を見てもらえると判ると思いますがかなり上の行と下の行の間がつまりすぎていて見にくいと思います。
↓これはどうでしょうすっきりと見やすく見えますよね(^_-)-☆
こんな感じに見えるんです。この場合、行と行の間が適度に感覚をたもっていて上の枠の中に比べるとかなり見やすくなっていると思います。
ちなみに行間の設定は２５ピクセルに設定されています。 |
というふうに行間は適度にあいているほうが文章が読みやすいんです。
次に字間ですが左右の文字と文字の間隔のことです(^^♪
| こんな感じに見えるんです。この場合文字と文字の感覚が１ピクセルに設定されています。 |
↑ねっ(^^♪少し見やすいでしょ(^_^;)でも字間はあまり広げすぎると逆によみにくくなるので最初の設定からあまりいじることはないと思います。
↓これが字間を５ピクセルに設定した場合のものですが上のものと比べてもらうと判ると思いますが、すっきりとは見えるものの文字と文字が離れすぎていると思います。
| こんな感じに見えるんです。この場合文字と文字の感覚が５ピクセルに設定されています。 |
…というふうに行間は適度に間隔をあけた方が文章が読みやすいのですが、字間はあけても１ピクセルくらいが調度よいかと思います(^^)
次に文字の大きさですが、通常は１３〜１４ピクセルくらいで設定されていますが、おおきるとバランスが悪いし小さすぎると、なんて書いてあるのか読めないくらい小さい場合があります(*_*;
確かに文字の大きさは若干小さいほうがスッキリと綺麗に見えることがあったり、またかわいらしくも見えますが、自分のホームページをみてくれる人が全員視力が良いわけでもありません。なのでほどほどが良いって思います。
↓ちなみに下の枠の中がが文字の大きさ７ピクセルです…はっきりいって読めません…
（実は私は視力が両眼ともに2.0なのでかろじて見えますが…）
| こんな感じに見えます。この場合文字の大きさは７ピクセルに設定しています…う〜ん… |
↓これは文字の大きさが２０ピクセルですちょっと素人っぽいかも…
| こんな感じに見えます。この場合文字の大きさは２０ピクセルに設定しています…う〜ん… |
↓それでこれがヤフーのトップページのリンクの文字とほぼ同じの１２ピクセルです。
確かに文字は認識できますがやっぱり少し小さいかもです…
| こんな感じに見えます。この場合文字の大きさは１２ピクセルに設定しています |
上の図からもわかるよにやっぱり文字の大きさは小さくても１２ピクセルくらいが限界で、大きくても１４ピクセルくらいが素人っぽく見えないで読みやすいと思われます(^_^;)
（虎丸のこのホームページは行間２３ピクセルで字間は０ピクセル文字の大きさは１４ピクセルです）
次はセルの中の背景色ですが…あんまり凝りすぎると逆に見にくくなりますので、白のまんまをオススメします(^_^;)写真画像や色を入れる事もできますが、どうしても色を入れたい場合は白に近い色だと見やすいと思います。
↓少しくらいの文章だったら大丈夫かもしれませんが、長時間はかなり目が疲れそうです(>_<)
| 背景に色を入れるとこんな感じに見えます…少しくらいだったら見れるけど長時間みると目が疲れそうです… |
ちなみに画像を入れると↓のような感じになります…色に比べるとよけいに読みにくい…（ちなみにモデルは虎丸の娘の通称 桃ちゃんです…聞いてないって(-_-;)）
画像や写真を入れるとこんな感じになります(>_<)う〜んなんて書いてあるのか読めないと思います…
|
…というふうにあんまり凝りすぎると逆に素人っぽくなるし、また、見にくくなるっていうことです(^_^;)やっぱりシンプルが一番です☆なのでこういったところにかける時間があれば、もっとサイトの内容を充実させて、訪問してくれる人達にとって有益になるような情報をたくさん載せたほうが、アクセス数も伸びるって事です(^_^;)
では次でホームページのイメージカラーについての説明です
見やすいホームページを作成しようＴＯＰへ |
|
|
|
１ ２
All Right Reserved.