バナーデザイン入門
UIデザインの基本の進め方
バナーデザイン入門
バナー・サムネイルのデザインを通して整ったグラフィックをデザインするスキルを習得します
金額
4,378~
/月
完了目安
1~2
ヶ月
メンバーシップについてはこちら

コースの目的

サムネイルをデザインして基本原則を身につけよう

デザイングラフィックの基本原則をバナー・サムネイルデザインを通して習得するミニコースです。
原則を知るだけではなく、実際にプロが作成するプロセスを見ながら、自分で手を動かせるので実践的にリアルを学ぶことができます。

コースの詳細へ

コース内容
デザインをはじめよう
サムネイルをデザインして基本原則を身につけよう
SECTION
整うグラフィックのつくり方をマスターしよう

コースでは知識だけじゃなく手を動かしながら実践的なテクニックを身につけます

っっs
カテゴリ
整うグラフィックのつくり方をマスターしよう
無料
メンバー限定
SECTION
【新コース紹介】バナーデザイン入門コース!プロの進め方が全部見れる、デザイン基本原則を作りながら習得するグラフィックチュートリアル

デザインの基本原則を手を動かしながら学ぶシリーズを始めます!
理論とか知っても実際、実物見ないとわかんなくない?ということで作りながら伝える内容を作ってみました!

デザイン素材

【✨ スライドのFigma】
https://www.figma.com/file/ZXuVoD1hCg9xbPJ0lzaXoA/2024-%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84?type=design&node-id=198%3A19470&mode=design&t=3AjsvVZZ7E49frcy-1

目次

  • 00:00 良い見た目つくりたいよね
  • 00:28 コース作成理由
  • 03:11 バナーデザインコースについて
  • 10:20 グラフィック力の重要性
  • 12:35 グラフィック力4つの鍛え方
  • 17:50 次の動画
20:19
カテゴリ
【新コース紹介】バナーデザイン入門コース!プロの進め方が全部見れる、デザイン基本原則を作りながら習得するグラフィックチュートリアル
無料
メンバー限定
SECTION
バナーデザイン基本の流れ - デザイン原則と審美眼を身につける7ステップ

動画のドキュメントはこちら

Figmaでざっくり作った資料をもとに話していますー!
お手元で見たい方はこちらです↓

https://www.figma.com/proto/zZ1t3QmLxspRPM8KQPcSb7/GraphicDesignFlow?type=design&node-id=94-11363&t=lsC5kzivPOgx4LwC-1&scaling=min-zoom&page-id=80%3A3676&starting-point-node-id=94%3A11363&mode=design

目次

  • 00:00 良い見た目つくりたいよね
  • 00:28 コース作成理由
  • 03:11 バナーデザインコースについて
  • 10:20 グラフィック力の重要性
  • 12:35 グラフィック力4つの鍛え方
  • 17:50 次の動画
20:19
カテゴリ
バナーデザイン基本の流れ - デザイン原則と審美眼を身につける7ステップ
無料
メンバー限定
SECTION
【基本】デザイン上達の秘訣、「構造分解」のやり方をシェアします

目次

  • 00:00 イントロ
  • 01:55「構造分解」とは?メリット
  • 04:14 3つの要素で分解しよう
  • 07:56 要素1 レイアウト
  • 14:01 要素2 コンテンツ
  • 20:16 要素3 装飾
  • 23:59 構造使って行こ!
28:49
カテゴリ
【基本】デザイン上達の秘訣、「構造分解」のやり方をシェアします
無料
メンバー限定
SECTION
まずは『ブログサムネイル』で基本を実践

一緒にデザインして、知識じゃわからない実践的なテクニックと使い方、デザインする流れを身につけよう

っっs
カテゴリ
まずは『ブログサムネイル』で基本を実践
無料
メンバー限定
SECTION
#1 綺麗なバナーに必須の基本原則10個を紹介!ブログのサムネイルをデザインしていこう

デザイン素材

【✨ Figma】
https://www.figma.com/file/ZXuVoD1hCg9xbPJ0lzaXoA/2024-%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84?type=design&node-id=116%3A4390&mode=design&t=EZ4OpsCXDU7zef7T-1

14:28
カテゴリ
#1 綺麗なバナーに必須の基本原則10個を紹介!ブログのサムネイルをデザインしていこう
無料
メンバー限定
SECTION
#2 レイアウト:崩れないデザインの土台を作る方法をマスターしよう

デザイン素材

【✨ Figma】
https://www.figma.com/file/ZXuVoD1hCg9xbPJ0lzaXoA/2024-%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84?type=design&node-id=209%3A45895&mode=design&t=EZ4OpsCXDU7zef7T-1

