配色と文字のコツ

デザインルール「配色」

何も考えずに配色を決めると、クライアントやデザイナーの好みが優先されて、ウェブサイトを使うユーザーが考慮されず、独りよがりなサイトができあがってしまいます。

また、そうやって作られたサイトは配色に一貫性がなく、なんとなく「もっさりとしている」「素人っぽい」サイトになってしまいがちです。

そうならないよう、ここからは配色のルールについて学んでいきます。配色の全てではなく、ウェブサイトの配色に特に関係のある部分に焦点を当てていきます。もっと色について学びたい方は最後に推薦図書へのリンクも紹介しておきますので、ご参考にしてください。

ウェブで使う色は3つの原色で表現されている

私達が日常的に観ているテレビやパソコン、スマホでは、どうやって画面に色を付けているでしょうか。答えは、3色の「光」を組み合わせることで、多彩な色を表現しているのです。

この3色（または3原色）とは、赤・緑・青のことになります。ウェブデザインではこの3原色（Red、Green、Blue）の頭文字を取ってRGB（あーるじーびー）と呼んでいます。

このRGBが実践的に登場するのはCSSのレッスンです。今回は概念的な部分を学んでおきましょう。

濃い色や明るい色などはどう表現されるか

「赤色」や「青」といった色を直接表す言葉に加えて、よく「明るい赤」や「鮮やか青」といった表現を目にしますよね。赤か青かといった色の違いを、専門的には「

色相」と呼び、色の明るさは「明度」と呼び、鮮やかさは「彩度」と呼んでいます。

色相、明度、彩度を合わせて色の三属性と呼んだりしています。

あまり文字ばかりではイメージが湧きづらいので、ツールを使って実感してみましょう。

Googleで「カラーピッカー」と検索すると次のような画面が出てきます。（カラーピッカーの検索結果はこちらをクリックしても表示できます（※1））

このカラーピッカーの見方は次のようになります。

右上のグラデーションの部分が、色を選択する箇所です。白い丸をドラッグすると色の選択が変わります。

横方向に白い丸を動かすと彩度を変更できて、縦方向なら明度を変更できます。
左上の単色の部分が、現在白い丸で選択されている色のプレビューです。
真ん中にあるカラフルなバーが、色相を変えることが出来るスライダーです。
そして一番左下には、今選択しているカラーの値が表示されています。

ウェブデザインで重要となる数値は、RGBの値と、一番目立つHEXという値の2つになります。CSSのレッスンでは、RGBかHEXのどちらかを指定することになるのですが、主にHEXを使うことになります。

実際に開いて（※2）、白い丸やカラフルなバーのスライダーを動かしてみてください。

配色の決め方

仕事で配色を決める際は、クライアントの意向を聞いて具体的な色を提案したり、サイトで取り扱う商品や企業イメージなどから色を提案するなど、様々なケースが想定されます。

どういったケースにせよ、ウェブデザイナーは色に対する基本的な理解が必要とされます。かといって学術的で難解な色の仕組みを完全に理解する必要はありません。まずは多くの人が抱いている色への印象を改めて言語化しておきましょう。

色が呼び起こす感情

例えば道路の信号機を思い出してください。緑と黄色と赤で構成されていますよね。赤は危険という感情を喚起して、黄色は注意、緑は安全といった具合に、色にはそれぞれ人に与える効果があります。個人差はありますが、一般的に定義されている色の効果をまとめておきます。

色	一般的なイメージ
■赤	太陽、りんご、血、火、消防車、赤十字、愛情、情熱、強さ、リーダーシップ、危険、怒り、活発
■ピンク	桜、もも、赤ちゃん、女性（※）、幸せ、かわいさ、甘い、若い、柔らかい、開放的、弱い、わがまま、魅力的
■オレンジ	夕日、果物のオレンジ、柿、人参、ビタミン、温かい、親しみやすい、明るい、楽しい、健康的、安い、低俗
■黄色	光、バナナ、レモン、子ども、希望、喜び、幸せ、躍動的、にぎわい、注意、警告、騒がしい、金色、金メダル
■緑	自然、草木、ピーマン、きゅうり、安全、平和、公平、命、癒やし、新鮮、若さ、未熟
■青	空、海、水、夏、冷たい、男性（※）、静か、冷静、信頼、誠実、知的、爽やか、憂鬱、孤独
■紫	ぶどう、なす、あじさい、ラベンダー、高貴、神秘的、和、不吉、大人、死、悪魔、高級
□白	雪、雲、無垢、純真、ミルク、白衣、清潔、新しい、善、心理、緊張

