1. 自己紹介
1.1. あざみ
1.2. イラストレーター
1.2.1. ツイッター: https://mobile.twitter.com/AZA_MIKAN
1.3. **デザイン初心者**
1.3.1. ハルキさんの元でデザイナー見習いをやっています。
1.4. 初めての図解デザイン・・・
2. 全体像
2.1. この動画について
2.1.1. デザイン初心者の私が、講師のまさやさんにフィードバックをいただきならが制作した図解を通して学んだことの共有
2.2. 流れ
2.2.1. 1. 案件の概要
2.2.2. 2. 本編
2.2.2.1. Before
2.2.2.1.1. After
2.2.3. 3. まとめ
3. 案件の概要
3.1. デザインが使用される事業
3.1.1. 認知症専門グループホーム
3.1.1.1. Twitterで使用
3.2. 画像サイズ
3.2.1. アスペクト比は横3:縦4。 画像サイズは900×1200
3.3. ターゲット層
3.3.1. 60代女性
3.4. 内容
3.4.1. 認知症を予防する上で大切にしたい習慣7選
4. 簡単なラフ1
4.1. 簡単なラフ2
4.1.1. 簡単なラフ3
4.1.1.1. ピンタレスト で「デザイン 図解」とかで検索して、今回使えそうなフォーマットを引っ張ってきた
5. ラフ
5.1. 考えたこと
5.1.1. 色
5.1.1.1. ターゲットの60代女性に刺さりやすいベージュや緑の柔らかい印象が良いかも
5.1.2. イラスト
5.1.2.1. ソコスト
5.1.2.1.1. 状況に合うイラストが比較的そろってたのがこのサイトだった
5.1.3. フォント
5.1.3.1. 図解だから読みやすくわかりやすいようにゴシックが良いかも
5.2. いただいたフィードバック
5.2.1. ラフとしては良い感じ!
5.2.2. フォント
5.2.2.1. 視認性の良く、世界観と馴染む丸ゴシックを使おう
5.2.3. タイトル
5.2.3.1. 装飾等を加えてみよう
6. 初稿
6.1. 考えたこと
6.1.1. ラフでベースの形は良いと言ってもらえたのでこの感じで進めよう
6.1.2. タイトル
6.1.2.1. ”良い感じ”にするにはどうすれば良いのだろう
6.1.2.1.1. リサーチしていろいろなチラシを見てもピンとこない
6.1.3. フォント
6.1.3.1. 丸ゴシックの中でも可愛くなりすぎないように大人っぽい印象のある「筑紫B丸ゴシック」を使おう
6.2. いただいたフィードバック
6.2.1. タイトル
6.2.1.1. 優先順位を考えよう。 この場合は、習慣7選と、「認知症」「予防」を目立つようにして、「大切にしたい」の優先順位はもっと低くて良い。
6.2.2. テキスト
6.2.2.1. 最低16px。ボールドにすると視認性が良くなる
6.2.3. イラスト
6.2.3.1. イラストの統一感を出すには、 ①イラスト素材のサイトを変えてしまう ②他のサイトから似たテイストのものを探してくる
6.2.3.2. 白枠に収めると窮屈で単調な印象になるのではみ出しても良い
7. 三校
7.1. 考えたこと
7.1.1. タイトル
7.1.1.1. タイトルの横が寂しい
7.1.1.2. タイトルをいただいた参考イメージ通りに組んでみた
7.1.2. テキスト
7.1.2.1. テキストを整列させた
7.2. いただいたフィードバック
7.2.1. 全体の世界観
7.2.1.1. ベースになってる形を変えたら?
7.2.2. タイトル
7.2.2.1. 「大切にしたい」が2行になってるが、行間の余白が文字と白フチまでの余白より広くなっていて読みづらい
7.2.3. テキストを整列させよう
7.2.3.1. 数字(①〜⑦)をなんとかして、見出しと本文と数字を一直線にしようという意味だった
7.2.4. イラスト
7.2.4.1. テキストありきの図解だから優先度は、テキスト>イラスト。 まずはテキストだけの状態で整列させてみよう
8. 四校
8.1. 考えたこと
8.1.1. 世界観
8.1.1.1. とにかくベースの形を変えようと思った
8.1.1.1.1. 枠で区切らなくても"近接"させれば図解として機能する
8.1.2. タイトル
8.1.2.1. タイトルは2行にすると横にスペースができてしまうので、面積を考慮して1行にしよう
8.1.2.2. 統一感を出すために強調部分は濃い緑色を使おう
8.1.2.3. 装飾がないと寂しいから認知症の物忘れっぽいアイコンと吹き出しを作ろう
8.1.3. テキストを整列させた
8.1.3.1. 数字を丸(①, ②...)を使わず(01,02...)とした
8.2. いただいたフィードバック
8.2.1. タイトル
8.2.1.1. ズラすならずらしたと分かるくらい差を出さないとダメ
8.2.1.2. 2行か3行にしよう
8.2.1.2.1. 1行だと文字数が多くて読みづらいし、強弱の差が出しづらい
8.2.1.3. 吹き出しを使う際は、自作するのではなく吹き出しの素材サイトから引っ張ってこよう
8.2.1.3.1. https://fukidesign.com/category/cloud/
8.2.2. テキスト
8.2.2.1. 番号の並び順が縦並びになっているから横並びにを変えよう
8.2.2.1.1. 視線誘導のZ型を意識しよう
8.2.3. 余白
8.2.3.1. 要素同士の余白より要素と白フチの余白の方が狭いので読みづらい
8.2.4. 世界観
8.2.4.1. 平面的でのっぺりしてる感じ。奥行きを出そう
9. 最終
9.1. 考えたこと
9.1.1. 余白
9.1.1.1. 読みやすくするために、要素と要素の余白を狭くして白フチと要素の余白を広くした。
9.1.2. 全体の世界観
9.1.2.1. 画像全体に奥行きをだすために、 背景と白ベタを明確に分けた。
9.1.2.1.1. 背景には、ピクトグラムのようなアイコンの イラストを使用して厚みを出そうと考えた。
9.1.3. タイトル
9.1.3.1. 吹き出しは自作ではなく吹き出しのサイトからクオリティの高い吹き出しを選んだ
10. 第二校
10.1. 考えたこと
10.1.1. タイトル
10.1.1.1. タイトルどうしよう。全然カチッとはまるような形が思い浮かばない
10.1.1.2. リサーチしてもそのまま転用できそうな形もないな・・
10.1.2. テキスト
10.1.2.1. 整列させたつもりだけどなんとなく揃ってないような
10.2. いただいたフィードバック
10.2.1. タイトル
10.2.1.1. 背景や装飾の効果があまり見られない
10.2.1.1.1. 背景は消そう
10.2.1.1.2. 優先順位に沿って強弱をつけるときは、まずは文字の大きさでメリハリをつけよう
10.2.2. テキストを整列させよう
10.2.3. イラストのサイズを揃えよう
10.2.4. イラストのアレンジは良いね
11. まとめ
11.1. デザインを始める前に、 概要をよく理解してコンセプトを決めよう
11.1.1. どういう印象を伝えたいのか確定していれば、イラストや装飾で迷うことがなくなる。
11.1.2. マインドマップの活用
11.1.3. 今回の場合は、"認知症"の"予防"に関する図解だとスッと伝えるためには、 どんな色、フォント、イラストを用いれば良いのか、という部分を深堀りする
11.2. もうわからん…という気持ちになったら
11.2.1. リサーチで大量に良いデザインを浴びる
11.2.1.1. 引き出しを増やす
11.2.1.1.1. 装飾
11.2.2. ひたすらに文字を組み替えて形を探してみる
11.2.2.1. センスがなくても諦めずに試行錯誤すれば、必ず良い形になる
11.2.2.2. ルールは押さえる
11.2.2.2.1. 文字数が多い場合は2行か3行にする
11.2.2.2.2. 強調したい部分はまずは色ではなくサイズで対比させる
11.2.3. 四大原則を守れているか確認する
11.2.3.1. つまづいている理由はほとんど基礎の部分が抑えられていないからだったりする
11.2.3.1.1. 近接
11.2.3.1.2. 整列
11.2.3.1.3. 反復
11.2.3.1.4. 対比
11.2.4. 問題を「情報整理」と「世界観」に分けて今一度考えてみる
11.2.4.1. 情報整理
11.2.4.1.1. 余白
11.2.4.1.2. 文字組
11.2.4.1.3. 行間
11.2.4.2. 世界観
11.2.4.2.1. デザインを見た時にどんな印象を抱いてほしいのか
11.2.4.2.2. コンセプト
11.2.4.2.3. ビジュアル全般