8大カテゴリ・33テーマ：350組のレイアウト集×知識図鑑。ポスター、Web、PPT、出版物、ビジュアルデザインにそのまま使える

これは視覚的に学べるレイアウト辞典です。まずタスクに合わせてレイアウトを選び、次に主体、階層、整列、余白を整理し、最後に自分のテキストや画像、ブランドルールに置き換えます。

著者：nevertoday / 350-layout-compositions09-02 · 約25分

ツールチュートリアル · 小互解読

1分で要点

350枚のレイアウト知識カードで構成されたレイアウト辞典です。8大カテゴリと33テーマに分類されています。PSDやFigmaの完成テンプレートではなく、レイアウトの関係性をそのまま使えます。
ポスター、表紙、Web、UI、PPT、出版物、動画画面などに活用でき、主体、タイトル、本文、余白の関係を素早く決められます。
使い方は5ステップです。タスクを決め、内容をリストアップし、範囲を選択し、候補を3〜5枚比較し、自分のテキスト、画像、ブランドに置き換えます。
1枚の図を見るときは、主体の位置、情報の階層、読みの経路、密度、保持すべき関係、実際のコンテンツに置き換えても成立するかを順に確認します。
AIに依頼するときは、確認済みの参考画像と、位置、比率、整列、グループ化、読みの経路、禁止コピー項目を同時に提供します。

ポスター、Webページ、PPT、出版物など、何かしらのビジュアルデザインをするとき、タイトル、画像、本文、余白の配置は、ソフトウェアの操作よりも難しいと感じることがよくあります。

Xiaoxiaodongさんが公開しているオープンソースリポジトリ 350-layout-compositions は、350種類の一般的な画像レイアウトを8つの大カテゴリ、33のテーマに整理したものです。それぞれの縦型ナレッジカードは、ある構図、グリッド、ページ、またはカメラワークの関係性を解説しています。

これらの画像はレイアウトの知識カードであり、直接編集できるPSDやFigmaの完成品テンプレートではありません。これは、視覚的な「レイアウト辞典」として捉えることができます。ポスターや表紙では主体と余白の探し方として、出版物では段組みとグリッドの探し方として、WebやUIではページフレームワークとレスポンシブな再構成の探し方として、PPTではタイトルページ、比較ページ、フローページ、データページの骨格の探し方として活用できます。直接適用するのはレイアウトの関係性であり、元画像のテキスト、配色、素材は置き換える必要があります。

この図鑑を使用する際は、まず制作物の種類とコンテンツのリストを決め、次に対応するカテゴリに入ります。毎回、候補を三〜五枚だけ比較し、主体の位置、情報の階層、配置線、余白の比率を抽出します。最後に、自分のテキスト、画像、ブランドルールに置き換えます。このガイドでは、まず画像の選び方と読み解き方を説明し、その後350枚すべてを紹介し、最後にポスター、長文記事、Webページ、PPT、動画の課題を通して、実際の適用方法を説明します。

一部のディレクトリ名と、画像に書かれているテーマが一致しないことがあります。ディレクトリ名は検索のためのものであり、画像を選ぶ際は画像の内容を基準にしてください。

画像を選んだら、六つの実践的な関係性を読み解く

リポジトリ内の新しい画像は、すべて 1086 × 1448 の縦型解説カードに統一されています。サムネイルは素早く比較するのに適しており、クリックすると高解像度のPNGを開いて詳細を読むことができます。どの画像を見る場合でも、名前を覚えるよりも、六つの質問に沿って分析する方が役立ちます。

