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

デザイン

おすすめ情報

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つの心が葛藤状態にあるとき、
両方の性質を持つ紫色が心のバランスを整えてくれます。

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

高貴な癒しの色

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

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

紫のネガティブな側面

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

ピンク色の影響力

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

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

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

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

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

黒色の影響力

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

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

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

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

黒のネガティブな側面

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

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

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

白色の影響力

 純潔・純真の色

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

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

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

 

潔感のあるイメージ

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

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

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

まとめ

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

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

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

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2016年9月2日

黄金比をはじめとする貴金属比で、より美しいデザインを。

in-the-precious-metal-ratio-including-the-golden-ratio-the-more-beautiful-design

揺るぎない美しさのルール、貴金属比とは?

皆さんは「黄金比」という言葉を一度は耳にしたことが
あるかと思います。
これは、「貴金属比」の一種です。

img-kiinzokuhi

nの場所に自然数が入り、第1貴金属比を黄金比、第2貴金属比を
白銀比、第3貴金属比を青銅比といいます。

よく聞く黄金比は、貴金属比の1つです。

全5種類ある「貴金属比」はどれらも総じて人に美しいと感じさせたり、
安心感を覚えさせるため、このルールにさえ則れば、
新米デザイナーでもプロに一歩近づいたデザインができます。

現代のWebデザインやDTPデザインなどのビジュアルデザインに
おいて、プロなら意識せずに守っているデザインの「比率」。

今日はその「比率」に目を向けて、
ルールに則って美しくデザインする方法をお伝えします。

黄金比

 

黄金比は、貴金属比の中でも最も広く知られ、古代ギリシア以来
「神の比」とも呼ばれ安定的で美しい比率であると言われています。

英語だと Golden Ratio 、世界で最も美しい比率との呼び名が
高いです。

この黄金比は自然界にも多く見つけることができます。

松ぼっくりのかさ、花びらの数、葉の生え方においても
すべてに黄金比を見つけることができます。

その比率は【 1 : 1.618 】(約5:8)からなります。

img-ougonhi

ひとつの線を a, b の長さで2つに分割するときに、
【 a : b = b : (a+b) 】が成り立つように分割したときの比
a : b のことであり、その値はどちらも【 1.618 】となります。

その調和された比率は、トランプカードなどの日常的なものから、
ギザの大ピラミッドからギリシャにあるパルテノン宮殿、
システィーナ礼拝堂内にあるミケランジェロの
「アダムの創造(Creation of Adam)」、
ヴァン・ゴッホの「モナ・リザ」などの芸術分野まで、
多数存在します。

最近ですと、名刺をはじめとした様々なカード類、
郵便はがきにも黄金比が用いられています。

Apple社のリンゴマークにも黄金比が使われていることで有名です。

Apple製品はiPhoneやMacBookなど、様々なデザインに
黄金比が用いられています。

世界共通で美しいと感じさせるのは、さすがのAppleと言えますが、
それらにもきちんと理由があったのですね。

シンプルながら美しい印象を与えるのには安定した比率が
用いられてるから、というのも大きな要因でしょう。

実際私たちの脳みそは、黄金比を利用している物体やイメージを
好むとされており、ほとんど無意識の反応をしています。

黄金比を利用してデザインを微調整することで、
脳により強いインパクトを与えることができます。

さて、実際に黄金比がどういった理屈で成り立っているか
ご説明しましょう。

黄金比は、図形にも適用することができます。

正方形を用意し、片方の長さを1.618倍にすることで、
美しく均等のとれた長方形「黄金長方形」を作成することができます。

正方形と長方形を並べることで、黄金比を表現することができます。

一番右の長方形に黄金比を適用することで、正方形の大きさが
次第に小さくなります。

それぞれの正方形の角を使い、アーチ状の滑らかなカーブ曲線を描く
ことで、螺旋状のライン(フィボナッチ数列)を描くことができます。

この数列は、0からはじまり、前の2つの数字を足すことで、
0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144と連続して続きます。

photo-ougonhi

この美しい螺旋デザインは、ひまわりの花や、貝殻、台風、
シダの草など自然界でもよく見かけ、どれも魅力的に見えるもの
ばかりです。

白銀比

白銀比とは、黄金比同様によく知られている比率で、
日本で発祥した古くから日本建築で使われている比率です。

白銀比には2つの種類があり
大和比と呼ばれる【 比率 1:1.414 = 1:√2 】(約5:7)と、
第2貴金属比【 比率1:2.414 = 1:1+√2 】(約5:12)があります。

白銀比(大和比)

img-hakuginhi-1

白銀比(第二金属比)

img-hakuginhi-2

