2014年2月13日

[ デザイン ] えっと……この文章はどっちの画像を説明したいんだ!?(怒)

referring-which-image-250

こんにちは! ヨス(@yossense)です。

私は仕事でも趣味でもネットを閲覧することが多いです。

で、そのネット閲覧をしているときにネットのスピードの次にフラストレーションが溜まるのがあいまいなレイアウトです。

今回はその中でも、この説明文章はどっちの画像の説明なんじゃい!?というシチュエーションとその対策を紹介します。

これってどっちの説明文章なん?!

私が最もストレスが溜まるのはこういうレイアウトです。いえ。微妙な緑の背景もイラッと来ますがそれ以上にイラつく部分があるんです。

この文章はどちらの画像の説明なん!?
この文章はどちらの画像の説明なん!?

そうなんです。せっかく画像についての説明文章を書いているんですが、その周りの余白がすべて均一で、その説明が上か下か、どちらの画像のことについて書いているのかわからないんです。

解決方法 → 余白を挿入

解決方法は超簡単です。余白をちょっと入れるだけ。

こうやって余白(スペース)をちょっと入れると解決です。
こうやって余白(スペース)をちょっと入れると解決です。

簡単ですが、コードも一緒に。

HTML

<p class="gazou_bunsho">
こちらに画像の文章がきます。この文章の上に余白を入れたいです。
</p>
<img src="gazou2" alt="画像2">

CSS

.gazou_bunsho { padding-top:3em; }

ダメな例

ただしこんな風に余白を入れる場所を誤って逆にすると、下側の画像の説明文なのに、上側の画像の説明文に見えてしまいます。後でつじつまの合わないことにユーザーが気づいた時に、かなりイラッときます

スペースを入れる位置を間違えた例
スペースを入れる位置を間違えた例

人間の目は塊を同じグループと認識します。なので余白(スペース)を入れてやることで、塊と塊の境目がここですよー!ということの印になります。

余白でなくボーダーでもOK!

境目が明確になれば良いわけですから、表現方法は余白でなくてもOKです。たとえばボーダーを入れるとか。これでもOKですね!

ボーダーで区切りを入れてもOKです。
ボーダーで区切りを入れてもOKです。

HTML

<p class="gazou_bunsho">
こちらに画像の文章がきます。この文章の上にボーダーを入れたいです。
</p>
<img src="gazou2" alt="画像2">

CSS

.gazou_bunsho { border-top: solid 1px black; padding-top: 1em; }

文章の見出しにも応用

この余白をつける技ですが、見出しにも応用して下さい。

私、この見出しの下の余白より上の余白が少ないと発狂したくなります

文章の見出しにも応用
文章の見出しにも応用

HTML

<h2>見出し</h2>
<p>
文章</p>

CSS

h2 { padding-top: 3em; padding-bottom: 0.5em; }

すっごく個人的な書き方になりますが、この余白があるかどうかで私のストレスがものすごく変わってきます(笑)。

WEBでも印刷媒体でも、情報を分かりやすくまとめるコツは、関連性のある情報をうまくまとめ、それ以外のものとちゃんと視覚的に分けるということです。

これはWEBサイトだけでなく、デザインでも基本中の基本です。違うグループのものとは余白で区別することをぜひ覚えておいて下さいね!

WEB関係のスキルを学ぶのって独学では時間がかかりますが、今ならオンラインで学べるスクールもあります。

たとえば完全にオンラインで学べるTechAcademy [テックアカデミー]なら、「Webリニューアル集中プログラム」という超ターゲットを絞ったコースがあります。

このコースがオススメな理由は、今現在運営しているサイトをリニューアルすることがゴールであること。

つまり、例えば学生なら10万円以下で今のサイトのリニューアルができ、さらに技術が身につくという一石二鳥なコースです。

プロにお願いするとものすごく制作費がかかるので長い目でみると、今学ぶことはかなり合理的です。

この記事が気に入ったら
「いいね!」で情報GET!

Twitterでヨスをフォローしよう!

この記事のシェアはこちら♪

※ 微妙だったら、そっと閉じるか、ほかの記事を見ていただけるとうれしいです!