主体はどこにあるか？ まず、最初に目がいく場所を見つけます。中央、三分割線の交点、端、または複数の繰り返しユニットによって構成されている場合もあります。
情報はいくつの階層があるか？ タイトル、主体、説明、補助要素をマークします。各階層は、フォントサイズ、面積、色、または位置で区別されるべきです。
視線はどのように移動するか？ 読む経路が、上から下へ、対角線に沿って、中心を囲むように回転するのか、複数のモジュール間をジャンプするのかを判断します。
画面のどこが締まっていて、どこが緩いか？ 疎密の関係は、リズム、スピード、焦点を決定します。空白は、グループ化、休止、強調を担うものであり、埋めるべき余白領域ではありません。
どの関係性を保持すべきか？ 参考画像の価値は、通常、位置、比率、軸、繰り返し、または階層に由来します。配色、フォント、装飾要素はすべて置き換えることができます。
自分のコンテンツに置き換えたときに、機能しなくならないか？ タイトルが長くなる、画像の比率が変わる、データ項目が増える、モバイルで再構成されるといったことは、元の関係性を壊す可能性があります。採用する前に、コンテンツのストレステストを行う必要があります。

観察結果を、構造の説明文として一言で書くことができます。

右側の商品画像が画面の約五割を占め、タイトルと説明文は左側に縦に配置。商品は右上の三分割線の交点付近に位置し、左下に行動ボタンを配置。読む経路はタイトルから商品へ、そしてボタンへと戻る。

この文は、デザイナーがフレームワークを構築するためのガイドとしても、AIプロンプトの主要部分としても機能します。

使用方法：五つのステップでレイアウトを見つけて適用する

350枚すべてを 001 から 350 まで順番に見る必要はありません。次の五つのステップで進めてください。

タスクを定義する：まず、ポスター、Webページ、PPT、出版ページ、ビデオ画面のいずれを作るのかを明確にします。
コンテンツをリストアップする：タイトル、本文、主体画像、データ、ボタンなど、実際の要素をリストアップします。
範囲を選択する：以下の表に基づいて、まず一次カテゴリに入り、次に対応する二次テーマに入ります。
候補を比較する：毎回三〜五枚だけを選び、同じコンテンツを使って異なる構造をテストします。
コンテンツを適用する：位置、比率、配置、読む経路を保持し、元の画像のテキスト、画像、色、ブランドを置き換えます。

成果物	入口	決めること
ポスター・表紙・SNS画像	構図、視覚原則、出版	焦点、見出し、余白
雑誌・レポート・長文	出版、文字・グリッド、読書	段組み、図文比、注釈
Web・管理画面・アプリ	Web/UI、視覚原則、グリッド	枠組み、部品、導線、再配置
絵コンテ・取材・映像	映像、構図	人物、視点、奥行き、ショット
風景・東洋ビジュアル	中国伝統、構図	視線、虚実、余白
プレゼン・提案・講義	プレゼン、視覚原則	ページ役割、データ、物語

毎回、候補を三〜五枚だけ比較してください。比較するときは、コンテンツは固定して、構造だけを置き換えます。同じタイトル、同じ主体画像、同じデータセットをそれぞれ異なるフレームワークに当てはめて、どの関係性がタスクに本当に適しているかを見極めます。

タスクエントリ

成果物でカテゴリを選ぶ / 課題でテーマを選ぶ

1つのパスで少ない候補だけを呼び出し、350枚の図を目的もなく探し回ることを避けます。

ポスター / 表紙構図→視覚原則→出版

主体、タイトル面積、余白を決める

長文 / レポート出版→文字・格子→読書

段幅、画像テキスト比率、連続読書を決める

Web / プロダクトWeb/UI→視覚原則→文字・格子

フレームワーク、コンポーネント関係、小画面再配置を決める

動画 / 絵コンテ映像→構図

人物、視点、被写界深度、ショットの種類を決める

東洋ビジュアル中国伝統→構図

遊観、虚実、余白、開合を決める

PPT / プレゼンプレゼン→視覚原則

各ページの役割とナラティブのリズムを決める

各パスは最終的に同じステップに戻ります。候補の原寸画像を開き、位置、比率、階層、リーディングパスを抽出します。

8つの大カテゴリ、33のテーマ：350のレイアウト完全図鑑

