インデントで文章にメリハリを！
MicrosoftのWordにも標準装備されている「インデント」はすでにご存知かと思います。字下げで文書を見やすくするこのテクニックは、Webデザインでも威力を発揮します。
情報の「階層」を視覚的に表現
インデント（字下げ）のテクニックを使うことで、情報を階層ごとに分類し、整った形でレイアウトすることができます。
特に、分量が多く長い文章をストレスなく読ませたい時に役立ちます。
具体例を順を追ってご紹介するために、「集合」「近接」でスッキリ見せようのページでご紹介した「ごぼうポタージュスープのレシピ」に再び登場願いましょう。
まず、インデントを施す前の文章です↓
インデントしていない文章
本日のお料理レシピ：ごぼうのポタージュスープ
1 - 野菜を炒めて煮る
ナベにバターを溶かし、薄めに切った玉ねぎ→じゃがいも→スライスして水にさらしたごぼうの順に炒めます。煮立ったら、スープを加えてさらに煮ます。
2 - ごぼうのポタージュを作る
1をミキサーにかけてピューレにし、ナベに移して火にかけます。生クリーム、塩・コショウ（少々）を加え、さらにひと煮たちさせます。
3 - ほうれん草のピューレを作る
茹でたほうれん草の葉をミキサーに入れ、水大さじ2杯を加えてピューレにします。
1 - 野菜を炒めて煮る
ナベにバターを溶かし、薄めに切った玉ねぎ→じゃがいも→スライスして水にさらしたごぼうの順に炒めます。煮立ったら、スープを加えてさらに煮ます。
2 - ごぼうのポタージュを作る
1をミキサーにかけてピューレにし、ナベに移して火にかけます。生クリーム、塩・コショウ（少々）を加え、さらにひと煮たちさせます。
3 - ほうれん草のピューレを作る
茹でたほうれん草の葉をミキサーに入れ、水大さじ2杯を加えてピューレにします。
この文章を、インデントでさらに見やすくしてみましょう。
インデントを施した文章
本日のお料理レシピ：ごぼうのポタージュスープ
1 - 野菜を炒めて煮る
ナベにバターを溶かし、薄めに切った玉ねぎ→じゃがいも→スライスして水にさらしたごぼうの順に炒めます。煮立ったら、スープを加えてさらに煮ます。
2 - ごぼうのポタージュを作る
1をミキサーにかけてピューレにし、ナベに移して火にかけます。生クリーム、塩・コショウ（少々）を加え、さらにひと煮たちさせます。
3 - ほうれん草のピューレを作る
茹でたほうれん草の葉をミキサーに入れ、水大さじ2杯を加えてピューレにします。
いかがでしょうか？ 人それぞれの好みで意見も多少は分かれるかもしれませんが、インデントを施すことでだいぶ見やすく感じられるはずです。
ここでも大切なのは、文章内の各要素の役割と優先順位を分析し、ユーザーの目線を配慮しながら視覚的にハッキリと表現することです。
ちなみに、このレシピ文章の階層構造を簡単な図にすると次のようになります。
「ごぼうポタージュスープのレシピ」階層構造
このエントリーのトラックバックURL :
メルマガ「嫌われないWebデザイン」
さらに突っ込んだデザインノウハウは、メルマガでお届けします！メルマガ読者限定の、サイト無料診断企画もたまにやってます。
>>バックナンバーを見る
さらに突っ込んだデザインノウハウは、メルマガでお届けします！メルマガ読者限定の、サイト無料診断企画もたまにやってます。
>>バックナンバーを見る
Powered by