このキャプション、どっちが正解？キャプションをわかりやすくレイアウトするセンスを磨こう

キャプションの位置を考えるコツ：「読む順序」に矢印を付けてみる

レイアウトを作成するときに大事なのは、一度レイアウトしたものを客観的に見直すことです。

読者の気持ちになって読み進めることで、どこに問題があるかが発見しやすくなります。

しかし、最初は客観的に見るのがなかなか難しいかもしれません。

そのような場合には、身近な人に見てもらってもよいでしょう。

また、紙に印刷した上で、読む順序に合わせて番号を振ったり、矢印を書き込んだりしてみるのもオススメです。

作例Aに、読む順序に合わせて、番号と矢印を付けてみたのがこちらです。

視線が下から上へ逆流し、目の移動が増えて法則性が崩れていることがよくわかります。

このように、上下左右に視線が不自然に流れていないかを確認できます。

なかなか客観的に見られないという方は、普段から雑誌やカタログなどレイアウトを見て、自分がどのように読み進めているかを意識してみるのもよいでしょう。

キャプションのレイアウトを整えるコツ：行長を合わせる

「見せる」ためのタイトルや見出しと異なり、本文やキャプションは「読んでもらうもの」という役割が大きくなります。

そのため、奇抜な配置や読みづらい組版をしてしまうと、読む人にストレスを与えてしまいます。

心地よい組版にするためには、スムーズに順序よく読み進められ、視線が迷わないことが大切です。

作例Aでは、キャプションの位置だけではなく、キャプションの行長（行の横幅）にもバラつきがありました。

行長が大きく異なると、読むときの違和感に繋がるだけでなく、そこに意図があるように感じられる場合もあります。

一方Bでは、キャプションの行長が同じ設定になっており、写真との関係も同じ法則に沿って配置されています。

また、価格が読みやすい位置で改行されています。

このように、キャプションを同じ行長に合わせてレイアウトすることが重要です。

一度図版とキャプションの位置関係の法則を決めたら、他のパーツでも同じルールを繰り返して適用しましょう。

レイアウトに変化を付けたい場合は「罫線」を巧みに使う

1問目のように「キャプションは図版のすぐ下か右」という関係性を意識しすぎると、配置の自由度が制限され、退屈なレイアウトに感じられてしまう場合があります。

それを避けるために、「罫線」を使って図版とキャプションを結びつける方法があります。

あらためてAとBの作例を見てみましょう。

Aの罫線は、見出しの周りにある白い罫線のデザインと親和性が低く、線自体がキャプションよりも目立ってしまっています。

また、線の引き方が直線だったりL字だったりと、法則性に乱れが見られます。

このように、情報を整理して視線を誘導するための引き出し線の主張が強すぎると、記事を読む際の弊害になってしまうことがあります。

一方Bでは、主張しすぎない白い罫線を付けることで、読む人の邪魔をせずにスムーズに視線を誘導できています。

さらに、見出しの周りにある罫線と同じ「端に円形が付いたデザイン」で統一されています。

Bのレイアウトからカラーを外して白黒だけで表現してみました。

見出しで使われている罫線と同じ引き出し罫線を使って、すべてが同じ形に統一されているのがわかります。

また、枠から少し写真をはみ出させているレイアウトの手法も、見出しのデザインルールに合わせています。

このように、同じデザイン要素を繰り返し使うことで、ページ全体に心地よい統一感が生まれるのです。

Illustratorで線端に円形を加え、角丸にする方法

今回の作例のレイアウトでは、背景のボックスや写真を全て角丸長方形にしています。

そして、デザインの親和性を高めるために、写真から伸びる罫線の折り曲げ部分を丸く整えたり、線端に円形を加えたりします。

こうすることで、全体のトーンを統一しつつ、線の終端を視覚的に区別できるようになります。

Illustratorでこれらを設定する際、わざわざ個別に丸や角のパーツを作って組み合わせる必要はありません。

「線」パネルの機能で完結できます。

以下で手順をご紹介します。

1. 「線」パネルを開く
   線を選択した状態で、「ウィンドウ」メニューの「線」をクリックします。

1. 線端に円形を追加する
   パネル下部にある「矢印」のプルダウンメニュー（開始点／終了点）を開きます。そして、リストの中から「丸（矢印 21〜26など）」を選択します。

