こんにちは！木下です。今回は学校で缶バッジ制作をしたので、制作の流れや成果物の紹介をします。 学校にある缶バッジ制作ができる機械と、バッジのテンプレートを使って制作しました。使用デザインツールはIllustratorのみです。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/447ddb74c4564049803358afb2a669bd/1654738898285-gw4GyspLQJ.webp" alt=""><blockquote>缶バッジ製作キット(缶バッジマシン バッジオ!スタンダード)</blockquote><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/ca3267cc40994035940fcbc4fd41a34d/1654738926800-IWYhKoPHsM.webp" alt=""><blockquote>使用したテンプレート(ダウンロードできるテンプレートもたくさんあるので調べてみてください！)</blockquote> 私はIllustratorで絵を描くとき、このような手順で進めます。<blockquote>1.イラストを紙に描く。(今回はクラスの人をモデルにした動物を描きました！) 2.写真に収めるorスキャナーでスキャンし、パソコンにデータを送る。 3.描いたデータを下絵にするために、写真の不透明度を下げて一番下のレイヤーにしてレイヤーをロック。 4.ペンツールや図形ツールでなぞり、Illustratorで形を整えて完成。</blockquote>出来上がったイラストを缶バッジにしていきます！(テンプレートは消します) <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/476c58ebaa2341c99f9e208f7da54cbc/1654739071080-PhODNzGNkF.webp" alt=""> この画像、彩度が少し低く見えませんか？ このデータは、カラーモードをCMYKにしています。RGBは主にweb上で扱うデザインに使用するカラーモードで、CMYKは印刷用のカラーモードです。<blockquote>カラーモードについて RGB(光の３原色) red、green、blueの三つの色の光によってさまざまな色を表現している。 →混ぜ合わせると白になる。(加色混合) CMYK(色の３原色) cyan、magenta、yellow→混ぜ合わせると黒になる。(減色混合) 印刷物は、CMYKの４つの色の掛け合わせで色を作成する。</blockquote>印刷をする場合はカラーモードをCMYKにしましょう！ 次に、Illustratorのデータをコピー機を使って印刷しました！ <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/c3ad1dbb8d0f42499deef4e23ea9cdf7/1654739256606-GnRE4vdGJ6.webp" alt=""> 切りたい箇所を丸く切り抜くことができる機械を使って、切り抜いていきます。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/e3b0d2a30b8b4e19a256db8b674c0f2d/1654739290081-wfn2bx12j6.webp" alt=""> <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/7b3237856fee48d6ae0bdca77c911900/1654739358699-zln9fyh5dp.webp" alt=""> 綺麗に切り抜くことができました！ 次に、缶バッジを制作する機械に土台と紙とフィルムをはめ込みます。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/c52924f9c2254ee0bb8d7a441f4d9a2e/1654739382684-qcsGLcLlcd.webp" alt=""> <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/6cf412b57e2d4d8ca90bb0f9c431ecf2/1654739406967-Sx2B6uxDLg.webp" alt=""> こういった構造です！画像引用:https://jitan-eshi.com/archives/998 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/46a4b76e5c924055b4dfebffd614b722/1654739450928-wCW9dWZ5CB.webp" alt=""> 向こう側にくるっと回して <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/bc12d5f5f5de47248e1de47f56fa5ff6/1654739466812-4pv3Mg8L2X.webp" alt=""> プレスします！！(先生にしてもらいました😅) <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/feb0f8ee0e514c27b5065a112ba0297c/1654739488670-vfOSsnard6.webp" alt=""> 土台となる一番下のパーツを手前にはめ込み、 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/3250c5e190484b3091b26a6577f1cf62/1654739520015-PEQS0cldtr.webp" alt=""> もう一度プレス！！ <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/bdbe06c7d9bc410980c2daa6e4572a64/1654739555850-NcSpML7noE.webp" alt=""> 完成しました😭😭😭 最高にかわいい缶バッジが出来上がりました😭😭😭 手順は簡単なので、残りの缶バッジは1人で作ることができました！ <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/a07436ae39ef41fdb198d0695e98ebe5/1654739536011-Ucu9WkmUn1.webp" alt=""> かわいい〜〜〜〜〜〜〜〜〜！！！！ 以上が缶バッジ制作の流れや成果物の紹介でした！欲しいといってくださる人がいるんじゃないか！？というくらい、かわいい缶バッジができて嬉しかったです！ この記事が参考になったり、みなさんのグラフィックデザインへの興味を惹くものになったりしていたら幸いです。 最後まで読んでくださり、ありがとうございました！

缶バッジ制作してみた！！