上に挙げたのはあくまで一般的な色の印象です。ウェブサイトで取り扱う商品やターゲットユーザーによっては色の印象は変わる可能性があるので、案件ごとに色がもたらす効果を調べてから配色を決める必要があります。例えば空手なら帯の色で習得の度合いを表します。白帯や黄帯は入門者を表し、上級者は茶帯や黒帯になる、といった具合です。

色を組み合わせるコツ

様々な印象を持つ色同士を組み合わせることで、複雑なニュアンスを表現できるようになります。

ここでは色の組み合わせを決めるコツを紹介しておきます。

デザイン経験が少ないときは、次の2つに注力して決めましょう。

• いくつの色を使うか
• 各色が占める画面の比率はどのくらいにするか

色の数が多いと難易度が高くなる

ウェブデザインをするときは、どんな色をどの程度どんな場所で使うか考える必要があります。

初めは3色を選ぶところから始めましょう。多くても5色程度に抑えておくと良いでしょう。

色が増えるほど配色のバランスを考える難易度は上がります。

色ごとの比率にも注意

色をいくつ使うかだけではなく、何色をどの程度使うか、によってもイメージは大きく変わってきます。例えば似たような赤でも、画面全体が赤いのか、ほんの一部が赤いのかによって印象は異なります。

画面全体に赤が使われているサイトの例

画面の一部に赤が使われている例

基本的な色の数は3色、比率は70%、25%、5%

初めての頃は何も指針がないと困ると思いますので、この見出しのように「色の数は3色、比率は70%、25%、5%」を目安にデザインしましょう。

比率によって色の呼び方を決めておくとクライアントやチームメンバーとの意思疎通に便利です。自分の理解のためにも役立ちます。

名称	割合	備考
ベースカラー	70％	最も面積を多く占めるのがベースカラーです。
サブカラー	25％	アソートカラーとも言います。ベースについで面積が多くなります。
アクセントカラー	5%	いわゆるワンポイントや差し色のことです。面積は非常に少ないのですが、自由な位置でワンポイントとして機能するように使います。

配色を言語化する

配色を表現するときに「何色と何色と何色の組み合わせ」ではなく、表現したいイメージを短い言葉で表現してみるとクライアントとの合意が得やすいでしょう。

たとえば20代、30代女性をターゲットにしているヨガ教室のサイトを作っているとしましょう。クライアントとの話し合いで「女性らしさは残しつつ、落ち着いたテイストの配色がいい」という要望を引き出し「茶色、緑、ピンク」といった配色を提案するとします。その際に単に色の名前を提示するだけではなく、「大地を感じさせるような深いブラウンと、草木を彷彿させる緑に、オトナ女子感を出すためにピンク系を混ぜた配色」といったように色のイメージを言語化して伝えます。

言語化することでクライアントとの認識のズレが生じにくくなり、こちらがクライアントの要望に沿ったデザインに取り組んでいることも伝わるでしょう。

言語化するコツは、先ほど表にまとめた各色の印象とウェブサイトのテーマを足して連想することです。茶色＋ヨガ＝大地、といった具合です。

参考サイトを観て配色を考える

配色を考える際には、他サイトを観て決める方法も一般的です。このとき役に立つのが、ギャラリーサイトの存在です。

ギャラリーサイトとは、優れたデザインのウェブサイトを集めているサイトのことです。どのギャラリーサイトも検索機能に優れており、「赤色を使ったサイト」「ファッション業界のサイト」「ポートフォリオ」といった様々な角度で優れたデザインを探すことが出来ます。

おすすめのギャラリーサイトを載せておきます。時間のあるときに雰囲気を覗いておきましょう。

