Isamu's Blog『Reboot』

【 雑記ブログ 】

ウェブデザインについて#2【色】

色について 

ウェブデザインについての第2回です。

今回は「色」についてです。

 

ウェブサイトでの色の選択は、ウェブデザインにとって重要な要素です。

色を選択するうえでの便利な情報やツールを紹介します。

 

 

テーマの選択

はてなブログ テーマストア

テーマ ストア - はてなブログ 

 

はてなブログのデザインにおいては、最初にテーマを選択することになります。

はてなブログのテーマはCSSの設定の引継ぎができないため、最初に選択したテーマからの変更は面倒なものになります。

ですから最初のテーマの選択は、よく考えて選択しましょう。

 

今日のトレンドとして、「目に優しい」デザインが求められています。

私が選択したのは、眩しさを抑えたダークテーマの「Ingressive」です。

ダークテーマの選択肢は少なく、ほとんど唯一のこのテーマを選びました。

ダークテーマはもっと増えて欲しいですね。

blog.hatena.ne.jp

選択したテーマについて、内容や色などをカスタマイズしていくことになります。 

Android Qの新機能

www.gizmodo.jp

2019年5月8日、Google I/Oにてモバイル端末の次期OSである「Android Q」の詳細が発表されました。

注目は「ダークテーマ」の追加で、目に優しいだけでなく消費電力も抑えることができます。

Android Qは正式な名前で今秋リリース予定です。

 

色の選択 

ColorZilla

chrome.google.com

ウェブブラウザ「chrome」と「Firefox」の拡張機能である「ColorZilla」で、気になるウェブサイトの色を調べることができます。

拾いたい色にマウスでカーソルを合わせてクリックすると、クリップボードに色情報がコピーされます。

色情報の形式は選択できます。

 

Webpage Color Analyzerを使用すれば、ウェブサイトの配色を一気に解析できます。

 

テーマのカスタマイズはもちろん、気に入ったウェブサイトなどの色使いを参考にできるのでとても便利です。 

ColorPick Eyedropper

chrome.google.com

ウェブブラウザ「chrome」の拡張機能である「ColoPick Eyedropper」も同じカラーピッカーですが、こちらは拡大表示できるのでウェブサイトの写真などの色選択に便利です。 

NIPPON COLORS

nipponcolors.com

日本の伝統色を調べて使用したいとき、役立つサイトです。

伝統色名が面白いですし、日本のサイトであるこだわりもサイトに盛り込めそうです。

 

配色の選択 

Material Mixer

materialmixer.co

Googleのマテリアルデザイン配色をベースに、配色の提案をしてくれます。 

Palette Creator

chrome.google.com

chromeの拡張機能で、ウェブサイトの写真を右クリックして写真の配色を分析します。 

Colorable

colorable.jxnblk.com

文字と背景色の選択に便利なサイトです。 

Canva Colors

www.canva.com

写真のアップロードで配色解析、キーワードでの配色提案、色の組み合わせホイールツール、配色と色の意味を知ることができる、優れたサイトです。 

Adobe Color CC

color.adobe.com

カラーホイール、写真のアップロードで似たイメージの配色検索やキーワードによる配色検索などのツールがあります。

Creative Cloudを使用します。

 

まとめ

様々なツールやサイトを利用して、オリジナリティのある色を選択し、サイトをデザインしていきましょう。

 

f:id:futurecre8:20190511063955j:plain