デザインのあしらいワークショップ

1. あしらいとはなんぞや?
「あたらしい、あしらい。」から学ぶあしらい
クリエイティブ部 カワムラ
クリエイティブ 金曜勉強会用資料

2. あしらいとはなんぞや ?
「あたらしい、あしらい。」から学ぶあしらい
目次
「あしらい」って？
1 実際の参考事例をみてみよう
2
悩んだ時の解決方法
(わたしの場合)
3 ワークショップ
4
まとめ
5

3. あしらいとはなんぞや ?
「あたらしい、あしらい。」から学ぶあしらい
目次
「あしらい」って？
1 実際の参考事例をみてみよう
2
悩んだ時の解決方法
(わたしの場合)
3 ワークショップ
4
まとめ
5

4. 「あしらい」って？
1

5. 「あしらい」って？
1
デザインで言うあしらいとは
のこと

6. 「あしらい」って？
1
デザインで言うあしらいとは
のこと
装飾 細部

7. 「あしらい」って？
1
具体的にいうと
あ
あ
あ
文字の加工 注目線
リボン ふきだし いろんな線
イラスト

8. 「あしらい」って？
1
こういったあしらいを使うことで
といった効果を得られる
注目させる
強調する
演出する
情報整理

9. あしらいとはなんぞや ?
「あたらしい、あしらい。」から学ぶあしらい
目次
「あしらい」って？
1 実際の参考事例をみてみよう
2
悩んだ時の解決方法
(わたしの場合)
3 ワークショップ
4
まとめ
5

10. 実際の参考事例をみてみよう
2
注目させる
強調する
演出する
情報整理

11. 実際の参考事例をみてみよう
2
注目させる
強調する
演出する
情報整理

12. 実際の参考事例をみてみよう 注目させる
2

13. 実際の参考事例をみてみよう 注目させる
2
・吹き出し
・注目線を付ける
・下線を引く
・文字サイズを変える
・イラストを追加
・文字上に点を付ける
・ザブトンの形を変更
・フォントを一部変更
・イラストを散らす

14. 実際の参考事例をみてみよう 注目させる
2
注目させることで
ことができます！
ユーザーの興味を引く
視線を誘導して読み進めさせる

15. 実際の参考事例をみてみよう
2
演出する
強調する
注目させる
情報整理

16. 実際の参考事例をみてみよう 演出する
2

17. 実際の参考事例をみてみよう 演出する
2
・雫でうるおい感 ・曲線でしなやかさ、
髪のさらさら感
・花や泡を散らして
ふんわり香る香り感
・紙吹雪と王冠で
権威の高さを演出

18. 実際の参考事例をみてみよう 演出する
2

19. 実際の参考事例をみてみよう 演出する
2
演出することで
ことができます！
世界観の共有
文字よりイメージを伝えやすくする

20. 実際の参考事例をみてみよう
2
強調する
演出する
注目させる
情報整理

21. 実際の参考事例をみてみよう 強調する
2

22. 実際の参考事例をみてみよう 強調する
2
・リボンでキャンペーン感
・ギザギザの丸を敷く
・文字サイズ、色を変える
・一部分のみ色や
フォントを変更
・一部分のみ手書き
・下線の追加
・リボンを敷く
・ザブトンにグラデ

23. 実際の参考事例をみてみよう 強調する
2
強調することで
ことができます！
視線を誘導して興味を引く
よりコピーを伝わりやすくする

24. 実際の参考事例をみてみよう
2
情報整理
演出する
注目させる
強調する

25. 実際の参考事例をみてみよう 情報整理
2

26. 実際の参考事例をみてみよう 情報整理
2
・チェックボックスと
点線で項目ごとに整理
・色やイラストで
ネガ/ポジを整理
・並列の項目を
それぞれ囲って整理
・ステップごとに
同じあしらいで整理

27. 実際の参考事例をみてみよう 情報整理
2
情報整理することで
ことができます！
情報をより伝わりやすくする
もっと読みたいと思わせる

28. 実際の参考事例をみてみよう まとめ
2
それぞれのあしらいには効果があるので
与えたい印象によって使い分けることが大事！

29. 実際の参考事例をみてみよう まとめ
2
でも、ちょうどいいあしらいが思いつかない…

