デザインノウハウ【凝縮版】


# （追記）移設しました

追記したデザインは以下のリンクより飛べます

https://techblog.short-tips.info/html_css/0000design_.md



# 非日常を取り入れたい 

<small>シンメトリー</small> 

<img width="80%" src="https://camo.githubusercontent.com/13e55e1a1e06503c63ad78cf93f913e95cbfc970b837cc8cb7d8d738fe625d49/68747470733a2f2f74726176656c64696172792e746f6b796f2f77702d636f6e74656e742f75706c6f6164732f323031372f30352f32303137303531315f30392e6a7067"> 

<p>自然界のものは基本的に不規則に配置されているはずだが
そこを逆手に取り、左右対称にものを置くことで非日常を演出する。
シンメトリーは神聖な空気を出しやすい。</p>


# スタイリッシュ、躍動感が欲しい時 

<small>斜めスタイリッシュ</small> 

<img width="80%" src="https://liginc.co.jp/wp-content/uploads/2013/11/diagonal.jpg"> 

<p>細い線だと洗礼されたデザインに</p>


# バランスよく目立たせられる。 

<small>丸インパクト</small> 

<img width="80%" src="https://liginc.co.jp/wp-content/uploads/2014/02/ALEXARTS.jpeg"> 

<p>伝えたい情報がまとまっている時に有効</p>


# デザインを締める 

<small>ふと枠に入れてみる</small> 

<img width="80%" src="https://bop-com.co.jp/wp/wp-content/uploads/20210129_waku02.jpg">

<p>パーツの統制、物足りなさの解消、
余白の強制的な取得、さらにしめたければ黒に</p>


# オシャレに活発なスライドを演出したい時 

<small>三角散らす</small> 

<img width="80%" src="https://previews.123rf.com/images/hellena13/hellena131505/hellena13150500020/40270128-%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%AE%E6%8A%BD%E8%B1%A1%E7%9A%84%E3%81%AA%E4%B8%89%E8%A7%92%E5%BD%A2%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3.jpg"> 

<p>デザインに動きを出したい時</p>


# 文字だけで間をもたせたい時 

<small>ライン区切り</small> 

<img width="80%" src="https://img02.shop-pro.jp/PA01171/706/product/52565314.jpg?20121205201416"> 

<p>文字周りが寂しいと感じた時にオススメ！
一本引くだけで全体が引き締まる。</p>


# 文字でリズムを生み出したい時 

<small>文字ずらし</small> 
<img width="80%" src="https://i.pinimg.com/originals/27/db/50/27db509e18680e7bd9b91355a5555169.jpg">

 <p>文字の配列を崩すことで文字の一つ一つに個性がでる。
ポスターによって引き起こされる情動を表す擬音語を崩すのがオススメ。</p>


# じっくり見て欲しいとき 

<small>チラリズム</small> 

<img width="80%" src="https://flyer.blob.core.windows.net/img/ce903d783c9a4487a8d66dc94a8b7b15_10_l.jpg"> 

<p>隠れているものやチラッと見えるものは逆にもっと見たくなる性質を利用する。
デザインとしては高度。
見られない時は全く見られないので注意。</p>


# どうしても読んで欲しい文字がある時 

<small>トンネル効果</small> 

<img width="80%" src="https://www.toei-video.co.jp/images/special/inunaki-movie/kv_inunaki-movie.jpg"> <p>トンネルや道などは続きを見てしまうもの。
目線の先に文字を配置すれば読んでもらうことができる。</p>


# 目線を誘導したい 

<small>目線で目線を誘導しよう</small> 

<img width="80%" src="https://images-na.ssl-images-amazon.com/images/I/812yze26JAL.jpg"> <p>人は人が見ている先が気になる。
人物写真を用いるときは目線を利用する。
この図では目線の先のカメラ（さらにそのレンズが写すものをあえて出さずにいる）</p>


# 初心者が分かりやすい構成

 <small>簡単で初心者向け</small>
 
  <img width="80%" src="https://bluelog-note.com/wp-content/uploads/2019/06/81MFZSCziL.jpg"> <p>配置はグリッド形式で上は写真写真、下は説明の構図を繰り返す。
グリッドは知性と論理を感じさせることができる。
堅苦しい印象が少し出るが、教科書の雰囲気でよければよし。
逆に言えば配置を崩せば崩すほどアイデアベースの本に感じる。</p>


