ホームページテンプレ+αの工夫 その1:色をあらかじめしっかり決める

f:id:smallstart:20170112002448p:plain

埼玉のホームページ屋、スモールスタートの山崎です。

・・・てな感じで昨日オープンしたわけですが、今回から数回にかけて弊社のホームページを作る上で考えた工夫どころについて、これからホームページを(外注・内製にかかわらず)作られる方にとって多少お役に立てるかな?ってお話をしようかと。

で、初回の今日は【色】のお話です。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

極論を言ってしまうと、「そこそこ見映えのするデザイン」って

【色】

【フォント】

【文字間隔(読みやすさ)】

【画像などの素材】

をしっかりと押さえておけば、あらかたどうにかなると思っています。
あとは「見本」となるヨソのサイトやデザインのネタとかに近づけるようにしたり、各ホームページ作成サービスのテンプレートを見渡して一番ピンと来たモノをベースにいじっていく方が、下手にオリジナリティーを出すより手堅いかなと。

ちなみに本ホームページは「Jimdo(下記参照)」を使ってるんですが、テンプレートは「Tokyo」というテンプレートにしました。ウチのホームページと見比べると、なんとなく似てません?

ただパッと見で違うところとしたら色かなと。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

さてその色ですが、スモールスタートのホームページを作るにあたってまず私は「コーポレートカラー」を最初に決めました。

私はどっちかというとWeb制作業界的には異端な方なので(40代で始める人ってあまりいないとは思いますし、デザイン畑でずっと育ったわけでは無いのでね)、とにかく「IT感出しまくってる感じ」や「スタバで作業してそうな感じ」とかでは無い見せ方にしたいなと思っていたわけですね。今日までのキャリアも異端ではありますし・・・ただそこをウリにしていこうと思っているわけです。

で、「Web制作 東京」とか「ホームページ制作 埼玉」とかで同業のサイトを眺めて大まかにイメージをつかんだ上で、【落ち着いて信頼感のありそうなイメージ】を表現しているところが少ないのでその辺を狙っていこうと「和 色」で検索し、下記のようなサイトでしっくりくる色を探しに行ったと。

あとは、色がもたらす「客観的な」イメージを知ろうとこんなところも。
※「色 イメージ」で検索

そんなこんなでいくつかピックアップして、今後ホームページに限らずチラシや名刺、動画などでも使い回すであろうからkeynoteの最初に色見本を貼り付けて・・・という流れです。

 ※色見本(大体この5色に集約されてます。ちなみにこのブログの文字色も紺青を使ってます←真っ黒にしないのもいわゆるプロの工夫ってヤツで、目に優しいんです)

f:id:smallstart:20170112002715p:plain

この「あらかじめ使う色を決めておく」ことって重要で、コレをやっているだけでデザインの出来が変わってきますし、なにより何かしらモノを作る度に「この部分何色にしようかな?」とか考えないでいいので、運用/運営面で楽になります。あとは「ブランディングの一環」ってヤツで、例えば「コカコーラ=赤」などセットで浮かんだりするように、「紺ベースの和風な色=信頼感=スモールスタート」を印象づけたい訳ですね。

この【自社用の色見本】を作っておくのは本当オススメです。ブログやらホームページ作成サービスやら各種SNSのプロフィール画面やらで色をカスタマイズできる局面が結構あるんですが、色見本がないと初期設定のまんまとかカラーピッカーで適当に選んでとかになりますから。思い当たる節ありません?

f:id:smallstart:20170112011116p:plain