白銀比で構成された長方形は、長辺で2等分すると、
元の白銀比の長方形と相似になります。

もっとも美しい比率として西洋の黄金比、日本の白銀比と
言われています。

大和比が使われた身近なものと言えば日本の紙の規格で、
A4、B4といったサイズはいずれも白銀比を採用しています。

そのためこれらの規格は、A4を半分にするとA5といったように
折り返しても同じ比率が保たれるため、
美しさと便利さを兼ね備えた比率と言えます。

日本古来の建造物にも白銀比は積極的に使われており、
中でも法隆寺の金堂、五重塔は有名ですね。

黄金比がもてはやされる場合が多いですが、日本人向けの
サイトデザインや印刷物においては、白銀比(大和比)を用いた方が
日本人向けのレイアウトになりやすそうです。

青銅比(第3貴金属比)

青銅比は、【 1:(3+√13) / 2 】で表される比のことを指します。

比率がだいぶ難しくなってきましたね…。

言い換えれば、【 1:1:3.303】(約3:9)と言えます。

img-seidouhi

比較的身近な黄金比、白銀比と比べ名前すら聞いたことがない
という方も多いのですが、こちらも同じく貴金属比の一つに
数えられます。

デザインの現場ではあまり多用されていませんが、
デザイナーとして知識のひとつに持ち合わせていきたいですね。

白金比

白金比は、正三角形の底辺の1/2の長さとその正三角形の高さの比に
等しい定数です。

その比率は【1:1.732 = 1:√3 】(約4:7) となります。img-hakukinhi

別名プラチナ比とも呼ばれる比で、デザインに使える比率として
存在はするものの、青銅比同様あまり知られてはいませんが、
こちらも美しい比率です。

第二黄金比

黄金比に対して、第二黄金比という比も存在します。

近似値は【 1 : 2.618 】(約3:8) の比率です。

img-dainiougonhi

しかしこちらも青銅比、白金比と同様使用されているシーンは少ないですが、
あることは知っておけるといいですね。

貴金属比をレイアウトに使うためのツールいろいろ

レイアウトのグリッドや余白間、写真のサイズ、配置など、
あらゆるシーンで貴金属比、おもに黄金比や白銀比は活躍します。

ただ、数値が計算式で求めなくてはいけないため、ちょっと割り出したい、
というときでもいちいち計算機を叩いたりしなくては
ならないとなると、面倒です。

Web上で簡単に貴金属比各種を求めることができるツールを
いくつかご紹介しますので、ぜひお役立てください。

Get Ratio

tool-1

http://getratio.com/

Get Ratioは、任意の数値を入れるだけで黄金比を含む様々なパターンの
計算をしてくれるツールです。

幅と比率を入力するだけで求められるので、
無駄がなく分かりやすいのが特徴です。

Webデザイン「黄金比」計算ツール

tool-2

http://zapanet.info/blog/item/1298

こちらの「黄金比」計算ツールは、一カ所だけでも
任意の数値を入れれば、残りの幅を自動計算し
黄金比を割り出してくれるツールです。

入力が一カ所だけでもいい、というのが最大の特徴です。

黄金比のみとはなりますが、
見た目にもわかりやすく使いやすいですね。

Metallic Ratio

tool-3

http://voidism.net/metallicratio/

Web自体がシンプルで、計算ひとつするにしても
気分があがりそうですね。

Result部分の数値を変更することができ、自動で黄金比はもちろん、
白銀比を含むいくつかの比率で計算してくれます。

まとめ

今回は黄金比を初めとした貴金属比5つと、
貴金属比をデザインに取り入れる際に便利なツールをご紹介しました。

黄金比というと、数値の計算が大変…ととっかかりにくいと
感じられるかもしれませんが、上手にWebツールを併用して
デザインに取り入れていけるといいですね。

ちなみに、「日本人は正方形(1:1)も大好き」と統計も
出ていますので、貴金属比からははずれますが、
日本人向けのデザインでは正方形もおすすめです。

すべてのプロが比率をしっかりと求めてデザインしている
わけではありません。

むしろ、感覚的にデザインしたら貴金属比に近づいていくのが
プロでしょう。

これからデザインを学ばれる方は、まずは黄金比や白銀比、
正方形の比率の絶対的に美しいとされるルールに則って
デザインしてみると必ずある程度の高みまではいけるかと
思います。

ぜひ、ご参考ください。

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2016年8月24日

高解像度ディスプレイへの対応?

corresponding-to-the-high-resolution-displayoptimize-the-image

皆さんは高解像度PCをお使いでしょうか?
もしお使いでなくても、スマートフォンは
高解像度ディスプレイが定番ですね。

