ページレイアウト

グラフィックデザインにおいて、ページレイアウトとはページ上の視覚要素の配置のことである。一般的に、特定のコミュニケーション目的を達成するための構成の組織原則が含まれる。^[1]

高レベルのページ レイアウトには、テキストと画像の全体的な配置、場合によっては媒体のサイズや形状の決定が含まれます。これには知性、感覚、創造性が必要であり、文化、心理学、およびドキュメントの作成者と編集者が伝えたいことや強調したいことに基づいて決定されます。低レベルのページ番号付けとタイプセッティングは、より機械的なプロセスです。テキスト領域の境界、書体、フォント サイズなどの特定のパラメーターが与えられれば、位置揃えの設定は簡単な方法で行うことができます。デスクトップ パブリッシングが主流になるまでは、これらのプロセスはまだ人間によって行われていましたが、現代の出版では、ほぼ常に自動化されています。結果は、そのまま公開される場合もあれば (住宅の電話帳の内部など)、グラフィック デザイナーによって微調整される場合もあります (高度に洗練された高価な出版物など)。

中世の写本に描かれた初期の装飾ページから、現代​​の複雑な雑誌やカタログのレイアウトに至るまで、適切なページ デザインは、印刷物において長い間考慮されてきました。印刷メディアでは、要素は通常、文字(テキスト)、画像(写真) で構成され、時には、ダイ/レーザー カッティング、箔押し、ブラインド エンボス加工など、インクで印刷されない要素のプレースホルダー グラフィックも含まれます。

ページファニチャーという用語は、見出し、署名、画像のキャプションなど、ページ上のメインテキストや画像以外の項目に使用されることがあります。^[2]

写本ではすべての要素が手作業で追加されるため、作者は作品を作成しながら、おそらく事前のスケッチをガイドとして直接レイアウトを決定することができます。^[3]

古代の木版印刷では、ページのすべての要素が木材に直接彫り込まれていましたが、印刷が大きな布地などのより大きな作品に転写され、複数の版木が印刷される可能性がある場合は、後でレイアウトを決定する必要がある場合があります。

ルネッサンス期に活版印刷と冷間金属活字が発明され、組版は組版棒を使って文字をゲラ（長いトレイ）に物理的に組み立てることによって行われるようになりました。画像は彫刻によって作成されました。

元の文書は手書きの原稿です。レイアウト アーティスト以外の人物がタイプセッティングを行った場合は、書体やフォント サイズなどの指示を記したマークアップが原稿に追加されます。(著者が 1860 年代にタイプライターを使い始めた後も、元の文書は依然として「原稿」と呼ばれ、マークアップ プロセスは同じでした。)

最初の植字作業の後に、校正を行うためにゲラ刷りが印刷されることがあります。校正は、原稿の誤りを訂正するため、または植字工が原稿を正しく写し、マークアップを正しく解釈したことを確認するために行われます。最終的なレイアウトは、テキストと画像を希望どおりに間隔を空けるための木片または金属片 (「家具」)、チェイスと呼ばれるフレーム、およびフレームを固定するクォインと呼ばれるオブジェクトを使用して、「フォーム」または「フォルム」に構築されます。このプロセスは面付けと呼ばれ、複数のページを同じ紙に印刷するように配置することが含まれる可能性があります。この紙は後で折り畳まれ、場合によってはトリミングされます。最終的な配置を確認するために、「面付けプルーフ」(基本的には印刷機の短い実行) が作成されることがあります。

1884 年に発明された溶融金属活字印刷により、作業員がキーボードを使用してスラグ(テキストの行全体) を作成できるようになり、活字印刷のプロセスが高速化されました。スラグは、活字印刷機によって一時的に組み立てられた鋳型に溶融金属を流し込むことで生成されます。ただし、レイアウト プロセスは、冷間金属活字の場合と同じで、物理的なゲラに組み立てられます。

