slide by Tanaka Shusei

今日の目的「いい感じのデザインのポートフォリオをつくるために」

「いい感じ」のデザインとは？

いい感じ ... 「誰にとってのいい感じ」なのか？ → 採用担当にとっての「いい感じ」

採用担当が「いい感じ」と思うポートフォリオは ... • クリエイターに必要なスキルを持っていると分かる • 会社の方向性と一致しているかが分かる → スキルや一致度の基準は、他の候補者との比較の中で生まれる。

クリエイターに必要なスキル？ ... • コミュニケーション力 = 課題を発見するちから • 造形力 = 表象的なデザインの完成度 • 発想力 = 引き出しの多さ • 勤勉さ = 努力を継続する • 行動力 = 柔軟性

会社との一致度？ ... → クリエイティブの方向性や、クリエイターとしての考え方、キャリアビジョンなどを複合的に判断。特にクリエイターとしての考え方はよく見られる。

再度、「いい感じ」とは？ ... • 要するに、「ちゃんとデザインされている」ということ • 単に見た目がよければ「いい感じ」と思うわけではない • 受け手の採用担当が求めていないものを出してもしょうがない 8

ポートフォリオをいい感じにするために ... → 通常、会社への一致度よりもクリエイターのスキルが備わっているかを重視する比重が大きい。 → 今回は、「造形力」と「発想力」について見ていくことにする。 → その他のスキルや会社への一致度を表現する方法などはまた別の機会に。 9

ポートフォリオをつくる手順 ... 1. 作品整理 2. ライティング 3. アートディレクション 4. デザイン

作品整理① ... デザインは、ものごとを整理・整形し、目的を遂げるための考え方。では、ポートフォリオにおいて整理・整形するべき「ものごと」とは？ →「作者」と「作品」。どんな作品を載せるか、どのように切り取るのか。制作の肝。 11

作品整理②「作者について」... → 自己紹介。クリエイティブへの思いと、会話のきっかけとなる情報を盛り込むべし。自己紹介では個性を出せばいいと言うものではない。会話のきっかけとなるように、趣味の話や時事ネタなどを戦略的に盛り込んでいく必要がある。

作品整理③ 作品について載せる情報 ... • 作品ビジュアル • 作品タイトル • 作品解説 • 制作年月日 • 制作時間 • 制作スキル 13

ライティング① ... 適切にライティングされた作品解説や自己紹介は、 2 重の意味で便利。 ①自分の作品理解がすすみ作品をより相手のニーズに近いかたちで伝達できる ②相手視点のアピールができること 14

ライティング② 解説は 2W1H で書く ... Why( なぜ )、Who( 誰のために )、How( どのように ) の順番で書く。 → どんな課題を感じて制作を始めたのか、誰に、どう思ってほしくて、どんな風にビジュアライズしたか 15

アートディレクション① ... デザインの方向性を決める作業。 • ムードボードを制作 • デザインのレギュレーション ( 規則 ) をつくる

アートディレクション② ムードボード ... デザインの方向性を決めるために参考とするデザインのクリップ。Pinterest などを活用しよう。

デザイン ... → 今日の主題。ポイントは、 • 文字の扱い方を知る • 色を抑える • デザインの４原則を抑える • 原則を抑えた上で「はずす」 18

デザインに入るその前に → 今日使うツールは inDesign。inDesign はレイアウトに特化したソフト。複雑なデザインを求められないポートフォリオにおいては、Illustrator よりもはるかに制作向きなソフト。さっそく立ち上げてみよう。

inDesign の立ち上げ方 1. ソフトを立ち上げる 2. 新規ドキュメントの作成 (cmd(win は ctrl) + n) 3.「マージン・段組」を選択 ( 右図 1) 4.「マージン」の値をすべて 0 にして「OK」をク

リック ( 右図 2)

文字の扱い方を知る

文字の入力方法と下準備 1. ツールパネルから T マークの「横組み文字ツール」を選択 ( 右図参照 ) 2. ページ上でマウスをドラッグし、テキスト入力エリアを作成 3.「コピペ用本文使用テキスト 1」をコピペ

ベタ組み

ベタ・あのイーハトーヴォのすきとおった風。

カーニングを 0、もしくは和文等幅に設定したテキスト。ボディをベタっとくっつけて並べることに由来。基本は和文のみ。

ツメ組み

ツメ・あのイーハトーヴォのすきとおった風。

カーニングを自動 ( 自動が効かないときはオプティカル ) に設定したテキスト。文字のかたちに沿ってアキを調整する。和文、欧文に対して使う。これもツメ組み。

ジャスティフィケーションいわゆる箱組。段落パネルの左から 4 つめの揃えをクリックすると設定される。和文のみ。和欧混植の場合は少々アキができる。 24