1. 円形の大きさを微調整する
   円形の大きさを変更したい場合は「倍率」の数値を調整します。
   線自体の太さをキープしたまま、丸の大きさだけを微調整できます。

1. 引き出し線の角を丸くする
   「ダイレクト選択ツール」に切り替え、折れ曲がっている角のアンカーポイントを選択します。
   表示された「コーナーウィジェット」をドラッグし、角の丸みを調整します。

線をダイレクト選択ツールで動かすだけで、線端の丸や角の丸みが、きれいな形状を保ったまま自動で追従します。

対象の世界観に合わせたデザイン装飾を選ぼう

Bのレイアウトでは、写真とキャプションを結び付けるために、手描き風のカーブを描いた罫線を使っています。

これにより、要素同士の結び付きはわかりやすくなりましたが、線の雰囲気が少しカジュアルに感じられます。

その結果、上品でラグジュアリーな雰囲気よりも、手軽に楽しめるカジュアルなカフェのメニュー紹介のように見えてしまうのです。

また、高級感を出すために直線的な罫線にしても、誌面を大きく横断するような線を引いてしまうと、落ち着いた空間が区切られるような違和感を覚えてしまいます。

このように、写真とキャプションの結び付けに罫線を使いたくない場合は、図形を組み合わせてエリア分けする方法があります。

具体例を見てみましょう。

以下の左側の例のように、写真とキャプションを近い位置に置くだけでは、どの写真とキャプションが結び付いているかが曖昧になりがちです。

一方で右側の例では、背景に薄い色を付けた円形などを配置し、写真とキャプションがその円の上に重なるようにレイアウトしています。

このような図形があるだけで、同じグループであることを認識しやすくなります。

Illustratorの「内側描画」モードを使って、図形の内側に円形を配置する

「あらかじめ作成しておいたベースの角丸長方形の中に、別途作成した円形を配置したい」といったケースは、デザイン作業ではよくあります。

このようなケースに活躍するのが「内側描画」モードです。

内側描画モードを選択すると、ベースとなるシェイプの内側にアートワークを作成したり、追加したりできます。

そして、ベースのシェイプはクリッピングマスクとして機能し、その境界線からはみ出したアートワークは表示されません。

それでは具体的な手順を、以下でご紹介します。

1. 内側に配置したい図形（円形など）をあらかじめ作成し、コピーしておく
2. ベースとなる対象のオブジェクト（角丸長方形など）を選択する
3. ツールボックスの最下部にある「内側描画」アイコンをクリックする
   （対象図形の外側に点線の枠がつきます）
4. そのままの状態で、ペーストを実行する
5. ペーストされた図形を移動、複製、変形してレイアウトを調整する
   （対象として選択した図形の内側にだけ描画されるため、外側にはみ出した部分は表示されません）
6. 作業が完了したら、忘れずにツールボックス最下部の「標準描画」アイコンをクリックして元のモードに戻す

ただし、クリッピングマスクを使うとマスクに使われた図形の塗りと線が「なし」になってしまうため、色や効果などを再度設定し直す手間が発生します。

一方「内側描画」の場合は、元の塗りや線、効果はそのまま維持されるため、デザインの手を止めずに作業を進められます。

1．キャプションは図版下や右に配置し同じ行長に揃える

• 配置のコツ： 人の「視線の流れ（読む順序）」を意識し、矢印でルートをイメージしてみる
• 整えるコツ： 図版とキャプションの「横幅（行長）」をきっちり合わせる

2．キャプションの読みやすさとデザインの統一感を両立させる

• 右綴じ・縦書きの場合でもキャプションは横書きで使われる場合が多いので、読みやすさを考慮してレイアウトする
• 見出しの装飾に使った罫線や色などを繰り返し使うことで、レイアウト全体の親和性が高まる

3．罫線ではなく面でグループを分ける

• 罫線を使った図版とキャプションの関連付けはガイドとして機能するが、誌面を横断するため煩雑な印象になりがち
• 誌面の世界観に合わせて、背景に薄い色の図形を敷いてグループ化させる手法も効果的

お相手はグラフィックデザイナーの樋口泰行でした。
本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。

※本コンテンツは、それぞれのデザイナーが自身の感性で理想とするデザインを語っています。
クイズの答えはひとつの参考としてください。