ギャラリーサイト	おすすめポイント
MUUUUU.ORG	スマホで見たときに、ページ下部までスクロールすると、自動的に次ページを読み込んでくれます。サイドバーに検索できる項目が一覧化されている点も見やすいです。
I/O 3000	右下にあるトグルボタン（※）をクリックすると、1サイトずつじっくり閲覧するモードに切り替わります。※トグルボタンとはONとOFFを切り替えるボタンのことです
bookma!	デスクトップとモバイルの両方を載せてくれています。ただし検索がフリーキーワード検索のみなので注意。
Web Design Clip	日本のサイトと世界のサイトを分けて閲覧することが出来ます。日本語でかっこいいサイトだけを見たいというときは便利です。

配色の参考になる優れたサイト

実際にギャラリーサイトを使って、いくつかのウェブサイトをピックアップしました。配色のお手本として紹介します。

TERRITORY

https://www.originalterritory.com/（※4）

犬が主役のサイトなので、犬の毛並みを連想させる茶色を中心に、ナチュラル感の強い配色が施されています。それでいて高い彩度のオレンジや茶色を組み合わせることで、品格の高さも持ち合わせています。

FEMME & FIERCE

https://femmeandfierce.nl/（※5）

上品な女性らしさを感じさせるピンク系統の配色が美しいサイトです。優雅さと上質な雰囲気を持ち合わせています。ピンク系統はともするとガーリーすぎる雰囲気を作ってしまいますが、絶妙な彩度の調整でエレガントさを演出しています。

Agora

https://www.agora.pe/（※6）

クリアな印象を強く持つ白と青で構成されたウェブサイトです。どこまでも透明感の高さを感じさせる配色です。青と白が目立ちますが、薄い灰色も全体に統一感を生むために一役買っている技アリのサイトです。また、濃い青と薄めの青の使い分けに加えて、影を多用することでベタッとした印象を一切感じさせない半重力感も兼ね備えています。

この他にもギャラリーサイトにはウェブデザインのゴールと言っても過言ではない素晴らしいサイトが集められています。時間のあるときに眺めて、自分の琴線に触れるウェブデザインをブックマークしたりスクリーンショットを撮っておきましょう。

配色ツール

ページの上部で紹介したGoogle検索のカラーピッカーのように、配色を行うことを手伝ってくれるウェブサービスが多くリリースされています。中でもPhotoshopを販売しているAdobe社の「Adobe Color」は様々な連携機能も持ち合わせており、カラーピッカーも優れていますのでオススメです。

他のオススメツールと合わせて、何点か紹介しておきます。実際にカリキュラムの課題やお仕事で配色を行う際にはこういったツールを使って、配色を考える一助にしてください。

配色ツール	オススメポイント（メンターの）
Adobe Color	円形のカラーホイールで色相と彩度を決定します。明度を変更するには画面下部にある太陽のマークを調整します。ベースカラーが決まっていると特に便利なツールで、ベースカラーに合う色を様々な配色パターンで提示してくれます。専門用語も多いのでツールの習熟には学習が必要ですが、使いこなせるとAdobe社の各製品との連動もできて、非常に強力な仕事道具になるでしょう。
HUE / 360	放射状に並んだ色をクリックしていくと、選択した色に合う次の色を選択できる、という仕組みです。シンプルな構造ながら奥が深く、色への理解がある程度高まってからなら使い勝手が良いツールです。こちらのサイトに詳しい使い方が紹介されているので、参考にしてください。https://gigazine.net/news/20150730-hue-360/
Googleカラーピッカー	先ほど紹介したGoogle検索結果に表示されるカラーピッカーです。色のHEX値やRGB値などを素早く確認したいときや、今回のように色の色相・明度・彩度の関係を復習したいときには、このくらいシンプルな方が便利です。

配色のまとめ

色について見ていきました。かなり奥が深いため、色については長期的に理解を深めていくことをおすすめします。まずはカリキュラムで課題として配色を考えるシーンなどもあるので、それを最初の練習としてください。

