“再編集性” ── アプリやウェブでこそ
Illustrator が最適である理由

よいデザインを追い求めるために必要なのは、ただ考えることです。

そのためには、手を動かす作業は1秒でも早く、正確にできるに越したことはありません。フェンリルデザインは、手を動かす作業を超効率化して、デザイナーが本来取り組むべきデザインの熟考と洗練に大いに時間を使えるようにするための、たくさんのノウハウを知っています。そして、それを実現するためのツールには、Adobe Illustrator を採用しています。

印刷業界では広く使われているものの、アプリやウェブの世界では利用者が少ない Illustrator ですが、実はアプリやウェブにこそ有利な使い方が数多くあることは、なかなか知られていません。フェンリルでは、ちょうど日本で iPhone が初めて発売された7年前から、Illustrator をUIデザインに積極的に使ってきました。7年前といえば、まだ “ピクセルグリッドに整合” が変形パネルになかった時代ですが、その当時から今まで、特に iOS / Mac アプリでは、その制作物の99.9%を一貫して Illustrator のみでデザインしています。それもすべては、本当の意味での “デザイン” により長い時間をかけて取り組むためのツールとして、Illustrator が最適だったからです。

フェンリルデザインでは、これまで培ってきた Illustrator による超効率化ノウハウを、余すことなくご紹介していきます。その多くは、ピクセルを扱うデザイン上の課題を、ときに大胆に、ときに意外な方法で解決するテクニックです。どれも実際のアプリやウェブデザインの現場で、そのスピードを超人化するために研究し、実践してきた内容ですので、自信をもっておすすめします。

さて、一般的ではない Illustrator でのアプリ/ウェブデザインですが、あえて Illustrator を使う理由がもちろんあります。その中でももっとも重要なのは、“再編集性” です。

再編集性とは、つまり、いったんつくったものをあとから自由につくり変えられる、ということです。Illustrator はベクターグラフィックスを扱うツールですので、描いたものをリアルタイムにレンダリングしています。そのため、品質を落とさずにあらゆる変更ができるわけです。おっと、それは Illustrator 以外でもできるよ、ということについては後述するとして、まずはデザインにおける再編集性の大事さについて述べていきます。

再編集できることは、実際のデザインにどのようなメリットをもたらすのでしょう。特に大事なことを3つ挙げます。

変更にびくともしない

どんな仕事であっても、仕上がりつつあるデザインをあとから変更しなければならないことはいくらでもあります。レイアウトがすべて完了したあとに20色のカラーバリエーションを新しく提案するとき、50画面すべてに使っているツールバーアイコンの仕様を変えるとき、クールな外観で進めていたアプリのもっとやわらかいバージョンを試すとき、どうすれば解決できるでしょうか。再編集性が高いとは、つまりいつでも変更できるということです。フェンリルデザインの手法は、画像リソース、画面レイアウト、仕様書までを切り離して作業できるようにすることで、大小さまざまな変更にも応えられる柔軟さを保ちます。どんな変更に直面してもうろたえることはありません。たいていは、涼しい顔をして、その場で解決できることばかりです。

派生させ放題、使い回し放題

再編集性を保てば、ちょっとした調整の繰り返しや、複数図案への派生もあっという間にできます。歯車の歯の数をアイコンサイズ別に変えたり、矢印の形や長さを何パターンも用意したり、同じグラデーションをもったボタンを多色展開したり、といった作業にも、何の苦労もありません。しかも、一度つくれば、別の似たアイコンやボタンが必要になったときにも活かすことができます。これは、再編集性が担保されているからこそできることです。というのも、どんなに汎用的な図案でも、完全に同じデータを流用できることは少ないからです。再編集性があるからこそ、よく使うグラフィックを各々の文脈に合わせて使い回すことが実現できます。しかもそのための調整は、たいていは1分ほどでできることなのです。

ぎりぎりまでこだわれる

再編集性の利点は、外的要因による変更だけに活かされるわけではありません。自分自身がデザインをさらによいものにするときにこそ、むしろたくさんの変更が必要になります。ときには、締め切りを前に、こだわりたくても時間的に追いつかない作業量に絶望したことがあるかもしれません。明日提案するアプリの全テーブルの文字色を明るめに調整したいとき、コーディング直前にウェブサイトの共通フッタに置いたアイコンをブラッシュアップしたいとき、最後の最後になって、いまさらもっといいアイディアを見つけて、サイト全体の背景パターンをすべて差し替えたくなったとき、それを躊躇なくこなせることは、デザイナーとしての仕事の質を大きく向上させます。再編集性の高いフェンリルデザインの制作手法は、それをさも当然のように実践します。

どれも、要は変更に強い、ということをいっていますが、それがデザインの品質のために、いかに重要かは想像に難しくありません。

もっとも、これらは Illustrator でなくともできることです。Photoshop でも、昨今注目を集める Sketch でも、再編集性の高いデザインが可能です。事実、フェンリルデザインのデザイナーは各々が作業に最適と考えるツールを使えます。しかしながら、Illustrator のレイアウトツールとしての実力と、それを極限まで応用しきるフェンリルデザインのノウハウが、Illustrator を最強のアプリ/ウェブデザインツールにします。これは Illustrator だけにできることです。

さらに、このノウハウを強力に支える独自のスクリプト集も書き溜めてきました。多くの面倒な手作業を省略することによって、Illustrator を使ったアプリ/ウェブデザインをますます早く、正確なものにしています。

このシリーズでは、再編集性をテーマとした、アプリやウェブデザインでの具体的な Illustrator 活用手法とスクリプト集を共有していきます。また、多くのテクニックは印刷やその他のデザインにも活かせます。無邪気なまでによいデザインをとことん追い求めるために、フェンリルデザインがお贈りする、この “ノウハウのノート” にご期待ください。