ベタ組み・ツメ組みの設定方法 1

1. メニュー > 書式 > 文字をクリックして文字パネルを表示 ( すでに右側に表示されている場合もある・右図 1) 2. ベタ組みの場合 → 文字パネルのカーニングを「和文等幅」に設定 ( 右図 2) 3. ツメ組の場合 → 文字パネルのカーニングを「メトリクス」に設定 2・文字パネル

ジャスティフィケーションの設定方法 1. メニュー > 書式 > 段落をクリックして段落パネルを表示 ( 文字パネルの隣のタブにある場合も・右図 ) 2. 文字パネルのカーニングを「和文等幅」に設定 ( 右図 )

ベタ組み

分かりやすさだけでもなく、見た目だけでもない。私がデザインを制作する上で最も大切にしているのは、相手にとっての最適な「かたち」を提案することです。場合によっては見た目がフィーチャーされ、場合によってはわかりやすさを重視するかもしれません。最適なかたちは、相手への思いやりに私自身のセンスを足すことで生まれると考えます。ツメ組み

箱組レイアウトでは文字や画像などの諸要素を面として扱う。その際に、文字を最も面化することができるのは「箱組」。左も右もきっちり揃えることで面にする目的がある。箱組に対して、単純左揃えを「ラグ組」と言う。和文は箱組、欧文はラグ組が適している。箱組は調整が大変な組み方だが、inDesign の横組みグリッドツールを使えばとても簡単に実現できる。

箱組

ラグ組

レイアウトでは文字や画像などの諸要素を面として扱う。その際に、文字

レイアウトでは文字や画像などの諸要素を面として扱う。

を最も面化することができるのは「箱組」。左も右もきっちり揃えること

その際に、文字を最も面化することができるのは「箱組」。

で面にする目的がある。箱組に対して、単純左揃えを「ラグ組」と言う。

左も右もきっちり揃えることで面にする目的がある。箱組に対して、

和文は箱組、欧文はラグ組が適している。

単純左揃えを「ラグ組」と言う。和文は箱組、欧文はラグ組が適している。

Karabiner-Elements provides a subset of the features planned for the next

generation Karabiner for macOS Sierra. The current version of Karabiner

does not work with Sierra, so Karabiner-Elements was created to keep

Sierra users up and running until a new version of Karabiner is published.

横組みグリッドツールの設定方法 1. ツールパネルから赤枠の「横組みグリッドツール」を選択 ( 右図 ) 2. ページ上でマウスをドラッグし、テキスト入力エリアを作成 3.「コピペ用本文使用テキスト 1」をコピペ

注意！フォントサイズはコントロールパネルからいじらないと箱組が崩れます。（右図 2）

禁則処理と約物 ( やくもの ) 約物は句読点やかっこのこと。禁則処理は「行頭や文末に約物をおきませんよ！」という処理。強さと弱さがあって、強い禁則処理の場合は小文字が対象に加わる。オススメはもちろん「強い禁則処理」。

カーニング文字詰めのこと。不自然なアキ ( 文字と文字の間隔 ) がないように、自動でアキを調整する設定。メトリクスカーニングフォントのデザイナーが設定した字詰め。欧文は基本的にメトリクスで文字を組む。オプティカルカーニング InDesign が機械的にアキを調整する。あまり使わない。和文等幅和文をベタ組みするときに使う。 31

トラッキング文章全体の文字のアキを調整する。カーニングが一文字一文字にフォーカスしているのに対して、トラッキングはあくまで文全体。例えば、詰まり気味にしたい、とかアキ気味にしてゆったりさせたい、といった「文全体のテイスト」を決める作業。カーニングは文字と文字の整合性を保つためのものなので、されているのは大前提。トラッキングはデザイン。

組版特有のサイズ Q( 級 ) フォントサイズに対して使われる。1Q = 0.25mm。1 クオーターが由来。さきほどのジャスティフィケーション計算式で出てきた 0.25mm は 1Q のこと。視認性が保てる最小サイズは 7Q ほど、と言われている。個人的には 11Q くらいをおすすめする。 H( 歯 ) 行間などの長さを表す単位。1H=1Q=0.25mm。読みやすい行間は、文字サイズ× 1.8 倍、とされている。

デザイン４原則

近接関係する情報は近づけ、関係ない情報は遠ざける

引用元：http://webdesign2013.com/

整列要素の頭や末尾を揃え、秩序をもたせた配置をする

引用元：http://webdesign2013.com/

コントラスト見せたい情報に強弱をつける

反復実はすでに「反復」をみている