# 初心者が分かりやすいような文字サイズ 

<small>文字サイズを大きく</small> 

<img width="80%" src="https://prtimes.jp/i/7006/2837/resize/d7006-2837-348104-2.jpg"> 

<p>本を横に置いて遠くから見ても作業ができるようにという配慮。</p>


# 初心者が分かりやすい図形 

<small>大きな写真</small> 

<img width="80%" src="https://prtimes.jp/i/7006/2837/resize/d7006-2837-348104-2.jpg">

 <p>完成図をイメージしやすく。</p>


# ユーザーヘルプの配置 

<small>困った時は右下</small> 

<img width="80%" src="https://faq.nec-lavie.jp/qasearch/1007/doc/answer/image/014/014075/014075a.png"> <p>人間は困った時は右下を見る
正確には苦痛を感じた時、
悲しみを伴う時</p>


# 図形ごとの役割分担 

<small>形ではなく、白抜き黒抜きで表現せよ</small>

<img width="80%" src="https://jp.sharp/support/hotnews/wp/image/hn_p39.gif"> 

<p>通常は白地に紺、大事なところは紺地に白文字で情報の優先度の差別化を図れ！　図形の形で分けるのは品がないように見える（大事なところは丸、その他は四角と言う分け方は統一感が出ない）</p>


# 優しい印象を与えたい 

<small>角丸四角を使用</small> 

<img width="80%" src="https://www.o-design2011.com/cms-system/wp-content/uploads/2021/04/d1e22be69e8db9faebce2ba4ebed2857-864x576.jpg"> 

<p>角丸の半径は統一しないと雑に見えてしまうので注意</p>


# 枠線か色塗りか 

<small>枠線の使用はシンプルだが、文字数が多い時には向かない</small> 
<img width="80%" src="https://s-zenba.c.blog.ss-blog.jp/_images/blog/_27e/s-zenba/zu-033-1jpg.jpg"> <p>枠線は文字の情報として脳に入り込むが、色塗りの四角は図形の情報として脳に入り込む</p>


# 洗礼された専門知識 

<small>細い枠線で囲え</small> 

<img width="80%" src="https://www.webtan.cc/wp/wp-content/uploads/20170125.jpg"> <p>枠線は細ければ細いほど洗礼されたデザインに見える。</p>

# 優しさを表現する枠線 <small>太い線で囲え</small> 

<img width="80%" src="https://i.pinimg.com/originals/2e/47/90/2e47905c63f44bc5e0b2b2c3d9d5eafb.png"> 

<p>枠線は太ければ太いほど優しいデザインに魅せられる。</p>


# 矢印の使い方 

<small>絶対に目立たせてはいけない。細くて良い</small> 

<img width="80%" src="https://bdastyle.net/images/scatterplot/page1/step0-2.png"> 

<p>矢印の目立ちは情報の増加を意味する。色塗りか線か、三角形のみが有効。それ以外は使ってはいけない。</p>


# 新聞や教科書レベルで文字が多い時 

<small>明朝体</small>

 <img width="80%" src="http://e-stageone.org/wp-content/uploads/2018/03/440fc884b20c86c21301403404e229b0.jpg">
 
  <p>文章主体のプレゼンは明朝体が向いている。</p>


# 文章の周りの周りの余白の適切なサイズ 

<small>一文字分を余白にとれ</small> 

<img width="80%" src="https://shop.r10s.jp/book/cabinet/1695/9784802611695.jpg"> 

<p>必要な余白の量は文章の量によって変わるが基本は二文までなら一文字分。それ以上なら二文字分分開ける。</p>


# 写真への名称捕捉 

<small>パーツの説明は引き出し線が有利。</small> 

<img width="80%" src="https://image.jimcdn.com/app/cms/image/transf/none/path/se36d712ebb93fe73/image/i74ac926220a66fa7/version/1574987128/image.png"> 

<p>タイトル以外は文字列を外に出すべし。タイトルは写真内でも良い</p>


# 数字を綺麗に目立たせたい時

 <small>単位は小さく！</small> 
 
 <img width="80%" src="https://reikawatanabe.com/bdn/wp-content/uploads/2019/03/animation-3-2.png"> 

<p>大きい数字と小さな単位の組み合わせは
情報の受け手にすっきりとした印象を与える</p>