以下に、リポジトリの350枚のサムネイルをすべて表示します。8つの一次カテゴリと33の二次テーマがあります。各テーマの前にある「使用アクション」は、このグループがどのような問題を解決するのに適しているかを説明しています。番号またはディレクトリ名を入力してフィルタリングできます。スクリプトを無効にすると、すべての画像がカテゴリごとに表示されます。

01 · 構図ロジック：まず画面の骨格を決める

この86枚は、主体、線、形、空間、視点を扱っています。ポスター、表紙、メインビジュアルは、ここから始めるとよいでしょう。選ぶときは、カードのフォントと色は無視して、主体の位置、方向線、余白の比率、前後景だけに注目してください。

リポジトリカタログ 001：三分割法のレイアウト解説カードのサムネイル — 001三分割法

リポジトリカタログ 002：黄金比の構図のレイアウト解説カードのサムネイル — 001三分割法

02 · 視覚的原則と読書パターン：優先順位と読む経路を制御する

この45枚は、「コンテンツはすべてあるのに、なぜか画面がまとまらない」という問題を解決します。焦点、階層、コントラスト、リズム、ゲシュタルトのグループ化、ページスキャンパターンをカバーしています。既存のフレームワークを保持し、重みとグループ化を調整する方法です。

リポジトリカタログ 087：放射バランスの原則のレイアウト解説カードのサムネイル — 087放射バランスの原則

リポジトリカタログ 088：結晶バランスの原則のレイアウト解説カードのサムネイル — 087放射バランスの原則

03 · 平面出版・出版・広告：構造を実際のページに落とし込む

この36枚は、段組み、見開き、裁ち落とし、画像とテキストの面積、機能的なページに関係しています。雑誌、レポート、ブランドブック、広告を作成する際は、まずページサイズ、製本、裁断条件を確認してから、レイアウトを選択してください。

リポジトリカタログ 132：1段組みレイアウトのレイアウト解説カードのサムネイル — 1321段組みレイアウト

リポジトリカタログ 133：2段組みレイアウトのレイアウト解説カードのサムネイル — 1321段組みレイアウト

04 · フォント、グリッド、東アジアのテキスト：大量のテキストを安定させる

この54枚は、フォント階層、配置、インデント、グリッド、そして中国語、日本語、欧文の混植をカバーしています。レポート、長文記事、ナレッジカード、情報量の多いページに適しています。まずフォントサイズ、行間、カラム幅、ベースラインをルール化してから、破格のレイアウトや造形文字を使用してください。

リポジトリカタログ 168：軸システムのレイアウト解説カードのサムネイル — 168軸システム

リポジトリカタログ 169：放射システムのレイアウト解説カードのサムネイル — 168軸システム

05 · WebとUI：CSSのメカニズムからプロダクトページまで

この79枚は、CSSのフローとポジショニング、レイアウトのプリミティブ、ページフレームワーク、プロダクトパターン、レスポンシブな再構成に分けられます。Webページを作成するときは、「どのように実装するか」と「ユーザーがどのようなタスクを完了する必要があるか」を区別することが重要です。グリッドやフレックスボックスは実装メカニズムであり、ダッシュボード、フォーム、検索結果はプロダクトパターンです。

リポジトリカタログ 222：ノーマルフローレイアウトのレイアウト解説カードのサムネイル — 222ノーマルフローレイアウト

リポジトリカタログ 223：ブロックレベルレイアウトのレイアウト解説カードのサムネイル — 222ノーマルフローレイアウト

06 · 映像制作：人物、視点、被写界深度を整理する

この14枚は、ストーリーボード、インタビュー、ナラティブなビデオに適しています。人物の数から始めて、主観的・客観的な視点、肩越しショット、カバーショット、ミザンセーヌを処理します。実際に使用するときは、候補の映像を前後のショットに当てはめて、空間と視線が連続しているかどうかを確認してください。

リポジトリカタログ 301：シングルショット構図のレイアウト解説カードのサムネイル — 301シングルショット構図

