デザイる2｜Webサイト製作初心者に向けて情報発信していきます。

サイト作成には欠かせない配色ツールの使い方

Webサイト作成が決定しました。構成は?配色はどうするの？と、なりますよね！？そこで配色に関してのWeb配色ツール Color Scheme Designer の簡単な使い方を説明したいと思います。後出しですけど、私はデザイナーでもクリエイターでも御座いませんので…(；´Д｀)

Color Scheme Designer の簡単な使い方

トップページの「RGB:******」をクリックして、基本となる色のカラーコードを入力して下さい。クリックで入力可能になります。「OK」をクリック！

右プレビュー画面に5つの色で配色が表示されます。マウスを当てるとカラーコードが表示されるのでメモするなりしてください。

右プレビュー画面の下には「Light page example」「Dark page evample」のタブがありますのでクリックしてみて下さい。明るい感じと暗い感じのサンプルが表示されます。ナビやメニュー、コンテンツ部分の配色の参考にしてみてはどうでしょうか？

Light page example

Dark page example

あとがき

配色ツールも種類が多すぎて、どれを使ったらいいの？と迷ったりしますよね！？これが最近のお気に入りです。

関連記事

• サイトの配色って悩むよね～！「カラログ」で試してみよう
• お洒落なサイトの配色を盗め！ Web Colour Data
• 配色センスの悪い俺でも理解できたツールと記事
• サイト作成には欠かせない配色ツールの使い方
• 配色センスある俺は高得点！色をゲームで学ぶColor Method
• ハイセンスなウェブ配色ツール
• Web上でカラーコードを確認できる iromiru

最新記事

• 高品質過ぎる写真素材を無料配布しています！フォトマルシェ
• なんてことだ、フリー素材アイドル誕生！！
• GIFアニメをいろいろと加工しちゃう Ezgif.com
• YouTubeからGIFアニメを生成する GIF YouTube
• 和の伝統色に癒やされてみる NIPPON COLORS
• 俺だけのセーラー戦士を「セーラー戦士メーカー」で作るお

■この記事に足りないと思ったことがあったらぜひ教えてください。

• 次の記事　→
• ←　前の記事