デザイン

アフィニティデザイナーとIBM Design Languageで「ベクターイラスト」をはじめよう Part1

作成日: 2021年8月12日

最終更新日: 2021年8月25日

この記事は次のような方々におすすめ

  • アフィニティデザイナー(Affinity Designer)を使ってみたいイラスト初心者
  • Webサイトやアプリに使えるちょっとしたイラストや背景パターンを自分で描いてみたいが、初心者・未経験で何から始めていいかわからない方

アフィニティデザイナー(Affinity Designer)とは

アフィニティデザイナー(Affinity Designer)とはデザインソフトの一つです。似たようなソフトウェアにイラストレーターがあります。相違点はいくつかありますが、決定的な違いは買い切りであることではないでしょうか。 一度支払えば、その先のサブスク料は発生しません。無料のソフトに使いづらさや機能不足を感じているけれど、イラレに予算を割くのはちょっと躊躇っているという方に是非とも試していただきたい選択肢です。

affinity-designer-website.png この記事作成時点(2021年8月)では7000円でした。ちなみに四半期ぐらいの間隔でセール価格をやっています。

ベクターイラストの基礎

ベクターイラストとは

ベクターイラストとはベクターで描いたイラストのことです。

flat
Illustration by Aleksandr Smetanov from Ouch!
line
Illustration by Karina Tsoy from Ouch!
isometric
Illustration by Sergei Tikhonov from ISOMETRIC

ベクター画像とは

線を用いて図形を描画・管理した画像。ベクトル画像、ベクターグラフィックスとも呼ぶ。点の集まりで描画するビットマップ画像とは異なり、図形の拡大や縮小などを行っても、画像が劣化しない。https://kotobank.jp/word/ベクター画像-8626

この「拡大縮小しても画像が劣化しない」特徴が、スマホやタブレットとの相性の良さから普及に伴い浸透し、今やWebサイトやアプリのアイコンや図解、挿絵などに頻繁に用いられています。

ベクターイラストの表現方法  IBM Design Languageを使ってみよう

先程示したように ベクターイラストの表現方法には立体・平面など様々です。

初心者としてベクターイラストを描く際はどんな表現を使うべきかは迷いどころの一つです。書籍のお手本や、ネットで見つけた画像やチュートリアル動画などを参考に実践するものの、「一度体系的に学んでおくべきなのでは」という必要性を感じていらっしゃる方もいるかと思います。

そんな方にお勧めしたいのはIBM Design LanguageというIBMによるデザインの論理的な作り方の体系です。その中のIllustrationが参考になるのではないかと思います。 ここにはイラストの表現方法として次の3スタイルがまとめられています。

1. Lineスタイル

line

2. Flatスタイル

line

3.Isometricスタイル

line

このシリーズではイラスト初心者がアフィニティデザイナー(Affinity Designer)を用いて、 IBM Design Language - Illustrationの3つの表現方法でベクターイラストを描いてみることで、 デザインツールの扱いに慣れていくと同時に、ベクターイラストの初心者に役立つ体系的な知識をお届けしていきます。

第一回目となる今回は1.Lineスタイルを扱います。


Lineスタイルでベクターイラストを描く

Lineスタイルとはその名の通りで表現します。 イラストで次のようなメッセージを伝えるべき場面で効果的です。

sense of precision, honesty and authority

正確さ、誠実さ、権威

www.ibm.com

アフィニティデザイナーでやってみよう

ここから先はイラストデザインツールアフィニティデザイナーを用いて、Lineスタイルでイラストを描いていきます。まずはイラストを描くための準備として設定を行います。

準備その1 「グリッド」

Lineスタイルでは4pxのグリッドを用いて描いていきます。 グリッドおよび軸マネージャーを開き、以下の通りに設定します。

  • モード:基本
  • 間隔:4px

※この時「プリセットを作成」で設定を保存しておくと、使い回せて便利です。 vector-illustration-grid-setting

