情報デザイン演習IIA/2022/0530

第７回

情報デザイン演習IIA/2022｜受講生一覧

AGENDA

• 以下名簿が表示されます。出欠確認・座席記録をお願いします。
  　出欠確認・座席記録

• 授業形態について
  • 対面出席の方は、デジタルラボ 504（17号5F）に出席して下さい。
  • 遠隔参加の方は、以下からご参加下さい。
    Zoomミーティングに参加する
    ミーティングID: 996 5065 2587
    パスコード: 822863
  • リアルタイム参加と受講生プレゼンが前提のため、録画は行いません。

• 学科サイトに進捗記録を記載　　受講生一覧

CONTENTS

• はじめに
  • 進捗報告 の確認
  • 今後の演習について
  • Worklogの記載について
• 補足講義｜冊子制作について
  • ソフトウエア
  • 紙の寸法
  • 紙面の使い方
  • グリッド・システム
  • レイアウトグリッドの例
  • 自分でオリジナルのグリッドを作る際の要点

はじめに

進捗報告 の確認

受講生の方のプロジェクトの現状を確認します。
受講生2022 一覧

今後の演習について

• プロトタイプ修正 ＞ テストを繰り返し、ブラッシュアップしていきます。
• 毎回、ローテーションで受講生の方の進捗を確認します。
• 受講生の方からの質問、また進行状況を見ながら補足の講義を行います。
  
  

Worklogの記載について

毎回（毎週）の作業の経緯、制作物の現状等を記載して下さい（以下、例）

**2022.05.30　← <h3>
***制作物の現状 
成果物（現状）のスクリーンショット等、視覚的な資料とコメント
~

***今週の取り組み　← <h4>
今週取り組んだ調査、実験、技術的な訓練、作業内容等
~

***今後の課題　← <h4>
発見された問題、解決すべき課題等　＞ ToDoに記載
~
~

補足解説：Pukiwiki と Markdown記法について

補足講義｜冊子制作について

ソフトウエア

• Adobe Indesign
  書籍・雑誌・カタログ・パンフレット等、ページものの制作に関わる、業界標準のソフトウエアです。

• Adobe Illustrator
  ベクターグラフィックスソフトウエアで、ポスター・チラシ・ポストカード・名刺等のペラものの制作や、ラベルやロゴマーク 等、拡大・縮小による劣化のない図形的なグラフィックの制作で業界標準のソフトウエアです。
  複数のアートボードを並べることで、複数ページの冊子制作も可能です。
  
  

紙の寸法

• A列：A4判やA3判など、Aと数で表されるグループ。A1(594×841)を基準として、A1を半分にするとA2、A2をさらに半分にするとA3・・という関係になっています。ちなみにA0の面積は１平方メートルです。
• B列：B5判やB4判など、Bと数で表されるグループ。B1(728×1085)を基準として、B1を半分にするとB2、B2を半分にするとB3・・という関係です。
  
  

紙面の使い方

基本的な紙面の使い方は、右図のとおりです。

仕上がりサイズより大きな紙に印刷して、トリムマークにしたがって断裁というのが基本です。

家庭用のプリンタには「ふちなし印刷」というのがありますが、実際の印刷のお仕事ではA4の紙にA4のフチなし印刷をするといった発想はありません。「一回り大きな紙にトリムマークごと印刷してA4に裁断」というのが普通です。

家庭用プリンタの「ふちなし印刷」は、わずかに拡大印刷する（実寸ではなくなる）ものもあるので、注意が必要です。

グリッド・システム

スイスのデザイナー、ミューラー・ブロックマン（1914～1996年）がその著書で唱えた紙面レイアウト用のガイドの構築技法です。

雑誌の紙面レイアウトやWebページのレイアウトなど、多くのグラフィックはグリッドシステムを用いてレイアウトされています。グリッドを活用すると、迷うことなくスピーディーに割付けできて、仕上がりが幾何学的に美しいというメリットがあります。もちろん好みの問題はありますので、絶対にグリッドを使わなければならないということではありませんが・・

• The Grid System
• Grid System イメージ検索
• Image now
• 960 Grid System

• GoogleImage: karl gerstner
• GoogleImage: Helmut Schmid Typography
• GoogleImage: joseph muller brockmann
• GoogleImage: Massimo Vignelli work
• GoogleImage: Ellen Lupton work

• 書籍紹介
  • Grid Systems in Graphic Design
  • Balance in Design Kimberly-Elam
  • Typographic Systems Kimberly Elam
    
    

レイアウトグリッドの例

このサンプルは 本文8.5pt、行送り15ptを前提としています。

本文の文字サイズを最小単位に、最適な一行文字数×数行分の矩形を１ブロックとして、紙面を分割します。ブロック同士の間隔は、横方向では本文２文字分あるいは３文字分、縦方向では本文が複数ブロックに連続しても整うように、行間＋文字高＋行間の分だけ空けます。
grid.pdf

自分でオリジナルのグリッドを作る際の要点

はじめに線をひくのではありません。重要なのは本文の文字サイズと行間です。

まず、 紙面を構成する基本単位である、文字の大きさと行送り（あるいは行間）を決めます*1。
そして、その本文記事が紙面を埋め尽くすイメージをつくって、例えば、18文字×5行分で1ブロックとか、22文字×4行分で1ブロックなどとなるように、線を引くのです。

ブロックとブロックの間隔については、左右方向では2文字または3文字分、上下方向では「行間＋文字サイズ＋行間」分・・・ということになります。

言葉ではわかりにくいので、実際に、以下のPDFをご覧下さい。本文8.5pt、行送り15ptを前提として、線が引かれているのがわかると思います。

• 上のグリッドの使用例　Sample.pdf

で、よくある間違いが、上の投稿フォームを下敷きにして、「本文12pt、行送り18pt」の記事を割り付ける・・・という類のものです。あくまで「本文8.5pt、行送り15pt」となる記事でなければ、グリッドには合いません。グリッドが成立する根拠をふまえなければ、グリッドを使う意味がないのです。

くりかえします。
自分で独自のグリッドを作るときは、線を先に引くのではなく、
読者にとって読みやすい本文文字サイズと行間を先に決める・・・
はじめによみやすい本文の設計ありきということです。