「センスがなくてもとりあえずそれっぽく仕上げる」デザインのコツ
•
2 likes•911 views
2017.09.22 エンジニアの方、必見！クリエイティブワークで欠かせないフォントとレイアウトの知識 https://www.softopia.or.jp/public/event/font20170922/ LT発表
Recommended
More Related Content
What's hot
Similar to 「センスがなくてもとりあえずそれっぽく仕上げる」デザインのコツ
Similar to 「センスがなくてもとりあえずそれっぽく仕上げる」デザインのコツ (20)
「センスがなくてもとりあえずそれっぽく仕上げる」デザインのコツ
- 2. デザイン教えて～！
- 3. • めんどくさい • 時間ない • 本読む気がしない • 難しくてわかんない • センスないから無理
- 4. • めんどくさい • 時間ない • 本読む気がしない • 難しくてわかんない • センスないから無理
- 5. 考えたくない、やりたくない、苦手意識……（わかる） でも実は、ちょっと知ってれば す～ぐできる！ センス ＜ 目的＋ルール 今日はルールの話を中心にします！
- 6. 1. デザインすることがあなたの目的ではない デザインは情報を伝えるための手段 2. デザイン≒情報の整理 それを壊さずレイアウトに反映させるためにルール（セオリー）がある 3. 伝わればそれが「正義」 伝わらないことだけが「不正解」で、デザインに「正解」はない 4. 理由なくデザインしない デザインは論理的に行うべき。理由があればルールも壊せる 5. 気持ちいいものは見たくなる ルールに沿えば「気持ちいい」、よく見てもらうことは「伝わる」の近道
- 7. • ので、恐れずやるべし！ • 慣れないうちは、ルールを守ればOK • 対象への「思いやり」を忘れずに！ • 当たり前だけど、やってるうちに慣れます • センスは経験で補う✌
- 8. ① 情報の整理 伝わらないことは「悪」：デザインの要は情報の整理 ② 情報の配置 基本ルール（セオリー）の実践：整理した情報を、ローコストで伝える ③ デザインの調整（資料配布） 神は細部に宿る：もっと「気持ちよくなる」ためのポイント
- 11. … いつ行われるのか … 誰が（主催）、誰に（ターゲット） … 目的の場所は … 何をするのか … 記載する媒体は何か … 最終的にどうなってほしいか … 何を伝えたいのか いつ 誰が／誰に どこで 何をする どのように 期待／結果 目的は
- 15. A) 余白 でグループ化する 情報の位置を近づける B) 類似 でグループ化する 色、形、大きさが同じだと、同じグループに見える C)閉合 でグループ化する 線やカッコで囲んだり、罫線で隔てるとグループに見える
- 16. A) 余白のとりかた
- 18. A) 補助線 でそろえる ガイドやグリッドでそろえる（PowerPoint, Keynote, illustrator） B) 配置／整理機能 でそろえる とりあえず左揃えで解決 C)自分の目で見て そろえる 配置機能を信じすぎず、後は自分の目で見て揃える
- 19. a. 要素 をそろえる 写真・イラスト・見出し・本文 …… 揃えられるものはすべて b. 文字の端 をそろえる 長い本文は「均等配置・最終行左揃え」（illustrator） c. 余白 をそろえる 同レベルの要素同士の余白（間隔）は同じにする
- 20. こんなかんじ
- 21. 内容を把握して揃える
- 22. 中央揃えより左揃え
- 24. 均等配置最終行左揃え
- 27. 自分の目を信じたり、囲んだり
- 28. 自分の目を信じたり、囲んだり
- 30. A) 大きさ／太さ でコントラストをつける 大きい／太いものは目に入る B) 写真・図版と文章 でコントラストをつける 写真や図版はパッと目に入る C)色 でコントラストをつける 色のついているところは目に入る D)密度 でコントラストをつける 密度が少ないところにある情報は目に入る
- 31. a. 写真・図版の大きさ b. 文字サイズ c. 書体の種類 d. 罫線などの装飾 e. 色 f. 配置 g. マージン（余白）
- 32. こんなかんじ
- 33. グループ化して、整列する
- 34. グループ化して、整列する
- 40. • 媒体のサイズや情報量で適切な余白は変わる 媒体 情報量が多いとき 情報量が少ないとき
- 42. • 1色だとつまんない、いっぱい使うとわかりにくい。 • 使うのは4色まで！ 1色、1役割。 「背景」「メインカラー」「本文文字」「協調」 • 彩度の高すぎる色は避けたほうが無難 ■■■ カチカする！ • 背景と文字を組み合わせるときは、明度に差をつける！ 背景の透明度を下げるのも◎
- 45. • 囲むと周囲とのコントラストがついて、強調や区別ができる。 使いすぎるとごちゃつくので、目立たせたいものや欄外に使う。 • 線か塗りでどちらか一つだけで囲むのがおすすめ！ 中の文字が多いときは、塗りがおすすめ！ • 角丸は窮屈になるのでまるまるしすぎないように（特にMS） 変形に気を付けること！
- 47. • 適切な図やイラストは1000文字の情報に匹敵する！ のでできれば１つは入れる • Google画像検索から勝手にとってきたりしない • イラストや図版にJPEGは× おすすめはサイズの大きなPNG、またはSVG • 拡大・縮小するときは、縦横の比率を変えない！ （画像の四隅をドラッグ操作 or Shift押しながら操作）
- 48. • ダ鳥獣ギ画 http://www.chojugiga.com/ • かわいい • ベクター画像なので拡大 縮小に強い • 色付き・色なしも選べる
- 49. • いらすとや http://www.irasutoya.com/ • かわいい • ニッチな素材もたくさん あるし背景が透過なので 組み合わせることもでき る（PNG）
- 50. • ICOOON MONO http://icooon-mono.com/ • アプリやWebデザインに も使える • ベクター（SVG）なので 汎用的。これでアイコン 作らないでいい！
- 51. • 媒体・情報の種類ごとに適切なサイズや詰め方がある！ • 画面で見るとの実際のサイズは違うので、印刷して確認する！ • プレゼン資料 … 強調 18～32pt 重要度低い 18pt以下 • チラシ … 本文 7～11px 見出し 12px～ こっそり 5~6px • 名刺 … 5px~（ルビを除く）
- 52. • 奥が深い、モリサワさん教えてください！ • メトリクス情報がある場合「プロポーショナルメトリクス」？ 種類 カーニング 文字組 禁則処理
- 53. • 、。（句読点）とか、「」（カッコ）とか・（中黒）とか • 約物の前後に不自然な間が空かないように調整する • ：や・や（）は半角とか全角に注意する（統一する） • 文字のベースラインからずれたりするので調整する
- 55. • 単純化 • 嘘グラフは作らない • 資料が間に合わなかったので、各自調べてください！
- 56. • 媒体は？（フライヤー、ポスター、スライド、Web…） • ターゲットは？（女性、男性、子供、ファミリー…） • シチュエーションは？（配布場所、季節、時間…） ↓ ふさわしい記号（イメージ）がある！
- 61. おまけ
- 64. • メイリオ （Windows：特に画面） • 游ゴシック（Windows(10～)/Mac） • （Macのみ） • Segoe UI（Windows：シーゴ・日本語と組み合わせるとき） • Arial（Windows：アリアル・Helveticaの類似品） • Helvetica Neue（Mac：ヘルベチカノイエ）
- 65. • • • 源柔ゴシック なんとウェイトが7種類！ 商法も無料・オープンソース・Webフォントも公開されてる！ （Google Font : Noto Sans Japanese）最高！