①鮮やかなトーン

最も鮮やかな色。

活動的なイメージがあり、色のイメージを強く出したい時に効果的。

また、子供は鮮やかな色を好む傾向にあるので、幼児向けコンテンツなどにも向いている。

②明るいトーン

明るく華やかな色。

容器で健康的なイメージ、若々しいイメージがあるので、楽しさを演出するコンテンツに最適。

③深いトーン

深く、濃い色。

鮮やかさを抑えた大人っぽい雰囲気がある。

和テイストの演出にも向く。

④軽いトーン

浅く、澄んだ色。ある種の女性らしさや、子供っぽい表現に使える場合もある。

⑤柔らかいトーン

柔らかい色。

比較的中途半端に感じやすいトーンのため、ぼんやりしたイメージにもなりやすい。

⑥鈍いトーン

鈍く、くすんだ色。

ソフトトーン同様中途半端に感じやすいので、使いどころを間違えないようにしたい。

⑦暗いトーン

暗い色。

重く、堅いイメージ、男性的な力強いイメージなどを作りやすい。

暗く単調になりやすいが、鮮やかな色と組み合わせて使うとアクセントになり、効果的な演出ができる。

⑧淡いトーン

薄く、弱い色。

淡く、優しいイメージで、医療系、健康系に使われやすい。

メリハリに欠けるため、ダークトーン同様アクセントカラーの使い方が重要になる。

⑨ライトグレイトーン

グレーに近い色。

渋さや落ち着き、大人しいイメージがある。

ニュートラグレーでは冷たすぎる場合などに、色味をつける目的で使われやすい。

⑩グレイトーン

グレーに近く、暗めの色。

濁った感じや地味なイメージなので、使いどころは限定される。

⑪ダークグレイトーン

ほぼ黒に近い色。

黒に若干色味をつけたい場合に使う。

Webブラウザでは環境によって色がぶれるため、黒との違いがわからない場合もある。

使用はできるだけ避けたほうが良い。

さらに詳しく見るなら

ＣＳＳ、ＸＨＴＭＬ、レイアウト、ブラウザ、Ａｊａｘなど、Ｗｅｂに関わる人なら最低限知っているべき常識１００を紹介。知りたかったテク、使いたいワザが満載！ デザイナー・プロデューサー・ディレクター必携の一冊。

配色の経験が少ない人ほど、赤、青などの色相に重点を置いて考える傾向にあるが、配色計画は初めにトーンを決定してから色相を調整するとよい。

色相・彩度・明度

色の3属性は色相(色味)・彩度(鮮やかさ)・明度（明るさ）である。

このうち、彩度と明度を組み合わせて分類したものをトーンと呼ぶ。

1つの色相にも様々なイメージ

例えば、赤という色。唇の色でもあり、女性的な配色によく使われる。

しかし時に血の色でもあるため、男性的な力強さを表現する場面でも非常によく使われる。

赤を基調とした配色は、女性的にも男性的にもなりうるわけだ。

色相から配色計画を立てていくと、初心者ほど特にこういった罠に陥りやすいだろう。

トーンは感情に直結する

同じ色相でも周囲との関係や場面で感じ取るイメージが変わってくるが、同じトーンであれば、色相が変わっても共通した感情効果を演出できる。

トーンが決定されれば、どんな色相を使ってもちぐはぐなイメージになりにくいので、まず初めにトーンから検討していくと効率がよいだろう。

共通要素とコントラスト

色を調和されるためには、必ず共通要素が必要だ。

トーンも色相もバラバラだと、調和させるのはかなり難しいと思った方がよい。

また、退屈な印象を与えないためには、コントラストも必要である。

トーンを共通要素として調和をとり、色相でコントラストをつけるのが、配色計画において最も失敗しにくい方法である。

いずれにせよ、常に調和とメリハリを心がけて配色計画をたてることが大切だ。

そのために、トーンを意識しておくことは非常に重要である。

さらに詳しく見るなら

ＣＳＳ、ＸＨＴＭＬ、レイアウト、ブラウザ、Ａｊａｘなど、Ｗｅｂに関わる人なら最低限知っているべき常識１００を紹介。知りたかったテク、使いたいワザが満載！ デザイナー・プロデューサー・ディレクター必携の一冊。

ここでは、色相環(しきそうかん)をベースにした調和配色を紹介する。

①ダイアード

色相環の対極にある2色の組み合わせをダイアードと呼ぶ。

古くは、ゲータが推奨した配色で、混合するとほぼ無彩色になることから、バランスがよいと考えられている。

②スプリット・コンプリメンタリー

ダイアードの片側を両隣の色相に分裂させた配色。

色数が増えながら、お互いのグループは補色関係(色相環の対極)にあるため、調和とコントラストが両立できる配列だ。