オフセット リソグラフィーでは、画像の明るい部分と暗い部分 (最初にフィルムに記録) によって、印刷機でのインクの配置を制御できます。つまり、ページのコピーを 1 部紙に作成して写真を撮れば、コピーを何部でも印刷できます。活字はタイプライターで組むことができますが、活版印刷に匹敵する専門的な結果を得るには、特殊な植字機を使用します。たとえば、IBM Selectric Composerでは、さまざまなサイズ、さまざまなフォント (プロポーショナル フォントを含む)、およびテキストの位置合わせの文字を作成できます。写真製版とハーフトーンを使用すると、手作業による彫刻に頼るのではなく、物理的な写真が直接印刷物に転写されます。

レイアウト プロセスは、ペースト アップを作成する作業になりました。ペースト アップは、ゴム糊などの接着剤を使用して、画像やテキストの列を硬い紙に物理的に貼り付けることから、このように呼ばれています。完成したページは、カメラ レディ、"メカニカル"、または "メカニカル アート" と呼ばれるようになります。

写真植字は1945 年に発明されました。キーボード入力後、文字が写真ネガに 1 つずつ写し出され、その後印刷所に直接送るか、写真用紙に写して貼り付けることができました。これらの機械はますます高度化し、コンピューター駆動のモデルでは磁気テープにテキストを保存できるようになりました。

コンピュータのグラフィック機能が成熟するにつれ、コンピュータは、あらかじめ用意されたセットから写真テンプレートを単に呼び出すのではなく、文字、列、ページ、さらには複数ページの署名を直接レンダリングするために使用され始めました。 コンピュータオペレータの表示装置として使用されるだけでなく、ブラウン管は写真植字用のテキストのレンダリングにも使用されました。 しかし、CRTディスプレイの湾曲した性質により、画面の外側の端に向かって画面上のテキストとアートが歪んでいました。 1997年に「フラットスクリーン」モニター（LCD、LED、最近ではOLED）が登場したことで、古いCRTディスプレイによって引き起こされた歪みの問題が解消されました。 2016年現在、^{[アップデート]}フラットパネルディスプレイはCRTディスプレイをほぼ完全に置き換えています。^{[4] [循環参照]}

コンピュータに直接接続されたプリンタにより、文書を直接、複数部数で印刷したり、ディットマシンやコピー機でコピーできるオリジナルとして印刷したりできるようになりました。WYSIWYGワードプロセッサにより、一般のオフィスユーザーや消費者は、タイプライターよりも洗練されたページレイアウト、テキストの位置揃え、より多くのフォントの 使用が可能になりました。初期のドットマトリックス印刷は、オフィス文書には十分でしたが、専門的な植字には品質が低すぎました。インクジェット印刷とレーザー印刷では十分な品質の文字が生成されるため、これらのタイプのプリンタを備えたコンピュータがすぐに写真植字機に取って代わりました。

フラッグシップソフトウェアのAdobe InDesign ^[5]やクラウドベースのMarq ^[6]などの最新のデスクトップパブリッシングソフトウェアでは、レイアウトプロセスを完全に画面上で行うことができます。（プロの印刷会社が貼り付けを行う際に利用できるレイアウトオプションと同様のものが、デスクトップパブリッシングソフトウェアでもサポートされています。対照的に、「ワードプロセッサ」ソフトウェアでは通常、レイアウトとタイポグラフィの選択肢がはるかに限られており、一般的なアプリケーションでの使いやすさと柔軟性がトレードオフになっています。）完成した文書は、カメラレディバージョンとして直接印刷でき、物理的な組み立ては必要ありません（十分に大きなプリンタがあれば）。グレースケール画像は、オフセット印刷機に送る場合はデジタルでハーフトーン処理するか、印刷会社がマークされた領域に挿入できるように別途送る必要があります。完成した作品は、印刷会社にデジタルで送信することもできます。印刷会社はそれを自分で印刷するか、直接フィルムに撮影するか、コンピューターからプレートへの技術を使用して物理的なオリジナルを完全に省略することができます。PostScriptとPortable Document Format（PDF）は、デジタル送信の標準ファイル形式になっています。

