独学で極める “Webデザイン”の技と心
第5回 カラースキームを決めるために必要なツールと注意点
前回は自己紹介をの制作を題材にして,
カラースキームを固める
前回考えたプロセスの中で,
それらのキーワードをもとに,
配色については,
また,
Web 上だけを見ても自動的にカラースキームを生成してくれる,
参考までに,
- ※1)
- 色彩理論については市販の書籍の他に社団法人 全国服飾教育者連合会
(A・ F・ T) が主催している色彩検定のテキストも参考になります (検定を受験しなくてもテキストが置いてある書店で購入して学習するだけでも勉強になります)。
Webツール
- [ws]Color Scheme Generator 2 : Creative Commons by-nc-sa
- 色々なツールがある中でわかりやすく使いやすい。配色パターンに加え,
パステルの度合い等も選べます。さらにドロップボックスで色覚異常者の人にどのように見えるか (※2) もプレビューできる機能もあり, シンプルながら気が利いています。もちろんカラーコードも出力されるため, そのままWebに活用できます (ダウンロード版もあるが, 商用利用不可)。 - THE MAN IN BLUE のカラースキームジェネレータ : 無料
- カラーパレットを出すだけでは,
色の配分が決まっているわけではないので, 配置してみたものの思った配色と異なってしまうことがよくありますが, このツールではそのような問題をほぼ解決できます。よくある2カラム型のレイアウトに対し, 色を実際に置いたCSSレイアウトサンプルまで生成してくれるので色の分量のバランスをあわせてチェックすることができる点が優れています。CSSごと出力されるので, カラーコードを単独で知りたい場合には少々手間がかかります。上記のColor Scheme Generator 2 で生成した色と併用する使い方も効果的。
- ※2)
- こちらで和訳されています
インストール型のツール
- Color Schemer Studio[Windows/
Mac] : $49.99 - 有料のインストール型。私は現在こちらを利用しています。登録ユーザが作ったカラースキームギャラリーを見ることができ,
ギャラリーから気に入ったカラースキームをダウンロードできます。ユーザ登録をおこなうと自分の作ったカラースキームを投稿することもできます。 - 富士通アクセシビリティ・
アシスタンス - WebInspector,
ColorSelector, ColorDoctorの3種類のソフトウェアがある。Windows/ Macに対応していますが, ColorDoctorはWindows版のみ。一通りサイトのテーマカラーを決めてから, アクセシビリティチェックをするのに欠かせないツールです。いずれも無料のインストール型ですが, より高度な機能を搭載した有料版もあります。
少し試しただけのものを含めてしまうともっと膨大な数になるのでこちらを中心に
色の方向性が決まっても注意しなければならないこと
216色のWebセーフカラーであれば,
Windowsの標準ガンマ値は通常2.
以上のようなことを考慮しながら,
カラースキーム作りは,
企業サイトなどあらかじめCI計画によって色指定されているときは,
仮に,
水産庁は漁業に直接関わる機関ですので,
- 海をイメージさせる青系統の色がはずせない
- 背景色は白を基調とし,
情報を読みやすくする
というような自分なりの最低限の基本ルールを決めておいた上で,
次回は見出しのデザインについて取り上げたいと思います。
- ※3
- ガンマの概念ついてはこちらの解説がわかりやすいです。
バックナンバー
独学で極める “Webデザイン”の技と心
関連記事
- 2021年11月第2週号 1位は,認知心理学がユーザーインターフェイス設計に重要な理由,気になるネタは,バルミューダ,開発中の5Gスマホの外観をチラ見せ 11月16日に発表へ
- 2021年10月第3週号 1位は,プロトタイプによってユーザーエクスペリエンスを最適化するヒント,気になるネタは,情報共有ツール「notion」日本語対応 日本ユーザー急増で
- 2021年10月第2週号 1位は,Figmaでのデザイン作業をスピードアップする方法,気になるネタは,InstagramがIGTVブランドを廃止,リール以外のビデオを「Instagram Video」フォーマットに統一
- 2021年10月第1週号 1位は,グラフィックデザインからUI/UXデザインに移行するためのガイド,気になるネタは,Dropbox,テレワーク環境向け3つの新製品 - 動画コラボレーションなど
- 2021年9月第5週号 1位は,UXデザインのグローバル化についてのヒント,気になるネタは,米Slackが動画を簡単に作成・共有できる新機能などを発表