非デザイナーがかっこいいホームページデザインをつくるコツ

「かっこいいホームページを作りたい」
「かっこいいデザインを目標としているのに、なぜかダサくなってしまった」

この記事は、【ホームページのかっこいいデザインについて学びたい】と思っている皆さまへ向けて書いています。

皆さま、こんにちは。

ホームページもずいぶんと簡単に作れるようになり、自社でまかないたい企業も多くいらっしゃるでしょう。また、フリーランスであったり起業したばかりであれば、なかなかホームページ制作にまで回す予算がないはず。ホームページをつくるのは今後の集客に大きく関わってきますので、簡単にでもつくっておくのがベストです。

しかし、デザインが垢抜けないと印象が悪くなって悪循環になることも。
もちろんデザインの良し悪しで企業やサービスについてすべてが評価されるわけではありませんが、集客や売上を最大限とするのであれば、デザインにこだわるのは大切なことです。

非デザイナー対象ではありますが、やるべきことを2つと、NGなこと2つをピックアップしてご紹介します。

また、デザインを制作会社に発注する前の担当者様にもぜひ読んでいただきたいです。余分な時間や費用がかからず、スムーズに制作が進むはずです。

はじめに：ホームページをつくる技術はデザインと別

ホームページの制作というと、デザイン（ビジュアル）を第一に考える方が多いように思います。しかし、ホームページをつくることとデザインを加えることとは別問題で、全く違う技術がつかわれています。

ホームページを一から制作するのであれば、HTMLやXHTMLといった技術を習得している必要があります。見た目の調整ではなく、ホームページを動かすために必要な技術です。

このようなホームページを動かす技術にプラスして、デザインをすることで、適切に情報発信したり、集客ができたりするホームページとなります。

両方の技術を習得しているWEBデザイナーというプロもいますが、ホームページをつくる作業とデザインする作業は別のため、料金はそれぞれ発生します。

ご自身や自社内で制作するときも、ホームページを動かすまでに必要な作業と、動いてから見栄えをきれいに整える作業（デザイン）が別に発生すると考えて、作業時間を予定してください。

今回の記事では、ホームページを動かす技術については触れていませんので、ホームページを一からつくりたい方は、まず「ホームページの作り方」といったページや書籍を参考にしてください。

やるべきこと1：参考デザインを必ず見つける

かっこいいデザインでつくるには、まずかっこいいデザインをたくさん見て、自分が「いい」と思うホームページを見つけるところから始めましょう。

そして、パクリではないですが、その「いい」と思うホームページデザインを参考にして、自分のホームページデザインもつくっていくようにします。

やはりプロが考えてくれているデザインはよくできています。
さまざまなことに配慮されていて、非デザイナー（プロデザイナーではない人）には気づけないことまでしっかりと設計されています。

デザインの基本は「近接」「整列」「反復」「コントラスト」だといわれますが、これらをプロではない人が理解してからデザイン作業に入るというのはなかなかできません。

プロが仕上げてくれているデザインを参考にすることで、このような基本に沿ったものがつくれる上に、雰囲気作りや全体のバランスを一から設計しなくても、ほどほどにかっこいいデザインに仕上げることができます。

時短でもあり、プロの技術エッセンスを取り込むことができるので、非デザイナーがつくったとしても垢抜けたものに仕上がるためオススメです。

かっこいいデザインのホームページを見つけるには、「かっこいい　ホームページ」などの検索ワードで調べて、まとめサイトなどを見るのもよいですし、同業種のホームページを片っ端からみていくのもよいでしょう。

いいなと思ったものをブックマークしていきましょう。レイアウトはこれ、フォントはこれ、色合いはこれといったように、要素ごとに参考にするホームページを変えてもいいですね。
組み合わせることで、よりオリジナル性の高いデザインが仕上がります。

やるべきこと2：フォント、色は数を減らす

ホームページの印象を左右するのは、フォントと色彩です。
この組み合わせが非常に難しく、かっこいいデザインとダサいデザインは紙一重といっても過言ではありません。

まず非デザイナーができることとしては、できる限りフォントと色の数を減らすこと。
基本的には２〜３種類と考えておくとよいでしょう。

そう思っておかないと、フォントも色も多種多様に使いがちです。

