全国5万人が受講している「サイタ」

ホームページ作成・作り方講座

ホームページ作成・作り方講座を選ぶ

初回60分無料体験OK

まずは60分の体験レッスンからスタート。
無料で実際のレッスンを体感できます。

月々4,900円〜の低料金

先生ひとりじめの個人レッスンを、この価格でご提供。レッスンは全てプライベート形式の60分間です。

通わない月は0円

曜日と時間を選べるので、
無理なくマイペースに通えます。

詳しくはこちら

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)

前の記事

次の記事

この記事を書いたコーチ

250名以上の生徒を指導!テキスト通りにいかないケースも論理的に説明

初心者歓迎ホームページ作成講座
石川健太 (ホームページ作成)

新宿・新大久保・高田馬場・目白・池袋・初台・幡ヶ谷・笹塚・明大前・下高井戸・桜上水・...

ブログ記事 ページ先頭へ