受講後の学習指針としては、ギャラリーサイトを見てお手本サイトを探したり、書籍を読んだり、動画学習したりする方法がオススメです。

ウェブサイトに似合う配色パターンを複数通り考えることも、良い訓練になります。

実績を積みながら徐々に色への理解を深めていきましょう。

01 デザインルール「タイポグラフィ」

タイポグラフィとは、文字のデザインのことです。

タイポグラフィには、読ませる文字のデザインと、魅せる文字のデザインの2種類があります。

読ませる文字の目的は、ウェブサイトが読みやすくすることです。主に記事の本文や説明文などが読ませる文字になります。

魅せる文字の目的は、ウェブサイトの印象を操作することです。主にキャッチコピーやタイトルやロゴなどが魅せる文字になります。

どちらの文字でも次の作業が必要になります。

• フォントを選ぶ
• フォントを微調整する

1つずつ見ていきましょう。

フォントを選ぶ

フォントとは、文字の書体のことです。カクカクした文字や筆で書いたような文字など、文字には多様なフォントがあります。

実際フォントは数え切れないほどたくさんあります。数万種類以上あります。

全てを網羅しようとはせず、案件ごとに適切なフォントを見つけて使う、というスタンスで少しずつ理解を深めていきましょう。

フォントのカテゴリ

フォントには日本語フォントと欧文フォント（英語など）があり、どちらも大きく分けて次のような書体があります。

• 明朝体（セリフ）
• ゴシック体（サンセリフ）
• 丸ゴシック体
• 筆記体（スクリプト体）
• その他（デザイン書体など）

特に頻繁に使われているのは最初の2つで、日本語フォントでは明朝体とゴシック体、欧文フォントではセリフ（serif）とサンセリフ（sans serif）が多く使われています。

読ませる文字のデザインでは、明朝体（セリフ）かゴシック体（サンセリフ）のどちらかの書体を採用するのが一般的です。

魅せる文字のデザインでは、どの書体も可能性があります。

明朝体（セリフ）とゴシック体（サンセリフ）についてはもう少し詳しく見ておきます。

明朝体とゴシック体（セリフとサンセリフ）の見た目の違い

見た目上の両者の違いは一目瞭然です。「うろこ（ウロコ、鱗）」と呼ばれる尖った部分があるかどうかになります。

次の図をご覧ください。

文字が細いか太いかではなく、うろこの有無が明朝体（セリフ体）とゴシック体（サンセリフ体）の違いになります。

明朝体とゴシック体（セリフとサンセリフ）の印象の違い

明朝体とセリフ体の印象は、一般的には次のようになります。

• 格式が高い
• 大人っぽい
• 真面目
• 優雅
• 上品
• 知的
• 女性的

ゴシック体とサンセリフの一般的な印象も次にまとめておきます。

• シンプル
• 親近感がある
• 目立つ
• 男性的

どんなウェブサイトなのか、どんなメッセージを伝えたいのかなどによって、どちらのフォントを使うかを決めます。両者を使うウェブサイトもあれば、ゴシック体のみを使うウェブサイトも多くあります。ほとんどのサイトでゴシック体は使われています。

明朝体を上手に使っているサイト

ここでは明朝体をうまく取り入れているサイトを紹介していきます。

http://kyu-plus.jp/info/staff.html（※7）

メニューやスタッフ名などに明朝体を使い、和の雰囲気を強く感じさせるタイポグラフィになっています。

フォントを微調整する

タイポグラフィにおける2つ目の作業は、微調整です。どのような調整が行われるか、知っておきましょう。

サイズを調整する

文字の大きさを調整する作業です。どの程度の大きさがいいかは周囲との関係により決まるので具体的な数値は示せませんが、見出しなら大きめ、本文なら読みやすいサイズ、注釈や補足などは小さめサイズといった具合になります。

キャッチコピーやロゴなども、やはり周囲との関係によって、適切なサイズは変わります。

色を調整する

文字の色も変更できます。これはサイトがどういった配色なのかに左右されます。

気をつけたいのは、白っぽい背景に白っぽい文字を重ねたり、濃い色の背景に黒字を重ねてしまわないようにするという点です。こういう状態を可読性が低いと表現します。

