ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

Homeウェブデザイン基礎講座 > ウェブデザイナーへのカラーガイド

ウェブデザイナーへのカラーガイド

投稿日:2016年8月26日

このチュートリアルではカラーガイドについて紹介します。


Step1:はじめに

ウェブサイトは明らかにビジュアルを用いて人々とコミュニケーションを行っていますし、そして色はコミュニケーションのプロセスにおいて非常に大きな役割を果たしています。色の影響力を理解しているウェブデザイナーは他のデザイナーがマッチしないと思うような方法で視覚的に優れたサイトやページを作成することができます。

今日紹介するカラーガイドは、あなたが色についての発見をして、そしてウェブデザインへ費やす努力に変化をもたらすことになるでしょう。では楽しんでください!



Step2:カラーの定義

私たちの世界全体は色によって支配されています。色は私たちのポジティブなムードやネガティブなムードに影響を与えます。色はあなたの食欲にさえ影響を与えることができます。奇妙なことに、私たちが色として見ているものは、異なったオブジェクトから反射したしたものを、人間の目というフィルターを通して拾い上げたものです。

カラーの定義

しかし色は実際なにから作られているのか、そして我々はどのようにウェブやグラフィックデザインにそれを取り入れていけるのでしょうか?






Step3:色相

ここに12色の純粋な色があります。この数は、3つの原色、3つの二次色、それと二次色に原色を混ぜた混色の6つからなります。この12色は全ての他の色の基盤を形成していますので、それ自体で使うことも、必要な色を混ぜて創りだしてから使うこともできます。



Step4:色合い

一見複雑そうなデザインコンセプトのようであっても、色合いはオリジナルカラーに白色を加えたものでしかありません。色自身が明るくなり、ある人たちはこれをパステルと呼びます。色合い/パステルは見ている人を落ち着かせる影響を与えるとこができますし、また目に優しいので、一般的なデザインの全ての局面で使いやすいでしょう。



Step5:陰影

陰影は色を濃くするためにその色に黒色を加えたものなので、色合いとは正反対のものです。どんなソフトウェアのカラーホイールにも、くらい陰影を選択して色が黒になるまで濃くすることが可能です。陰影/濃い色はウェブデザインでよく目にしますが、しかしよく誤用されており、ウェブサイトが濃いカラーに”飽和”されています。−濃い色は目の焦点を長時間合わせて見ることが非常に難しいのです。

陰影



Step6:トーン

トーンは原色に黒色と白色が加えられたものです。当たり前のことですが、白色と黒色の組み合わせというのはグレーカラーを加えることを意味します。そしてそれはプロのグラフィックデザイナーがイメージに使う手段で、カラーをいっそう魅力的にし、さらに視覚背景を加える方法です。

追加情報リンク:

The Absolute Beginner's Guide to Black in Web Des
8 Tips For Choosing Perfect Images For Your Website
Elements of Visual Storytelling: What Does Your Site Say?
The Pros and Cons of Using a Full-Screen Background Image



Step7:彩度

これは基本的に、異なった照明状態の下で、どんな色にでも作用しますし、ウェブデザインよりもインテリアデザインの方がより大きな影響があります。ウェブデザインにおける彩度は、単に所定の色がどれくらい鮮明であるかについてで、重苦しい彩度のイメージやデザイン要素は、彩度を控えるべきです。 −でなければウェブサイトが閲覧者の頭痛の種になりかねません。



Step8:強度

イメージがどれくらい明るいか、あるいはぼんやりしているかが「強度」によって表されます。赤のような非常に強烈な色は、こころと身体に刺激を与えることが可能でり、それに対して青あるいは緑のようなそれほど強烈でない色は、見ている人をいっそう落ち着かせるという効果があります。カラーの強度はあなたが心理学の分野で働くときによくわかりますし、そしてそれがどれくらい顧客に影響するかわかります。

強度



Step9:最後に

色が実際に何から作られているのかを理解するほど、そして色がどのようにウェブデザインの中で機能するのか、またそれがあなたにとってどういった意味なのか分かってきます。

まずはじめに、色がどのようにサイト訪問者とコミュニケーションをとるかを決める重量要素であることは間違いありませんが、あなたがクライアントのためにウェブサイトを設計する時には色の決定がいっそう重要になります。デザイナーが背景全体をとても暗い色で満たし、表面には明るい色合いを合わせる安易な手段を何度見てきたか数えきれません。

全ては人間の目に「まぶしい光」の効果を作り出すためで、訪問者はあなたのウェブサイトでどこかをクリックすることは無くなるでしょう。色は、それが効果的に使われるとき、ユーザーエクスペリエンスに大きな影響を与えることができますし、またこれはあなたが注意しなければいけない理由でもあります。もしウェブデザインにおいて色の決定がどれくらい重要かが疑問に感じるのであれば、とりあえずグーグルのようなサイトか、メジャーなeコマースのサイトをひと目見てください。全てのカラー要素が特定の理由でそこにあるはずです。それでも分からなけでば、コカコーラの缶を見てください、そしてそれがほとんど最小の(2色の)ことに気付くでしょう。しかしコカコーラの缶はブランドを売るために信じられないほどよく働きます。

もしあなたがまだウェブデザインの適切な色の使用方法をマスターしていなければ、いまが始める良い時です。他のプロのウェブデザイナーによって作成されたサイトはとても良い参照ポイントになります。



引用:Web Design Library  著者:AliceL  翻訳:山下



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング