スタッフ厳選おすすめ情報

デザイン

おすすめ情報

2016年10月30日

色の置き方を考えてみよう

consider-the-placement-of-colors

ホームページを見ていると、
この配色綺麗だなと思うことはありませんか。
色によって、
デザインの第一印象を左右されることは多いです。
私自身も思っていた雰囲気と違うと、
行き詰ることもありました。
ですが、ちょっとしたコツがあれば
配色に悩むことは少なくなります。
今回は配色について書いていきたいと思います。

色相環

「赤→橙→黄→緑→青→藍→紫→赤紫→赤」と
円状に並べたものが色相環と呼ばれます。
一度は授業などできいたこと、
見たことがあるのではないでしょうか。
この色相環を使い、色を選んでいきます。
とても簡単なルールなので
初心者のかたもすぐ覚えられると思います。

配色について

補色色相

色相環上で向かい合う色です。
例えば、青と橙などあります。
純色のまま使うと
目に痛いきつい色合いになりますが、
トーンに変化をつけることにより、
対立が和らぎます。
また、ダイアード配色とも呼ばれます。

類似色相配色

色相環上で隣ある3色を使います。
例えば、青、青紫、紫といった組み合わせです。
バランスのとりやすい色合いですが、
色相の幅が狭く、
単調となってしまうため、
トーンで変化をつけることにより、
色にメリハリがつきます。
類似色相配色で、
黄に近い色を明るく、
青紫に近い色を暗くすると、
花や海などの自然の色の並びに近く、
調和して見える配色になります。
このような色の調和を
「ナチュラルハーモニー」と言います。
また逆に、黄に近い色を暗く、
青紫に近い色を明るくすると、
「コンプレックスハーモニー」と呼ばれます。
慣れ親しんでいない色合いのため、
目新しい配色となります。

3色配色

色相環上で等間隔の位置にある3色のことです。
例えば、赤、黄、青です。
色相環上を正三角形にとるので、
バランス感のある配色になります。
また、トライアドとも呼ばれます。

分裂補色配色

3つの色を使います。
1つの色の補色の隣り合う色が使われます。
例えば、青なら黄と橙です。
初心者が使いやすい組み合わせとなります。
また、スプリットコンプリメンタリートも呼ばれます。

4色配色

二重補色色相配色とも呼ばれ、
補色色相配色にあたる2色の組み合わせを
2つ使い、4つの色を使います。
例えば、青と橙、
赤と緑の4色を組み合わせたものです。
もっとも難しい組み合わせといわれています。
また、テトラードとも呼ばれます。

5色配色

色相環上を5等分し、
正五角形の頂点、5色の配色のことです。
全体を満遍なく使うことにより、
バランスをとりつつも元気で明るい雰囲気の
色合いとなります。
3色配色に白と黒を足したものも
5色配色と呼ばれます。
また、ペンタードとも呼ばれます。

6色配色

色相環上を6等分し、
正六角形の頂点6、色の配色です。
5色配色より1色多くなったので
更にカラフルになり
賑やかな雰囲気の色合いとなります。
こちらも4色配色に白と黒を足したものも
6色配色と呼ばれます。
また、ヘクサードとも呼ばれます。

頭の中に色相環があれば、
この色の場合は…とすぐ思いつくはずです。

やっぱり難しい…

思いついても、いくつもの色を
組み合わせることは難しいと思います。
そのような時は、
無料の配色ツールを使ってみるのも手かもしれません。

Coolors
https://coolors.co/
スペースキーを押すと、
自動的に5色配色をしてくれるサイトです。
作られた色をロックすることや
調整することも可能なので、
自分の理想の配色を見つけることができます。
スペースキーをポンポンと押すだけでも楽しいです。

LOL Colors
http://www.lolcolors.com/
4色で構成された配色パターンを集めたサイトです。
それぞれのカラーコードも確認することができます。
また、いいねをつけることもでき、
人気順に並べ替えることもできます。
4色の配色で悩んだ際には
ぜひ活用してみてはいかがでしょうか。

NIPPON COLORS
http://nipponcolors.com/
日本の伝統色を知ることができるサイトです。
伝統色を一目でわかるだけでなく、
サイト自体もとても素敵なので
見ているだけでもとても楽しく勉強ができます。
カラーコードも確認することができ、
マンセルカラーシステムも
立体的に表示され確認することができます。

まだまだ他にも無料の配色ツールがあります。
是非色々探して、
自分にあったサイトを見つけてみてください。

まとめ

いかがでしょうか?
色の配色はコツさえわかれば、
とても楽しい作業だと思います。
デザインはもちろん、
身近なファッションやインテリアにも
活かすことができるのではないでしょうか。
それだけでなく、
色によって気分や状況を表したりします。
人の気分さえ変えてしまうので
不思議なものだなと思います。
また、目の錯覚で感触は引っ込んで見えたり、
重さの感じ方が変わったりと、
色によって日常生活にも影響されているのだなと
改めて色の大切さが分かりました。
私自身まだまだ配色に関して
足りない部分があるので、
この記事を機会にもう一度勉強したいと思います。
様々なサイトを巡り、
あっ、この配色綺麗だなと思ったら是非、
よくよく観察して、参考にしてみてください。

おすすめ情報

2016年10月7日

Illustratorを効率よく使おう!

lets-use-illustrator-efficiently

Bigmacでは、Webデザインでは主にPhotoshopを
使用していますが、ここ最近印刷物やロゴの制作なども多く、
Illustratorを使用することが多かったので、
Illustratorの基本的なことから
効率良くIllustratorを使う方法まで
初心者向けにまとめていきたいと思います。

