この記事は、2021年3月17日に更新しています。
色について
ウェブデザインについての第2回です。
今回は「色」についてです。
ウェブサイトでの色の選択は、ウェブデザインにとって重要な要素です。
色を選択するうえでの便利な情報やツールを紹介します。
テーマの選択
はてなブログ テーマストア
はてなブログのデザインにおいては、最初にテーマを選択することになります。
はてなブログのテーマはCSSの設定の引継ぎができないため、最初に選択したテーマからの変更は面倒なものになります。
ですから最初のテーマの選択は、よく考えて選択しましょう。
今日のトレンドとして、「目に優しい」デザインが求められています。
私が選択したのは、眩しさを抑えたダークテーマの「Ingressive」です。
ダークテーマの選択肢は少なく、ほとんど唯一のこのテーマを選びました。
ダークテーマはもっと増えて欲しいですね。
選択したテーマについて、内容や色などをカスタマイズしていくことになります。
Android Qの新機能
2019年5月8日、Google I/Oにてモバイル端末の次期OSである「Android Q」の詳細が発表されました。
注目は「ダークテーマ」の追加で、目に優しいだけでなく消費電力も抑えることができます。
Android Qは正式な名前で今秋リリース予定です。
色の選択
ColorZilla
ウェブブラウザ「chrome」と「Firefox」の拡張機能である「ColorZilla」で、気になるウェブサイトの色を調べることができます。
拾いたい色にマウスでカーソルを合わせてクリックすると、クリップボードに色情報がコピーされます。
色情報の形式は選択できます。
Webpage Color Analyzerを使用すれば、ウェブサイトの配色を一気に解析できます。
テーマのカスタマイズはもちろん、気に入ったウェブサイトなどの色使いを参考にできるのでとても便利です。
ColorPick Eyedropper
ウェブブラウザ「chrome」の拡張機能である「ColoPick Eyedropper」も同じカラーピッカーですが、こちらは拡大表示できるのでウェブサイトの写真などの色選択に便利です。
NIPPON COLORS
日本の伝統色を調べて使用したいとき、役立つサイトです。
伝統色名が面白いですし、日本のサイトであるこだわりもサイトに盛り込めそうです。
配色の選択
Material Mixer
Googleのマテリアルデザイン配色をベースに、配色の提案をしてくれます。
Colorable
文字と背景色の選択に便利なサイトです。
Adobe Color CC
カラーホイール、写真のアップロードで似たイメージの配色検索やキーワードによる配色検索などのツールがあります。
Creative Cloudを使用します。
まとめ
様々なツールやサイトを利用して、オリジナリティのある色を選択し、サイトをデザインしていきましょう。
【2021.3.17加筆訂正】
