Webデザインをする上でのデータの知識や色彩について

スクールではどんなことを教えているの？という質問が多かったことと、また事前にどんな知識を知っていたら授業で困らないでしょうか。
今回は、授業を受ける前に知っておくと良いことをお伝えします。

１、ビットマップとベクターデータの違い

Webデザインをする上で欠かせない知識になるビットマップとベクターデータを違いです。

まずは、ビットマップです。
Photoshopの画像データやデジカメで撮影した写真のことで、画像を色のついた点（ドット）のが集まってできています。点（ドット）の集まりなので、拡大するとどうしてもぼやけてしまいます。下記のような感じです。

次に、ベクターデータです。ビットマップとは違い、拡大してもぼやけないんです。
点と点を結んだ数式データになっており、使うツールはイラストレーターです。
イラストレーターの場合は、文字とかロゴを作る際に拡大や縮小に強いためよく使われます。テキストを拡大するとこんな感じ

２、解像度とカラーモード

解像度の数値が大きくなればなるほど、きめ細かい画像になります。
例えば、下記の画像の横幅は600ピクセルです。

Web上のスクリーンの解像度は72pixel/inchで、ピクセルしか使いませんが、単位をミリやインチにも変えられます。
しかし、印刷の場合は解像度が４倍ほど必要なので、かなり大きな画像になっています。

３、Webデザインの色彩配色

ディスプレイの色についてです。ディスプレイ上では、光の掛け合わせで色ができているため、
全ての光を足し合わせると白になります。
しかし、印刷物はインクでできているので、足し合わせるほど暗くなってしまいます。
その点を考慮して、作品作っていきましょう。

実はもう１つ特徴があります。
それは、光であるRGBを足し合わせると印刷物の色であるCMYKになります。
どういうことかというと、例えば光のRedとBlueを足すとPinkになります。また、光のGreenとBlueを足すと、Cianになります。
なぜこのようなことが起きるのかというと、色が対象関係にあるためです。
Redの反対色はCianですよね。光と色は、相対関係にあり、足し合わせるとCMYKの色になるということです。

いかがでしたか。
写真や画像を使う時に欠かせないデータの知識やWeb制作物と印刷物の違いなど、事前に知っておくと、スムーズに授業の内容が入って来ますよね。普段から広告を見ることはもちろんですが、少しでも知識が入っていると見方も変わってきますね。

また、Webデザイン１つができると、幅広く様々な仕事ができるようになります。
興味はあるけれど、難しいのでは？と思われているなら、ぜひこちらのマガジンに登録して、質問相談してみてください。

今回も読んで頂きありがとうございました！

ちょっと気になった、更に知りたくなったという方は、
ぜひ、気軽に相談できるMentaをしております。

Mentaでメンターサポート
https://menta.work/user/22914

また、Twitterではブログに書いていないこともつぶやいているので、ぜひフォローしてください。
https://twitter.com/HAMA3san

webデザイナーもくもく制作サロンへの招待について
https://note.mu/hamasan918/n/ne4d98f9db9ec

もくもく制作サロンの入会

サロンではチャットで制作の質問を受け付けたり、相談会を開いて直接現役のデザイナーになんでも聞けるコミュニティです。

月額500円となります。

入会条件
業界未経験、経験者、Webデザインエンジニアに興味がある方まで！
誰でも匿名参加OKです。

参加方法
こちらのWebデザイナーフリーランスマガジンの購読購入をいただき、下記にてSlackコミュニティにご招待させていただきます。