コンテンツのレイアウト術

見栄えがする・見やすいコンテンツの配置方法

コンテンツの見栄えや見やすさは、

  • 読者がコンテンツを読みはじめてくれるか(目を惹くか)
  • 最後まで読み進めてくれるか
  • 内容がしっかり伝わるか
  • 印象に残るか

に密接に関係し、作文の技術(文章の内容)に勝るとも劣らず重要です。ここではその方法について説明いたします。
まめわざの編集機能を上手に使えば、コンテンツの見栄え・見やすさを容易に改善できます。ちょっとプロっぽく作ることも容易です。

その1 文章をテーマごとに分けて、見出しを使って文節を分ける

重要度:最重要

Before

After

AについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについて。
BについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについて、BについてBについてBについてBについてBについてBについてBについてBについてBについて。

Aについて

AについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについて。

Bについて

BについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについて、BについてBについてBについてBについてBについてBについてBについてBについてBについて。

その1の解説

まめわざの編集領域はブロック単位に分かれています。
文章ブロック1つにあらゆるコンテンツを入れるのではなく、複数のブロックを右図のように追加し、文節ごとにブロックを分けることで判読性が上がります。
更に、各ブロックに見出しを付ければ、視認性が向上し、見栄えも良くなります。

その2 強調表現は最小限にとどめ、文字の彩色はなるべく使わない

重要度:重要

Before

After

普通の内容普通の内容普通の内容普通の内容普通の内容普通の内容
重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容。特に重要な内容特に重要な内容特に重要な内容特に重要な内容特に重要な内容。重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容
最も重要な内容最も重要な内容最も重要な内容最も重要な内容最も重要な内容最も重要な内容。
重要な内容重要な内容重要な内容重要な内容重要な内容特に重要な内容特に重要な内容特に重要な内容特に重要な内容特に重要な内容。

普通の内容普通の内容普通の内容普通の内容普通の内容普通の内容

重要な内容

重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容。特に重要な内容特に重要な内容特に重要な内容特に重要な内容特に重要な内容。重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容重要な内容。

最も重要な内容最も重要な内容最も重要な内容最も重要な内容最も重要な内容最も重要な内容。

重要な内容重要な内容重要な内容重要な内容重要な内容特に重要な内容特に重要な内容特に重要な内容特に重要な内容特に重要な内容。

その2の解説

見た目にインパクトのある文章が、読んでもらえる文章とは限りません。
過度に強調表現や彩色をした文章は、見辛い・印象が悪いといった理由で、読んでもらえない場合も考えられます。
また、文章の多くの部分を強調することで、逆に何も目立たない、という現象が起こります。
強調表現を使う際は、目立たせたい部分を絞り込み、彩色はなるべく行わず、下線や背景を付けるなど判読性を損なわない強調を心がけましょう。
もちろんここでも、「その1」で説明したブロック分割が必須となります。

その3 箇条書きやテーブルを活用して見やすく配置する

重要度:ふつう

箇条書き

Before

After

AについてAについてAについてAについてAについてAについてAについてAについてAについて。
BについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについて。
CについてCについてCについてCについてCについてCについてCについてCについてCについてCについてCについて。
A・B・Cについてご注意ください。

以下、A・B・Cについてご注意ください。

  • AについてAについてAについてAについてAについてAについてAについてAについてAについて。
  • BについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについて。
  • CについてCについてCについてCについてCについてCについてCについてCについてCについてCについてCについて。

2列箇条書き

Before

After

Aならば、AについてAについてAについてAについてAについてAについてAについてAについて。
一方Bならば、BについてAについてAについてAについてAについてAについてAについてAについて。
最後にCならば、CについてCについてCについてCについてCについてCについてCについてCについて。

  • Aの場合
    AについてAについてAについてAについてAについてAについてAについてAについて
  • Bの場合
    BについてAについてAについてAについてAについてAについてAについてAについて
  • Cの場合
    CについてCについてCについてCについてCについてCについてCについてCについて

Xのケース:XについてXについてXについてXについてXについてXについて
Yのケース:YについてYについてYについてYについて
      YについてYについてYについてYについて
Zのケース:ZについてZについてZについてZについて

  • X
    XについてXについてXについてXについてXについてXについて
  • Y
    YについてYについてYについてYについて
    YについてYについてYについてYについて
  • Z
    ZについてZについてZについてZについて

テーブル

Before

After

Aさん
 生年月日 ○○年○月○日
 性別 男
 出身地 宮城県
Bさん
 生年月日 ○○年○月○日
 性別 女
 出身地 埼玉県
Cさん
 生年月日 ○○年○月○日
 性別 男
 出身地 神奈川県

生年月日性別出身地
Aさん○○年○月○日宮城県
Bさん○○年○月○日埼玉県
Cさん○○年○月○日神奈川県

その3の解説

まめわざで採用するブロック型の編集では、文章以外に箇条書きやテーブルなどを容易に利用できます。
上の例のように、内容を少しまとめるだけでとても見やすくなります。
文章の中に箇条書きやテーブルは配置できませんので、必ずその1で説明したブロックの分割を行ってご利用ください。

その4 画像を配置して興味を惹く

重要度:ふつう

Before

After

AについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについて。
BについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについて、BについてBについてBについてBについてBについてBについてBについてBについてBについて。

Aについて

AについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについて。

BについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについてBについて、BについてBについてBについてBについてBについてBについてBについてBについてBについて。

Bについて

その4の解説

文章の一部に画像を配置すると、コンテンツが華やかになり、目を惹きます。画像は、読者の目を留めるのにとても効果的です。
しかし、文章にマッチする画像が用意できない場合も多々あるかと思います。現在は下記のような便利なフリー画像サイトがあります。ここで画像を検索し、掲載できそうなものが見つかったら利用してみましょう。もちろん自分で撮影した画像を用意できれば、それがベストです。
文章の左右に画像を配置すると、雑誌などで見たことのあるレイアウトになります。上下に配置すれば画像を大きく表示して強調できます。配置には、その1で説明したブロックの分割が必須です。

フリー画像サイトの紹介

その5 分割やグループ化をして見やすくする

重要度:ふつう

空白・区切り線を利用する

Before

After

Aグループの1についてAグループの1についてAグループの1についてAグループの1についてAグループの1についてAグループの1についてAグループの1についてAグループの1について。
Aグループの2についてAグループの2についてAグループの2についてAグループの2についてAグループの2についてAグループの2についてAグループの2について。
Bグループの1についてBグループの1についてBグループの1についてBグループの1についてBグループの1について。
Cグループの1についてCグループの1についてCグループの1についてCグループの1についてCグループの1についてCグループの1についてCグループの1について。
Cグループの2についてCグループの2についてCグループの2についてCグループの2についてCグループの2についてCグループの2についてCグループの2について。

Aグループの1についてAグループの1についてAグループの1についてAグループの1についてAグループの1についてAグループの1についてAグループの1についてAグループの1について。

Aグループの2についてAグループの2についてAグループの2についてAグループの2についてAグループの2についてAグループの2についてAグループの2について。

Bグループの1についてBグループの1についてBグループの1についてBグループの1についてBグループの1について。

Cグループの1についてCグループの1についてCグループの1についてCグループの1についてCグループの1についてCグループの1についてCグループの1について。

Cグループの2についてCグループの2についてCグループの2についてCグループの2についてCグループの2についてCグループの2についてCグループの2について。

並列配置を活用する

Before

After

Aグループの1についてAグループの1についてAグループの1についてAグループの1についてAグループの1についてAグループの1についてAグループの1についてAグループの1について。
Aグループの2についてAグループの2についてAグループの2についてAグループの2についてAグループの2についてAグループの2についてAグループの2について。
Bグループの1についてBグループの1についてBグループの1についてBグループの1についてBグループの1について。
Cグループの1についてCグループの1についてCグループの1についてCグループの1についてCグループの1についてCグループの1についてCグループの1について。
Cグループの2についてCグループの2についてCグループの2についてCグループの2についてCグループの2についてCグループの2についてCグループの2について。

Aグループの1についてAグループの1についてAグループの1についてAグループの1についてAグループの1についてAグループの1についてAグループの1についてAグループの1について。

Aグループの2についてAグループの2についてAグループの2についてAグループの2についてAグループの2についてAグループの2についてAグループの2について。

Bグループの1についてBグループの1についてBグループの1についてBグループの1についてBグループの1について。

Cグループの1についてCグループの1についてCグループの1についてCグループの1についてCグループの1についてCグループの1についてCグループの1について。

Cグループの2についてCグループの2についてCグループの2についてCグループの2についてCグループの2についてCグループの2についてCグループの2について。

背景色や枠線を利用する

Before

After

ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問
 ある質問への回答ある質問への回答ある質問への回答ある質問への回答
 ある質問への回答ある質問への回答ある質問への回答ある質問への回答
 ある質問への回答ある質問への回答ある質問への回答ある質問への回答

ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問ある質問

ある質問への回答ある質問への回答ある質問への回答ある質問への回答ある質問への回答ある質問への回答ある質問への回答ある質問への回答ある質問への回答ある質問への回答ある質問への回答ある質問への回答

その5の解説

その1で説明した見出しの設置も、文章をグループ化する方法の1です。
見出しを使用しない上の例では、区切り線・並列表示・枠線・背景色を利用することで、内容の分割やグループ化ができます。
尚、現在ご覧の「解説」部分は、「行の装飾」(「装飾」ボタン→「行の装飾」タブ)を使って色分けすることで、上下の例示とは別のグループであることを表現しています。

その6 アイコンやボタンを利用する

重要度:余裕があれば

アイコン

Before

After

メール:abc@abc.abc
電話番号:000-000-0000
アクセス:○○駅から○○分


abc@abc.abc


000-000-0000


○○駅から○○分

ボタン

Before

After

航空各社のリンク:ANAJALエア・ドゥ

航空各社のリンク

AについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについて。
Aについての詳細はこちら

AについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについてAについて。

その6の解説

文章などの編集中に、Shift(またはCtrlまたはAlt)を押しながら入力欄をクリックすると、アイコンが挿入できます。
アイコンを上手に使えば、視認性の向上が期待できます。

ボタンブロックを利用することで、リンクをボタン風に表現できます。
単数で「詳細はこちら」として使ったり、複数のリンクをまとめてメニュー風に使ったりと、様々に利用できます。