【非デザイナー必見】色を調整して、サイト全体に一体感を出すシンプルな方法（TailwindCSSもあるよ！）

さてさて、絶賛デザイン基礎を勉強中なのですが、その中で「えっ、、その発想はなかったわ！！」というテクニックがあったので、まとめてみました。

私もそうですが「非デザイナー」は、CSSはBootstrapやTailwindCSSを使ってデザインをつくることになると思います。

でも・・・・・・

ちょっとダサい…😂

というデザインになっちゃいませんか？

これ、ずっと疑問だったんですが、結論から言うと

基準カラーにちょっと寄せる

というテクニックを使うと劇的に改善されるんです！
個人的に感動でした。

そこで！

今回は最近リリースされたLaravel 12.x（おめでとう🎉）のログインページを使って、「ちょっとだけ色を寄せる」テクニックをご紹介します。

ぜひ最後まで読んでくださいね！

※この記事は以下の方に向けて書いています。

• ダサいデザインを改善する方法が知りたい
• プログラマだけど、デザインも触れるようになりたい
• 色の選び方がわからない
• 統一感がないサイトデザインをなんとかしたい
• デザイナーとまではいかなくても、マシなデザインをつくりたい
• 問題があるデザインを修正できる知識を学びたい

「EVトゥクトゥクを注文❗
納車が楽しみ😊」

ダサいデザインを準備する

まずLaravelのダッシュボードを使って（ちょっと）「ダサいデザイン」をつくります。

1. Laravelのダッシュボードを開く

Laravel12.ｘにログインするとこんな感じですね。

※Laravelのダッシュボード自体はシンプルであって、ダサいわけではありません！念のため。

2. ボタンを配置する

では、ここにTailwindCSSをつかったボタンをいくつか配置してみましょう。

はい。
いきなり、素人っぽさというかダサい雰囲気が出てきましたね。

3. テーマカラーをセットする

今回はテーマカラー（サブカラー）に「#0072BC」を使ってみます。

うーん…悪くはないですが、ガチャガチャ感があり一貫性がない印象です。

ちょっとだけ色を寄せるテクニックをつかう

どうやるかというと、シンプルに「テーマカラーに近づける」だけです。

たとえば赤の場合だと、以下のように「#EF4444（赤）」をテーマカラーの「#0072BC（青）」にちょっとだけ寄せるわけです。

では、どのようにやるかというと、colorsというサイトの「Gradient Palette」というグラデーション作成サービスを使います。

サイトにアクセスして、

• Start color：「#EF4444」をセット
• End color：「#0072BC」青をセット
• Number of colors：20

にすると以下のようになります。

そして、左から2番目の色「#E2464A」が「ちょっと寄せた色」です。
同様にして他のボタンの色、また背景色も変更すればいいわけですね。

すると、以下のようになります。

どうでしょう。
統一感が出て見やすくなったんじゃないでしょうか。

※緑は明るかったので、少し暗い色を使っています。

写真も同じ理論で、少しテーマカラーに寄せるといいみたいですね。

これが「色を寄せる」テクニックです。
ちょっとしたことですが、プロはこういった気づきにくい部分にも気を配っているわけですね。

TailwindCSSで使えるようにする

とはいえ、毎回グラデーションをチェックして…となると時間がかかってしょうがないですよね。

そこで、TailwindCSSの色をカスタマイズして使う方法もご紹介しましょう。

これも、Tailwindcss Palette Generatorという便利なサービスがあるので、先ほどつくった「寄せた色」をすべて送信してください。

すると、以下のようになるので、これらの色をtailwind.config.jsにセットします。