33:26
カテゴリ
#2 レイアウト:崩れないデザインの土台を作る方法をマスターしよう
無料
メンバー限定
SECTION
#4 配色&装飾:伝わる雰囲気をつくるグラフィックのデザインテクニック

デザイン素材

【✨ Figma】

https://www.figma.com/file/ZXuVoD1hCg9xbPJ0lzaXoA/2024-%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84?type=design&node-id=209%3A54278&mode=design&t=EZ4OpsCXDU7zef7T-1

28:56
カテゴリ
#4 配色&装飾:伝わる雰囲気をつくるグラフィックのデザインテクニック
無料
メンバー限定
SECTION
#3 文字:伝える文言でデザインは劇的に変わります。レイアウトの質を上げる優先度の付け方

デザイン素材

【✨ データ】

https://www.figma.com/file/ZXuVoD1hCg9xbPJ0lzaXoA/2024-%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84?type=design&node-id=209%3A48444&mode=design&t=EZ4OpsCXDU7zef7T-1

44:03
カテゴリ
#3 文字:伝える文言でデザインは劇的に変わります。レイアウトの質を上げる優先度の付け方
無料
メンバー限定
SECTION
【センスは知識から】デザイン前に参考デザインを集めるの上達を加速する3つの理由

スライドはこちら!

https://www.figma.com/proto/zZ1t3QmLxspRPM8KQPcSb7/GraphicDesignFlow?type=design&node-id=18-318&t=GJj4fydk0VjUg0Ry-1&scaling=contain&page-id=0%3A1&starting-point-node-id=4%3A3462&show-proto-sidebar=1&mode=design

✨ 目次

  • 00:00 参考集める意味とやるイメージをシェアします
  • 01:14 『基準』を持とう
  • 04:07 ①クオリティの指標にできる
  • 05:37 ②ふつうを知れる
  • 09:08 ③表現を盗みやすい
  • 15:54 どれぐらいの量を集めたらいいの?
21:18
カテゴリ
【センスは知識から】デザイン前に参考デザインを集めるの上達を加速する3つの理由
無料
メンバー限定
SECTION
デザイン前にやるべき参考デザイン集め - ふつうを集めよう
20:22
カテゴリ
デザイン前にやるべき参考デザイン集め - ふつうを集めよう
無料
メンバー限定
SECTION
”イケてる”、”出したい雰囲気”のデザインを集めて、クオリティUP

動画の目次

  • イントロ 00:00
  • テイストの参考を集める理由 00:59
  • 集め方/使い方① 06:20
  • 集め方/使い方② 13:20
  • 日頃からイケてるを集めよう 21:17
23:25
カテゴリ
”イケてる”、”出したい雰囲気”のデザインを集めて、クオリティUP
無料
メンバー限定
SECTION
集めたデザインでアイデアを出しやすくする分類術

動画の目次

  • イントロ 00:00
  • 解説の順番 00:10
  • 分類する理由 01:09
  • ①目指す雰囲気で分類・比較 05:40
  • ② 盗みたい表現ごとに分類 10:43

13:37
カテゴリ
集めたデザインでアイデアを出しやすくする分類術
無料
メンバー限定
SECTION
デザイン前に”目的”を整理する理由

動画の目次

  • イントロ 00:00
  • 目的を絞るメリット00:33
  • 目的が明確だと変わるデザイン 05:10
  • 目的を絞るコツ 10:31
14:38
カテゴリ
デザイン前に”目的”を整理する理由
無料
メンバー限定
SECTION
デザインする前にラフでデザインアイデアを発散しよう

スライドはこちら!

アクセスはこちらから
https://www.figma.com/proto/zZ1t3QmLxspRPM8KQPcSb7/GraphicDesignFlow?node-id=620-26024&t=8MftqHvAwLQLzAmZ-1&scaling=min-zoom&page-id=619%3A16386&starting-point-node-id=620%3A26024

✨ 目次

  • 00:00 イントロ
  • 00:18 解説する3つのこと
  • 01:17 いきなりデザインしない理由
  • 05:06 アイデア出しのコツ
  • 07:30 こうやる!ラフアイデアの作り方
  • 22:07 まとめと次の動画
23:21
カテゴリ
デザインする前にラフでデザインアイデアを発散しよう
無料
メンバー限定
SECTION
【全体像】脱デザイン初心者の『デザイン成功の黄金13TIPS』

スライドはこちら!

アクセスはこちら
https://www.figma.com/proto/zZ1t3QmLxspRPM8KQPcSb7/GraphicDesignFlow?type=design&node-id=18-318&t=GJj4fydk0VjUg0Ry-1&scaling=contain&page-id=0%3A1&starting-point-node-id=4%3A3462&show-proto-sidebar=1&mode=design