30. あしらいとはなんぞや ?
「あたらしい、あしらい。」から学ぶあしらい
目次
「あしらい」って？
1
悩んだ時の解決方法
(わたしの場合)
3 ワークショップ
4
まとめ
5
実際の参考事例をみてみよう
2

31. 悩んだ時の解決方法（わたしの場合）
3
ひたすら

32. 悩んだ時の解決方法（わたしの場合）
3
ひたすら
良い参考を探す！

33. 悩んだ時の解決方法（わたしの場合）
3
当たり前のことのようですが
これが一番近道だと思います！
良い参考を探して
「どこがいいのか？」「どうして良くみえるのか？」
を考えると自分の制作に落とし込みやすくなります

34. 悩んだ時の解決方法（わたしの場合）
3
良い参考の探し方
pintarestを
活用する
あしらいの本を
参考にする
近しい商材の
LPを探す

35. 悩んだ時の解決方法（わたしの場合） pintarestを活用する
3
悩んだ時にさっと見れるように
エリアごとにフォルダ分けしてピン留めしてます
https://pin.it/t7qL3CA

36. 悩んだ時の解決方法（わたしの場合） pintarestを活用する
3
ピン留めする基準としては
という点を見ています
見やすい
デザインか？
今どきの
デザインか？
自分で
再現できるか？

37. 悩んだ時の解決方法（わたしの場合） あしらいの本を参考にする
3
NG例→OK例へのブラッシュアップ過程が
なぜそうしたか？という点も併せて書いてあるので
めちゃめちゃ参考になります！

38. 悩んだ時の解決方法（わたしの場合） 近しい商材のLPを探す
3
同じような訴求の商品が
どんなデザインで訴求しているのか？を見る
いいなと思う部分は取り入れたり、
競合との差分を作れる箇所を探したりできる

39. あしらいとはなんぞや ?
「あたらしい、あしらい。」から学ぶあしらい
目次
「あしらい」って？
1
悩んだ時の解決方法
(わたしの場合)
3 ワークショップ
4
まとめ
5
実際の参考事例をみてみよう
2

40. ワークショップ
4
パパッとバナー作ってみよう！
ワークショップのコーナー
即興

41. ワークショップ
4
やること 使うもの
キャンペーンバナー
1枚作る！
・紙 ・カラーペン
・印刷した素材たち
・のり

42. ワークショップ
4
キャンペーン内容
ハクアージュを買って100万円をもらおう！
キャンペーン
ハクアージュを買ってくれた人の中から抽選で10名に100万円が当たる企画
応募期間：2023年1月31日~2月28日まで
ターゲット層：SNSを見ている20代〜50代くらいの女性

43. 5分
ワークショップ
4
STEP1
レイアウト考える・参考探す

44. ワークショップ
4
キャンペーン内容
ハクアージュを買って100万円をもらおう！
キャンペーン
ハクアージュを買ってくれた人の中から抽選で10名に100万円が当たる企画
応募期間：2023年1月31日~2月28日まで
ターゲット層：SNSを見ている20代〜50代くらいの女性

45. 10分
ワークショップ
4
STEP2
実際につくってみる！

46. ワークショップ
4
キャンペーン内容
ハクアージュを買って100万円をもらおう！
キャンペーン
ハクアージュを買ってくれた人の中から抽選で10名に100万円が当たる企画
応募期間：2023年1月31日~2月28日まで
ターゲット層：SNSを見ている20代〜50代くらいの女性

47. ワークショップ
4
おつかれさまでした！

48. ワークショップ
4
1人ずつ発表タイム！

49. あしらいとはなんぞや ?
「あたらしい、あしらい。」から学ぶあしらい
目次
「あしらい」って？
1
悩んだ時の解決方法
(わたしの場合)
3 ワークショップ
4
まとめ
5
実際の参考事例をみてみよう
2

50. まとめ
5
あしらいにはいろんな役割がある
あ
あ
あ
文字の加工 注目線
リボン ふきだし いろんな線
イラスト

51. まとめ
5
あしらいの引き出しを増やしておく

52. まとめ
5
手を動かして作ってみることも
とても勉強になると思います

53. まとめ
5
「あたらしい、あしらい。」
デスクに置いてるので
ご自由にお読みください！

54. まとめ
5
以上
ご清聴ありがとうございました！