パーソナル コンピューティングの出現以来、ページ レイアウト スキルは印刷メディアだけでなく電子メディアにも拡大してきました。電子書籍、PDF ドキュメント、静的Web ページは紙のドキュメントとほぼ同じですが、コンピューターではマルチメディアアニメーションやインタラクティブ機能も追加できます。インタラクティブ メディアのページ レイアウトは、インターフェイス デザインやユーザー エクスペリエンスデザインと重なります。インタラクティブな「ページ」は、グラフィカル ユーザー インターフェイス(GUI) としてよく知られています。

現代のウェブページは、通常、コンテンツと一般的な構造にはHTML を、タイポグラフィや間隔などの表示の詳細を制御するにはカスケーディング スタイル シートを、インタラクティブ機能にはJavaScript を使用して作成されます。これらの言語はすべてテキストベースであるため、この作業はテキスト エディター、または WYSIWYG 機能やその他の補助機能を備えた特別なHTML エディターで行うことができます。マルチメディア コンテンツには、 Macromedia Flashなどの追加のテクノロジが使用される場合があります。ウェブ開発者は、これらのテクノロジを使用して完成したドキュメントを実際に作成する責任がありますが、別のウェブ デザイナーがレイアウトを確立する責任がある場合があります。特定のウェブ デザイナーは、熟練したウェブ開発者でもある場合もあれば、単にテクノロジの一般的な機能に精通していて、開発チームに望ましい結果を視覚化するだけの場合もあります。

プレゼンテーションやエンターテイメントで使用される投影スライドでは、多くの場合、印刷されたページと同様のレイアウトの考慮事項があります。

1800 年代の講義では、印刷物、タイプ、写真、または手描きの原稿を使って、幻灯機と不透明プロジェクターが使用されました。2 セットの写真フィルム( 1つはネガ、もう 1 つはポジ) または 1 枚のリバーサル フィルムを使用して、光を透過させて投影できるポジ画像を作成できます。インタータイトルは、音声がなかった初期の映画で広く使用されていました。現在でも、いたるところにあるバニティ カードやクレジットに加えて、時々使用されています。

1940 年代にはオーバーヘッドプロジェクター、1950 年代にはスライド プロジェクターを使用して、プレゼンテーションに透明フィルム (不透明なテキストと画像) を使用することが一般的になりました。オーバーヘッド プロジェクター用の OHP フィルムは、一部のコピー機で印刷できます。1980 年代にはコンピュータープレゼンテーション プログラムが利用できるようになり、プレゼンテーションをデジタルでレイアウトできるようになりました。コンピューターで作成されたプレゼンテーションは、一部のレーザー プリンターで OHP フィルムに印刷したり、スライドに転送したり、LCDオーバーヘッド プロジェクターを使用して直接投影したりできます。現代のプレゼンテーションは、ビデオ プロジェクター、コンピューター モニター、または大画面テレビを使用してデジタルで表示されることが多いです。

プレゼンテーションのレイアウトは、印刷された文書とは少し異なる課題があります。特に、通常は人が話したり投影されたページを参照したりするためです。次の点を考慮する必要があります。

• 提示された情報を編集して、講演者の発言を繰り返す（聴衆がどちらにも注意を向けられるようにする）か、口頭では伝えられない情報のみを提示する（聴衆の注意を分散させたり、単にスライドを直接読んだりすることを避けるため）
• スライドを印刷して配布したり、オンラインで公開したりすることで、後で参照しやすくする
• ペース配分。スライドは快適な間隔で変更され、講演の長さに適しており、コンテンツの順序は講演者の期待に合っている。
• 色、言葉によるラベル、レーザーポインターなどを使って、話者がページ上の特定の項目を参照できる方法を提供する
• テキストやグラフィックを部屋の後ろから見えるようにサイズ調整すると、1枚のスライドに表示できる情報量が制限されます。
• 強調したり、情報をゆっくり紹介したり、楽しませたりするためにアニメーションを使用する
• ヘッダー、フッター、または繰り返し要素を使用して、すべてのページを似たものにし、統一感を持たせたり、進捗状況を示したりします。
• タイトルを使用して新しいトピックやセグメントを紹介する

