サイタWeb・デザインスクールホームページ作成講座東京 初心者歓迎ホームページ作成講座 スクールブログ ツールで簡単!...

ツールで簡単!配色を考えてみる

今日は、配色に関してお話して行きます。
配色は、明確な答えが無いだけに、悩む事が多いですが、
基本的な考え方を知っておくだけで、大分決めやすくなります。
又、便利なツールが沢山あるので、紹介していきます


■-□-■-□-■-□-■-□-■-□-■
配色の基本的な考え方
■-□-■-□-■-□-■-□-■-□-■
まずは、基本的な考え方から。
webサイトのデザインで使う色をざっくり選んでいくのが配色です。
色を選ぶ時に、色の数を3色位に抑えると、まとまりやすくなります。
調和のとれた色を選びましょう。
その際、使う色の面積に応じて、比率を考えつつ色を使うと良いです。

画面の70%
ベースカラー

画面の25%
メインカラー

画面の5%
アクセントカラー

もちろん、厳密にピッタリ比率通りでなくてもOKです。
大体で大丈夫です。

webデザインの場合
ベースカラーは、背景になる事が多いので、
白など薄い色になる事が多いです。

メインカラー
ロゴがある場合や、コーポレートカラーがある場合は、
その色になる事が多いです。
そのホームページの主たるカラーになります。

アクセントカラー
際立たせてみせたい場所(お問い合わせボタン等)に、
使う事が多いです。
アクセントを付けたい時につかう色なので、
メインカラーと、あまり似ていない色を選ぶといいと思います。
ただし、あまりに調和しない色だと、浮いてしまうので、どれくらい「似てない」色にするかがポイントです。

このような考え方で、配色を決めていくといいと思います。
厳密に、3色しか使っちゃダメというわけではなく、場合によっては4色以上になったりもします。
色数が多くなればなるほど、画面に「ごちゃごちゃ感」が出てきてしまうので、まとめるのが難しくなっていきます。


■-□-■-□-■-□-■-□-■-□-■
簡単&便利な配色ツール
■-□-■-□-■-□-■-□-■-□-■
調和のとれた色は、自分でゼロから考えると、非常に大変だし、
そもそも、調和がとれた状態がどういう状態なのかも、最初は解らないですよね^^
そこで、ネット上には様々な配色用の便利なツールがあるので、
僕がよく使うツールを紹介します。

Adobe kuler
上部の「探索」ボタンから、
既に調和のとれている配色パターンが沢山出てきます。
それを参考に、考えていくとサラッと配色が出来ちゃいます。
世界中のデザイナーが考えた配色パターンを見る事で、
「調和のとれた状態」がどんな状態なのかを知るきっかけにもなります。

ウェブ配色ツール Ver2.0
実際に、サンプルのホームページ画面を見ながら、
配色を決めていく事が出来ます。
実際に色が配置さた状態を画面で見る事が出るので、イメージしやすいです。


■-□-■-□-■-□-■-□-■-□-■
まとめ
■-□-■-□-■-□-■-□-■-□-■
配色を考える時は、ベースカラー、メインカラー、アクセントカラーの3色を決めていきます。
ホームページのデザインの場合、
ベースカラーは、白や薄い色になりがちです。
調和のとれた、メインカラーとアクセントカラーの組み合わせは、
Adobe kulerなどのツールを参考にするといいと思います。


■-□-■-□-■-□-■-□-■-□-■
今日の出来事
■-□-■-□-■-□-■-□-■-□-■
iPhone6の情報が出てきましたね♩
僕の場合、電話というよりも、ネットやアプリの為の使い方が多いので、
画面が大きくなって嬉しいです。
流石に、「発売日前から並ぶ!!」みたいな、気合いの入った事はしませんが、
いづれゲットしようと思います☆
それではまた♩


■-□-■-□-■-□-■-□-■-□-■
石川健太(イシカワケンタ)
無料体験はこちら

記事の一覧ページはこちら

こちらでも、webサイト制作に関しての情報を書いています。
webサイト作成方法の紹介ページ
■-□-■-□-■-□-■-□-■-□-■

ツールで簡単!配色を考えてみる

(2014年9月10日(水) 16:34)

前の記事

次の記事

目的・種類別にホームページ作成・作り方講座を探す

新着記事

今日はCMSに関して書いていきます。 一般的に、ブログの更新の様に、HTMLタグを知らなくても、 ホームページを更新していく事が出来る仕組みを、CMS(コンテンツマネジメントシステム)と呼びます。 企業が独自で開発したもの、有料の物、無料の物、色々あります。 現状一番人気で、世界的...

今日は、CSSの子孫セレクタと複数セレクタに関してです。 特に子孫セレクタは、HTMLのツリー構造をしっかり理解していないと、 使いこなす事が出来ないので、しっかり練習しましょう。 ■-□-■-□-■-□-■-□-■-□-■ HTMLのツリー構造とは? ■-□-■-□-■-□...

今日は、よく使うCSSのセレクタに関してです。 CSS3の登場で、非常に多くの、有用なセレクタが出てきて、とっても便利になりました。 とはいえ、一気に覚えるのは大変なので、まずは基本的な物を覚えていきましょう。 基本的なセレクト方法だけでも、工夫する事で大体のホームページは作れます。 ...

今日は、CSSの文法に関してです。 ルールをきちんと覚えてしまえば、さほど難しく無いので、是非覚えましょう ■-□-■-□-■-□-■-□-■-□-■ 「何に」、「何を」、「どうするか」 ■-□-■-□-■-□-■-□-■-□-■ CSSは、無理矢理日本語に翻訳するなら、 ...

今日は、HTMLの初心者が一番最初につまずきやすい、パスに関して書いていきます。パスにも、いくつかの種類がありますが、今回は、基本となる相対パスに関して書いていきます。 HTMLで画像等の外部ファイルを読み込むときは、「パス」という考え方をしていきます。 この「パス」の考え方は、HTM...

レッスン無料相談窓口のご案内

サイタでは、ホームページ作成レッスンに関する疑問に
専門カウンセラーがお電話にてご案内しております。
お気軽にご利用ください。

お電話相談窓口はコチラ

ブログ記事 ページ先頭へ