また、グリッド上で要素を正確かつ規則的に配置するためにスナップを有効にしましょう。 「スナップを有効にする」にチェックを入れてください。 vector-illustration-grid-snap-setting

準備その2 「ストローク設定」

Lineスタイルは基本的に「線」で描きます。 デフォルトでは境界線の太さが0になっている場合があります。暫定的に以下の通りに設定します。

  • 幅:6px

この設定で描いてみましょう。ショートカットキー「m」で長方形ツールを選択し、四角形を描きます。 vector-illustration-border-before

次に線を引いてみましょう。

ショートカットキー「p」でペンツールを選択し、一本線と折線を引いてみましょう。

vector-illustration-path-before

以上で準備は完了です。


まずは描いてみよう

四角形などの図形を駆使してシンプルに、PC・タブレット・スマホのイラストを描いてみましょう。 この時、「アートボードツール」で一つずつアートボードを使い作業すると便利です。 vector-illustration-stroke-setting-artboard

四角形と円形の2種類でこのように描きました。 vector-illustration-stroke-design-drawing

表現のルールを押さえよう

ここからは、Lineスタイルで描くにあたっての表現のルールを紹介します。 必ずしもこのルール通り通りに描かなくても大丈夫ですが、ルールの制約の中で描くことで手早く簡潔にイラストをデザインすることができるでしょう。

1.線の太さ

線の太さは次の段階の中から選びます。 ※一つのイラストで異なる太さを使うことも可能です。その際はメリハリをつけましょう。

  • 1px
  • 1.5px
  • 2px
  • 4px
  • 6px

線の太さを変えるだけでもイラストの伝える印象が変化します。 以下の例では線の太さを上から6px、4px、2pxで描いてみました。 太い線からはポップで親しみやすい印象、細い線からはフォーマルで知的な印象が表現できます。

vector-illustration-stroke-design-drawing-lineweight

2.角度

線や図形に角度をつける際は15の倍数から選びましょう。

  • 15°
  • 30°
  • 45°
  • 60°
  • 75°
  • 90°

なぜならば、角度を15の倍数縛りで設定すると次の効果が得られるからです。

これらの標準的な角度を使用すると、イラストの一貫性を保つのに役立ちます。 www.ibm.com


3.ベーシックシェイプ

ベーシックシェイプとは、丸・三角・四角のようなシンプルな幾何学図形のことです。 イラストのベースにはこれを使うと良いでしょう。 また、イラストの中で曲線、角丸を表現するときなども原則この図形を使います。 どうしても表現しきれない場合はベジェ曲線を使います。

Lineスタイルの手法を実践してみよう

これまで説明してきた手法を使い、試しにこのような目薬のイラストを描いてみます。

1. 水滴

ibm-linestyle-tutorial-1 ベーシックシェイプの丸と三角を組み合わせます。

2.目薬の本体

ベーシックシェイプの四角形を組み合わせます。 ここでは表現のルール「角度」に沿って図形を15度回転させるのがポイントです。 ibm-linestyle-tutorial-2

3. 組み合わせる

1と2を一つに組み合わせます。 ibm-linestyle-tutorial-3 ここまででも目薬っぽくなりましたが、もう一工夫してみましょう。 ibm-linestyle-tutorial-4

4. ベーシックシェイプで表現しづらい部分を描く

ベーシックシェイプで表現しづらい部分はベジェ曲線を使います。 ここでは揺らぐ液体の表現をベジェ曲線で描きました。 ibm-linestyle-tutorial-5

完成

ここまでの手順通りに進めると完成です。

プラスα

余力のある方はもう一工夫してみましょう。 ここでは表現のルール「線の太さ」に沿って、本体部分の線を太くしました。 線の太さによって力強さと繊細さのニュアンスが表現できたかと思います。

次回予告

次回はこのような「Flatスタイル」のベクターイラストの描き方を紹介していきます。

flat
Icons made by Freepik from www.flaticon.com
flat
Icons made by Freepik from www.flaticon.com

参考書