今回はillustratorの勉強法についてです。

mito

私自身、独学で学び、ロゴやアイキャッチを作れるレベルになりました。今では、photshopよりもillustratorの方をよく使っています。

momo

独学でどのように習得したのかを3つのステップに分けて解説するよ！

スクールに通う時間や、お金がないから独学で学びたいけれど、本当に学べるの？と思っている人、サクッと学んで最低限使えるようになりたいと思っている人にオススメな記事です。

自分の中でのゴール設定

illustratorは文字の加工やイラストの作成を得意とするツールです。
まずは、ロゴ制作と名刺制作ができることをゴールとしました。

illustrator習得の3つのステップ

効率的に学ぶことを意識して3つのステップを用意し、学習を進めました。

オンライン学習を利用して使い方の基本を学ぶ

全く知識がない状態で本を読み理解していくのは大変です。
実際にツールを使っているところを見ながら手を動かした方が効率よく習得できます。
基本的な使い方や便利なショートカットキーなどは動画学習サービスschooを見て学びました。

mito

音声と視覚の両方を使って学習できるのが動画のいいところです。最初に苦手意識を作らないためにも動画学習、オススメです。

参考書を使って手を動かす

基本的な操作方法の知識をインプットしたら、次はさらに様々なバリエーションの操作方法をインプットしていきます。

mito

参考書を使って体系的に学ぶことを意識します。

本1冊を一通り試します。

Illustratorトレーニングブック

posted with ヨメレバ

広田正康 ソーテック社 2018年01月

楽天ブックス

Amazon

Kindle

momo

この時のポイントとしては、途中で挫折しないようにあまり分厚い本を選ばないことだよ！

逆引きとして利用できる本も合わせて用意しておきます。

Illustrator しっかり入門 増補改訂 第2版 【CC完全対応】

posted with ヨメレバ

高野 雅弘 SBクリエイティブ 2018年09月22日

楽天ブックス

Amazon

Kindle

Illustrator　10年使える逆引き手帖

posted with ヨメレバ

高野雅弘 SBクリエイティブ 2014年06月24日

楽天ブックス

Amazon

Kindle

デザインをトレースする

操作を一通り覚えた後は、ひたすら実践です。

mito

デザイントレースを行い、知識を定着させます！

https://mito-lab.com/banner-trace-30-report/

まとめ

使用頻度が低い操作方法は、時間が経つと忘れてしまいます。
トレースで繰り返しillastratorを使うことで、よく使うもの、あまり使わないものの区別がつくようになり、押さえるべきポイントもわかってきます！

6月から開始した1日1サイトレビューも3週間が経過しました。
今回は、1日1サイトレビューを始めるきっかけから実際にはじめてどんな気づきがあったのか？という内容をお届けします。

という方の参考になれば嬉しいです。

#1日1サイトレビューってなに？

毎日1サイト、自分の気になるサイトをレビューし、#1日1サイトレビューというハッシュタグをつけてtwitterに投稿するものです。

Webサイトをみて自分なりの考察を行い、自分の言葉でアウトプットするということが目的です。

#1日1サイトレビュー

株式会社デジタル・アド・サービスhttps://t.co/2LVnaWSGMK

情報の目立たせ方が秀逸！
個人的には目玉焼きのような手書き風の楕円形が好きです。
きちんとした丸じゃないというだけで強調になるという発見がありました。 pic.twitter.com/jxtciiPOVO

— mito@ひよっこwebデザイナー (@mito_works) July 5, 2019

mito

色々なやり方があるようですが、私は自分用のストックメモとして日記アプリに書いたものをキャプチャでtwitterに共有しています。

#1日1サイトレビュー

HELLO CYCLINGhttps://t.co/JRSkPfi28g
サービス内容がわかりやすく表現されている上にワクワクするようなサイト。
デザインの威力、感じます。 pic.twitter.com/D9eAnlbdtF

— mito@ひよっこwebデザイナー (@mito_works) July 6, 2019

#1日1サイトレビューをはじめたきっかけ