可読性を保った上で、目立たせたい文字の色やリンクの色などを決めていくことになります。

太さを調整する

文字の太さはウェイトと呼ばれています。

周囲との関係によって、文字のウェイトを調整することになります。

また、目立たせたい文字は色を変えるのではなく太さを変えるという手もあります。

装飾を調整する

文字を斜めに傾けたり、強調したい文字に下線を引いたり、蛍光ペンでマーカーを書くような装飾を施したりと、サイトの雰囲気との兼ね合いで様々な装飾を施すことができます。

行間を調整する

行間とは、横書きであれば、文字と文字の縦の余白になります。あまり詰まりすぎていると可読性が低くなります。

適切な距離感は、文字の大きさの1.5倍から1.75倍くらいだと言われています。

字間を調整する

字間とは、横書きであれば、文字と文字の横の余白になります。この字間を調整する作業はカーニングと呼ばれています。

カーニングの練習では、http://type.method.ac/　というサイトが有名です。

ただし、Webデザインでは字間の調整はあまり神経質に行われません。チラシやパンフレットなどの紙のデザインであればカーニングは基本中の基本ですが、Webデザインではそうではありません。

はじめの頃は字間の調整は意識から外してしまってもOKです。

タイポグラフィまとめ

ここまで見てきたレイアウトや配色のような第一印象に大きく影響するデザインに比べると、読ませる文字のデザインは微調整を多く施すことになります。

魅せる文字のデザインの方は、読ませる文字よりも大きくなったり目立つことが多いので、ウェブサイトの第一印象に影響します。

どちらも大切なので、様々なフォントの特徴に触れていき、ケースバイケースでフォントを採用していけるようになりましょう。配色と同様で、実践の中で１つ１つのウェブデザインを設計する際に、複数のフォントパターンを比較するなどして、徐々にレベルアップしていくことが王道です。

デバイスフォントとWEBフォント

ウェブサイトでフォントを扱う際には、windowsやmacに最初から入っているデバイスフォントを指定する方法と、WEB上にあるWEBフォントを指定する方法があります。（デバイスとは、パソコンやスマホやタブレットやスマートウォッチなどの機器のこと全般を指す用語です）

デバイスフォントを使う最大の魅力は、パソコンにすでにダウンロードされているので、表示スピードが早い点です。

ただしwindowsとmacですら入っているフォントが異なるため、片方では意図したとおりに見えていても、もう片方では少し違うといった現象がおきます。これがスマホなど別のデバイスも含めると、さらに違って見えるケースが増えることになります。

そこでWEBフォントという解決策が登場します。

WEBフォントは、WEB上にあるフォントをダウンロードして表示するため、どのデバイスで見ても同じフォントで文字が表示されます。

デメリットもあります。

• ダウンロードしてから表示するので、表示スピードが遅くなる可能性があります。
• サイズが大きい（対応する漢字や記号が多い）と、表示スピードが遅くなる可能性があります。
• 使用料がかかるWEBフォントもあります。

これらのデメリットはありますが、最近ではどんどんWEBフォントを採用するサイトが増えています。

WEBフォントを配信しているサイトでは次のものが有名です。

• Googleフォント（無料）
• Adobe Fonts（旧称はAdobe Typekit）（有料）
• Typesquere（有料）

まとめ

ここまではデザインルールに触れてきました。

インプット系のレッスンが続いているため、知識の吸収が困難かと思います。ここまでの内容は一読すれば身につく類のものではありませんので、完全に理解できずとも安心してください。時々読み返して徐々に習得しましょう。

今回学んできたデザインルールは、Webデザインだけに限らず、名刺やチラシやパンフレットや本の表紙など、様々なジャンルに応用できる知識です。

言い換えれば、日常の中に題材がごまんとある、ということです。チラシなどを見るときに、デザインルールの復習も兼ねて「この情報は近接でまとめられているな」「配色で強調してるな」と眺めてみてください。

そうしているうちに、デザインルールに則っていない制作物を見ると「違和感」を感じるようになってきます。