③トライアド

3色配色。色相環を3等分し、正三角形を描いた頂点の色によるもので、語源は音楽の三和音に由来する。

④テトラード

4色配色。色相環を4等分し、正方形を描いた頂点の色によるもの。長方形や平行四辺形というバリエーションもある。

⑤ペンタード

5色配色。色相環を5等分し、正五角形を描いた頂点の色にとるもの。トライアード+白+黒というバリエーションも存在する。

⑥ヘクサード

6色配色。色相環を6等分し、正六角形を描いた頂点の色によるもの。ペンターと同様、テトラード+白+黒というバリエーションもある。

曖昧さを避けることが重要

微妙な色の差は曖昧な印象を与えるので、色に変化をつけるならある程度、差をつけた方が良い場合の方が多い。

色相環を意識して色相選択をすれば、色相差を自在にコントロールできる。

トーンと色相環を意識して配色計画を立てれば、目的のイメージに最短距離でたどり着けるはずだ。

さらに詳しく見るなら

ＣＳＳ、ＸＨＴＭＬ、レイアウト、ブラウザ、Ａｊａｘなど、Ｗｅｂに関わる人なら最低限知っているべき常識１００を紹介。知りたかったテク、使いたいワザが満載！ デザイナー・プロデューサー・ディレクター必携の一冊。

もちろんユーザー環境を考えるのは当然だが、コンテンツの性質も意識して決めた方がよい。

一般的に大きく分けて、760px前後にするか900px前後にするかの２択になる。古いＰＣで全体を閲覧できるようにするには760px前後が適切だが、それほど古いＰＣが少ないことを考えると、ユーザーサイドからすれば実際は900px程度で問題ない場合が多い。

意外に辛い900px

ユーザー環境としては事実上問題ない900pxだが、コンテンツの内容次第では制作が辛くなることも多い。

横組みの文章の場合、読みやすい文字数の基準は最大で40文字ほど。

13pxで1行40文字の場合、文字の段組横幅は520pxとなる。

ユーザーが文字を小さくすることも考えると、余白を考えても300px以上をサイドメニューなどに使わないと間が持たないが、それには３段組でないと厳しい。

さらに、ビジュアル要素に乏しいと、スペースが広い分だけ逆に貧弱に見えてしまう。

結論として、現状ではユーザー環境を意識するよりもコンテンツの内容と充実度を優先して決定するのがよいだろう。

文字中心のコンテンツであれば、無理に横幅を広げず、従来どおりの760pxにとどめておくのが、ユーザーにも制作者にも優しいサイトとなる。

行長と行間を比例させて読みやすく

また、横幅が変わると１行の文字数に影響があるが、行間とのバランスもきちんと調整していきたい。

行長に対して、読みやすい行間はおよそ比例関係にある。

行長が長いほど、行間を空けたほうが読みやすい。

そのため、CSSでline-heightを指定する際、行長のことを考えて設定することが大切だ。

1行15文字のブロックと、1行40文字のブロックが同じ行間では読みづらくなってしまうおそれがあるので、それぞれの文字組を目で確認して最適な設定を作っていくことが必要だ。

さらに詳しく見るなら

ＣＳＳ、ＸＨＴＭＬ、レイアウト、ブラウザ、Ａｊａｘなど、Ｗｅｂに関わる人なら最低限知っているべき常識１００を紹介。知りたかったテク、使いたいワザが満載！ デザイナー・プロデューサー・ディレクター必携の一冊。

文字が横組みであれば、左上から右下へ視線が流れていくが、Webページも大きくはこのパターンに該当すると考えてよい。

Web特有の動き方

近年の研究においてWeb特有の視線の動きについて報告されており、

①視線はF字型をたどり、右サイドのコンテンツはほぼ見られない。

②画像よりテキストに視線が集まりやすい。

などの特徴があるようだ。

つまり、右サイドにあるコンテンツは見られない可能性が高く、特に右サイド下部はほぼ視線がいかないと考えてよいだろう。

画像についても、よほど意味があるもの以外は注意が集まりくい。

通信販売サイトの商品画像などは商品説明の役割を担っているため、視線んは集中するが、イメージ画像のようなものはムダなスクロールを招くことにもつながるため、敬遠される傾向が強い。

ユーザーが求める情報を与える

Webサイトに訪れるユーザーは、多くが目的を持っており、、さらにその目的が「情報」である場合が多いと考えられる。

従来の紙媒体では、特に広告においては「興味を引く」という役割も大きいが、Webサイトを訪れた時点で、ユーザーは既に興味を持ち、能動的に訪問しているため、画像や派手な広告には目を向けない蛍光になるのではないだろうか。

