TOP

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

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

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

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

Color Scheme Designer

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


Color Scheme Designer の簡単な使い方

トップページの「RGB:******」をクリックして、基本となる色のカラーコードを入力して下さい

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


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

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


右プレビュー画面の下には「Light page example」「Dark page evample」のタブがありますのでクリックしてみて下さい。明るい感じと暗い感じのサンプルが表示されます

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

Light page example

明るい感じの配色


Dark page example

暗い感じの配色


あとがき

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

関連記事


最新記事

a:3082 t:1 y:1







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

powered by HAIK 7.3.0
based on PukiWiki 1.4.7 License is GPL. HAIK

最新の更新 RSS  Valid XHTML 1.0 Transitional