✨ 目次

  • 00:00 イントロ
  • 00:14 脱デザイン初心者13TIPS
  • 01:18 まずは平均を目指そう
  • 06:47 TIPSの全体像

08:17
カテゴリ
【全体像】脱デザイン初心者の『デザイン成功の黄金13TIPS』
無料
メンバー限定
SECTION
デザイン成功の黄金TIPS : 進め方・配置の7テクニック

元のYoutubeはこちら

✨ ビジュアル基礎を身に付けたいなら】

『BONO(ボノ)』というサービスで『グラフィックデザイン入門』のコースを作成しています!
→ こちらから! https://bit.ly/3yXODmA

※BONOに他にもUIデザインやUXデザインのスキルを身につけられるコースが揃っています

スライドはこちら!

アクセスはこちらhttps://www.figma.com/file/ZXuVoD1hCg9xbPJ0lzaXoA/2024-%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84?type=design&node-id=209%3A59841&mode=design&t=3AjsvVZZ7E49frcy-1

✨ 目次

  • 00:00 イントロ
  • 05:56 ▼デザインTIPS:前提編
  • 07:07 前提を意識する理由
  • 11:20 ふつうのパターンを作る
  • 17:58 白黒ではじめる
  • 9:41 ダミー情報を使わない
  • 23:29 ▼レイアウトのTIPS
  • 28:02 左揃え=安定
  • 35:59 余白は均等
  • 45:49 構造→表現
  • 51:54 幾何学を意識

1:06:23
カテゴリ
デザイン成功の黄金TIPS : 進め方・配置の7テクニック
無料
メンバー限定
SECTION
バナーデザイン成功の黄金TIPS : 伝わる”余白”の3TIPS

スライドはこちら!

アクセスはこちら
https://www.figma.com/proto/zZ1t3QmLxspRPM8KQPcSb7/GraphicDesignFlow?type=design&node-id=18-318&t=GJj4fydk0VjUg0Ry-1&scaling=contain&page-id=0%3A1&starting-point-node-id=4%3A3462&show-proto-sidebar=1&mode=design

✨ 目次

  • 00:00 イントロ
  • 00:22 3つのTIPSと余白の重要性
  • 04:34 等倍でサイズを決める
  • 12:54 同じ余白で統一してみる
  • 17:27 比率を意識する

29:05
カテゴリ
バナーデザイン成功の黄金TIPS : 伝わる”余白”の3TIPS
無料
メンバー限定
SECTION
【実践】基本原則でパターンをデザインしてみる

どのレイアウトが伝わるか?を考える際に必ずパターンを作ります。量も増やしてグラフィックスキルを伸ばそう💪

っっs
カテゴリ
【実践】基本原則でパターンをデザインしてみる
無料
メンバー限定
SECTION
伝わるレイアウト:パターンをデザインして伝わり方の変化を学ぼう

デザイン素材

【✨ Figma】
https://www.figma.com/file/ZXuVoD1hCg9xbPJ0lzaXoA/2024-%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84?type=design&node-id=350%3A23332&mode=design&t=EZ4OpsCXDU7zef7T-1

13:37
カテゴリ
伝わるレイアウト:パターンをデザインして伝わり方の変化を学ぼう
無料
メンバー限定
SECTION
【パターン1】レイアウトテクを使ってパターンをデザインしよう

デザイン素材

【✨ Figma】
https://www.figma.com/file/E9BWRjF5ZHJcOWS9cePEpe/%E3%80%90ForBONO%E3%80%912024-%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84?type=design&node-id=1%3A1625&mode=design&t=EMScrosQLgz567Cg-1

39:16
カテゴリ
【パターン1】レイアウトテクを使ってパターンをデザインしよう
無料
メンバー限定
SECTION
3つのNG事例で学ぶ配色のセオリー

目次

  • 3つのNG配色 00:24
  • その色、雰囲気と合ってない 01:03
  • 配色×コントラストNG 14:33
  • 色の組み合わせNG例 24:15
  • 間違った色使いにならないコツ 29:35

Figmaファイル

https://www.figma.com/design/zZ1t3QmLxspRPM8KQPcSb7/GraphicDesignFlow?node-id=903-4308&t=XY6s0mAeDPj0jyOn-1

32:52
カテゴリ
3つのNG事例で学ぶ配色のセオリー
無料
メンバー限定
ABOUT
コース詳細

デザイングラフィックの基本原則をバナー・サムネイルデザインを通して習得するミニコースです。
原則を知るだけではなく、実際にプロが作成するプロセスを見ながら、自分で手を動かせるので実践的にリアルを学ぶことができます。