グリッドとテンプレートは、広告キャンペーンや、Web サイトを含む複数ページの出版物 で使用されるページ レイアウト デザイン パターンです。

グリッドとは、ページ上の要素を整列および繰り返すためのガイドラインのセットです。デザイン プロセスでは表示されますが、エンド ユーザー/視聴者には表示されません。ページ レイアウトは、シリーズのデザイン スタイルで要求される繰り返しや多様性に応じて、ガイドライン内に収まる場合とそうでない場合があります。グリッドは柔軟性が求められます。グリッドを使用してページ上の要素をレイアウトするには、グリッドを設計するのに必要なグラフィック デザイン スキルと同等かそれ以上のスキルが必要になる場合があります。

対照的に、テンプレートはより厳格です。テンプレートには、エンド ユーザー/視聴者にほとんど表示される繰り返し要素が含まれます。テンプレートを使用して要素をレイアウトする場合、通常、テンプレートを設計する場合よりもグラフィック デザインのスキルはそれほど必要ありません。テンプレートは、背景要素の最小限の変更と、前景コンテンツの頻繁な変更 (または交換) に使用されます。

ほとんどのデスクトップ パブリッシング ソフトウェアでは、指定された水平および垂直の等間隔で配置された色付きの線またはドットで塗りつぶされたページの形でグリッドを使用できます。自動余白と小冊子の背表紙 (のど) 線は、ドキュメント全体でグローバルに使用するように指定できます。複数の追加の水平線と垂直線を、ページの任意の場所に配置できます。エンド ユーザー/視聴者には見えない図形を、ページ レイアウトと印刷処理のガイドラインとしてページ上に配置することもできます。ソフトウェア テンプレートは、テンプレート データ ファイルを複製するか、複数ページのドキュメントでマスター ページ機能を使用することによって実現されます。マスター ページには、グリッド要素と、ヘッダー要素とフッター要素、自動ページ番号付け、自動目次機能などのテンプレート要素の両方を含めることができます。

静的レイアウトでは、動的レイアウトよりも美観をより細かく制御でき、不規則な形状のコンテンツの周囲のスペースや重なり合う部分を徹底的に最適化できます。Webデザインでは、これを固定幅レイアウトと呼ぶことがありますが、レイアウト全体のサイズを拡大縮小しながらも、コンテンツの元の比率、静的な配置、スタイルを維持できます。すべてのラスター画像形式は、実質的には静的レイアウトですが、静的レイアウトには、テキストとグラフィックを分離することで検索可能なテキストを含めることができます。

対照的に、電子ページでは、コンテンツの入れ替え、スタイルのカスタマイズ、テキストの拡大/縮小、画像の拡大/縮小、または可変ページ サイズ (流動レイアウトまたはリキッド レイアウトと呼ばれることが多い) による動的レイアウトが可能です。動的レイアウトは、プレゼンテーションとコンテンツを分離する可能性が高く、これには独自の利点があります。動的レイアウトでは、すべてのテキストと画像が行と列の長方形領域にレイアウトされます。これらの領域の幅と高さは使用可能な画面のパーセンテージとして定義されているため、さまざまな画面寸法に対応します。使用可能なスペースが自動的に最大限に活用され、画面上のサイズ変更とハードウェアによる制限の両方に常に最適に適応します。テキストは、特定のレイアウトの比率を乱すことなく、読みやすさに関するユーザーの個々のニーズに合わせて自由にサイズ変更できます。この方法による画面上のコンテンツの全体的な配置は、常に元の設計どおりに維持されます。

静的レイアウト デザインには、より多くのグラフィック デザインとビジュアル アートのスキルが必要になる場合がありますが、動的レイアウト デザインには、コンテンツのバリエーションを徹底的に予測するためのより多くのインタラクティブ デザインとコンテンツ管理のスキルが必要になる場合があります。