バナー広告もそれとわかる場合には視線を集めないようだ。

最終的には、ユーザーに必要な情報を左上に近い場所から、順序立ててレイアウトすることが望ましいといえる。

その意味で、コンテンツにごまかしが効かないことも認識しておいた方がよいと考えられる。

さらに詳しく見るなら

ＣＳＳ、ＸＨＴＭＬ、レイアウト、ブラウザ、Ａｊａｘなど、Ｗｅｂに関わる人なら最低限知っているべき常識１００を紹介。知りたかったテク、使いたいワザが満載！ デザイナー・プロデューサー・ディレクター必携の一冊。

positionプロパティは通常それほど頻繁には使われないが、周囲の要素にほとんど影響を与えないため、微調整などには便利に使える。

positionプロパティとは、「元の位置からどれくらい移動する」という設定ができるプロパティで、移動距離によってはブロック要素どうしを重ねることも可能だ。

*absoluteとrelativeがある

このpositionプロパティだが、absolute(絶対配置)とrelative(相対配置)がある。

>それぞれの使いどころ

absoluteで配置すると、レイアウトがかなり自由に、しかも簡単にできるので、精細なレイアウトをする際には便利だ。

その反面、後続の要素が重なってしまったり、フッターが上に上がってしまったりという恐れがある。

relativeの場合、他の要素には影響がないので、ブロックどうしが意図せず重なったりすることは少ないが、移動する距離を大きくしすぎると無用な空白ができることもある。

absoluteは必要最低限にとどめ、relativeはレイアウトの微調整に使うのがおすすめだ。

さらに詳しく見るなら

ＣＳＳ、ＸＨＴＭＬ、レイアウト、ブラウザ、Ａｊａｘなど、Ｗｅｂに関わる人なら最低限知っているべき常識１００を紹介。知りたかったテク、使いたいワザが満載！ デザイナー・プロデューサー・ディレクター必携の一冊。

その大小比を文字ジャンプ率と呼ぶ。

エンターテイメント系や若者向けWebページでは高めのジャンプ率を設定することで、楽しげな雰囲気や親しみやすさを演出できる。

また、高級感、信頼感が必要なページではジャンプ率を低めに設定すると、求めるイメージに近づきやすい。

・写真のジャンプ率

写真の場合は少し、趣が異なり、ジャンプ率を上げることで必ずしも活動的になるというわけではない。

例えば、クールな写真を大小つけてレイアウトすると、写真の持つクール感が強調される。

つまり、写真のジャンプ率を上げることは、写真がもつ元々持っているイメージをより強調する効果がある。

そのため、質の低い写真を大小織り交ぜてレイアウトしてしまうと、逆に質の低さが際立ってしまうことにもつながるので注意したい。

写真の質が低い場合は、大きさをそろえて整然と並べておいた方が無難で失敗が少ない。

写真の質が高ければ、メインとサブをうまく分けてレイアウトすることで、よりメインの写真の個性を印象づけられて効果的だ。

さらに詳しく見るなら

ＣＳＳ、ＸＨＴＭＬ、レイアウト、ブラウザ、Ａｊａｘなど、Ｗｅｂに関わる人なら最低限知っているべき常識１００を紹介。知りたかったテク、使いたいワザが満載！ デザイナー・プロデューサー・ディレクター必携の一冊。

・パっとしないときはコントラスト

デザインがいまいちパっとしないと感じたら、コントラストを上げることを考えると解決する場合が多い。

コントラストを上げるとは、揃え、バランスを整えた後に、崩していく作業といえる。

さらに詳しく見るなら

ＣＳＳ、ＸＨＴＭＬ、レイアウト、ブラウザ、Ａｊａｘなど、Ｗｅｂに関わる人なら最低限知っているべき常識１００を紹介。知りたかったテク、使いたいワザが満載！ デザイナー・プロデューサー・ディレクター必携の一冊。

こういった場合は、あらかじめＩＤとclassの使い分けを意識してレイアウトしておくとよい。

・レイアウトに関するもの（ブロックの位置や大きさ）をIDで指定。

ヘッダー( #header )

メインコンテンツ( #main_contents )

(ブロックの大きさ)

width

height

（位置指定）

margin

padding

・それ以外（文字スタイルなど）はclassで指定。

文字( .contents )

font-size

line-height

属性の優先順

ID = 100

class = 10

要素タイプ(pなど) = 1

さらに詳しく見るなら

ＣＳＳ、ＸＨＴＭＬ、レイアウト、ブラウザ、Ａｊａｘなど、Ｗｅｂに関わる人なら最低限知っているべき常識１００を紹介。知りたかったテク、使いたいワザが満載！ デザイナー・プロデューサー・ディレクター必携の一冊。