デザインの引き出しを増やすためにどうしたら良いか？と考えて 、まずはたくさんデザインに触れて、「なぜこういう作りなのか？」「なぜこういう印象に見えるのか？」考察することをしようと思いました。

それが、#1日1サイトレビューです。

また、デザインの師匠さまたちもデザインはセンスではなく、「デザインは組み合わせだ」そしてセンス自体も「センスは知識から」とおっしゃっております。

アイデアのつくり方

posted with ヨメレバ

ジェームズ・ウェッブ・ヤング/今井茂雄 CCCメディアハウス 2012年06月

楽天ブックス

Amazon

Kindle

センスは知識からはじまる

posted with ヨメレバ

水野学 朝日新聞出版 2014年04月18日

楽天ブックス

Amazon

Kindle

mito

バナートレースのように実際トレースをするのが良いと思いますが、Webサイトはトレースに時間がかかりそうだなと思い、観察して言葉でアウトプットするということをはじめました。

https://mito-lab.com/banner-trace-30-report/#i-12

#1日1サイトレビューをやってよかった点

mito

毎日15分~30分程度で楽しく無理なく続けられました。

#1日1サイトレビューのオススメポイント

1日1サイトレビューを3週間続けた結果、サイトデザインのお仕事でも良い影響が出てきました。

クライアントさんの「こんな感じのサイトにしたい」という要望に対して「イメージでいうとどれが近いですか？」というように話を詰めていくスピードが上がりました。

mito

デザインするときも、人と話をするときもデザインという形に具現化するスピードが格段に上がります！

気負わずまずは1日15分から。
ぜひ試してみてください。

今回は、デザイン初心者がPhotoshopとIllstratorでバナートレースを30本続けた結果、どうなったのか？何がわかったのか？どのようにモチベーションを維持して30本のトレースを達成したのか？という内容をお届けします。

という方の参考になれば嬉しいです。

バナートレースで学べること

あまりに学んだことが多く、これ以降の文章がとても長いので結論から書きます。

学べることは、

「デザインに対してどのようなツールや手法を使って実現するか理解でき、自分で再現できること」

です。

mito

料理で例えるのであれば、カレーを食べてこれは人参とジャガイモと豚肉を使っていて、無水調理で作っているな・・と分かり同じ味を作れるイメージです。

momo

そこまでできるようになると、もっと甘くしたいから、ジャガイモをさつまいもに変えて、黒糖を入れてみようなど自分なりのアレンジができるようになるね！

つまり、目で見たデザインを自分の手で再現できるだけではなく、アレンジして自分のデザインに使えるようになります。

バナートレースとは？

「トレース」とは日本語で「模写、真似する」という意味です。

今回はバナー（広告）に絞って模写をしました。

バナートレースでの素材の選び方

1. 背景単色もしくは1枚の写真＋文字
2. ①＋文字＋簡単なオブジェクト
3. 背景グラデーションやストライプや切り抜き写真＋②

mito

まず文字の余白の取り方、フォントサイズの強弱、フォントの種類を重点的に学び、徐々にイラスト入りや切り抜き写真入りなど要素を増やしていくイメージでやりました。

バナートレースをするときの手順（取り組み方）

1. Pintarestでトレースするバナーを見つける
2. 近しいフォント、素材を探す
3. ガイドを引いて配置場所やサイズ感を把握する
4. PhotoshopとIllustratorを使い分けてトレースする
5. フォント、カラーその他気づいたことをまとめる

やりっぱなしではなく、⑤の気づきをまとめるということは後から見返して学びが深まるので、やってよかったなと思います。

最初の頃は②の近しいフォントや素材を探すに時間を多く使ってしまいがちです。

mito

完璧を目指さずある程度妥協も必要。ちょっと違うけれど今の自分の実力で探せるのはここまでと見切りをつけて次のステップに進むことが大事です。

momo

妥協の目安として時間で区切るのは有効だよ！

バナートレースを継続的に続ける秘訣

上記のことを繰り返すことが継続的に続ける秘訣です。

mito

私の場合、twitterやコミュニティで「やります！」と宣言して自分なりのまとめをつぶやいていました。特にやらないと何か言われるということはないですが、心理的な強制力を作る上で有効だと思います！

