センスに自信がなくても大丈夫!可愛くてオシャレなサイトを作る配色の基本

サイトデザインに悩めるすべての人へ!

センスに自信がなくても、可愛くてオシャレなサイトを作るためのコツをご紹介します。

里佳
センスに自信のない私でもそれっぽい雰囲気になりました*誰でも簡単に使えるテクニックです

ぜひ参考にしてみてください。

センスがない!センスに自信がない!でも大丈夫!

  • 「センスがないんだよね」
  • 「センスに自信がないなぁ」

こんな風に悩む方は多いかもしれません。(かく言う私もそのうちの一人です…)

可愛いアイキャッチをささっとオシャレに作ってしまう人を見ると、羨ましい限り。サイトも可愛いし、こんなセンスが欲しいなぁとため息が漏れますよね。

ですがテクニックを用いれば、誰でも簡単にオシャレなサイトが作れてしまうんです。

ツールを駆使して、素敵なサイトを作っていきましょう!

可愛い&オシャレなサイトの配色を真似しよう

可愛くてオシャレなサイトの配色をとにかく真似するのがおすすめ。

配色に関して難しいことはわからなくても、いろんな配色パターンを紹介してくれているサイトがあるので、それを参考にしましょう。

おすすめのサイトをご紹介します。

画像作成ソフトCanvaの配色サイト<100選・50選>

<配色パターン100選>

画像作成が簡単にできる「Canva」。そのコンテンツに配色パターン100選というものがありました。

デザインをセンスアップする“いけてる配色パターン”100選!

100も提案されているので、きっとあなた好みのものも見つかるはずです。カラーコードと写真が紹介されているので、自分のサイトで真似しやすいですよ。

<配色パターン50選>

こちらは、プロが使用するようなスタイリッシュで洗練された配色パターンが多いです。

ウェブサイトの配色:視覚的インパクトを残す50の実例

おすすめ配色*可愛いらしい雰囲気の方に

淡いパステルトーンを使うと可愛くなります。ベースカラーはピンク・赤系がおすすめ。

おすすめ配色*知的でクールな方に

ブルー・ネイビー系をメインに使うのがおすすめ。アクセントカラーの色で印象が変わりますね。

おすすめ配色*明るくてポジティブな方に

黄色やオレンジなどを使うと元気なイメージに。ハッキリとした原色がおすすめです。

おすすめ配色*ほっこりとしたナチュラルな方に

カフェにいるようなほっこり感がでる配色。落ち着いたデザインにしたい人向け。

おすすめ配色*ミニマルで洗練された方に

シンプルでミニマルなデザイン。装飾を極力省いたスタイリッシュさがあります。

おすすめ配色*都会的でクールな方に

都会的でモダンな配色です。モノトーンと原色を使うのがポイント。

引用:デザインをセンスアップする“いけてる配色パターン”100選!

【基本の考え】配色比率は「70:25:5の法則」

好きな配色を選んだら、それをサイトに反映させていきましょう。

配色の基本によると、

配色バランスは、「70:25:5」

それぞれ、

  • ベースカラー
  • サブカラー
  • アクセントカラー

と呼ぶそうです。

一般的によしとされている配色の割合は「べースカラー:75%、メインカラー:25%、アクセントカラー:5%」の比率。

デザインする際に、この面積比になるよう調整することにより、美しい配色に仕上がり、バランスのとれたデザインになります。

引用:デザインにおける「配色」の基本

 

今回は4色なので、70:20:5:5 くらいかな?と思います。

基本的には2色。

ボタンやリンクなどに、アクセントとなる色を使います。

ノマドワの配色はこちら

ミントグリーン、ターコイズブルーを基本の2色として、イエローとピンクをアクセントカラーにする配色です。

Canvaで画像を作成するときも、このカラーコードを使っています。

同じグリーンでも、濃いのか薄いのか、黒っぽいのか白っぽいのかで印象は全然変わるので、Canvaがおすすめしているカラーコードをそのまま使うことをおすすめします。

里佳
ターコイズにピンクやイエローを合わせるなんて意外な組み合わせでした!

できたサイトがこちら

ヘッダーとお知らせ▼

ウィジェットのピックアップ記事▼

ウィジェットのお問い合わせ▼

上記のカラーコードを用いて画像やサイトカラーを設定しました。

里佳
統一感が出て、まとまった雰囲気になったような気がします!

商用可能画像については「O-DAN」を使っています。オシャレな海外サイトを一気に検索できますよ。

世界32サイトから無料の画像素材が見つかる【O-DAN】でブログ執筆を効率化

2019.01.10

ツールを用いれば誰でもそれっぽくできる!

配色についてご紹介しました。

デザイナーでもないですし、正直むずかしいことは何一つわからない私ですが、それでも「それっぽいサイト」になりました。

ぜひ皆さんもツールを活用してみてください!参考になれば嬉しいです。

配色についてもっと知りたい人はこちら▼

ブロガーさん向けにブログのカスタマイズ方法をまとめました。合わせて読んでみてください。







こちらをご覧の法人様で「SEO記事を作成したいけれど、ライターが見つからない…」という方はぜひご依頼ください。

可能なこと

  • 構成作成可能
  • 検索意図を考慮したSEO記事執筆
  • WP入稿可能(文字装飾可能)
  • 画像選定可能
  • 薬機法・景品表示法に基づいた執筆
  • トンマナの書き分け(*)

*サンプル記事

話し言葉を交えた親しみやすい記事▼
未経験だけどクラウドワークスで10万稼いだよ!失敗から学んだコツをまとめてみる

データを用いた信頼性のある記事▼
“Webライター”という働き方の魅力は社員・フリーとして仕事ができる柔軟さ

ご希望の文体で執筆させていただきます。

執筆分野は「保険関連」「税金関連」「金融関連」「ウェディング」「旅行」「美容・化粧品」です。

※この他の分野についても、受注可能な場合がございます。

都内にて対面・Webにてお打ち合わせ可能です。

ご発注の流れ

  1. お問い合わせフォームより依頼内容をご相談ください
  2. 3日以内にお見積もりをご連絡させていただきます
  3. 業務委託契約書の締結をお願いしております
  4. 成果物を納品
  5. 修正対応後、校了
  6. 請求書を確認いただき、報酬額をお振り込みください

このほか、疑問点、ご要望などお気軽にご連絡くださいませ。





コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です