色とフォントについて実践してみました!

2022-03-11

こんにちは、ソラです。

今日は色とフォントについて勉強しました。

復習がてら色とフォントを触りながら実践していきたいと思います!

WEBデザインで使うのは光の三原色

色の作り方は

  • 光の三原色=RGBを組み合わせる方法
  • 色の三原色=CMYを組み合わせる方法

があるそうです。

RGBとはR(レッド)G(グリーン)B(ブルー)、CMYはC(シアン)M(マゼンダ)Y(イエロー)です。

今はWEBデザインの勉強をしているのでデザインソフトの色の設定はRGBにします。

印刷物のデザインでは、CMYにキーカラーの黒を加えて加えCMYKを使うそうです〜!

色の組み合わせ

類似色、補色、反対色という色の組み合わせの名前を覚えました。

パスの講義を受けた際に作ったオレンジの画像を使って、色の組み合わせを試してみたいと思います。

オレンジが浮かんでいるだけの画像だとつまらないので顔を描き足してみました。

こちらのオレンジ写真の背景を類似色にするとこうなります。

類似色を使うとデザインにまとまりが出るそうです。

確かにまとまってるかも!!

次は、補色というオレンジと最も遠い色を背景に持ってきます。

補色はお互いの色を目立たせる効果があります。

確かにオレンジくんがかなり浮き上がって見えますね。

最後に反対色を合わせてみましょう。

反対色は、補色に近い色のことです。

補色は正反対の1色ですが、反対色はもう少し幅が広がるイメージですね。

補色ほどパキッと目立つわけではないですが、目立ちつつ目にもなじむ感じがしていいですね。

色のイメージ

色単体にもイメージがあります。

例えば、黄色は明るさや好奇心などのイメージがあるようです。

類似色の黄色の背景に置いたオレンジくんは、気持ちわんぱくに見えますね。

私はピンクが好きなのですが、ピンクには「優しさ、可愛らしさ、柔らかさ、幸福感」などなどのイメージがあるようです。

試しにオレンジの背景をピンクにしてみましょう。

可愛い!!!

 

フォントの印象

日本語のフォントは大きく明朝体とゴシック体があり、英語のフォントはセリフ体とサンセリフ体があります。

日本語も英語も大きな違いは文字に飾り(ウロコ)があるかどうかです。

フォントの種類が違うとイメージが違うようなので、これも試してみようと思います。

日本語の明朝体とゴシック体で画像に「可愛いオレンジ」と入力してみます。

まず明朝体です。

ヒラギノ明朝Proというフォントを使っています。

別に悪くないように思えますね。

次はゴシック体です。

あ、こっちの方が断然可愛いですね!!

明朝体の方は大人っぽいというかしっとりしすぎていて、可愛いというより美しいイメージです。

カーニング

カーニングと行間についても講義がありました。

今回は1行しか文字がないので、カーニングについてだけ実践します。

カーニングとは文字と文字の距離の調整のことです。

ただ入力した文字は漢字だと文字と文字が詰まっていて、ひらがなやカタカナ部分は文字同士が空いているようです。

まだ感覚的によくわからないのですが、言われてみると「可愛い」の「可」と「愛」が詰まっているような気もする??

少し調整してみましょう。

「可愛い」の文字と文字の間は広くし、「いオレンジ」は詰めてみました。

違いがわかるでしょうか?

並べてみますね。

自分でもきもーちしかわかりませんが😂

こういう処理が大事なんだそうです。

今回の感想

今回の講義の感想を書いていきます!

色やフォントでイメージが大きく変わるんだな

めちゃくちゃ普通の感想ですが、実際にオレンジの画像使って実践すると本当に実感しました。

色を選ぶ作業って「デザインしてる」って感じがして楽しいですね。

実際やってみないとわからない

どのフォントを使うとどんなデザインになるとか、どの色を合わせるとどんなイメージになるというのがまだ頭の中だけで再現できません。

実際に色を変え、フォントを変えて初めてわかります。

だから色々やってみるしかないですね。

経験を重ねて瞬時に判断できるようになるんだと思います。