モーション グラフィックスはどちらのカテゴリにもうまく当てはまりませんが、レイアウト スキルや、モーションがレイアウトに与える影響についての慎重な考慮が必要になる場合があります。いずれの場合も、モーションの要素によって動的なレイアウトになりますが、静的なグラフィック デザインやインタラクティブ デザインよりもモーション グラフィック デザインの方が適しています。

電子ページは、ページを分割したり、効果を組み合わせたりすることで、静的レイアウト機能と動的レイアウト機能の両方を利用することができます。たとえば、Web バナーなどのページ セクションには、スワッピング コンテンツ領域内に含まれる静的またはモーション グラフィックが含まれる場合があります。動的またはライブ テキストは、テキストをエッジから遠ざけるために目に見えないスペーサーを使用することで、不規則な形状の画像の周りにラップされる場合があります。一部のコンピューター アルゴリズムは、透明部分を含むオブジェクトのエッジを検出し、輪郭に沿ってコンテンツを流すことができます。

現代のメディア コンテンツの検索および出力テクノロジでは、ビジュアル コミュニケーション(フロントエンド) と情報テクノロジ (バックエンド) の間に多くの重複があります。大活字の出版物 (特に教育的な性質の厚い本) と電子ページ (Web ページ) には、自動インデックス作成、自動再フォーマット、データベース公開、動的ページ表示、およびエンド ユーザーとの対話性のためのメタデータが必要です。メタデータ (メタ タグ) の多くは、ページ レイアウト プロセス中に手動でコーディングするか指定する必要があります。これにより、ページ レイアウトのタスクがアーティストとエンジニアの間で分割されるか、アーティスト/エンジニアに両方のタスクが課せられます。

より複雑なプロジェクトでは、フロントエンドとしてのページ レイアウト設計と、バックエンドとしての機能コーディングという 2 つの別々の設計が必要になる場合があります。この場合、フロントエンドは、画像編集ソフトウェアなどの代替ページ レイアウト技術を使用して設計するか、または紙に手書きでレンダリングする方法で設計できます。ほとんどの画像編集ソフトウェアには、ページ レイアウトを変換して「What You See Is What You Get」( WYSIWYG ) エディターで使用する機能、またはデスクトップ パブリッシング ソフトウェア用にグラフィックスをエクスポートする機能が含まれています。WYSIWYG エディターとデスクトップ パブリッシング ソフトウェアでは、ほとんどの場合、バックエンド コーディングの前にフロントエンドの設計を行うことができます。インターフェイス設計とデータベース パブリッシングには、フロントエンドでより技術的な知識や情報技術エンジニアリングとのコラボレーションが必要になる場合があります。バックエンドの機能は、フロントエンドでのコンテンツの取得と配置を自動化することです。

ページ レイアウトは、特定のデスクトップ パブリッシング テンプレートで実装される社内スタイルによって、多かれ少なかれ規定される場合があります。また、ページ番号の量と比較すると、レイアウトを行う必要が比較的少ない場合もあります (小説や図のないその他の本など)。

一般的なページ レイアウトの決定には次のものがあります。

• 柱と樋（柱と柱の間の隙間）の数と大きさを決める
• 意図的な空白の配置
• 画像や図のサイズと位置
• ページ余白のサイズ
• 強調のためにカラー印刷やスポットカラーを使用する
• 画像にテキストを重ねたり、回り込みや侵入をしたり、ページの余白から画像をはみ出させたりといった特殊効果の使用

レイアウトされる具体的な要素としては、次のようなものがあります。

• ボックスアウトとサイドバーは、メインのテキストの流れから外れた情報を提示します。
• 章や節のタイトル、見出しや小見出し
• 画像キャプション
• 脚注や末尾の注などの注釈、学術雑誌や教科書などの参考文献
• ページ ヘッダーとページ フッターの内容は通常、コンテンツ ページ間で統一されているため、レイアウト ソフトウェアによって自動的に複製されます。ページ番号は通常、ヘッダーまたはフッターに含まれており、ソフトウェアによってページごとに自動的に増加されます。
• 当然のことながら、またはレイアウトに合うように短編小説を追加するために追加される可能性のある引用文とグラフを抜き出します。
• 目次