最近はイラストを無料で提供してくれるサービスが増え、非デザイナーでもそれっぽいイラストが制作できるようになっています。そのような背景なのか、Webサイトを見ていると「イラストが装飾だけの役割になっていてもったいないなぁ」と感じることがあります。イラストは、ユーザーがサービスや商品についての理解を深めるために必要不可欠な要素です。今回は、そのような装飾だけのイラストにならないために、大切な考え方を紹介します。<h2 id="h8d027c8ed3">はじめに</h2>私たちはなぜテキストだけでなく、イラストを配置するのでしょうか？ それは、ユーザーにとってテキスト内容を認識しやすくするためで、その結果、内容の齟齬を生まないためです。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/0b2bf344b74b4169a2e323a78c2123a9/il-blog01.png" alt=""> テキストだけだと内容を認識しにくい <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/99bc61103e9548c3aa3897c9646cf76b/il-blog02.png" alt=""> イラストがあると、認識しやすい 内容の齟齬を生まないイラストを作るためには、文章とイラストが1対1にマッチかつ、ユーザーにサービスやプロダクトの価値を理解してもらうことが必要です。 ※ マッチとは、文章とイラストの内容が一致していることです。 マッチしていないと、伝えたいことが正しく伝わらない確率が高まります。そのようなことが起きないため、２つ大切なことがあります。<ol><li>文章を読んでイラストを考えること</li><li>ユーザーにとっての価値を問うこと</li></ol>この２つがなぜ大切なのか、今から考えていきます！ <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/2f55b77786454eacb5988a2754d378fa/il-blog03.png" alt=""> イラストを考える上で大切なこと <h2 id="hdaa2393eff">実際に考えてみる</h2>上記の文章だけだと「ホンマに大切なのか、あんまようわからん（ゴリゴリ関西弁）」と思います。なので今から、架空の学習サービスサイトのイラスト作成の過程を覗いていきます。作成に協力してくれた、AさんとBさんの作成方法に着目しながら、なぜ大切なのか考えていきましょう！ <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/b2064c856fe24454acfdf5ffbafca192/il-blog04.png" alt=""> サービスの良し悪しはおいといて、、<h3 id="he282541649">Aさんの場合</h3>Aさんはまず、「24時間」というワードに着目してイラストの作成に入りました。「24時間受付してくれるのが、ここで伝えたいことだ！」と考えました。<h3 id="h755bc78301">Bさんの場合</h3>一方で、Bさんは最初に「24時間質問の受付によってユーザーにどのような価値があるだろう？」と考えました。ここでの価値は、「困ったときにいつでも相談に乗れる」ということ。BさんはAさんと違い、機能部分をイラスト化したのではなく、ユーザー価値をイラスト化した点に着目したことが大事なところです。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/a13fe94be162425d834c9c864dbcbd6a/il-blog05.png" alt=""> Aさんは機能、Bさんはユーザー価値に注目 あなたは、どちらのイラストの方が良いと感じましたか？ Bさんの方が良いと感じた方が多いと思います。 なぜ、Bさんのイラストが良いと感じたのでしょうか？ それは「サービスやプロダクトが与えてくれるユーザーの価値を理解してもらえるようなイラスト」だからです。ユーザー価値をイラスト化することで、ユーザー自身がサービスのイメージをしやすくなり、より魅力的に感じてもらえたり、興味を持ってもらえるきっかけになります。<h2 id="ha214098e44">まとめ</h2>以上、「イラストを考える上で大切なこと」は<ol><li>文章を読んでイラストを考えること</li><li>ユーザーにとっての価値を問うこと</li></ol>この２点についてよく考えられているイラストが良いイラストだと思います。1番目は大丈夫なのですが、2番目のユーザー価値まで考えたイラストは少ないように感じます。これを気に、ユーザー価値についても考えてイラストを作成してみましょう！ ==========<h2 id="h397e38daae">補足</h2>ここからは余談になります。イラストを作成していく中で、自分が大切だなと感じたことを上記以外にも書いていきます。 「フィードバックを受けることです」 「もっと自分の納得した作品を見せたい」「言われると、自分自身が悪く言われたような気持ちになる」などフィードバックを受けることに対して抵抗を感じる人もいると思います（自分もそうです） そのように感じる人はフィードバックを「方向性を整えるため」と考えると良いと思います。自分だけで考えて制作をしていると、自由にできる裁量が大きい故に趣旨がずれたりしがちです。フィードバックを繰り返すことによって、徐々に適切なイラストになっていくと思います。周りの人に頼りまくりましょう！

イラストを考える上で大切なこと: Web編