ディスプレイの構造

わたしたちが普段使用している、
PCやスマートフォンのディスプレイは
小さな点の集まりでできています。

点のことをピクセル(画素)と言い、
ディスプレイのピクセルはR、G、Bの3色に
いわゆる「RGB」カラーで光ることができます。

ディスプレイは、RGBの3色を組み合わせて
色を表現し、映像を出力しています。

ディスプレイの広さの単位には「インチ」が用いられ、
縦横の長さではなく、対角線で計測します。
なので、同じインチ数のディスプレイでも、
アスペクト比(縦と横の長さの比率)が違えば、
ディスプレイの面積は異なります。

ディスプレイ1インチ辺りのピクセルの密度をピクセル解像度と言い、
ppi(pixel par inch)で表します。
ppiの数値が高いほど、出力される映像は鮮明になります。

類似の単位で、dpi(dots par inch)がありますが、
こちらは1インチ中のドット数のことを指します。
ではドットとピクセルの違いは?という疑問が出てくるかと思います。

ドットとは、ディスプレイの物理的な点のことであり、
ピクセルとは、ディスプレイ上で光っている点のことです。
ややこしいですね…。

高解像度画像について

サイトを閲覧時、下図の左のような
モヤっとした画像を見つけたことはありませんか?

retina-img

この現象は、高解像度に対応させていない画像において
おこりえます。

やっぱりせっかくサイトを公開するのですから、
画像も綺麗な状態で見せたいですよね。

弊社デザイン部では現在、サイト制作において
高解像度ディスプレイへの対応を
意欲的に取り組んでおります。

画面解像度の物理値と論理値

話を戻して。
解像度とは、本来、密度のことを表していましたが、
ディスプレイの総ピクセル数のことも解像度と呼ばれています。
区別をつけるために、ディスプレイの総ピクセル数は
画面解像度と言います。

しかし、時代は進みもっとややこしい話に…。

AppleがiPhone 4で搭載したディスプレイは326ppiの高解像度で、
100dpi前後の一般的なディスプレイを大きく上回っており、
人間の目ではドットを確認することができないレベルという意味で、
Retina(網膜)ディスプレイと名付けられました。

Retinaディスプレイとは?

レティナディスプレイ(英語:Retina Display)は、
アップル社製製品のうち、高精細ディスプレイを
搭載したモデルに与えられる名称、
およびディスプレイそのものを指す名称である。
「Retina」は英語で「網膜」という意味で、
画素が細かく人間の目で識別できる限界を超えている、
ということから命名された。
引用 Wikipedia

さて、このRetinaディスプレイの登場により、
Webサイト制作時に大きな課題が発生します。

Retinaディスプレイが登場するまでは、
基本的に画面解像度の物理的な値と論理的な値は同じでした。

物理的な値とは、その名の通りディスプレイの物理的なドット数
(画面解像度が1920×1080ならば、
物理的な点が縦に1920個、横に1080個並んでいる)で、
論理的な値とは、ディスプレイに表示されているピクセル数
(画面解像度が1920×1080ならば、1920×1080pxの画像は
デスクトップの壁紙にピッタリと収まる)のことです。

画面解像度の物理値と論理値が等しい状態のことを
「ドットバイドット」と言います。

ところが、iPhone4では、ディスプレイのインチ数はそのままに、
物理解像度は640×960、論理解像度は320×480になりました。
(ちなみに、この論理解像度のことをポイントと呼んだりします)
つまり、従来のディスプレイでの1ドットのスペースの中に、
大きさが縦横半分のサイズまで小さくなったドットが2×2の4つ入りました。
それを1pxとして扱うことにより、フォントや画像の輪郭を
より鮮明に描写することが可能になったということです。

実際にこの高解像度画像は、
閲覧側としても見ていて気持ちがいいですね。

しかし、Retinaディスプレイでもないデバイスで
すべて高解像度画像を表示させていては、
サイト自体が重たくなって、ユーザーの離脱率を
高めてしまう原因になりかねません。

どこまで高解像度画像にするか

そもそもサイトの表示が重たい原因として、
閲覧側に考えられるのは、

  • インターネット速度
  • ブラウザの環境
  • コンピュータ自体の速度が遅い
    (プロセッサまたはメモリが狭い)

などです。

ホームページ作成者側に考えれる原因としては、

  • サイト上の画像を最適化していない
  • 容量が非常に大きいファイルが読み込まれている
  • コンテンツが非常に多い
  • フォントを多用している

などが挙げられるでしょうか。

もちろん上記以外にも多くの原因が考えられますが、
訪問者のパソコンやモバイルのプロセッサに
なるべく負担をかけないように、
コンテンツを最適化することが重要です。