新聞制作では、記事に添える写真の最終的な選択と切り取りはレイアウト編集者に任されることもあります (写真の選択によって必要な領域の形状が変わり、レイアウトの残りの部分も変わる可能性があるため)。また、別の写真編集者がいる場合もあります。同様に、見出しはレイアウト編集者、コピー編集者、または原作者 によって書かれることがあります。

ストーリーを最終レイアウトに合わせるために、比較的重要度の低いコピーの調整 (簡潔にするために言い換えるなど) が行われたり、レイアウト エディターがフォント サイズや行間などのタイポグラフィ要素をわずかに調整したりする場合があります。

執筆および出版におけるフローティング ブロックとは、テキストのメイン フローから外れたグラフィック、テキスト、表、その他の表現を指します。画像や表を表示するためにフローティング ブロックを使用することは、科学論文や科学書籍を含む学術論文や技術文書の一般的な特徴です。フローティング ブロックには通常、その内容を説明するキャプションまたはタイトルと、メイン テキストから図を参照するために使用される番号が付けられます。一般的なシステムでは、フローティング ブロックを、図(画像、図表、プロットなど) と表というラベルの付いた 2 つの別個の番号付きシリーズに分割します。図の別名は、画像またはグラフィックです。

フローティングブロックは、ページ上の所定の位置に固定されておらず、ページの端に漂っているため、フローティングであると言われています。画像やその他の大きなアイテムを、テキストのメインフローの中央に埋め込むのではなく、ページの端に配置することで^{[7] 、}タイプセットがより柔軟になり、物語の流れが中断されることが回避されます。

たとえば、地理に関する記事には、「図 1: 世界地図」、「図 2: ヨーロッパ地図」、「表 1: 大陸の人口」、「表 2: ヨーロッパ諸国の人口」などが含まれます。書籍によっては、目次に加えて、作品に登場するすべての図を中央にリストした図表目次がある場合もあります。

他の種類のフローティング ブロックも区別できます。たとえば、次のようになります。

サイドバー: ^[8]主たる物語から逸れる余談。例えば、製品の使用方法に関する技術マニュアルでは、サイドバーにさまざまな人が仕事でその製品をどのように活用したかの例などを掲載することがあります。インターメッツォとも呼ばれます。サイドバー (出版) を参照してください。

プログラム:コンピュータ プログラミングに関する記事や書籍では、コードやアルゴリズムを図で示すことがよくあります。

方程式: 数学に関する記述では、本文とは別に、番号付きのブロック内に大きな数式表記を配置する場合があります。

レイアウトのモックアップは、通常はすべてのコンテンツが実際に準備される前に、早期のフィードバックを得るために作成されることがあります。紙媒体でも電子媒体でも、レイアウトの最初のドラフトは、紙と鉛筆で描いたラフスケッチに過ぎない場合があります。新しい雑誌の包括的なレイアウトには、テキストと画像のプレースホルダーが表示されますが、配置、タイポグラフィのスタイル、および実際の号または特定の未完成号のパターンを設定するためのその他のイディオムが示されます。Webサイトのワイヤーフレームは、最終的な HTML と CSS を作成する作業をすべて実行することなく、またコピーを書いたり画像を作成したりすることなく、レイアウトを示す低コストの方法です。

Lorem ipsumテキストは、即興のサンプル コピーが誤って公開された場合に生じる可能性のある恥ずかしさを避けるためによく使用されます。同様に、プレースホルダー画像には「位置専用」というラベルが付けられることがよくあります。

無料辞書の Wiktionary でページ レイアウト またはタイプセッティングを調べます。

• www.xml.org の SGML ページ
• 記号– 印刷記号に関連するすべての記事
• TeX ユーザー グループ
• www.W3C.org の XML ページ