マガジン

カバーの構図を決める:中央・対角・余白の三つ

遊びをつくる

執筆にClaudeを使用しています。

丸や四角の色紙と色見本を使ってゲームの画面を検討する机。
記事のテーマをもとに制作したAI生成イメージ。実際のゲーム画面ではありません。

作品一覧に並んだカバーは、多くの場合、題名より先に目に入ります。そのとき最初に伝わるのは、絵の上手さよりも「このゲームはどんな速さで、どんな気分で遊ぶものか」という性格です。同じ主役、同じ色、同じタイトル文字でも、置き方を変えるだけでその印象が変わるかどうかを確かめます。 自作のパズルゲームのカバーを作る場面を考えてみます。主役のモチーフを画面の真ん中に置くか、左下から右上へ斜めに走らせるか、隅に小さく置いて空白を広く残すか。この三つで迷ったとき、好みで決めるのではなく、作品の性格に合う型を見つける手順を設計書として示します。 この記事では結果を書きません。三案を作り、他の人に短時間見せ、返ってきた言葉を作品の性格と照らし合わせるところまでを、読者が自分で行える形にします。

この記事の目次
  1. 問いを立てる:三つの型は何を先に伝えるか
  2. 準備するもの
  3. 手順
  4. 結果の読み方
  5. 起こりやすい誤り
  6. 次の行動

問いを立てる:三つの型は何を先に伝えるか

構図の型は、美術の一般的な考え方で次のように整理できます。

  • 中央:主役を中心に据えます。左右が釣り合い、視線が一点に落ち着きます。
  • 対角:主役と文字を斜めの線上に配置します。視線が画面を横切るので、方向や速度が生まれます。
  • 余白:主役を小さく置き、周りを広く空けます。視線が空間を探索し、静けさや広さが出ます。

ここから、実験で確かめる仮説を立てます。型と作品の性格が対応するなら、次の表のような読み取りが起こるはずです。これは仮説であり、結果ではありません。

  • 中央、対応すると予想する性格:盤面を見つめる、じっくり考える、先に伝わりそうなこと:安定、落ち着き、これ一本という主張、外れたときの症状:動きのある作品なのに「静かそう」と受け取られる
  • 対角、対応すると予想する性格:操縦する、競う、進む、先に伝わりそうなこと:速さ、方向、勢い、外れたときの症状:タイトルが読みにくい、視線が散る
  • 余白、対応すると予想する性格:置く、育てる、眺める、先に伝わりそうなこと:静けさ、広がり、時間の余裕、外れたときの症状:主役が小さすぎて何のゲームか分からない

仮説を置く練習として、公式作品の性格を例にします。「余白の庭」は時間制限なしの庭づくりなので、余白型が合うかもしれません。「紙ひこうき郵便」は風の異なるルートを操縦するので、対角型が合うかもしれません。「潮目のオセロ」は盤面に向き合う海辺のオセロなので、中央型が合うかもしれません。

ただし、これらは作品の説明から立てた仮説にすぎません。実際のカバーがどの構図に見えるかは、作品ページで自分の目で確かめてください。公式13作品はタイトルの文字組みも作品ごとに異なります。構図とあわせて、文字の置き方が性格をどう補っているかも観察できます。

準備するもの

次の四つをそろえます。

  1. 作品の性格を一文にしたもの。「何をする作品か」を動詞で書きます。たとえば「風に乗って手紙を集める」「石の並びを読んで返す」「庭に物を置いて季節を眺める」です。形容詞だけ(「楽しい」「かわいい」)では、後で照合できません。
  2. 共通の素材。主役のモチーフ1つ、背景色、タイトル文字を決めます。三案ともまったく同じものを使います。
  3. 三案を作る道具。絵が描ける場合は、同じ絵を切り抜いて置き直すのが最も確実です。画像生成を使うなら、構図をプロンプトで指示するより、生成した主役の画像を一つ選び、後から配置を変える方が条件をそろえやすくなります。
  4. ラフ確認用の下書き。絵を描く前に、丸と文字だけで三つの配置を見たいときは、次のHTMLをブラウザで開いてください。外部ライブラリは不要で、単独で動きます。
