ヨス(@yossense)です。私は仕事でも趣味でもネットを閲覧することが多いです。そのネット閲覧をしているときにネットのスピードの次にフラストレーションが溜まるのがあいまいなレイアウトです。今回はその中でも、この説明文章はどっちの画像の説明なんじゃい!?というシチュエーションとその対策を紹介します。これってどっちの説明文章なん?!私が最もストレスが溜まるのはこういうレイアウトです。微妙な緑の背景もイラッと来ますがそれ以上にイラつく部分があるんです。この文章はどちらの画像の説明なん!?そうなんです。画像についての説明文章を書いているんですが、その周りの余白がすべて均一で、その説明が上か下か、どちらの画像のことについて書いているのかわからないんです。解決方法は超簡単です。余白をちょっと入れるだけ。やって余白(スペース)をちょっと入れると解決です。簡単ですが、HTMLとCSSのコードも一緒に。class="gazou_bunsho">こちらに画像の文章がきます。この文章の上に余白を入れたいです。}ダメな例ただしこんな風に余白を入れる場所を誤って逆にすると、下側の画像の説明文なのに、上側の画像の説明文に見えてしまいます。後でつじつまの合わないことにユーザーが気づいた時に、かなりイラッときます。人間の目は塊を同じグループと認識します。余白(スペース)を入れてやることで、塊と塊の境目がここですよー!ということの印になります。余白でなくボーダーでもOK!境目が明確になれば良いわけですから、表現方法は余白でなくてもOKです。ボーダーを入れるとか。これでもOKですね!ボーダーで区切りを入れてもOKです。class="gazou_bunsho">こちらに画像の文章がきます。この文章の上にボーダーを入れたいです。}文章の見出しにも応用この余白をつける技ですが、見出しにも応用して下さい。私、この見出しの下の余白より上の余白が少ないと発狂したくなります。}すっごく個人的な書き方になりますが、この余白があるかどうかで私のストレスがものすごく変わってきます(笑)。WEBでも印刷媒体でも、情報を分かりやすくまとめるコツは、関連性のある情報をうまくまとめ、それ以外のものとちゃんと視覚的に分けるということです。これはWEBサイトだけでなく、デザインでも基本中の基本です。違うグループのものとは余白で区別することをぜひ覚えておいて下さいね!これからブログを始めたい方必読!「ブログ応援メール【全50回】」ブログをこれから始めたい方は多いと思いますが、こんな悩みがあることでしょう。ブログってどうやって始めるの?無料ブログでいいの?どんなことを書けばいいの?どうやってブログを書く時間を作るの?ヨスそんなあなたの「ブログライフ」のスタートを後押しする「ブログ応援メール」を始めました!!この「ブログ応援メール」は全50回(予定)で、ブログの始め方はもちろん、ブログを書く心構えや、時間の捻出方法など、ブログが継続できるような内容でお送りします。オレンジメールパートナーこの記事、おもしろかったわ。ほかに似た記事ないん?ヨス「ブログ文章の書き方のカテゴリ」にあるきん、そっち見てや。この記事が気に入ったらいいねしよう!最新記事をお届けします。やってブログ書いてます。オレンジメールプロフィールTwitterFacebook香川県在住。ブログで飯食っているプロブロガー(月間125万PV達成)のヨスです。効率化オタクが講じて、KADOKAWAから書籍も出版しました。英語学習メディア「英語びより」編集長。ブログを本気で書く人のためのオンラインサロン「ヨッセンスクール」を運営。夫婦別姓を実行してて、何度か新聞からも取材を受けてます。ジェンダーや言語学の話になるとうるさい人です。iPadを使い倒してます。