53.
Capella Font Family
RobotoとIPAゴシックを合成してつくりました。
可読性に優れ、まじめでしっかりとした印象を与えることができます。
Spica Neue Font Family
Open Sans、源真ゴシック、およびDesiete角ゴシックを合成してつくりました。
読みやすく、モダンで美しいフォルムをしています。
71.
文字色にはグレーを使います
白い背景の上に、完全な黒をのせると、コントラストが強すぎます。
少しグレーにすることで強さを柔らげ、とても読みやすくなります。
また、メインとサブで色を分けることにより、情報の優先度付けができるようになります。
63, 63, 63
Dark Gray
89, 89, 89
Light Gray
MAIN TEXT COLOR SUb TEXT COLOR
明るいグレー
暗いグレー
104.
BEFORE AFTER
センター揃えだとみえなかった線が、左揃えにするとみえるようになります。
整列とは、「みえない線をみえるようにする」作業のことです。
みえない線を、みえるようにする
柿崎潤一郎
クリエイティブディレクター
thepopp.com
The Power of PowerPoint
柿崎潤一郎
クリエイティブディレクター
thepopp.com
The Power of PowerPoint
105.
BEFORE AFTER
左の画像は線が一本みえていますが、
大きさをそろえれば線が2本に増えることがわかります。
図形や画像は、位置も大きさもそろえる
113.
BEFORE AFTER
関連するものは近づけ、そうでないものは遠ざける。
適切な距離をとることで、情報は驚くほど整理されます。
距離は、関連性をあらわす
柿崎潤一郎
クリエイティブディレクター
thepopp.com
The Power of PowerPoint
柿崎潤一郎
クリエイティブディレクター
thepopp.com
The Power of PowerPoint
114.
BEFORE AFTER
左の例では、キャプションが上と下どちらのものなのかがわかりません。
距離をはっきりさせることが、わかりやすさにつながるのです。
人は、近いものを勝手にまとめて考える
ライム色 抹茶色
ライム色 抹茶色
116.
Vel mnesarchum consetetur
eu. Eos phaedrum
indoctum cu, ei vix tibique
interesset definitionem.
Iusto nostrud deterruisset
ne usu, per omnis mutat
argumentum ad. Vix
summo liberavisse
signiferumque ea, quas
efficiendi his ne.
Sit fuisset gloriatur cu, sint
omnium pertinax ei quo,
cum dolore sanctus
omnesque ne. Populo
scripserit cu eos, no mea
nobis soleat ubique.
Lorem ipsum dolor sit amet,
in est habeo nemore delenit,
ad duo amet ubique
aliquam. Nec no nisl
denique interesset.
「デザインセンス」などいらない、「整列」と「近接」
117.
Vel mnesarchum consetetur
eu. Eos phaedrum
indoctum cu, ei vix tibique
interesset definitionem.
Iusto nostrud deterruisset
ne usu, per omnis mutat
argumentum ad. Vix
summo liberavisse
signiferumque ea, quas
efficiendi his ne.
Sit fuisset gloriatur cu, sint
omnium pertinax ei quo,
cum dolore sanctus
omnesque ne. Populo
scripserit cu eos, no mea
nobis soleat ubique.
Lorem ipsum dolor sit amet,
in est habeo nemore delenit,
ad duo amet ubique
aliquam. Nec no nisl
denique interesset.
そろえられるところはすべてそろえ、
関連するものはそばに、そうでないものは距離をとります。
離す
離す
離す 離す
147.
BEFORE AFTER
画像の場合も、テキストと同じで、距離をとります。
画像の周りには、太い枠があると思って配置してください。
画像とテキストによる例
Lorem ipsum dolor sit
amet, eos ea paulo
mucius omittam. Nec ut
habeo theophrastus.
In eum inani mnesarchum
consequuntur, illum
iuvaret ex mei. Has cibo
harum at.
Lorem ipsum dolor sit
amet, eos ea paulo
mucius omittam. Nec ut
habeo theophrastus.
In eum inani mnesarchum
consequuntur, illum
iuvaret ex mei. Has cibo
harum at.
148.
BEFORE AFTER
画像の場合も、テキストと同じで、距離をとります。
画像の周りには、太い枠があると思って配置してください。
画像とテキストによる例
Lorem ipsum dolor sit
amet, eos ea paulo
mucius omittam. Nec ut
habeo theophrastus.
In eum inani mnesarchum
consequuntur, illum
iuvaret ex mei. Has cibo
harum at.
Lorem ipsum dolor sit
amet, eos ea paulo
mucius omittam. Nec ut
habeo theophrastus.
In eum inani mnesarchum
consequuntur, illum
iuvaret ex mei. Has cibo
harum at.
画像の周りには、
これくらいの太い枠があると
想定する。
枠の大きさ分、テキストも離す。
ただし、「近接」を維持するため、
離しすぎないように。
149.
BEFORE AFTER
テキストと周りの枠や図形との間が詰まっていると、煩雑な印象になります。
文字を少し小さくしてでも、余白を設けるようにしましょう。
枠内に配置するテキストの例
日本語でよく使われるフォントに
は限りがあります。そのほとんどは
有料で、おいそれと手が出せるほ
ど安くはありませんが、フリーでも
いくつかは手に入れることができ
ます。
日本語でよく使われるフォントには限
りがあります。そのほとんどは有料で、
おいそれと手が出せるほど安くはあり
ませんが、フリーでもいくつかは手に
入れることができます。
読みやすいフォント 読みやすいフォント
150.
BEFORE AFTER
テキストと周りの枠や図形との間が詰まっていると、煩雑な印象になります。
文字を少し小さくしてでも、余白を設けるようにしましょう。
枠内に配置するテキストの例
日本語でよく使われるフォントに
は限りがあります。そのほとんどは
有料で、おいそれと手が出せるほ
ど安くはありませんが、フリーでも
いくつかは手に入れることができ
ます。
日本語でよく使われるフォントには限
りがあります。そのほとんどは有料で、
おいそれと手が出せるほど安くはあり
ませんが、フリーでもいくつかは手に
入れることができます。
最も明るい恒星 最も明るい恒星
周囲に1文字分くらいの
余白を確保する。
Lorem ipsum dolor sit
amet, eos ea paulo
mucius omittam. Nec ut
habeo theophrastus.
高さがあまりない場合、
左右の余白を多めにとると
きれいにみえる。
151.
BEFORE AFTER
上下、または左右で余白を対象にすると、バランスが落ち着きます。
余白は対称性を意識してみてください。
余白は対称性を意識する
九蓮宝燈
九蓮宝燈
152.
BEFORE AFTER
「Before」の上ぞろえでも悪くはありませんが、
上下中央ぞろえにしたほうが、対称性がでてバランスがよくなりますね。
余白は対称性を意識する
Lorem ipsum dolor sit
amet, eos ea paulo
mucius omittam. Nec ut
habeo theophrastus.
In eum inani mnesarchum
consequuntur, illum
iuvaret ex mei. Has cibo
harum at.
Lorem ipsum dolor sit
amet, eos ea paulo
mucius omittam. Nec ut
habeo theophrastus.
In eum inani mnesarchum
consequuntur, illum
iuvaret ex mei. Has cibo
harum at.
157.
SAMPLE
はじめのスライド
Lorem ipsum dolor sit amet, ius omittam
recusabo dissentiet te, nam te pericula
quaerendum, quo elitr fabellas at. Tractatos
referrentur his at, ne nonumy iriure
consequat pro, et duis autem tractatos est.
An habeo ridens detraxit usu, sed ad adhuc
honestatis, sed ad utroque persequeris.
Nulla appareat constituam eos ut, modo
oratio pericula no nec. Ea facer ignota sed,
mei iusto tollit eleifend id.
158.
SAMPLE
つぎのスライド
Lorem ipsum dolor sit amet, ius omittam recusabo
dissentiet te, nam te pericula quaerendum, quo elitr
fabellas at. Tractatos referrentur his at, ne nonumy
iriure consequat pro, et duis autem tractatos est.
An habeo ridens detraxit usu, sed ad adhuc
honestatis, sed ad utroque persequeris. Nulla
appareat constituam eos ut, modo oratio pericula
no nec. Ea facer ignota sed, mei iusto tollit eleifend
id.
166.
1
2
フォントサイズとウェイト について理解する
改行、段落、行間 について理解する
Understand font size and Weight
Understand Line break, Paragraph and Line height
3 テキストの 強調方法 について理解する
Understand how to emphasize texts