【Level 08 中級編】
背景画像を濃くして、テキストを読みやすくした例です
さて、読みやすくなってるでしょうか?
このへんの色の濃さのビミョーなバランスって難しいですね。
将来、コンテンツが増えたらテキストリンクを入れてもいい感じになります。
(注:テキストにアンダーラインがついてますが、あくまで使用例なのでリンクしません。)
偽テクニック
テーブルのスペーサー(つっかえ棒ね)に使う1ピクセルの透明画像を大きくしてリンクをつけることもできます。 画像の上にマウスを乗せると手の形になる部分がそうです。
リンクにする部分は、見ただけでリンクであるとわかるようなボタンの形状にするなどして画像を作りましょう。 つまりアフォーダンスですね。 上の画像では、そうなっておりません(汗)
↓透明画像をリンクに使う方法は、こちらが参考になるかと思います。
1ピクセル画像に愛を込めて
さて、あんなにスカスカだったトップページも、がんばって更新を続けていった結果、情報量が増えてくるとスカスカを埋めるのに、ほどよい大きさだった画像が逆に窮屈に感じるようになってくると思います。 そこで次は、
情報量が増えた場合の対処方法です。
さて、読みやすくなってるでしょうか?
このへんの色の濃さのビミョーなバランスって難しいですね。
将来、コンテンツが増えたらテキストリンクを入れてもいい感じになります。
(注:テキストにアンダーラインがついてますが、あくまで使用例なのでリンクしません。)
偽テクニック
テーブルのスペーサー(つっかえ棒ね)に使う1ピクセルの透明画像を大きくしてリンクをつけることもできます。 画像の上にマウスを乗せると手の形になる部分がそうです。
リンクにする部分は、見ただけでリンクであるとわかるようなボタンの形状にするなどして画像を作りましょう。 つまりアフォーダンスですね。 上の画像では、そうなっておりません(汗)
↓透明画像をリンクに使う方法は、こちらが参考になるかと思います。
1ピクセル画像に愛を込めて
減色テクニック
白黒(グレースケール)のように、元々色数が少ない画像は、ファイルサイズが小さくなりやすいです。 カラーだとつまらなかった画像も、モノクロにするだけで、いい感じになる場合がありますので試してみてください。
さて、あんなにスカスカだったトップページも、がんばって更新を続けていった結果、情報量が増えてくるとスカスカを埋めるのに、ほどよい大きさだった画像が逆に窮屈に感じるようになってくると思います。 そこで次は、
情報量が増えた場合の対処方法です。
main
BR→
main_box