tailwind.config.js

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/js/**/*.vue',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
            colors: {
                red: {
                    50: '#fef6f6',
                    100: '#fce9ea',
                    200: '#f8d3d4',
                    300: '#f3b0b2',
                    400: '#E2464A',
                    500: '#cb2025',
                    600: '#92171b',
                    700: '#6a1114',
                    800: '#3e0a0b',
                    900: '#1f0506',
                    950: '#120303',
                },
                green: {
                    50: '#f6fef9',
                    100: '#e9fbf1',
                    200: '#d3f8e2',
                    300: '#b0f2cc',
                    400: '#61e598',
                    500: '#20C163',
                    600: '#18914a',
                    700: '#116936',
                    800: '#0a3d1f',
                    900: '#051f10',
                    950: '#031209',
                },
                yellow: {
                    50: '#fefcf6',
                    100: '#fdf8e7',
                    200: '#fbf2d0',
                    300: '#f9e7aa',
                    400: '#f2d054',
                    500: '#DEB011',
                    600: '#9d7d0c',
                    700: '#725b09',
                    800: '#423505',
                    900: '#211b02',
                    950: '#130f01',
                },
                gray: {
                    50: '#f9fafb',
                    100: '#f1f2f4',
                    200: '#e2e5e9',
                    300: '#cbd0d7',
                    400: '#97a2af',
                    500: '#657283',
                    600: '#49535f',
                    700: '#353c45',
                    800: '#1f2328',
                    900: '#101214',
                    950: '#090a0c',
                },
            },
        },
    },

    plugins: [forms],
};

これで、「bg-red-400」みたいな形でカスタムした色を呼び出すことができるようになります。

おまけ1：テーマカラーを使ったイラストをつかう

これはクライアントさんに教えていただいた便利な無料サイトなんですが、undrawというサイトはイラストが無料でダウンロードできるだけでなく、色まで変更することができます。

ページ右上にある「色ボタン」をクリックして「#EF4444」に変更してみましょう。

すると、以下のようにテーマカラーが変更になります。

これで、以下のように一貫性があるコンテンツがつくれます！

おまけ2：チェックボックス&ラジオボタンの色もあわせる

これはシンプルに色をあわせるか近い色を使いますが、チェックボックスやラジオボタンがONになったときの色を変更するとさらに統一感がでます。

まずは何もしていないデフォルトの状態はこちら。

通常の青とインディゴ色なので悪くないですが、マッチはしていません。
これをCSSで色を変えてみます。

どうでしょう。
これも統一感がでてちょっとオシャレ感も出たんじゃないでしょうか。

TailwindCSS環境でのやり方は、CSSを以下のようにするだけです。

<style>

    [type='checkbox']:checked, [type='radio']:checked {

        background-color: #6366F1;

    }

</style>

もしくは、accent-colorを使ってもいけます。

accent-color: #74992e; // 緑色です

【追記：2025.03.15】シンプルにcolorだけでもいい場合があるようです（場合分けってどうなってるんでしょうね🤔）

color: #74992e; // 緑色です

企業様へのご提案

今回のようにちょっとしたデザインの変更もそうですが、フォーム入力を以下のように変更することで作業の効率化をすることができます。

• 日付入力が「今日」「昨日」「1週間前」のテキストをクリックするだけでOK
• 手入力している商品コードをバーコード化して自動化
• 他ページの変更時にリアルタイムで、表示中のコンテンツを変更する

こういったご不満をお持ちでしたら、ぜひお問い合わせからご連絡ください。
お待ちしております😊

勉強させていただいた動画

今回の「色を寄せるテクニック」は以下の動画の「5.グレーと黒を極める」で学びました。

演者さんのコミカルなトークもあって、頭に入ってきやすかったです😊

有益な情報に感謝です！

おわりに

ということで、今回は色をテーマにして記事をお届けしました。

いつも思うのですが、やはり知識があるのとないのでは大きな差になるんだなと実感しました。そして、その積み重ねが「取り戻せない差」になってしまったりします。

やはり、教育には時間&お金をかけるが正解ですね！

正直、デザインの4大原則を学ぶだけでも、ある程度はきちんとしたデザインになりますし、センスがなくても知識があればそれなりの力になるのは間違いありません。

なので、これからも学びにはエネルギーを使っていくつもりです。

ぜひ皆さんもいろいろと体験してみてくださいね。

ではでは〜！

「1人で深酒するの、
卒業しました（笑）」