ちょっとしたデザインワークだとPhotoshopを使うのが定番な感じがしますが、「この画面内にこんな感じの情報、入りきるかなー?」などと全体のレイアウトをするときにIllustratorも便利で、よく使っています。
共通の部品をコンポーネント化したり、コンポーネント化した部品に変更を加えると画面上の部品にも変更が適用される、といったイラレの動きは、実はかなりプログラマ向きの作りをしているのではないかなと思います。プログラマがちょっとしたデザインワークをする場合は、今回ご紹介するサイトの14の小技を覚えておくだけで大体事足りるかも知れません! というか事足ります! この機会にみなさまもIllustratorをぜひ触ってみてくださいー。
目次
- 1 イラレを超効率的に使うために知っておきたい14の小技
- 1.1 1. DYNAMIC BUTTONS
- 1.2 2. TEXT STYLES
- 1.3 3. GLOBAL COLORS
- 1.4 4. MODULAR DESIGN
- 1.5 5. ICON FONTS
- 1.6 6. CSS FRAMEWORKS COLUMNS
- 1.7 7. SNAP TO THE GRID
- 1.8 8. MULTIPLE SCREEN DESIGN
- 1.9 9. RESIZE WITHOUT DISTORTING
- 1.10 10. IMAGE MASKS
- 1.11 11. STARTER TEMPLATES
- 1.12 12. GRAPHIC STYLES
- 1.13 13. TEXT WRAPPING
- 1.14 14. ROUND INDIVIDUAL CORNERS
- 2 素材も掲載されてる!
イラレを超効率的に使うために知っておきたい14の小技

そんな訳でこのサイト、Speed Design with Illustratorで14の小技が紹介されています。具体的な操作方法はこのサイトの動画で紹介されているので、それを参考に実際に操作してみて欲しいのですが、とはいえ英語のサイトなので、どんな内容なのかざっくり日本語で紹介してみます。こんなことができるようになりますよー。
1. DYNAMIC BUTTONS
入力したテキストに対して動的にボタンのようなスタイルを施してくれます。文字入力するだけでボタンができる!
2. TEXT STYLES
同じ装飾をしている段落のスタイルを一気に変更することができます。スタイルシートみたいな感じですね。
3. GLOBAL COLORS
同じ色を使っている箇所の色を一気に変更することができます。
4. MODULAR DESIGN
ページ内の部品をコンポーネントとして扱うことで、同じコンポーネントを利用しているページであれば、コンポーネントを編集するだけで全てのページに適用するといったことができます。
5. ICON FONTS
アイコンフォントを使えば、ちょっとしたアイコンを使いたいときに便利です。パネルから選択するだけでアイコンフォントを使えます。
6. CSS FRAMEWORKS COLUMNS
グリッドを指定することもできるので、自分の使っているCSSフレームワークのグリッドとあわせておくとコーディングのときに便利です。
7. SNAP TO THE GRID
デザインをグリッドにあわせるようにしておくと、ウェブデザインの場合はバチッとハマります。
8. MULTIPLE SCREEN DESIGN
アートボードは99個まで使えるので、アートボードを上手く使えば1つのファイルで全てのページのデザインをすることも可能ですね。
9. RESIZE WITHOUT DISTORTING
ベクタ画像なのでリサイズしても歪みません。
10. IMAGE MASKS
画像のクロッピングもできます。簡単な画像加工であればPhotoshopを使う必要もないです。
11. STARTER TEMPLATES
あらかじめテンプレートを用意しておくと作業が楽に進みます。
12. GRAPHIC STYLES
ライブラリを利用することでボタンやメニューのスタイルを簡単に変更することができます。
13. TEXT WRAPPING
画像の置き場所にあわせてテキストを回り込ませることもできます。
14. ROUND INDIVIDUAL CORNERS
それぞれの角を丸めることが可能です。
素材も掲載されてる!
記事の中で紹介されているこんなテンプレートや、

フリーで使えるアイコンなんかも掲載されています。これは捗りますね。

これは知ってなきゃ損するなーと思いました。イラレを敬遠していた人も、この機会に使いはじめてみてはいかがでしょうか。時代はマルチ解像度&レスポンシブなので、いろんな解像度に対応できるベクタ画像は、どんどん需要が増していくと思います。
今回ご紹介したサイト:Speed Design with Illustrator 14tips to create interfaces in minutes