高解像度用の画像に対応させる方法

方法としては、3つほど考えられますが、
それぞれメリットデメリットがあります。
構築時に何を優先させるか意識して対策しましょう。

  1. 読み込ませる画像の大きさを半分にする。
    メリット:簡単
    デメリット:画像修正の時はHTMLも
    触らないといけない場合がある。(管理がしにくい)
  2. JavaScriptライブラリを使う(今回はRetina.js)
    メリット:高解像度用の画像を用意するだけで、
    勝手に読みこんでくれる(管理しやすい)
    デメリット:読み込む画像の数が増えるので、通信量が増える。
  3. Media Queriesを使って高解像度用のディスプレイを判定。
    メリット:画面サイズにあった画像を読みこませることができる。
    デメリット:毎度高解像度用の画像を設定するのが面倒。

1.読み込ませる画像の大きさを半分にする。

2倍の大きさの画像をwidth、heightで、
もしくはCSSで表示サイズを半分に指定するという方法で
表示させます。
この方法は比較的簡単に使える方法なので重宝しますが、
高解像度用の画像と通常サイズの画像を変更するときは
HTMLも触って変更しないといけないので、
変更箇所が多い場合は少し対応が面倒になります。
向いている設計としては、どれを高解像度、
通常解像度で読み込ませるか確定している場合です。

2.JavaScriptライブラリを使う(今回はRetina.js)。

Retina.jsというライブラリーを使う場合でご紹介します。
まず、「Retina.js」のファイルをダウンロードします。
retina.jsのダウンロード

あとは、解凍したjsファイルを任意のフォルダにうつして
読み込むだけです。
タグはの直前に記述してください。

これだけで、例えば画像タグがあった場合に、
example@2x.pngというRetinaディスプレイ用の画像が
存在するかどうかチェックして、存在すれば表示して
くれるようになります。

なので、通常サイズの画像と高解像度用の画像と
2パターン読み込む事になるので、
retinaディスプレイのような端末には負担が増えてしまいます。
向いている設計としては、通常サイズの画像を基本として読み込み、
高解像度用の画像は選定して読み込む場合です。
また、どれを高解像度用に読み込むか決まっていない時も
簡単に変更できるので後々の修正がやりやすいです。

軽量化を意識してサイトを作る場合はこの方法がオススメです。

3.Media Queriesを使って高解像度用のディスプレイを判定。

Media Queriesでretina化判定して読み込む画像を切り分ける事が
できるので下記のように記載します。

きちんと通常サイズの画像と高解像度用の画像を
切り分ける事で通信量を抑えることができます。
しかし、背景で画像を読み込む際に毎度書くのは面倒ですね…

向いている設計としては、通常サイズの画像を基本として読み込み、
高解像度用の画像は選定して読み込む場合です。
ですので2番のJSを使うタイプの仕様と相性が良いので、
軽量化を意識してサイトを作る場合は2がおすすめです。

ここまでRetina画像の素晴らしさをお伝えしてきましたが、
最近手がけたWordPressリニューアル案件で、
見栄え重視で綺麗な写真をビッグサイズで
多用したが故に、サイトの表示速度が落ちてしまい、
結果離脱率を高めかねない事態に陥ったため、
急遽対策を施しました。

今回のサイトでは、1.読み込ませる画像の大きさを半分にする。
で高解像度画像を読み込ませていましたが、
残念ながらこの手法ではサイトが重たくなりすぎたため、
原点回帰し、すべて等倍画像で表示させるようにしたところ、
それにより、以下のように速度が劇的に早くなりました。

2倍画像使用時のサイト速度:12.24秒

rosegarden-0630-0731

等倍画像に戻した後のサイト速度:4.14秒

rosegarden-0801-0822

一概にすべてRetina対応させればいいという
お話でもないということがお分かりいただけたでしょうか。
今回のサイトでは、ロゴや小さなアイコンなどの、
画像がもやもやしては困るところのみRetina対応させましたが
画像を多用するサイトでは、部分的な対応をおすすめします。

まとめ

LTEが順次拡大しているとはいえ、
スマホの通信量はまだまだ気にかけられていますので
できるだけ軽い表示が望まれます。
制作再度としては綺麗な画像で提供したいところですが、
そのために読み込みに時間がかかって
ユーザーにストレスを与えてしまっては
せっかくの綺麗な画像も意味がありません。

すべてにおいて高解像度用の画像を用意するのは
あまり得策ではありません。
要所要所で用い、できるだけユーザーに負担をかけない
表示速度で提供できるよう、心がけましょう。

このエントリーをはてなブックマークに追加
メルマガ登録