html
<!doctype html>
<meta charset="utf-8">
<style>
 body{margin:16px;font-family:sans-serif}
 .row{display:flex;gap:16px;flex-wrap:wrap}
 figure{margin:0}
 .c{position:relative;width:240px;height:240px;background:#cfe3e8;overflow:hidden}
 .m{position:absolute;border-radius:50%;background:#e8833a}
 .t{position:absolute;font-weight:bold;color:#12333d}
</style>
<div class="row">
 <figure><div class="c">
  <div class="m" style="left:70px;top:70px;width:100px;height:100px"></div>
  <div class="t" style="left:80px;top:196px;font-size:20px">タイトル</div>
 </div><figcaption>中央</figcaption></figure>
 <figure><div class="c">
  <div class="m" style="left:20px;top:110px;width:110px;height:110px"></div>
  <div class="t" style="left:130px;top:24px;font-size:22px">タイトル</div>
 </div><figcaption>対角</figcaption></figure>
 <figure><div class="c">
  <div class="m" style="left:170px;top:180px;width:36px;height:36px"></div>
  <div class="t" style="left:20px;top:20px;font-size:16px">タイトル</div>
 </div><figcaption>余白</figcaption></figure>
</div>

丸が主役、青い四角がカバー、文字がタイトルの代わりです。数値を書き換えて、自分の主役の大きさや位置に近づけてみてください。この段階では、型ごとの「重さの置き場所」が見えれば十分です。

手順

1. 変える要素を一つに絞る

三案で変えてよいのは、主役の位置と大きさ、タイトルの位置だけです。色、主役の絵柄、背景、タイトルの書体は共通にします。複数を同時に変えると、印象の違いが構図のせいか、色のせいか分からなくなります。

余白型では主役が小さくなるため、タイトルの文字サイズも小さくしたくなりますが、そこは最小限にとどめます。文字が読めるかどうかは、後で別に記録します。

2. 一覧の大きさに縮小する

カバーは作品一覧の中で、他の作品と並んで見られます。三案を、一覧で実際に表示される大きさに近づけて縮小してください。表示サイズは画面や端末で変わるので、自分の使う画面で作品一覧を開き、その大きさに合わせるのが確実です。大きな原寸のまま判断すると、小さくしたときに潰れる細部を見落とします。

3. 短時間見せて、言葉で答えてもらう

見せる相手は、作品をまだ知らない人が適しています。作者本人や制作を手伝った人は、絵の意図を知っているため、第一印象の記録になりません。

条件は次のとおりです。

  • 一人に見せる案は一枚だけにします。三案を並べて見せると、比較が先に立って第一印象が消えます。
  • 見せる時間は3秒ほどに区切り、絵を隠してから質問します。
  • 案を見せる順序や、案ごとの相手を偏らせないようにします。
  • 相手が見つからない場合は、一人で日を置いて二回に分け、順序を変えて見直します。ただし、自分は意図を知っているので、参考程度の記録になります。

質問は次の三つです。

  1. どんなゲームだと思いますか。
  2. 最初に目がいったのはどこですか。
  3. 題名は読めましたか。

4. 記録票に書く

一回の観察を一行として、次の列をそろえて書きます。

  • 案、書き方:中央/対角/余白
  • 連想語、書き方:相手の言葉をそのまま(「静か」「急ぎそう」など)。言い換えない
  • 最初に見た場所、書き方:主役/文字/空白
  • 題名判読、書き方:読めた/読めなかった
  • 想像した遊び方、書き方:操作や速さについての言葉

人数は多いほど傾向が安定しますが、少人数でも「一致しない案」を落とすことには使えます。数が少ないときは、「確定」ではなく「次に直す候補」として読んでください。

結果の読み方

最初に作った「作品の性格の一文」と、連想語を並べて照合します。基準は一致度です。

  • 連想語が性格の動詞や雰囲気と重なる案は、その作品に合う型の候補です。
  • 動きのある作品なのに、中央型で「静か」「落ち着いた」ばかりが返るなら、動きの要素が足りていません。対角型へ移すか、主役の向きを変えてみます。
  • 静かな作品なのに、対角型で「忙しそう」「競争するの?」と返るなら、期待した遊び方とずれています。中央型か余白型に戻して比べます。
  • 余白型で「何か分からない」が多いなら、主役が小さすぎます。大きさだけを一段上げて、同じ手順を繰り返します。
  • 題名が読めない案は、型の問題ではなく文字の置き場所の問題です。文字だけを動かして、別の観察にします。

三案すべてで連想が性格から外れる場合は、構図以外が原因かもしれません。主役のモチーフ、色、文字の書体が先に疑われます。その場合は構図の実験を中断し、要素を一つずつ見直してください。

型は混ぜることもできます。対角の線上に小さな主役を置き、周りを空ける、といった組み合わせです。ただし、混ぜるのは三案の単独の読み方が分かってからにします。最初から混ぜると、何が効いたのか読み取れません。

起こりやすい誤り

条件が揃っていない。三案で主役の色や明るさまで変えてしまうと、構図の差が分からなくなります。

作品を知る人に見せる。意図を知る相手は、絵を見る前に答えを持っています。初めて見る人の言葉を集めてください。

原寸で判断する。一覧に並ぶ小さな大きさでは、細い主役や小さな文字が消えます。判断は縮小したもので行います。

記録を言い換える。「落ち着いた感じ」を「中央型の成功」と先に解釈しないことです。まず相手の言葉を残し、照合は後で行います。

絵と遊び心地のずれを見落とす。公式13作品のカバーは生成したアートワークで、ゲーム画面のスクリーンショットではないと案内されています。カバーが画面そのものではない場合、期待とのずれが生まれます。構図で静けさを出したのに、実際は忙しいゲームなら、「想像した遊び方」の列で差が見えます。カバーが約束した性格を、ゲーム本体が守れているかを確認してください。

次の行動

まず、自作品の性格を動詞で一文にし、同じ素材で三案を作ります。上のHTMLで配置だけを先に確かめ、縮小した状態で、作品を知らない人に3秒ずつ見せて連想語を記録してください。一致した案が決まったら、アソバースの作品一覧にある公式作品のカバーを開き、構図がどの型に近いか、自分の目で確かめてみてください。