リポジトリカタログ 302：2人ショット構図のレイアウト解説カードのサムネイル — 301シングルショット構図

07 · 中国の伝統的な構図：遊観、虚実、章法で空間を組織する

この20枚は、三遠、散点透視、辺角、截景、余白、疎密、開合、蔵露を含んでいます。文化的なテーマ、長巻物のようなナラティブ、東洋的な空間感覚を必要とするビジュアルに適しています。使用する際は、鑑賞の仕方と関係性を抽出し、水墨画の素材や古典的な装飾を複製する必要はありません。

リポジトリカタログ 315：高遠法のレイアウト解説カードのサムネイル — 315高遠法

リポジトリカタログ 316：深遠法のレイアウト解説カードのサムネイル — 315高遠法

08 · プレゼンテーション：各ページが一つのナラティブアクションだけを実行する

この16枚は、タイトルページ、セクションページ、比較ページから、大きな数字、タイムライン、フロー、マトリックス、データチャート、フルイメージページまでを扱っています。レイアウトを選ぶ前に、このページの役割を書き出してください。例えば、「数字を発表する」「二つの提案を比較する」「三段階のプロセスを説明する」などです。

リポジトリカタログ 335：タイトルスライドレイアウトのレイアウト解説カードのサムネイル — 335タイトルスライドレイアウト

リポジトリカタログ 336：タイトルとコンテンツのスライドレイアウトのレイアウト解説カードのサムネイル — 335タイトルスライドレイアウト

五つの使用シナリオ：参考画像から完成品まで

タスク一：記事の表紙を作成する

まず、コンテンツをリストアップします。タイトル、サブタイトル、人物または製品の画像、ブランドロゴです。次に、構図ロジックから、ネガティブスペース、オフアクシス、ダイアゴナルなどの三つの方向性を見つけます。同じコンテンツを三つの白黒フレームワークにすばやく適用し、主体のサイズ、タイトルの位置、余白だけを比較します。

最終的な説明は次のようになります：主体は右上に配置し、左側には二段階のタイトルを載せるための連続した空白を確保します。ブランドロゴは左下に配置し、タイトルと視線の競合を避けます。参考画像は空間的な関係性だけを提供し、完成品は独自の色、フォント、写真を使用します。

タスク二：画像入りの長文記事をレイアウトする

まず、テキストの長さ、画像の数、キャプション、引用を見積もり、次に、シングルカラム、マルチカラム、画像主体、サイドバー、モジュラグリッドを検討します。本文の読書には安定したカラム幅が必要です。データ、引用、補足資料は、独立したモジュールに配置できます。

デスクトップの二段組みやサイドバーは、そのままモバイルに縮小することはできません。事前に再構成のルールを書き出してください：メインカラムは順序を保ち、サイドバーのコンテンツは関連する段落の後に移動し、マルチカラムのテーブルは横スクロールを許可し、装飾画像は本文の読書順序を変更しない。

タスク三：プロダクトのWebページをデザインする

まず、ユーザーの経路を描き、次にページパターンを選択します。マーケティングページは、多くの場合、Hero、セールスポイントカード、事例、行動ボタンで構成されます。管理画面のプロダクトには、サイドナビゲーション、データテーブル、フィルター、詳細ペインが必要な場合があります。

実装するときは、通常のフローから始め、スタックを使用して縦のリズムを制御し、クラスタで同じレベルのボタンを処理し、グリッドでカードを整理します。小さい画面のルールは、「三カラムから一カラムに変更」「詳細をリストの後に移動」「ナビゲーションをドロワーに格納」のように明確に記述し、「レスポンシブ」とだけ書くのは避けてください。

タスク四：一連の報告スライドを作成する

まず、各ページに機能ラベルを付けます：タイトル、問題、証拠、比較、結論、次のステップ。次に、それぞれの役割に応じたレイアウトを選択します。大きな数字のページは一つの重要な指標だけを伝え、比較ページは両側の構造を対称に保ち、タイムラインページはイベントの順序に従って移動し、データチャートページは結論をタイトルに含めます。

