最近WordPressのテーマを変更してブログをリニューアルしたのですが、細かいところをコツコツと弄ってカスタマイズをしている中で、オリジナルテーマ作りへの意欲熱が沸々と再燃しています。といってもWebデザインの専門家ではない一般人なので、ここをこう弄ればこうなるとか、こういうデザインにするにはこういうコードを書けばいいとかさっぱりなので、地道に勉強しながら進めています。そんな時に頼るべきはインターネット師匠なんですが、配色ツールの他、いくつか参考にしているオンラインツールがありますのでまとめてみます。

配色ツール

新規でWebサイト（ブログ）のデザインを考える時にまず立ちはだかるのが「配色」です。デザインは良くても色がサイトに合っていなければ格好悪いっす。ということで数あるオンライン配色ツールの中からいくつかご紹介。

NIPPON COLORS – 日本の伝統色

NIPPON COLORS - 日本の伝統色

The Traditional Colors of Nippon (Japan). This site is optimized to Webkit.

https://nipponcolors.com/

まずはキーとなるカラーを決めます。やはり日本人なので日本の伝統色から選びたいですね。私の場合、ブログタイトルが「Sorairo（そらいろ）」なので文字通り「空（#58b2dc）」を選択してみました。

0to255

0to255: fast, intuitive color tools for designers

An online color picker and hover color generator, designed for creative pros who work with color every day. Make better color decisions, faster.

https://0to255.com/

上で決めたキーカラーを元にグラーデーションを作成してくれるツールです。私の場合、次のような感じになりました。

先ほどの「空（#58b2dc）」を中心に綺麗なグラデーションが作成できました。これは主にマウスオンした時に色が変化するリンクを作成する時に便利です。突拍子もない色に変化するよりは似たような色で固めたほうが見栄えも良くなります。

BrandColors | Official color codes for the world’s biggest brands

BrandColors - official brand color hex codes

The biggest collection of official brand color codes around. Includes hex colors codes for 500+ brands including Facebook, Twitter, Instagram, and many more.

https://brandcolors.net/

FacebookやTwitterなどのSNSについて、そのイメージカラーがズラッと並んだサイトです。シェアボタンを作成する際に、背景色を各ブランドのイメージカラーにするとグッと見た目の印象が良くなります。その他、配色ツールで使いやすかったのを列挙（笑）

Color Hex – ColorHexa.com

Color Hex - ColorHexa.com

Color hex encyclopedia providing information about any color.

https://www.colorhexa.com/

Paletton – The Color Scheme Designer

Paletton - The Color Scheme Designer

In love with colors, since 2002. A designer tool for creating color combinations that work together well. Formerly known as Color Scheme Designer. Use the color wheel to create great color palettes.

https://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF

また、特にキーカラーを決めていなくても以下のサイトのようにあらかじめあるカラーパレットから選択する方法もあります。

Color Trends + Palettes :: COLOURlovers

Color Trends + Palettes :: COLOURlovers

COLOURlovers is a creative community where people from around the world create and share colors, palettes and patterns, discuss the latest trends and explore colorful articles... All in the spirit of love

https://www.colourlovers.com/

ただ眺めているだけでも楽しいサイトです。

黄金比、白銀比計算ツール

以前にもチラッとご紹介しましたが改めて。

Metallic Ratio

Metallic Ratio ／ 貴金属比 [黄金比・白銀比などを計算]

黄金比や白銀比を計算するWebアプリ。このツールは、基準となる数値をひとつ指定するだけで、黄金比や白銀比に代表される各貴金属比を簡単に算出できるものです。数値だけではなく視覚的にも比率を確認できるので、求めている比率を直感的に得ることができます。デザイン作業などで美しい比率が必要な時にご利用ください。

https://voidism.net/metallicratio/index.html

サイトデザインの際に、縦横比を黄金比や白銀比で決めると見た目が綺麗になる気がします。そんな時に便利なのが上記のサイトです。一方の数値を入力すると自動的にもう一方の数値を算出してくれます。闇雲にサイズを決めるよりは一貫性が出て良いのではないでしょうか。

HTML、CSS関連

続いては、オンラインでHTMLやCSSを作成してくれるサービスです。

HTML5 & CSS3 Tools and Tutorials

CSS3で指定できる「border-radius」や「box-shadow」などについてプレビュー表示を見ながら作成できるサイトです。

cssarrowplease

CSS Arrow Please - By Simon Hoejberg - @shojberg

CSSArrowPlease allows you to create and export CSS code for a custom box with an arrow extending out from the side.

https://cssarrowplease.com/

こちらはCSS3の中でも特に「吹き出し」に絞ったオンラインツールです。面倒なCSSを数値を指定するだけで吐き出してくれますので便利です。

その他

Another HTML Lint – Gateway

Another HTML Lint - Gateway

https://www.htmllint.net/html-lint/htmllint.html

XHTMLでもあったオンラインチェッカーのHTML5版です。プラグインとか入れると完全に対応させるのは難しいんでしょうけど、自分でどうにかなる段階ではやっぱり100点を目指したいですからね。

Test your website at different screen resolutions: Multi Screen Test

Test your website at different screen resolutions: Multi Screen Test

Multi screen resolution Test- Test your website at different device resolutions i.e Mobile, Tablet, Desktop, Television.Check how your site looks on different devices. Mobile, Tablet Simulator.

http://whatismyscreenresolution.net/multi-screen-test

これもいずれ便利になると思います。というのも、今一番興味があるのが「レスポンシブデザイン」なんです。私のブログに訪問いただいている方の大半がスマートフォンからのアクセスです。フリーテーマですがレスポンシブ対応なので大勢に影響はないとは思いますが、やっぱり自分で拘って作りたいじゃないですか（笑）

最後に

いかがでしたでしょうか。中途半端にHTMLとかWordPressをかじっているせいか、細かい性格のせいか、気になったらトコトン詰めないと気が済みません。オリジナルテーマ作りが長年の夢なので、コツコツと地道に頑張ります。