momo

思わぬタイミングでコメントや励ましの言葉をかけてもらえたりして、励みになることもあるよ！

＜#バナートレース #20＞
シンプルなバナーほど難しい。。

パスを変形させて、文字の流れるような加工にすること、背景に沈まないように背景の色と文字色のバランスを考えること。

文字が見えずらくなって残念＞＜。
イラレは文字をアウトライン化すると元に戻せないから断念してしまいました。 pic.twitter.com/bsW29qTUvt

— mito@フリーランスWebデザイナー (@mito_works) May 24, 2019

バナートレースのペース配分と内容

2019年3月にPhotoshopだけを使い10本トレースをしました。

この時に、やればやるだけどんどんトレースのスピードが上がり、Photoshopの使える手法も増えることを実感。

mito

ちなみにこの時、デザインはもちろん、Photoshopも触ったことがない初心者でした。

出産＆その後1ヶ月の休養を経て、2019年5月にトレースを再開。
Photoshopは、ある程度使えるようになったと思ったので、次はIllstratorを使えるようになりたいと思い、PhotshopとIllastratorを併用して取り組みました。

1回目のトレースの時は、2時間くらいかかっていたので、かけすぎかなと思い、2回目のトレースの時は特に時間を気にしました。

具体的に、バナートレースを通して成長した点

PhotshopとIllastratorを併用することで再現できないデザインが減った

Photshopだけの時は花びらや傘などオブジェクトの再現ができていませんでした。
よく使う手法もわかってツールを使うスキルとデザインの幅が格段に上がったと思います。

見本と近しい素材（画像やイラスト）を探せるようになった

最初は、画像選びだけでもすごく時間を費やしていましたが、徐々にバナーの雰囲気にあった無料の写真やイラストを探せるようになりました。

mito

トレースでよく使った無料素材はこちらの2つです。

Unsplash
高品質な素材が無料で提供されています。

イラストAC
素材数が多く、目的にあったイラストが必ず見つかります。

見本により近いフォントを探せるようになった

最初は、明朝体、ゴシック体という大きなくくりでの区別はつきますが、明朝体の中での違いがよくわかっていませんでした。

mito

「たづがね角ゴシック」と「ヒラギノ角ゴシック」って何が違うか見分けがつかない！！という感じです。

そしてトレースした際にフォントがしっくりこなくて違和感がありましたが、徐々に「これだ！」というフォントを探せるように。

セリフをさらにくづしたSnell Roundhand。イタリック体だと王道感にプラスしておしゃれに見える

というようなフォントの考察もできるようになりました。

https://mito-lab.com/banner-trace-04/

バナーを見てどういう手法を組み合わせているのか分かるようになった

結果、大体どれくらい時間がかかるか見積もりが立てられるように。

mito

ただ、シンプルで余白があるものほど目に見えない工夫や技が潜んでいて想定以上の時間がかかるということも・・。 シンプルほど奥が深いということも同時に学びました。

デザインの4原則「近接」「強弱」「整列」「反復」を意識して観察できるようになった

ただなんとなく見本に合わせて文字やオブジェクトを配置することが少なくなりました。どういう効果を狙っているのかわかるようになってきたような気がします。

mito

こんな風に考察しています。

https://mito-lab.com/banner-trace-13/

「ポップ」「スポーティー」など抽象的な言葉をデザインで表現するためにどのような手法を使うのかわかるようになってきた

まだまだだとは思うのですが、トレースをして少しわかりかけてきました。
デザインの引き出しを増やすってこういうことなんだと思います。

mito

こんな風に考察しました。

https://mito-lab.com/banner-trace-09/

https://mito-lab.com/banner-trace-10/

https://mito-lab.com/banner-trace-12/

https://mito-lab.com/banner-trace-13/

https://mito-lab.com/banner-trace-15/

↑ここからフォントの考察もできるように

見えてきた課題

背景の効果的なデザイン手法

背景は、写真以外にものグラデーション、ストライプ、パターンで表現の幅が広がるということがわかりましたが、まだ使いこなせていません。