Illustratorとは?

IllustratorとPhotoshopの違いの記事でも書かれていますが、
Illustratorとは、アドビシステムズが提供している
イラスト制作や印刷物(DTP)制作をメインとした
有料のデザイン制作ソフトのことです。

また、
Illustratorでは以下のようなことができます。

・印刷物(DTP)制作
・ロゴデータ制作
・イラスト制作
・Web制作(デザイン制作)

Photoshopでは点の集合体で画像を表現するのに対し、
llustratorはベクター画像と呼ばれる、
点座標や線の方程式で画像を表現しています。
そのため、拡大・縮小しても画像が荒れることがないので、
ロゴデータやイラストデータを制作するのに適しています。

余談ではありますが、IllustratorやPhotoshop、
名称が長いので、
「イラレ」や「フォトショ」と呼ばれております。

Illustrator使用時確認したい設定

では、Illustratorを使用する際に、
最初にやっておくといい設定などを
挙げたいと思います。
Webなのか印刷物なのかで
設定が変わってきますので注意しましょう!

環境設定

[編集]→[環境設定]で
様々な設定をしていきます。

単位の設定

[編集]→[環境設定]→[単位]

印刷物では用紙サイズなどミリメートルを使うことが多いです。
比べてWebではピクセルを使用するので
以下のように設定しましょう。

Web:全てピクセル
印刷物(DTP):一般、東アジア言語のオプションはミリメートルに、
線や文字はポイント

一般の設定

[編集]→[環境設定]→[一般]

キー入力
Web:1px
印刷物(DTP):0.1mm

ガイド・グリッドの設定(任意)

[編集]→[環境設定]→[ガイド・グリッド]

こちらはガイド機能やグリッド機能を使用するのであれば
設定しておくといい項目となります。

Web:グリッドの項目の単位をpxに。
グリッド・分割数の数値は任意で問題ありません。
ピクセルグリッドを表示にもチェックしておくと便利かも!
印刷物(DTP):単位がmmになっていれば問題ありません。

ワークスペースの設定

IllustratorやPhotoshopには
ワークスペースという機能があります。
これは、あらかじめ想定されるような作業
(Web、トレース、レイアウトなど)をするにあたり
操作しやすいようにパネルやツールの
表示・並びを切り替えてくれる機能です。
特にWebの場合は、
ワークスペースをWebにして
作業を進めていくといいでしょう。
こちらを元に自分の使いやすいように
パネルを配置・表示していって、
オリジナルのものを保存することも
できるので、ぜひぜひ活用してみてください!

新規ドキュメントを作成する際の設定

制作を開始する際に、まずは新しくドキュメントを作成しますが、
その際に確認しておきたい点があります。

カラーモードの設定

Web:RGB
印刷物(DTP):CMYK

RGBとCMYKに関しては、
こちらの記事で詳しく書かれています。
RGBとCMYKの違いとは?

ラスタライズ効果

Web:スクリーン(72ppi)
印刷物(DTP):高解像度(300ppi)

プレビューモード

Web:ピクセル
印刷物(DTP):デフォルト

以上で各種設定は終了です。
制作前にこのような設定を
しっかり行っていくことで、
効率よく作業を進めることができたり、
入稿時のミスを防ぐことができたりするので
ぜひ参考にしてみてください。

Illustratorのショートカットキー

Illustratorを使用する際、
ショートカットキーを覚えておくと
格段に作業効率があがります。
覚えるのは難しいかもしれませんが、
使っていくうちに自然と覚えていきますので
なるべくショートカットキーを使って
作業していくといいでしょう。

以下様々なショートカットキーを
Windowsを基準に紹介させていただきますが、
Macの場合ほとんどがWindowsのCtrlキーを
Commandキーに変えていただければ
大丈夫です!

画面表示

スペースキー:手のひらツール
スペースキー + Ctrl:拡大ツール
スペースキー + Ctrl + Alt:縮小ツール
Ctrl + +:画面中心に向かって拡大
Ctrl + −:画面中心に向かって縮小
Ctrl + 1:100%表示
Ctrl + 0:アートボード表示
Alt + Shift + Ctrl + Y:オーバープリントビュー
Alt + Ctrl + Y:ピクセルプレビュー
Ctrl + Y:アウトライン・プレビュー表示の切り替え
Ctrl + ¥ : グリッドの表示・非行事切り替え
Ctrl + U : スマートガイドの表示・非表示
Ctrl + R : 定規の表示・非行事
Tab : ツールバー・パレットの表示・非表示切り替え
Ctrl + 5 : ガイドを作成
Ctrl + : : ガイドを表示/非表示

ツール切り替え

V : 選択ツール
A : ダイレクト選択ツール
P : ペンツール
Enter : ペンツールの描画を終了
Shift  +   + : アンカーポイントの追加ツール
– : アンカーポイントの削除ツール
Shift + C : アンカーポイントの切り替えツール
T : テキストツール
¥ : 直線ツール
M : 長方形ツール
L : 楕円形ツール
B : ブラシツール
N : 鉛筆ツール
U : メッシュツール
Shift + E : 消しゴムツール
R : 回転ツール
Shift + R : ワープツール
C : はさみツール
G : グラデーションツール
W : ブレンドツール
I : スポイトツール
Shift + O : アートボードツール(CS3から)
Q : なげなわツール
P : ペンツール
E : 自由変形ツール
O : リフレクトツール
S : 拡大・縮小ツール
K : ライブペイントツール
Z : ズームツール
Shift + K : スライスツール

