• TOP
  • CATEGORY
    クリエイター
  • TITLE
    今回は、前回お伝えした配色のポイントや知識を踏まえたうえで実際に配色をしてみたいと思います。Webページのデザイン、チラシの作成やイラストなど、カラー系のデザインであれば必ず「色」が関わってきます。色はデザインの印象をがらりと変えてしまうものなので、配色はデザインにとって非常に重要なものだという意識を持って頂けたらと思います。
CATEGORY
クリエイター

【Adobe Illustrator初心者必見!】 デザインで重要な「色」を知ろう ③

  • DATE
    2018.12.05
  • WRITTEN BY
    あおい

>> 関連記事 :Adobe Illustrator : デザインで重要な「色」を知ろう ②

配色する際のポイントとは?

前回、ポイントとしてお伝えしたのは「配色時に全く違う色をやたらに混ぜないこと」でした。言葉で聞いてもピンとこないので、実際に配色をして見てみましょう。

 

同系色(寒色)でまとめた場合:

こちらは寒色系で配色した場合の一例です。「寒色」という名前だけあって「水」や「氷」など寒さや冷たさといった印象を受けます。このことからネガティブなイメージを連想しがちですが、「落ち着いた」「誠実な」といった印象を与えることもできるので、企業のコーポレートロゴやWebサイトに使われることも多々あります。

 

同系色(暖色)でまとめた場合:

こちらは暖色系で配色した場合の一例です。こちらも言葉通り「暖色」という名前だけあって暖かい印象を与えます。「暖かみ」や「やる気」を感じさせるもので、こちらもコーポレートロゴやWebサイトによく使われます。また、暖色系の中でも「赤」は警告という意味でも良く使われており、道路標識の禁止項目や信号機でも使われていますね。

 

混色の場合:

こちらは暖色系と寒色系を併せて使って場合の一例です。この場合は、色の調和が取れずどっち付かずの印象になってしまっています。最初にポイントとしてお伝えした違う色を混ぜないというのは、こういった結果になることを防ぐ為です。

 

混色(アクセント)の場合:

こちらも暖色系と寒色系を併せて使った場合ですが、先ほどの例とは違って見えると思います。こちらは暖色をベースとして、反対色である寒色を「アクセント」という形で配色している形になります。このように、ベースカラーを決めたうえでアクセントカラーという形で反対色を使うことは、配色のテクニックと言えます。

 

 

 


  • ドスパラ GALLERIA

    RM5C-R36


    ・デザインと真摯に向き合うことで生まれた新ケース
    ・洗練されたスペックが、快適なプレイアビリティを実現

  • TSUKUMO

    GA7J-F211/T


    ・ツクモBTOで一番売れているG-GEARシリーズ!
    ・高冷却のオリジナルケースに隙のないオールマイティスペック!

  • Ark

    GC-I5G36M


    ・コダワルほどにオトクになる「自分だけのコダワリの一台」
    ・コダワリを形に出来るカスタマイズ性

  • インバースネット

    FRGH570/SG2


    ・エアフロー性能とデザイン性に優れたプレミアムタワーケース
    ・NVIDIA GeForce RTX 3070 Ti搭載

  • パソコン工房

    LEVEL-R05A-iX4-RBX


    ・拡張性の高いミドルタワーケースを採用したゲーミングPC、購入後のメンテナンスも簡易

パソコン工房 LEVEL-R05A-iX4-RBX

191,980円(税込)

編集部が選ぶ今もっともおすすめのBTOパソコン!
美しさと性能を兼ね備えたBTOパソコン

自在に光り方や色の変更しオリジナリティある環境が構築できるゲーミングPC、拡張性の高いミドルタワーケースを採用し増設がしやすく、購入後のメンテナンスも簡易に可能!

Illustratorでの色の設定方法

配色の基本を確認したところで、Illustratorでの色の設定方法について確認しておきましょう。

色を変えたいオブジェクトを選択後、「プロパティ」パネル内の「アピアランス」から「塗り」のアイコンをクリックすることでパネルを表示できますが、ここはカラーパレットとなっており、予め色を設定したサンプルから選ぶ形になりますので、今回は次の方法で色を指定しましょう。

画面左下の「塗り」アイコンをダブルクリックして、カラーピッカーウインドウを表示します。ここでは無数の色を作り出して選択することが出来ます。以前に紹介した「HSB」を組み合わせて色を指定できます。では、復習も兼ねて色の指定方法を見てみましょう。

虹色の部分の「H(Hue)」で色相を指定します。クリックでも選ぶことはできますが、正確に指定するなら「H」を数値で行いましょう。ちょっとイメージが付きにくいと思いますが、数値は0~365°で指定します。

続いてカラー選択ウインドウ内の横軸に相当する彩度を調整します。こちらも直接クリックすることで指定もできますが、数値で行いましょう。「S(Saturation)」を0~100%で設定します。0%は無彩色(グレー)、そして100%に向かうにつれて色が濃くなっていきます。

最後にカラー選択ウインドウ内の縦軸に相当する明度を調整します。こちらは「B(Brightness)」の数値を0~100%で指定します。0%は明るさが0なので黒となり、100%に向かうに連れて明るくなっていき、指定した色がハッキリと出てきます。

>> 関連記事 :Adobe Illustratorを使って素材を作ってみよう ①

 

 

 

まとめ

複数回に渡って配色について紹介してきましたが、色についての理解は深まったでしょうか?色の設定方法については一度覚えてしまえば良いですが、「配色」については絶対的な正解は無いので、たくさんの経験を積んでセンスあるデザインができるように頑張ってください。次回からはAdobe AfterEffectsを使ってモーショングラフィックスを作成する方法をお伝えしていきます。

今おすすめのBTOパソコン

これまでの比較・検証を踏まえて、BTOおすすめ人気ランキングを発表します。なお、それぞれの検証項目に重み付けをしてランキングを作成しました。

※11月1日時点の価格
商品
価格 CPU GPU メモリー SSD HDD 電源
ドスパラ GALLERIA

RM5C-R36

Intel Core i5-11400 NVIDIA RTX 3060 DDR4-3200 16GB(8GBx2) SSD M.2 500GB/td> 650W/80PLUS BRONZE
TSUKUMO

GA7J-F211/T

Intel Core i7-11700 NVIDIA RTX 3060 DDR4-3200 16GB(8GBx2) SSD M.2 500GB 750W/80PLUS GOLD
インバースネット

FRGH570/SG2

Intel Core i7-11700KF NVIDIA RTX 3070 Ti DDR4-3200 16GB(8GBx2) SSD M.2 1TB 2TB HDD 850W/80PLUS GOLD
アプライドネット

Barikata SF30

Intel Core i5-11400 8GB(8GBx1) SSD M.2 500GB 750W/80PLUS GOLD
STORM

PG-DV7

Intel Core i7-11700 NVIDIA RTX 3060 DDR4-3200 16GB(8GBx2) SSD M.2 500GB/td> 850W/80PLUS GOLD

BACK TO LIST