バナーデザイン入門 | BONO - UIとUXデザインのコミュニティ

UIビジュアル

バナーデザイン入門

バナー・サムネイルのデザインを通して整ったグラフィックをデザインするスキルを習得します

金額

￥

4,378~

/月

完了目安

1~2

ヶ月

コンテンツへ

プランを見る

メンバーシップについてはこちら

コースの目的

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

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

コースの詳細へ

学びをアウトプットしてデザイン面談しよう🔮

シリーズを7割以上終了したアウトプットをフォームから投稿すると、30分カイクンとデザイン面談ができます。

詳細とフォームへ

コース内容

デザインをはじめよう

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

SECTION

整うグラフィックのつくり方をマスターしよう

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

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

‍

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

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

‍

デザイン素材

【✨ 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

‍

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

‍

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

‍

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

‍

SECTION

STEP1 参考を集める ※制作中

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 どれぐらいの量を集めたらいいの？

SECTION

デザイン前にやるべき参考デザイン集め - ふつうを集めよう

SECTION

STEP2-1 レイアウトのアイデア ※制作予定

SECTION

STEP2-2 基本原則でデザイン ※制作予定

SECTION

STEP3 自分で評価する ※制作予定

SECTION

【実践】基本原則でパターンをデザインしてみる

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

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

‍

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

‍

SECTION

【パターン2】文字被せレイアウト：新しいレイアウトで伝わり方の違いを体験しよう

‍

デザイン素材

【✨ 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%3A1853&mode=design&t=e5rvXC7mov3mNvP5-1

‍

SECTION

【パターン3】上下反対のレイアウトのパターンを作ろう

‍

デザイン素材

【✨ 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%3A1853&mode=design&t=e5rvXC7mov3mNvP5-1

‍

SECTION

比較と仕上げ:パターンの違いから学んで、デザインを仕上げる！

デザイン素材

【✨ 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=30%3A14990&mode=design&t=e5rvXC7mov3mNvP5-1

‍

SECTION

STEP4 装飾で仕上げる

ABOUT

コース詳細

‍