プレゼンテーション全体には、リズムの変化が必要です。五ページ連続で同じカードグリッドを使用すると、情報の焦点がぼやけます。セクションページ、フルイメージページ、大きな数字のページは、一時停止と強調の役割を担うことができます。

タスク五：インタビューまたはナラティブビデオを計画する

まず、人物の関係性とシーンの方向性を決定し、次に、エスタブリッシングショット、二人または肩越しショット、シングルリアクションショットを描きます。各ショットには、人物の位置、視線の方向、ショットサイズ、前景・背景を記録します。ディープスペースの演出は、一つのショット内で人物の関係性を変化させるのに適しており、カバーショットは、編集時に十分な選択肢を提供します。

これら五つのタスクは、同じ方法論を共有しています：コンテンツを明確にする → カテゴリを選択する → 少数の候補を比較する → 関係性を抽出する → 制約として書き出す → 実際のコンテンツで検証する。

AIでレイアウトを適用する：参考画像を実行可能なプロンプトに変換する

「001のスタイルを参考にする」とだけ書くのは情報が少なすぎます。モデルは、どの関係性を継承し、どの表面的な要素を複製してはいけないかを知る必要があります。完全なプロンプトには、少なくとも六つの部分が含まれている必要があります：

タスクとキャンバス：何を作るのか、サイズとアスペクト比は何か。
コンテンツリスト：タイトル、本文、主体画像、データ、ボタンはそれぞれ何か。
参照オブジェクト：番号、ディレクトリ名、確認済みの元画像。
構造的制約：主体の位置、面積比、配置線、グループ化、読む経路。
視覚的制約：ブランドカラー、フォントの雰囲気、画像処理、余白の程度。
複製禁止：参照画像のテキスト、配色、ブランド、特定の素材を複製しない。

AIプロンプト構造

参照画像を 6 層の制約に変える

01
タスクとキャンバス
成果物、寸法、縦横比、媒体
02
コンテンツリスト
タイトル、本文、主体画像、データ、ボタン
03
参照オブジェクト
番号、カタログ名、確認済みの原寸画像
04
構造制約
位置、面積、軸、まとまり、読む順序
05
ビジュアル制約
色、書体、画像処理、余白
06
コピー禁止
元画像の文言、ブランド、素材、装飾を写さない

画像+内容+配置+合格

構造関係が具体的であればあるほど、モデルが「高級」「シンプル」「モダン」のような検証不可能な形容詞に依存する度合いは低くなります。

例えば、4:5のプロダクトポスターは次のように書くことができます：

4:5の縦型プロダクトポスターを作成する。タイトルは二行、サブタイトルは一行、プロダクト画像は一枚、行動ボタンは一つ。確認済みの三分割の空間関係を参照する：プロダクトは右側の約52%を占め、視覚的な中心は右上の交点の近くに配置。タイトルとサブタイトルは左側に単一のテキスト軸を形成し、ボタンは左下に配置。約20%の連続した空白を保持する。ブランドブルーと温かみのある白の背景を使用し、参照画像のテキスト、フォント、アイコン、装飾を複製しない。

モデルが生成した後も、前述の六つの質問で確認します：主体が約束した位置にあるか、階層が明確か、視線が行動ポイントを通過するか、小さい画面や長いタイトルが構造を壊さないか。参考画像は単なる骨格であり、受け入れ基準はあなたのコンテンツの目標から来ます。

ディレクトリ名と画像が一致しない場合

リポジトリの自動検証は、ファイルが揃っているかどうかをチェックできますが、画像のテーマを理解することはできません。8枚をサンプリングして確認したところ、001 三分法構図は一致していましたが、残りの7枚は一致していませんでした。これは小規模なサンプリングチェックに過ぎず、350枚すべてを代表するものではありません。