デザインブログ

  • TOP
  • ブログ
  • 絶対に抑えておきたいホームページの配色の面積と方法!!
e6773cd0fee5bafc1a6ce28a05353fb0_s

WEBデザイン

絶対に抑えておきたいホームページの配色の面積と方法!!

ホームページを制作する際に色の面積、配色がサイトのイメージを左右する大きな要素となります。
今回書く記事は「トーンの概念」をテーマに書いていこうと思います!!!
この「トーンの概念」を利用して配色を考えると、ホームページ全体の色がまとまりやすくなります。!!

・ホームページにおける配色の面積比率!!

使用する色の面積によってサイトの見え方が変わるので、サイトの使用する面積を考慮して色の組み合わせを考えます。
使用する色の割合を3色を目安に考えます。全体の70%の割合を占めるベースカラー、それを補うサブカラーを25%、残りの5%をアクセントカラーです。

desigin_blog_img_033

サイト全体の背景を白とする場合は白色の配色を覗いて考えます。

ベースカラーとアクセントカラーは明度や彩度の差が大きい組み合わせにするとサイト全体がまとまりやすくなります。
実際に公開されている配色は3色では足りませんが、この3色を基準にしてサイトの配色を考えると、配色が破綻せず、全体がまとまります。

 

この記事が気に入ったら
いいね!お願いします。

最新情報をお届けします

関連記事

  1. 20160721blog_img1

    WEBデザイン

    WEBデザインには欠かせないフォント特集!!

    ホームページをデザインする上で、重要な要素となる「フォント」について、…

  2. 6aadbba7da65b2c127d6d010932a6fbd_s

    WEBデザイン

    ホームページリニューアルの失敗しないための注意点!!

    今使用しているホームページも古くそろそろリニューアルどきと感じて、…

  3. _shared_img_thumb_PAK85_kakomaretairoenpitu1278_TP_V

    WEBデザイン

    ホームページの見やすさの視認性と読みやすさの可読性!!

    せっかくホームページを作っても見づらかったり、読みにくかった経験はござ…

  4. 8e59eb4aa29ce1b551b409bed0416068_s

    WEBデザイン

    同じ色でも違って見える原因!

    ホームページ制作をやっていてたまにあることを書いてみたいと思います!!…

  5. 1381cdd3d8ee353b0371001e5c2e87eb_s

    WEBデザイン

    サイト全体のイメージとターゲットユーザを考える!!

    新規でホームページ制作またはサイトリニューアルを行う際にターゲットユー…

おすすめ記事

  1. ice_screenshot_20160831-012703
  2. 20160825blog
  3. CoverVid
  4. 20160810blog1
  5. 9eebd6ae3e003dafbcb134405e540da0_s
  6. 20160801blog
  7. 20160630_1

最近の記事

  1. ドラッグ&ドロップ機能を可能にするモーダルポップアッププラグ…
  2. スクロールする際に画像をフェードさせるJavascriptプ…
  3. レスポンシブ対応!!自動フルスクリーン背景スライドの作成方法…
  4. Googleが公表するSEOランキングの3大要素!
  5. RTLテキスト対応JQueryのコンテンツスライダー・グライ…

アーカイブ

  1. 9eebd6ae3e003dafbcb134405e540da0_s

    制作ツールブログ!!

    OSの入ったSSD(Cドライブ)をコピー(クローン)、交換方法!!
  2. 8e59eb4aa29ce1b551b409bed0416068_s

    WEBデザイン

    同じ色でも違って見える原因!
  3. 20160810blog1

    制作ツールブログ!!

    Firefoxでおすすめするアドオンのまとめ①
  4. 201601190

    制作ツールブログ!!

    ワードプレスを運営するなら入れておきたいお勧めのプラグイン③
  5. 8bb8a7a122856ba61369ff78cf81a236_s

    SEO対策

    ドメイン移転でGoogleのSEO評価を引き継ぐ方法!!