https://mito-lab.com/banner-trace-05/
https://mito-lab.com/banner-trace-06/
https://mito-lab.com/banner-trace-11/

mito

特にブラシ効果がまだ使えていません。

https://mito-lab.com/banner-trace-14/

適切な文字の加工

文字をそのまま使うのではなく、加工することで随分見え方が変わるということがわかりました。

https://mito-lab.com/banner-trace-07/

https://mito-lab.com/banner-trace-11/

https://mito-lab.com/banner-trace-12/

https://mito-lab.com/banner-trace-20/

mito

届けたいターゲットやデザインコンセプトに合わせて、思い通りに文字を加工するまでには至っていません。

写真の効果的な加工

「ああでもない。こおでもない」と時間がかったけれど見本に近づけず・・。

もっともやり直したいものの一つです。

https://mito-lab.com/banner-trace-18/

結局バナートレースで何を学べるか？

一言で言うと、「ツールの使い方」と「デザインを見る目が養われる」ことだと思います。

mito

「このデザインいいな」とただストックしているだけでは得られるものは少ない。とにかく手を動かさなければ習得できないなと思いました。

バナートレースだけでは学べないこと

トレースは誰かが作ったものをあくまで模写するということ。なのでコンセプト、ターゲットなどを考える部分が抜けています。

トレースで身につけたものを実際の案件で使うというように「練習」と「実践」を行き来するのが良いなと思いました。

まとめ

トレースはあくまで手段！ですが、トレースを通して自分のデザインスキルを上げるためにこれからも使いたいです。

https://mito-lab.com/design-trace-50/

mito

バナートレースの次に何をしたらいんだろう？という方向けの記事はこちらです〜！

momo

試行錯誤しながら色々試したことを紹介しているよ！

https://mito-lab.com/bannertrace-nextstep/

]]> https://mito-lab.com/banner-trace-30-report/feed/ 7 https://mito-lab.com/banner-trace-start/ https://mito-lab.com/banner-trace-start/#comments Thu, 02 May 2019 05:43:55 +0000 https://mito-lab.com/?p=28 こんにちは。mito（@mito_works）です。

デザイン力アップのためにバナートレースを始めることにしました。

ここでは、私なりのやり方を書いていこうと思います。

なぜやるのか

トレースは実際に手を動かすので、ツールの勉強にもデザインの勉強にもなると思いやってみることにしました。

とくにバナーは限られた小さなスペースの中に必要な情報をうまく配置しなければいけません。

そのため、ツールを使いこなす技術と情報整理、配置の仕方、デザインで必要な情報をどう伝えるか？という考え方の勉強になります。

momo

ツールの勉強って具体的にはどういう状態になりたいの？

mito

ある程度の操作はいちいち検索しなくても作業できるレベルになりたいな。よく使う操作も忘れないようにまとめておきたい！

momo

現状はどお？

mito

PhotoshopもIllustratorも都度検索してます…(汗)

momo

じゃあ、デザインの勉強って具体的にはどういう状態になりたいの？

mito

頭の中で、この時はこのパターンのデザインというようにある程度デザインが分類され、整理されている状態になりたい!!! 

momo

今のmitoちゃんは？

mito

何かデザインをする時には参考になるデザインをいつもゼロから調べてます…。

まずはとにかく量をこなすことを目標とします。

「100本やるといいよ！！」と風の噂で聞きましたがw。

ハードルを下げて、できそうな1ヶ月20本を目標にやります。

バナートレースとは

「トレース」とは日本語で「模写、真似する」という意味です。

今回はバナー（広告）に絞って模写します。

やり方

素材の選び方

難易度低～高へ徐々にレベルアップしていくために最初は要素の少ないものから始めます。

トレースの手順

色々あると思いますが、目的に沿って以下のようにしました。

マイルール

ゴール設定にもつながりますが、以下の2点を意識します。

時間をかけすぎないこと。

やりっぱなしにせず、（フィードバックをもらったりしたいので）他人が見てもわかる状態に整理しておくこと。

ゴール設定

4種類のゴールを設定しました。

ではさっそくはじめます！