デザイン作成や資料作成など、イラスト素材を使用する機会は数多くあります。そこで役に立つのがフリーイラスト素材サイトです。 今回は商用利用可能な無料フリーイラスト素材サイトを厳選して8個紹介します。 <h2 id="h7b1c0c724d">1.アイコン作りに便利[ICOOON MONO]</h2><a style="color:inherit" href="https://icooon-mono.com/" target="_blank" rel="noopener noreferrer">アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト | 6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO</a><a href="unsafe:[object Object]" target="_blank" rel="noopener noreferrer">6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO</a> <a href="https://icooon-mono.com/" target="_blank" rel="noopener noreferrer">icooon-mono.com</a> ヘッダーや文字の補助などに使うアイコンを探している人には一番おすすめのサイトです。種類も多く色や大きさも変えることができるので、きっと欲しいアイコンが見つかります。<h2 id="h777026d21f">2.豊富な種類でこれだけで完結[Loose Drawing]</h2><a style="color:inherit" href="https://loosedrawing.com/?sf_paged=5" target="_blank" rel="noopener noreferrer">Loose Drawing | 無料で商用利用可なフリーイラスト</a><a href="unsafe:[object Object]" target="_blank" rel="noopener noreferrer">シンプルなイラストが見つかるフリー素材サイト Loose Drawing。広告、フライヤー、ポスター、企画書、スライド資料</a> <a href="https://loosedrawing.com/?sf_paged=5" target="_blank" rel="noopener noreferrer">loosedrawing.com</a> シーンごとに様々なイラストが用意されているので、このサイト一つで完結します。人物のイラストが中心になっています。<h2 id="ha0f2092605">3.シンプルなイラストでデザインの邪魔にならない[unDraw]</h2><a style="color:inherit" href="https://undraw.co/" target="_blank" rel="noopener noreferrer">unDraw - Open source illustrations for any idea</a><a href="unsafe:[object Object]" target="_blank" rel="noopener noreferrer">The design project with open-source illustrations for any ide</a> <a href="https://undraw.co/" target="_blank" rel="noopener noreferrer">undraw.co</a> 色合いを自分でカスタマイズすることができるので、作りたいものに合わせてイラストを使うことが出来ます。<h2 id="h38efed76c7">4.可愛いデザインをしたいときに最適![shigureni]</h2><a style="color:inherit" href="https://www.shigureni.com/" target="_blank" rel="noopener noreferrer">shigureni free illust │ 素朴で可愛い、女の子のイラスト素材サイト</a><a href="unsafe:[object Object]" target="_blank" rel="noopener noreferrer">｢shigureni free illust｣で配布しているイラスト素材は、規約の範囲内であれば個人・法人・商用・非商用を</a> <a href="https://www.shigureni.com/" target="_blank" rel="noopener noreferrer">www.shigureni.com</a> 種類は少ないですが、可愛い女の子のイラストを探している人には一番おすすめのサイトです。<h2 id="hfa6a5bc5f3">5.様々なシーンで欲しい素材が絶対見つかる [ソコスト]</h2><a style="color:inherit" href="https://soco-st.com/" target="_blank" rel="noopener noreferrer">商用可・フリーイラスト素材｜ソコスト</a><a href="unsafe:[object Object]" target="_blank" rel="noopener noreferrer">商用可能なフリーイラスト素材サイト。Web・広告・企画書・資料などご自由にお使いください。</a> <a href="https://soco-st.com/" target="_blank" rel="noopener noreferrer">soco-st.com</a> シンプルで汎用性の高い素材が揃っています。ダウンロード形式も豊富で色を変えたり線の太さを変えたりすることもできます。<h2 id="h8e19dce66b">6.実はめちゃくちゃ使える[いらすとや]</h2><a style="color:inherit" href="https://www.irasutoya.com/" target="_blank" rel="noopener noreferrer">かわいいフリー素材集</a><a href="unsafe:[object Object]" target="_blank" rel="noopener noreferrer">いらすとやは季節のイベント・動物・子供などのかわいいイラストが沢山見つかるフリー素材サイトです。</a> <a href="https://www.irasutoya.com/" target="_blank" rel="noopener noreferrer">www.irasutoya.com</a> いらすとやというと少し抵抗のある人もいるかもしれませんが、かなり種類があり、他のサイトでは出てこないようなイラストも用意されています。<h2 id="hd123c01a08">7.欲しい素材が絶対に見つかる[イラストAC]</h2><a style="color:inherit" href="https://www.ac-illust.com/" target="_blank" rel="noopener noreferrer">無料イラストなら「イラストAC」</a><a href="unsafe:[object Object]" target="_blank" rel="noopener noreferrer">おしゃれでかわいい無料イラスト・人物・フレーム・動物・年賀状などの素材がフリー。AI・EPSやJPEG・PNG形式の画像も</a> <a href="https://www.ac-illust.com/" target="_blank" rel="noopener noreferrer">www.ac-illust.com</a> 無料でダウンロードでき加工もできる数少ないサイトです。素材をダウンロードするには新規登録が必要ですが素材点数の多さは圧倒的です。<h2 id="h33f2d70ce7">8.吹き出しに困ったらこのサイト[フキダシデザイン]</h2><a style="color:inherit" href="https://fukidesign.com/" target="_blank" rel="noopener noreferrer">ふきだし素材専門サイト「フキダシデザイン」 – フキダシ素材が1000以上集まるサイト</a><a href="unsafe:[object Object]" target="_blank" rel="noopener noreferrer">デザイン向けふきだし素材を配布するサイト</a> <a href="https://fukidesign.com/" target="_blank" rel="noopener noreferrer">fukidesign.com</a> 吹き出しを使う場面は数多くあると思います。そのときにこのサイトを使うことで、欲しい吹き出しがきっと見つかるはずです。

缶バッジ制作してみた！！

イラストを考える上で大切なこと: Web編

もう素材選びに困らない!商用利用可能な無料フリーイラスト素材サイト8選