---
title: デザイン爆速入門
tags:  #デザイン  
author: [crashRT](https://www.docswell.com/user/crashRT)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/LJ1Y4WN4EG.jpg?width=480
description: 開催時期：2024 年 4 月  新入生に向けて、スライドなどのデザインをする上で気をつけるべきことなどについて話しました。   https://memo.crashrt.work/docs/slides/design2024
published: April 13, 26
canonical: https://www.docswell.com/s/crashRT/KJW4YX-design2024
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/LJ1Y4WN4EG.jpg)

デザイン爆速入門
ダサいスライドを直そう


# Page. 2

![Page Image](https://bcdn.docswell.com/page/GJWGX64Z72.jpg)

今日の予定
1.
2.
部員の自己紹介
デザイン爆速入門
3. ハンズオン 「ダサいスライドを直してみよう」


# Page. 3

![Page Image](https://bcdn.docswell.com/page/4EZL6Y2L73.jpg)

デザイン爆速入門
ダサいデザインを回避するには？


# Page. 4

![Page Image](https://bcdn.docswell.com/page/Y76W2DVM7V.jpg)

今日話すこと
• デザインには理論が存在する！
• センスが皆無でもダサいデザインを回避することは可能！
• ダサいデザインを回避するための理論をいくつか軽く紹介します
• レイアウトについて
• 配色について


# Page. 5

![Page Image](https://bcdn.docswell.com/page/G75M23DQ74.jpg)

デザインの基本
• デザインの目的は 伝えたいことをちゃんと伝えること
• 必要のない余分なものは省こう
• 伝えたいことをまず整理しよう


# Page. 6

![Page Image](https://bcdn.docswell.com/page/9J294Z8WER.jpg)

レイアウト


# Page. 7

![Page Image](https://bcdn.docswell.com/page/DEY4MR69JM.jpg)

整列 ― まずはとにかく揃えよう
• 揃えることはレイアウトの基本
• 整った印象になる
• 視線の迷子を軽減できる
• 余白も揃ってるとスッキリ！


# Page. 8

![Page Image](https://bcdn.docswell.com/page/VJNYWDZD78.jpg)

近接 ― 似ているものは近づけよう
• 要素の関係を視覚的に伝える
• 内容が近いものは距離も近くに
• グループ間の余白は少し大きめに


# Page. 9

![Page Image](https://bcdn.docswell.com/page/YE9PXGZ8J3.jpg)

反復 ― 一定の規則の繰り返しで統一感
• レイアウト・配色などを繰り返す
• 全体に統一感が出る
• 情報が整理されて見やすくなる
資料はPandAにあります
課題はPandAで提出
DO GORILLA!
毎週忘れるな！
DO GORILLA!
毎週忘れるな！
PandAに資料があります
課題はPandAで提出


# Page. 10

![Page Image](https://bcdn.docswell.com/page/GE8D2V1ZED.jpg)

対比 ― コントラストで強調しよう
• 大きいものは目立つ！
• 一つだけ規則から外れている と目立つ！
• 目立たせたいものをうまく目立たせよう！
C
D
A
B


# Page. 11

![Page Image](https://bcdn.docswell.com/page/LELM25Q17R.jpg)

発展：余白を使いこなそう
• 余白はデザインの重要な要素
• 内容を分けたり強調したりもできる
• 余白は安心感を与える！
科目名
点数
評価
デザイン入門
87
A
ゲーム作成基礎
80
B
• 内容を区切る境界線は最低限にしよう
• 参考：『けっきょく、よはく。』
科 目名
点数
評価
ゲーム作成基礎
80
B
87
A
デザイン入門


# Page. 12

![Page Image](https://bcdn.docswell.com/page/4JMY8315JW.jpg)

おまけ：字面の白さ
京大マイコンクラブは京都大学を中心に活動している
京大マイコンクラブは京都大学を中心に活動してい
る京都大学全学公認のコンピュータサークルです。
京都大学全学公認のコンピュータサークルです。
KMCはKyoto university Microcomputer Clubの略です。
KMCはKyoto university Microcomputer Clubの略です。
マイコンという言葉は今では死語ですが、1977年の設
マイコンという言葉は今では死語ですが、1977年の
立以来その名を引き継いで現在に至ります。
設立以来その名を引き継いで現在に至ります。
参考：『理科系の作文技術』


# Page. 13

![Page Image](https://bcdn.docswell.com/page/PJR95QLZ79.jpg)

配色


# Page. 14

![Page Image](https://bcdn.docswell.com/page/PEXQK5W1JX.jpg)

色の要素について
• 色は色相・明度・彩度の3つに分解できる
• 色相（Hue）：何色か？
• 彩度（Saturation）：鮮やかさ
• 明度（Value）：明るさ
• 輝度（Lightness）も似たやつ
• 彩度と明度を合わせてトーンと呼ぶことも
色相
明度
彩度
CLIP STUDIO PAINTのカラーホイール


# Page. 15

![Page Image](https://bcdn.docswell.com/page/3EK956VMED.jpg)

失敗しない色の選び方
• 色相かトーンを揃えよう！
• 原色（彩度と明度MAXの色）を避けよう！
• 使う色の数は少なめで
• 間に白とか黒を挟むとスッキリする！
• 特にトーンを揃えて選ぶ場合
• 配色ツールを活用しよう！


# Page. 16

![Page Image](https://bcdn.docswell.com/page/L73WK6M275.jpg)

配色お助けサイト
• https://www.colordic.org/colorscheme
• メインの色を選ぶと定番の配色が表示される。使いやすい
• https://colorhunt.co/
• いい感じのカラーパレットが並んでる
• https://webgradients.com/
• いい感じのグラデーション使いたい人はこれを参考に


# Page. 17

![Page Image](https://bcdn.docswell.com/page/87DK3V66JG.jpg)

最後に


# Page. 18

![Page Image](https://bcdn.docswell.com/page/VJPK4RZZE8.jpg)

今日のイベントを通して
• デザインにも理論的な部分が結構あることが伝わったはず？
• 今後スライドなどのデザインをするときに思い出してもらえると嬉しい
• 鑑賞会で見た他の人のデザインの中で、うまい！と思った部分は積極的に
取り入れて行くと良いと思います
• いろんな人のデザインを少しずつ取り入れていこう！


# Page. 19

![Page Image](https://bcdn.docswell.com/page/2EVVXRWMEQ.jpg)

デザインに興味を持ってくれた人へ
• 今日の内容は入門としてよくある内容をめっちゃ短くしたもの
• いろんな本があるので興味のある人は是非！
• スライドの最後に参考にした本を載せて置くので参考にしてみてくだ
さい
• デザイン用のソフトとかもあります
• 例：Adobe Illustrator


# Page. 20

![Page Image](https://bcdn.docswell.com/page/57GLVMDXEL.jpg)

デザインをやってみたくなった人へ
• KMCにはデザインをする機会がたくさんあります！
• 是非入部していろんなものをデザインしましょう！
• 自分がデザインしたものが印刷されて形になるのは楽しいよ！
• KMCでデザインできるものの例：
• 部誌の表紙、新勧ビラ、サークル大百科、コミケ関連、KMCのサイト、…


# Page. 21

![Page Image](https://bcdn.docswell.com/page/4EQY6R15JP.jpg)

参考資料
• 『プロとして恥ずかしくない 新デザインの原則』
• 『けっきょく、よはく』
• 『なるほどデザイン』
• 『理科系のための作文技術』