デザイン表現史RESEARCH EDITION技法解説・自作解説図4点 / 歴史的な実作品画像は未掲載 · 2026-11-01
配置を組織する方法
Grid systems
本や画面の文字がばらばらに並んでいたら、読む場所に迷いそうです。
グリッドは、文字や写真を置く位置を決めるための、線の仕組みです。
線に合わせると、ページが変わっても位置をそろえられます。
同じ線を使いながら、一部の写真だけ大きく置くこともできます。
以下の4点は、このサイトが作成した解説用の例です。歴史的作品の複製・復元ではありません。
列は配置の縦方向の基準。要素は一列に収めることも、複数列をまたぐこともできます。段間と外側の余白は別々に考えます。
列を横方向にも分割すると、配置の単位となるマスができます。複数の単位をまとめて画像や文章を置いても、端の位置の基準を共有できます。
横組み本文の行の基準を揃える仕組みです。列や図版を越えて文字の行位置を合わせる際は、行送りと開始位置を調整します。
基準を共有しても、配置をすべて同じにする必要はありません。列をまたぐ幅や要素の位置を変え、共通性と変化を比較します。
自作解説図4点。歴史的代表作品画像・生成イメージの点数には含めません。小さな文字は原寸表示で確認できます。
解説図の制作台帳以下は参考書籍と現代の公式ガイドです。自作例の説明と、歴史上の図版の実見・転載を区別します。
方法を学ぶための参考資料です。特定の運動を代表する歴史作品の画像セットではありません。
作品の内容を説明する見出し
原題：Grid systems in graphic design
位置を決める線の使い方をまとめた本です。
紙の上だけでなく、立体での使い方も扱っています。
実務書
平面や立体の中で、物や情報の配置を組み立てる方法を見ます。
示した年は本の出版年で、グリッドが発明された年ではありません。特定の図版は転載していません。
作品の内容を説明する見出し
原題：Designing Programmes
一つの形だけをつくるのではなく、いろいろな形をつくれる決まりを考える本です。
グリッドだけの本ではありません。
関連する設計方法論
一つの形を決めるだけでなく、設計の規則そのものを考える参考文献です。
グリッドだけを扱う本ではありません。現在の復刻版と最初の刊行を区別します。特定のグリッドの図を確認したとはしていません。
作品の内容を説明する見出し
原題：2x Grid
文字や写真のまわりに、どれくらい空きを残すかを決めます。
決まった長さを使うと、紙や画面が変わってもそろえられます。
現代のデザインシステム
余白、段と段の間隔、基準となる単位を見ます。それらを使い、異なる媒体でも配置を組み立てる方法に注目します。
IBM固有の単位や数値を、どこでも通用する唯一の正解とは考えません。
作品の内容を説明する見出し
原題：Baseline grid
文字を同じ高さにそろえる線を使います。
ページや列が変わっても、本文の行をそろえられます。
現代の組版実装
本文をそろえる基準線と、行から次の行までの間隔の関係を見ます。列やページが変わってもそろえる仕組みに注目です。
ソフトウェアに取り入れられた例です。この方法がどこで始まったかを示す歴史資料ではありません。
文字や写真の位置をそろえると、なぜ読みやすくなるのでしょうか。グリッドは、位置と間隔の基準を決めて、紙面や画面の情報を整理する方法です。列に沿って並べるだけでなく、複数の列をまたいで置くこともできます。同じ骨組みを使いながら、変化も作れるのです。
ここで扱うのは、一つの運動の歴史ではなく、配置の方法です。ヨゼフ・ミューラー＝ブロックマン（Josef Müller-Brockmann）の『Grid systems in graphic design』（1981）は、平面と立体でのグリッドの使い方をまとめた実務書です。
カール・ゲルストナー（Karl Gerstner）の『Designing Programmes』（初版1964）は、グリッドに限らず、共通のルールに基づく設計の方法を考える関連書です。どちらの出版年も、グリッドそのものが発明された年ではありません。
以下は観察のための問いです。すべての作品に共通する固定ルールや、未取得画像の実見結果ではありません。
グリッドは、使う色を決める方法ではありません。掲載した図の青色は、仕組みを説明するための色です。
段幅（だんはば：文章を組む列の幅）、行送り（ぎょうおくり：行から次の行までの間隔）、ベースライン（文字をそろえる基準線）の関係を見ます。
縦の列、横の行、それらで区切る単位であるモジュールを区別します。段間（だんかん：列と列の間）と、外側などの余白にも注目します。
文字や画像の端がそろう場所、複数の列にまたがる幅を見つけます。同じ配置の繰り返しと、そこに加えた変化を観察しましょう。
COMPARE
スイス・スタイル（Swiss Style）と同じ意味でも、弁当箱の仕切りのようにカードを並べるBento型の配置の別名でもありません。完成した画面に後から引いた線は、分析のために考えた仮の線です。制作者が実際にその設計図を使った証拠にはなりません。
項目を横に並べる ↗READ TODAY
現在の実務の例には、IBM Design Languageの「2x Grid」や、Adobe InDesignのベースライングリッドがあります。ただし、歴史上の一冊から、現代のすべてのUI（画面の表示や操作の仕組み）へ直接受け継がれたとは断定しません。
このページを書くときに使った資料です。作品の説明、画像を入手できたかどうか、画像を使う条件は、それぞれ別に確かめています。検索結果で読んだ情報と、元のページを開いて確かめた情報も、調査の記録で分けています。
この項目の収録実画像：0点（図鑑全体：28点）。参照・関連実作品はこの項目0点（図鑑全体2点）。代表作品画像セットの数には含めません。