• 強調したいから「赤色」で「大きな文字」にしよう
• 目立つようにフォントを変えよう
• お知らせはこのフォント、概要はこのフォント…
• このページは真面目にしたいので青、このページは親しみを感じてもらいたいのでオレンジ…

このような規則性を持たないフォントやカラー選びは、かっこいいデザインとは真逆です。
雑多な印象になり、ダサいと思われてしまいます。

参考にしようと思っているホームページに、フォントやカラーがどれくらい使われているか数えてみてください。ロゴなどをのぞけば、数は少ないはずですよ。

その２〜３種類のフォントや色を選びきれない場合は、自分がかっこいいと思うホームページと同じようなもの探すとよいでしょう。

NGなこと3：クオリティの低い写真をつかう

ホームページの第一印象を決めるのは、メインとして使用されている写真です。
いまやほとんどのホームページで大きめの画像がよく目につく場所（ホームページを開いたらすぐの場所）につかわれています。

スライドショーのように何枚も自動で動いて目に入ってくるような仕掛けをしているホームページも多くあります。

この写真のクオリティを上げることで、ホームページのデザインイメージはガラッと変わります。特にシンプルでクールなイメージに仕上げたい場合は、特にその写真に引きづられます。

では、どんな写真が”クオリティが低い”ものなのでしょうか。

• 解像度
• 画質
• 明るさ
• アングル

画像の品質に関わるものが2つと、撮り方や写真の修正に関わる2つが、印象に関わっています。

これらをクリアしている写真を準備する必要があるということです。
カメラマンに撮影をお願いするのであれば、ホームページのメイン画像としてつかいますと伝えておけば、品質等には問題がなくなるでしょう。

自前撮影するのであれば、撮影した写真を様々な人に見てもらい、写真がきれいかどうか、ホームページにふさわしいかどうか聞いていきましょう。多くの人が「よい」といえば、ふさわしい画像と判断してよいでしょう。

もしなかなかいい画像を準備できない場合は、有料の写真販売サイトでイメージに合うものを探して購入しましょう。1枚あたり1000円〜3000円ほどで購入できるので、カメラマンを依頼するより手軽に済ませられます。

▼オススメはPIXTA
https://pixta.jp/

NGなこと4：デザインテンプレートを我流で触る

ホームページ作成サービスを申し込むと、そのサービス内で予め用意されたデザインテンプレートがついてきます。

テンプレートがあれば一からホームページをつくる必要も、デザインを考える必要もなく、とても手軽にホームページができますね。

テンプレートは何種類も用意されていることが多く、その中から気に入るものを選び、必要に応じてロゴやタイトルなどを変更。ホームページを仕上げていきます。

これらのテンプレートは、着せかえのような感覚で、指定通りに画像を変えたりフォントを決めたりすることでデザインが出来上がるようにつくられています。

しかし、”上級用”として、テンプレートをアレンジできる機能を備えていることも。しかしこれはデザイナーが使うものとして用意されていることが多く、機能をしっかり理解していないのであれば利用しないほうが無難です。

「自由に好きなデザインをしたい」という希望を叶えられる機能ですが、様々なことを考慮して設計されたデザインテンプレートは、そのまま使うことでその設計の意図が生きてきます。

もちろんデザインの知識があれば用意された機能を使うことでよりオリジナリティのあるデザインを仕上げることができますが、非デザイナーであれば、着せ替え程度の変更で利用することをオススメします。それがいちばん完成されたデザインに近づきやすいです。時間もかからず効率的ですね。

まとめ

ここまで大まかにではありますが、非デザイナーでもできるホームページデザインについてまとめてきました。
もしもう少し本格的にデザインについて学んでみたいという方にはオススメの書籍がありますので2冊ご紹介します。

○ノンデザイナーズ・デザインブック

○プロのデザイナーになるための本

どちらも実践的な力が身につく、デザイン指南書です。
デザイナーに依頼するときや、パワーポイントで資料をつくるときにも役立ちます。よければお手元に置いてみてはいかがでしょうか。

ホームページ簡単制作 PAGEKit

どうしてもホームページ作りが難しいという場合はページキットにおまかせください。

かんたん３ステップ最短15秒で、業種ごとにぴったりの文章が入ったホームページが作れます。サポートつきで30日間無料でお試しいただけます。

サンプルを作ってみる