「カップ + 商品名 + 商品説明」というグループを 9 回使っている。人間が繰り返しを認識しやすくなるのは 3 回以上から。繰り返す以上は、幅の揃えを厳密に。そして、繰り返しがあるからこそ「外し」が活きる。

色の組み合わせ

まずは 4 色。それ以上は荒れる。 1.白系 2.黒系 3.メインカラー 4.アクセントカラー C0/M0/Y5/K0

C59/M50/Y50/K70

It's Sample It's Sample It's Sample

C0/M51/M16/K0

C0/M10/Y90/K0

色の選び方 Tips ① 色相環を使って、隣接色、補色、反対色をつかって配色する • 隣接色…選択した色の両隣の色 • 補色…選択した色の真反対の色 • 対照色…選択した色からみて 150°くらいのところ

色の選び方 Tips ② • 強い色と強い色をかけあわせるとハレーション ( 目がチカチカ ) が起きる • メインの色数は 4 つにしぼり、その４つで強弱をつけた色選びをするとベター ( 白系、黒系、メインカラー、アクセントカラー ) • 好きな色だけではなく、受け入れられている色を使う 42

CMYK と RGB 印刷で使われる CMYK とディスプレイで使われる RGB。印刷用につくったデザインをディスプレイに表示するとギラついたり、RGB でつくったデータを印刷すると色が濁ったりする。

デザインは、外してこそ活き活きするここまでは王道を見てきたが、実際のデザインでは王道はあくまでガイドライン。王道を基準として、いかにはずしていくか、そしてその外しがいかに成立するかが重要だ。

つまづきやすい操作説明

画像の挿入

Finder やエクスプローラからドラッグアンドドロップで挿入可能

色の変更

メニュー > ウインドウ > カラー > カラーで表示。パネル右上のオプションマークをクリックして CMYK を選択し、色を編集する

シェイプの入れ方

ツールパレットの「長方形ツール」をクリックして挿入

線の引き方

ツールパレットの「線ツール」をクリックして挿入

直線の引き方

shift を押しながら線を引くと直線になる

等倍拡縮のやり方

shift を押しながらオブジェクトを拡縮すると、「等倍拡縮」になる

マスターページ

共通のデザインを適用してくれるページ。個別のデザインは「ページ」に入れていく

ページ

個別のデザインを入れる箇所

マスターページの編

メニュー > ウィンドウ > ページをクリック ( ページパネル ) >「A マスター」とかかれ

集方法

た見開きページのアイコンをダブルクリック

ページの

ページパネルの下部、実ページが記載されている箇所をダブルクリック

編集方法ノンブルの

マスターページを編集状態に > 文字ツールからテキストエリアをつくる > テキストエ

入れ方

リアをクリックし、編集状態にする > メニュー → 書式 → 特殊文字の挿入 → マーカー → 現在のページ番号をクリックで完了

柱の入れ方

マスターページで入力したテキストは柱となる

フレーム inDesign に特有の概念として「フレーム」というものがある。たとえば画像はフレームの中に作られる。フレームの大きさを変えることで用意にトリミングができる。直感的にはフレームの大きさを変えたら画像も大きさが変わって欲しいところだが、そうはならない！画像の大きさを変えたい場合は cmd + shift を押しながらオブジェクトのハンドルを掴み、ドラッグする必要がある。フレームが選択されているときは青枠、中身の画像が選択されているときは茶枠となる。 48

整列パネル様々なオブジェクトを均等に並べたり、基準に対して揃えたりすることができる最強ツール。基準揃え 1. オブジェクトを複数選択 2. 選択状態のまま基準にしたいオブジェクトをクリック 3.「オブジェクトの整列」のうち、揃えたい方向を指すものをクリック等間隔揃えたくさんのオブジェクトを等間隔で並べてくれる。間隔も指定できるので、例えばくっつけたいときに便利。 49

グリッドレイアウト

グリッドのつくり方 (15 マスの場合 ) 1. メニュー > レイアウト > マージン・段組をクリック 2. マージンを天 20mm, 地 25mm, ノド 20mm, 小口 20mm に設定 3. メニュー > レイアウト > ガイドを作成をクリック 4. 行 5, 段 3,「ガイドの適用」で「マージン」にチェックを入れて OK をクリック

ワーク：実践レイアウトページに 3 列 5 行の 15 マスグリッドを作成し、 1. プロフィールページを作成してください。コピペ用テキスト 2 ～ 4 を使ってください。 2. お持ちいただいた作品をもとに、作品ページを作成してください。テキストは、コピペ用テキスト 5 ～ 8 を使ってください。

参考

引用元：デザインの教室手を動かして学ぶデザイントレーニング佐藤好彦著

お疲れ様でした。