図形描画

スペースキー + ドラッグ : 描画位置の変更(図形描画中のみ)
Alt + ドラッグ : 中心位置から描画(長方形・角丸・楕円形・多角形ツールのみ)
ドラッグ中 ↑ または ↓ : 角丸の調整・角の増減(角丸・多角形・スターツールのみ)

配色

F6 : カラーパネルの表示
Shift + X : 塗りと線を入れ替え
/ : 塗りまたは線をなしにする

レイヤー

F7: レイヤーパネルの表示
Ctrl + L : 新規レイヤー作成

オブジェクト・配置

Enter: 移動(オブジェクト選択時のみ)
Ctrl + D : 直前の変形を繰り返し
Ctrl + Z : 前の処理を取り消す
Ctrl + Shift+Z : 取り消した処理をやり直す
Shift + Ctrl + M : 移動
Alt + Shift + Ctrl + D : 個別に変形
Ctrl + J : パスの連結(ダイレクト選択ツールでアンカーポイント選択時のみ)
Ctrl + Alt + J : パスの平均(ダイレクト選択ツールでアンカーポイント選択時のみ)
Ctrl + 7 : クリッピングマスクの作成
Ctrl + Alt + 7 : クリッピングマスクの解除
Ctrl + ] : オブジェクトを前面に
Ctrl + [ : オブジェクトを背面に
Ctrl + Shift + ] : オブジェクトを最前面に
Ctrl + Shift + [ : オブジェクトを最背面に
Ctrl + C : コピー
Ctrl + F : 前面(Front)へペースト
Ctrl + B : 背面(Back)へペースト
Ctrl + Shift + V : 同じ位置へペースト
Ctrl + G : グループ化
Ctrl + Shift + G : グループ解除
Ctrl + 2 : 選択項目をロック
Ctrl + 5 : 選択項目をガイドに設定

文字

Ctrl + T : 文字パネル表示

カーソルを文字間に置いて
Alt + ← または → : カーニング20/1000em動かす

文字列を選択して
Alt + ← または → : トラッキング20/1000em動かす

文字を選択して
Ctrl + Shift + > : 文字を2pt大きくする
Ctrl + Shift + < : 文字を2pt小さくする
Alt + Shift + ↓ : ベースラインを2pt下げる
Alt + Shift + ↑ : ベースラインを2pt上げる

段落を選択して
Alt + ↑ : 行間を2pt減らす(横書きのみ)
Alt + ↓ : 行間を2pt増やす(横書きのみ)

以上、主に使用するものを挙げましたが
他にも様々なショートカットキーがあります。
また、カスタマイズでショートカットキーを
登録することもできるので
効率よく作業ができるように
一度見直してみてください。

イラレがおもーいとき・・・

Illustratorを使って作業をしていると、
はじめはさくさく動いていたはずなのに、
だんだんと動きが遅くなってきて
作業がなかなか進まない・・・・!
という事態によく陥ります。
そんなとき、少しでも動作を軽くするための
方法をご紹介させていただきます。

リンクされたEPSに低解像度の表示画像を使用

Illustratorで画像を配置する際、
多くの場合はepsに変換したものを使用するかと思います。
このepsをプレビューの際に低解像度で表示するという設定です。

[編集]→[環境設定]→[ファイルの管理・クリップボード]
こちらで
「リンクされたEPSに低解像度の表示用画像を使用」に
チェックを入れましょう。

フォントプレビューをオフ

[編集]→[環境設定]→[テキスト]
こちらで
「フォントプレビュー」のチェックをはずします。

使用する画像ファイルをできるだけ実寸サイズに

illustratorで画像ファイルを配置して使う場合、
配置する画像ファイルを実際に使用する実寸サイズ(100%)に
しておいたほうがパフォーマンスが良いです。
当初の予定していたサイズより後からも大きいサイズで使用したかったり、
画像をトリミング拡大して使いたいケースもあったりするので、
ちょっとだけ余裕を持たせて、使用予定の実寸サイズよりも
少し大きめの画像サイズ(110%~120%)にすると
いいと思います。

これだけでもだいぶ改善はされるかと思いますが、
それでも多く画像を配置していたりすると
限界があります・・・・
そんなときはCtrl + Yでアウトライン表示で
作業をすると、
文字の入力などはスムーズになります。
また最近は画像を配置するのを
ある程度形が出来上がってからにしたりしています。
動作が遅くなるだけで
作業効率がぐっと下がってしまうので、
気をつけて作業していきたいですね。

おすすめ情報

2016年10月4日

もう怖くない!llustratorの入稿データで戻りをなくす13のチェック項目

13-items-to-check-data-of-llustrator
データを入稿した際、印刷会社からの戻りが多い、
無事入稿できたとしても実際の仕上がりを見たら
思いのものと違った・・といった経験を
印刷物を手がけたことのあるデザイナーさんなら、
一度は通ってきている道だと思います。

自分のなかで腑に落ちない結果になるだけでなく、
入稿の過程で納期が遅れたり…なんてハメにならない為にも、
入稿前に必ずチェックしたい13項目をご紹介します。

これさえ守れば、大体の印刷物はスムーズに入稿できるでしょう!

  1. ドキュメントカラー設定はCMYKになっていますか?
  2. アートボードサイズは注文サイズで作成していますか?
  3. 裁ち落とし設定と塗り足し作成はしていますか?
  4. フォント(テキスト)は全てアウトライン化を行いましたか?
  5. 不要なオブジェクトや孤立点はありませんか?
  6. トンボはレジストレーションカラーになっていますか?
  7. 特色を使用していないませんか?
  8. 線や文字にリッチブラックを使用していませんか?
  9. 配置画像のカラーモードはCMYKになっていますか?
  10. 配置画像の解像度は300dpi以上ありますか?
  11. 配置画像は全てリンクさせるか埋め込み処理を行いましたか?
  12. オーバープリントは正しく設定してありますか?
  13. 保存時に「PDF互換ファイルを作成」にチェックを入れましたか?

「これさえチェックしておけば初心者でも失敗しない」
といえるチェック項目なので、是非、実践してみてください。

1.ドキュメントカラー設定はCMYKになっていますか?

基本的には新規ドキュメントの作成時点で設定しますが、
下記手順でいつでも確認&変更が可能です。
RGBで作成されたデータは、印刷すると色味が変化してしまうので、
必ず入稿前にもう一度チェックしましょう。

新規ドキュメントの作成時はここでカラーモードを設定できます。
p-01

作成した後でもここから確認や変更が可能です。
p-02

2.アートボードは注文サイズで作成していますか?

最近のイラストレーターは、
仕上がりサイズをアートボードとする方向に向かっているようです。

アートボード=仕上がりサイズで作成する場合は、
プリセットで選択するか、幅・高さで数値を打ち込みましょう。
p-04

が、まだまだ印刷会社も最新を追えておらず、
アートボード内にトンボを含むデータの方が、
印刷会社に誤解も少なく、従来の方法に近いため、
弊社ではアートボード=仕上がりサイズとはしていません。

どちらにするかは会社の方針や印刷会社の指示に合わせましょう。

見開きで作成した冊子の表紙、
或いは2つ折りや3つ折りのリーフレットのように、
トンボ(トリムマーク)が必要なデータの場合を除き、
基本的にアートボードは仕上りサイズに設定しておく方が、
不要なトラブルを避ける事もでき、何かとスムーズです。

その場合も、必ずトンボはつけておきましょう。
印刷会社が戸惑わずにすみます。
p-08

アートボードサイズで原稿を作成する場合には、
アートボードのサイズは、ツールパネル、
またはアートボードパネルから確認&変更が可能です。
p-03

3.3mmずつの裁ち落とし設定と塗り足し作成はしていますか?

絵柄や線、画像など、紙面のフチまでオブジェクトがある場合は、
「裁ち落とし(塗り足し)」のあるデータを入稿する必要があります。

塗り足しがないと、断裁時の誤差で内側にズレた時、
白(下地の紙色)が出てしまいます。

塗り足しは、仕上りサイズの左右上下それぞれに3mmずつ、
合わせて幅・高さに6mmずつ設けるのが一般的です。
(印刷会社によっては異なるかも知れませんので確認しましょう)

新規ドキュメントの作成時に
「裁ち落とし」の天地左右を入力しておきます。
p-06
新規ドキュメント作成時に裁ち落としを入力します。

裁ち落とし設定は、作成途中など後からでも変更が可能です。
[ファイル] → [ドキュメント設定]
ファイル→ドキュメント設定からでも裁ち落とし設定が
可能となっています。

裁ち落としは天地左右にそれぞれ3mmずつが一般的です。

ドキュメントサイズを仕上りサイズにしておけば、
塗り足しの有無も一目でわかります。
p-07

4.フォント(テキスト)は全てアウトライン化しましたか?

アウトライン化とは、文字情報(テキストオブジェクト)を
図形情報(パスオブジェクト)に変換する処理です。

文字情報であるフォントの搭載状況は、
OSやバージョンなど環境によって異なるため、
アウトライン化をしないと入稿先の環境でファイルを開いた時に、
別のフォントへの置き換わりや文字化けが生じる原因になります。

[オブジェクト] → [すべてのロックを解除] → [選択] →
[すべてを選択] → [書式] → [アウトラインを作成]

アウトライン化の後は、フォント検索などでフォントが
表示されないことを確認します。
[書式] → [フォント検索]
p-12

5.不要なオブジェクトや孤立点はないか

アートボードの外にあるオブジェクトや、孤立点などがあると、
印刷会社でエラーメッセージが出る原因にもなりますし、
ファイルに無駄な容量を持たせることになるので、
入稿前はもう一度確認し、あれば削除しておきましょう。

ちなみに孤立点とは、図形や文字になっていない
アンカーポイントのことです。
p-13

孤立点の有無は選択メニューのオブジェクトから確認が可能です。
[選択] → [オブジェクト] → [余分なポイント]

6.トンボはレジストレーションカラーになっていますか?

一旦、トンボとレジストレーションカラーについて説明しておきます。

トンボとは
印刷物を作成する際に、仕上がりサイズに断裁するための位置や
多色刷りの見当合わせのため、版下の天地・左右の
中央と四隅などに付ける目印。見当標とも言う。

レジストレーションカラーとは
カラー印刷では、全版100%
(CYMKではC:100%、Y:100%、M:100%、K:100%)の色で、
マークや文字(レジストレーションマーク)を印刷し、
それがずれないようにすることで色版ごとのずれをなくす。

Illustratorでトンボを作成する方法には
「オブジェクト」メニュー→
「トリムマークを作成(CS3以前:トンボ)」という方法と、
「効果(CS3以前:フィルタ)」メニュー→
(CS3以前:「クリエイト」)→「トリムマーク」
という2種類があります。
p-10

このように、カラーパネルとスウォッチパネルで、
トンボがレジストレーションカラーになっているかは
必ず確認しましょう。

7.特色を使用していませんか?

印刷会社で対応していない特色は印刷時にCMYKに変換されるため、
印刷物の意図しない色味の変化の原因になります。
特にオンデマンド印刷は特色印刷が出来ませんので、
入稿前に必ず特色を使用していないか確認しましょう。

特色にはスウォッチで下記の様なマークがつきます。
p-09
ウィンドウにあるドキュメント情報からも特色の有無をチェックできます。
p-14

8.線や文字にリッチブラックを使用していないか

リッチブラックとは、K100%のみの黒ではなく、
CMYを重ね合わせた「混色の黒」のことです。
K100%の透過性による色味への影響を防いだり、
より鮮やかな黒を演出する際に用いるのが一般的ですが、
細い線や小さな文字に使用すると、
ごく狭い範囲に複数のインクを重ねるためインキの滲み等で
ボヤけるなどの恐れがあります。

※レジストレーションもK100%ではなく全100%なので
トンボ(トリムマーク)以外に使用しないようにします。
p-10

9.配置画像のカラーモードはCMYKになっているか

光で色を表現するモニターではRGBで作成したデータも
そのまま鮮やかに見えますが、印刷する際は
塗料の三原色であるCMY+Kで表現しますので、
色表現域がRGBよりも狭く、
全体的に沈んだ感じに変化してしまいます。

データ内で配置した画像がRGBモードだと、
印刷された実物では色味が大きく異なってしまいます。

RGBとCMYKについて、詳しくはこちらに記載があります。
RGBとCMYKの違いとは?

10.配置画像の解像度は300dpi以上ありますか?

web上で使用する場合など、モニターで見る画像は
72dpiあれば十分ですが、印刷物に使用するカラー画像は、
原寸サイズで350dpiというのが一般的です
(印刷会社によって異なる場合があるので確認しましょう)。

なお、最近のオンデマンド印刷機は性能の向上もあり、
そこまでなくとも美しく再現できますが、
元画像の解像度より綺麗になることはありませんので、
基本的に300dpi以上にするように心がけましょう。

11.配置画像は全て埋め込み処理を行いましたか?

リンク画像の入稿漏れやファイル名の文字化け等、
リンク切れのトラブルを防ぐためにも、
配置した画像は必ずリンクが正しくなされているか
確認してから入稿しましょう。

p-17

リンク画像のリンク切れはひとめで把握できます。
リンクされているはずの画像の右に、
赤く×が出るので、すぐにわかります。
そうなっていた場合には、リンクの再設定などで
正しくリンクをつなぎ合わせてあげましょう。

また、一見つながっているように見えても、
他の遠いフォルダからリンクされていたりして
自分が作業フォルダの位置を変えても、
気づきにくいことがあります。

そのときは、そのリンクのパスをきちんと確認し、
作業フォルダ直下に収まっているか、
入念にチェックしましょう。

なお、リンク画像などをフォルダ内でさらにフォルダ分けすると
データのやり取りの中でリンク切れを起こしやすいため、
可能なかぎり1階層で全データを保管されるのがおすすめです。

また、印刷会社によってはリンクではなく埋め込みで、
というところもありますので、印刷会社に確認します。

画像を選択してリンクパネルの右上から
メニューを開いて「画像の埋め込み」
(※すべてを選択してから操作すれば一括での埋め込みも可能)
入稿前は画像の埋め込みを行えばリンク切れが防げます。

埋め込まれた画像にはパネル上でマークがつきます。
p-16

「リンク状態での入稿」は単品ごとで見たときに
それぞれのデータが軽くなるというメリットがあり、
「埋め込み状態での入稿」はリンク切れなどの
エラーがおこらなくなるというメリットがあります。
それぞれ印刷会社の規定に沿って、入稿しましょう。

12.オーバープリントは正しく設定しているか

オーバープリント設定とは、
色の異なる複数のオブジェクトが重なっている場合に、
「下の色に重ねるか、下の色を抜くか」
という製版指定の一つで、主に版ズレの防止などに使用されます。

しかし、きちんと理解せずに使用してしまうと、
白が飛んでしまったり、後ろの絵柄が透けてしまったり、
思わぬ色味の変化といったトラブルの原因にもなりますので、
印刷会社の対応にもよりますが、原則として使用しない方がお勧めです。

オーバープリントの設定や変更・確認は
ウィンドウメニューにある属性パネルから行えます。
[ウィンドウ] → [属性]

オーバープリントプレビューに切り替えるとモニター上で出力イメージが確認できます。
[表示] → [オーバープリントプレビュー]
p-18

13.保存時に「PDF互換ファイルを作成」にチェックを入れたか

印刷会社に入稿するaiファイルは、
保存する時に「PDF互換ファイルを作成」に必ずチェックを入れましょう。

ここで覚えておいて欲しいのは、製作途中のデータに限って言えば、
このチェックはどちらかというと入れなくてもいい、ということです。
なぜなら、製作中にはできるだけファイルを軽く扱いたいため、
いちいちチェックしていると、すぐにデータが重くなってしまいます。

さて、話は戻りますが、
見た目では分かりませんが、チェックを入れて保存すると
ファイル内部にPDFのような(他のソフトでも表示できる)
互換性のある情報が作られます。

なぜ必要なのかというと、印刷会社では
aiファイルから直接印刷するのではなく、
InDesignなどを経由してノンブルやインデックスの追加、
サイズや位置の細かい調整などを行う場合が多いからです。

その際、PDF互換ファイルがされていないと、
他のソフトでは貼り付け(表示)することが出来ません。

名前を付けて保存する時、オプション内の
「PDF互換ファイルを作成」チェックボックスを必ずONにします。
p-19
※配置した画像を含むにチェックすると全ての画像が
強制的に埋め込みになるので注意してください。

14.まとめ

データ入稿の前に必ずチェックしたい13の項目について、
ご理解いただけたでしょうか。
完全データをさくっと作るのはやはり経験しかありませんが、
毎度どこをチェックするべきか把握しておくと、
戻りも格段に少なくなるでしょう。

入稿まで進んだら、焦らずにひとつひとつチェックして、
スムーズな入稿になるよう、心がけましょう。

おすすめ情報

2016年9月30日

RGBとCMYKの違いとは?

what-is-the-difference-between-rgb-and-cmyk

RGBとCMYK
一度は耳にしたことがある言葉だと思います。

しかし耳にしたことがあっても、
実際にはどう違うの?
そもそもこの2つはどういう意味?と思うことも多いでしょう。
デザイン関係に携わっている方は日頃から用いられることが多くとも、
一般の方はあまり触れる機会がないと思います。
ですが、少しでもこの違いを知っておけばもしもの時に役立つはずです。
今回はこの2つの違いと注意点を書いていきたいと思います。

RGBとは

R=(Red)、G=(Green)、B=(Blue)の3色を混ぜ合わせ、
幅広く再現する方法です。
色をすべて混ぜ合わせると白になることから「加色混合」と呼ばれます。
「光の三原色」とも呼ばれ、
RGBはコンピュータやテレビなどに使われることが主です。
今私達が見ているこの画面もRGBで表現されています。

 CMYKとは

色の三原色に黒を加え表現する方法です。
C=シアン、M=マゼンタ、Y=イエロー、K=ブラックを
混ぜ合わせ色を再現します。
ブラックのKはCMYKと違い、
Key plate(キー・プレート)の頭文字です。
キー・プレートとは
画像の輪郭など細部を表現するために用いられた印刷版のことです。
CMYKはRGBとは違い、
色を混ぜれば混ぜるほど黒になるため、「減色混合」と呼ばれます。
そしてCMYKは印刷物に使われることが主です。
家にあるポスターやチラシはCMYKで作成されたものです。

 向いていることは…

コンピュータや印刷物と聞いて気付いている方も多いと思いますが、
RGBならWebで表現するもの。例えばWebデザインなどに。
CMYKなら、紙媒体のもの。例えば、フライヤーなどに向いています。

 RGBからCMYKに

RGBからCMYKへは簡単に変換することができます。
特にPhotoshopを使用した際に多いのではないかと思います。
私自身もRGBの場合しか使えない機能がある為、
Photoshopで作成したものをCMYKに変換することが多いです。
しかし、簡単に変換することができますが、
注意しなければならないことがあります。
RGBとCMYKは再現できる色の範囲が違う為、
RGBで作成したものをCMYKに変換すると色味が変わってしまいます。
例えば、鮮やかな青や赤はRGBでは綺麗に色が表現されますが、
CMYKに変換するとくすんだ色合いになります。
特に鮮やかな青色はかなりくすんでしまい、
思い通りの色を表現できません。
印刷所によってはビビットな色合いも完全とはいかなくとも
再現できるところもありますが、手間が掛かってしまいます。
もしビビットな色合いを用いる場合は、
画面上(RGB)では綺麗に見えていても、
印刷(CMYK)にする際はくすんでしまい再現できないと
頭の隅に置いてもらえればと思います。

 CMYKからRGBへ

逆にCMYKからRGBへと変換することも簡単です。
RGBで作業をしていて色合いが気になり、
確認のためということでCMYKに変換することが多いと思います。
しかし、一度CMYKに変換したものを
RGBに戻した場合は、そのまま上書き保存をしてはいけません。
一度CMYKに変換したものはRGBに戻しても、
同じ鮮やかな色合いにはなりません。
確認の場合は必ずバックアップをとることを忘れずに行ってください。
Photoshopの場合は、
「表示」→「色の校正」で確認することも可能です。

 その他気を付けること

CMYKに変換して印刷しても、
紙の種類やモニタの調節の違いなどで
色合いが多少変わってしまことは避けられないことです。
何度も確認し、理想の色合いに近づくことができるよう
調整することが大切なのではないかと思います。
また、うっかりCMYKにしたままWebに載せてしまうと
色がとてもビビットになり目に痛い色合いになってしまうので
最後まで確認を怠らないよう気をつけて下さい。

 まとめ

いかがでしたか?
RGBとCMYKの知識があれば、せっかく時間をかけ、
綺麗にデザインをしたのに印刷してみたら
思ってた色と違う…と肩を落とすこともなくなるはずです。
私自身、作業をしていておもいっきり青を使ってしまい、
CMYKに変換した際にとても苦労しました。
もう少し色の変化に気を付けていれば…と時間をかけ、
やり直した覚えがあります。
また、うっかりCMYKのままWebに載せてしまい、
あまりの色の違いにかなり焦ってしまった覚えもあります。
RGBとCMYKをしっかり使い分け、
色合いに気を付け、その為に何度も確認の印刷をし、
自分の目で確かめて納得のいくデザインをしていくことが
大切なのではと思います。
さらに、色の須知を確認することや、
紙に出力して色見本を作り、印刷所に頼むことで、
ぐっと理想の色合いに近付くはずです。
今は安く、少部数で印刷を請け負ってくれる印刷所も増えたので、
一度ポストカードなどを作ってみてはいかがでしょうか?
実際に作成することにより、違いが分かると思います。
これからデザイナーを目指す方や、
デザインに触れてみたいと思った方や興味を持って頂いた方は
是非、頭の片隅に置いていただければ幸いです。

 

おすすめ情報

2016年9月22日

デザインに活かせる「色」の影響力

本文に出てくる9つの色に区切られたマスに、それぞれの色から連想されるもののイラストが描いてある。

色は、私たちが思っている以上に人の心や体の働きに影響を与えています。

あの人はなぜいつもあの色の服を着ているのか?
このお店のロゴにはなぜこの色が使われているのか?

「色」の持つ意味を知ることで、
デザインにおいて適切な色を選ぶことだけでなく、
人の心理やデザインの意図を知ることもできます。

色は、以下の4つの面から人に影響を与えています。

1.心理的影響
暗記力、回想力、認識力などの人間の能力を増す。
また、色にによって理解・学習能力を高めたり誘導ができる。

2.生理的影響
神経に影響を与えることで、血圧の上昇や降下を促す。

3.感情的影響
気分が明るくなったり、安心を感じたり、気分の変化が生じる。

4.文化的影響
文化は、人に基本的な価値観や感覚を与える。
文化によって色が人に与える印象も異なる。

今回は、9つの色が人間に与える影響をご紹介します。
では、それぞれの色の持つ意味と働きを見ていきましょう。

 

赤色の影響力

強いエネルギーをもたらす色

赤色は「活力・情熱・興奮」といった強いエネルギーをイメージする色で、
積極的なリーダータイプの人に好まれる色です。
また、やる気になっている時・元気がほしい時・自信を取り戻したい時・
自分をアピールしたい時など、エネルギーが満ち溢れているか補給したい時に
赤が好きになる人が多いです。

一方で、赤には「怒り・攻撃的・警戒心」といったネガティブなイメージもあります。
怒りや攻撃性も強いエネルギーのひとつ。
活力や情熱と同じ強いエネルギーが、ネガティブな表れ方をしたものです。

自己主張の激しい、目立つ色

赤はとても自己主張が激しく、小さくても目立つ色です。
そのため、信号機やパトランプ、消火器など、危険を表すサインとして利用されています。

赤は、血や肉・熟した果実の色であり、遠い昔から「生命に直結する」色でした。
そのため人は本能的に赤に反応するようなったと考えられます。
また、食欲や性欲といった動物的な生命力を高める色でもあります。

あたたかさを感じる色

赤は暖色の代表的な色で、あたたかみを感じる色です。
赤に囲まれた部屋では体感温度が2~3℃上がるという実験結果も報告されています。
これは交感神経が刺激され、脈拍と体温が上がり血流がよくなるためと考えられています。

寒気を感じる時や慢性的な冷え性対策に赤の効果を取り入れましょう。
冷えやすいお腹や足先には、赤の下着と靴下がおすすめです。

橙(オレンジ)色の影響力

陽気であたたかい、人間関係を促す色

橙(オレンジ)は赤と黄色が混ざった色で、
太陽や炎のような陽気であたたかい高揚感を表す色です。

橙が好きな人は、陽気で人付き合いがよく社交的で楽天的なタイプが多いです。
さびしがり屋やお人好しが多いのも特徴です。

楽しい雰囲気を作り、食欲を促す

橙色には消化、新陳代謝をよくする作用があり、食欲を促す効果があるので、
食欲がない日が続くなら食卓に橙を取り入れるといいでしょう。
キッチンや食卓に橙の色があると、料理も食事も楽しくなります。

カジュアルで親しみやすいイメージから、
飲食店のインテリアやWebデザインに使われることも多い色です。

不安や抑圧から解放する

橙のやさしくてあたたかい光は、血管や自律神経を刺激し身体を活動的にし、
恐怖やプレッシャーによる心の不安や抑圧を取り除く効果があります。

心が乱れている時や不安で押しつぶされそうな時は、橙の光を見れば、
心身のバランスを整えることができるでしょう。

 

黄色の影響力

希望と喜びを与える色

黄色は太陽の光にもっとも近い色で、
古代のエジプトやマヤ文明では太陽を表す色として崇拝されてきました。

黄色は明るい太陽のように人々に希望と喜びを与え、
楽しい感情を生み出す色です。

心理学的には、強い希望を抱いているときに鮮やかな黄色が気になる傾向があります。
また、希望をかなえるために乗り越えなけらばならないハードルがあるとき、
黄色+青や黒という高コントラストな配色を好む傾向があります。

知性を刺激する色

黄色は左脳を活性化させ知性を高めます。
理解力、記憶力、判断力が高まり、心の不安を解消します。

人前で話すのが苦手な人でも、黄色を使うと頭の回転が速くなり
会話をスムーズに運ぶことができるようになります。

甘え・自己アピールのイメージ

黄色はとても目立つ色で、危険を表すサインとして使われています。
自然界ならトラやハチの縞模様、人工物なら踏切や工事・立ち入り禁止の看板のように
黄色+黒は危険を表しているものが多いです。

また、自己アピールの強い人は黄色を好む傾向があります。
自分の方を向いてほしい=甘えの気持ちが強いときに黄色が気になります。 

緑色の影響力

バランスと安らぎの色

緑は暖色でも寒色でもない「中間色」で、もっとも刺激の少なく、
見る人に安心感と安らぎを与える色です。

また、情緒を安定させてくれたり、筋肉や骨その他組織の細胞を作る力を促進したり、
暖和効果があるので血圧を下げ、心身共にリラックスさせる効果があります。

癒しと成長のイメージ

緑は自然や平和をイメージさせ、自然がもつ癒しの効果をもたらします。
またスクスク伸びる草木のように、健康と成長をイメージさせる色です。

緑のネガティブな側面

緑は刺激の少ない色で、積極的で活発な人には好まれない傾向があります。
「保守的・受動的・マイペース」といった補色の赤とは正反対のイメージももつ色です。

青色の影響力

鎮静と抑制の色

青には鎮静作用があり、精神を落ち着かせる色です。
青の効果を取り入れれば、感情にとらわれず冷静に物事を判断できるようになります。

また、副交感神経が刺激され、脈拍や体温が下がり、痛みが緩和される効果もあります。

集中力をサポート

青は心身を落ち着かせ、長時間の集中力を助けるので、
単純作業や頭脳労働の場所で使うと効果的です。
集中力を乱さず、冷静な判断力で、飽きずに的確な仕事をすすめることができるようになるでしょう。

爽やかで信頼できるイメージ

青には「クール・爽やか・信頼感」といったイメージがあるので、
企業のWebデザインでよく使われます。
白との相性がよく、水や青空のようなクリアな透明感を表すことができます。

また、誠実さを感じさせる色なので、面接の時などに青い服を着ると効果的でしょう。

紫色の影響力

赤+青のバランスと癒し

紫色は「活発な赤」と「抑制の青」という正反対な2色が混ざった色です。
赤と青のように、ぶつかり合う2つの心が葛藤状態にあるとき、
両方の性質を持つ紫色が心のバランスを整えてくれます。

紫はよく欲求不満の色とか病的な色と言われますが、
本当は心身のバランスを整える癒しの色です。
心身が疲れてしまったときに紫の癒しを欲しているのです。

高貴な癒しの色

紫はスピリチュアリティを象徴し、セラピストやヒーラーが好む色でもあります。
遠い昔から宗教色として尊ばれてきた色で、
自分の潜在能力に気づかせてくれる色でもあります。

紫は深い瞑想に導き、潜在能力を引き出す色なので、
精神を集中したいときには紫を取り入れるといいでしょう。

紫のネガティブな側面

紫にはリンパ管や心筋、運動神経の働きを抑制する効果があるので、
スポーツで結果を出したい時には避けたほうがよい色と言えるでしょう。 

ピンク色の影響力

恋愛・しあわせ・思いやり

ピンクは、恋愛・しあわせ・思いやりなどのやさしいイメージをもつ色です。
恋に夢中の時や、幸せで充実している時、
また愛や幸せを欲している時などにピンクが気になります。

また、ピンクは心と体を若返らせる効果があり、
心を満たし人を思いやるあたたかさを与えてくれる色です。

甘さを刺激するのでダイエットに注意!

ピンクは味覚的な甘さを刺激する色なので、ダイエットのときには注意しましょう。
甘いものがとてもおいしく感じます。

黒色の影響力

強い意志や不屈さを感じさせる色

黒は、他の色に与える影響が強く、
色を組み合わせたときには黒のイメージが上乗せされます。

威圧感を感じさせ、力を象徴する色なので、
疲れていて、他人と少し距離を置きたい、と思ったとき、
外の世界から自分を守ってくれる印象の強い黒に惹かれると言われています。

また、黒には、弱さを隠して強く見せる効果があるので、
相手になめられたくない場面や拒否や拒絶を相手に与えたい場合におすすめです。

黒のネガティブな側面

黒はもともと恐怖の色でした。
それは、大昔を想像してみれば分かります。
夜になればあたりは真っ暗で、何も見えません。
野生の動物に襲われることも多く、おびえて暮らすしか手段はありませんでした。

つまり、黒は死と隣り合わせの色だったのです。
なので、黒は不安や恐怖を与え、人間の活動エネルギーを低下させ、
暗い気持ちになりやすい色なのです。

黒一色の空間に人間を置くと、各臓器の活動が著しく低下するといった
研究結果も出ていて、老化を促進させるとも言われています。

白色の影響力

 純潔・純真の色

白は、誠実さや上品な印象を与えるので
初対面の人に会うときなどは好印象を与える効果的な色です。

また、白の真っさらな状態は始まりや出発といったスタートを印象づけます。
白は役の色をひきだたせる効果のある色です。

綺麗に見える広告、商品のデザインなどは白地であることが多いです。
分かりやすい例として、フランス料理が綺麗に見えるのは、
基本的に真っ白な白い皿に色彩が鮮やかに料理を盛り付けているからです。

 

潔感のあるイメージ

病院などでは清潔感を重視し白が多用されます。

また、呼吸器系に作用し、呼吸を楽にする効果があったり、
切り替えの作用があるので前向きな気持ちになるパワーをくれたり、
白の軽いイメージは身体の不調も軽くしてくれます。

しかし、真っ白だと心が緊張し疲れたり、冷たさも感じさせてしまうため、
オフホワイトやアイボリーなどの方が清潔さを感じつつ落ち着きを得られます。

まとめ

ほとんどの人が、「色はただの色」としてしか見ていないと思いますが、
色は、こんなにも人の心や体に大きな影響を与えていたのです

この事実をを知ってから改めて身の周りのものを見ると、
理由があってその色が選ばれている事がわかりますね。

またその日選んだ服も、その日の感情に合った色を自然に選んでいたりもします。
一度身の回りの色を見てどんな影響をうけているか考えてみるのも面白いでしょう。