保存版!プロが教えるホームページのデザインを劇的に変える7つの方法

ホームページ作成の初心者さんの多くが「ホームページのデザイン」に悩む、苦戦すると言われます。デザイン性の優れたテンプレートを購入しても、最終的な仕上がりが素人っぽくなってしまうからですね。そこで、こちらの記事では「ホームページのデザインにお悩みの方向け」に、ホームページのデザインを劇的に変化させる方法を紹介します。

 

サイトのデザインを劇的に変える方法

 

ヘッダーのデザインを変更する!

インターネットを活用しているユーザーが、自分のホームページにたどり着いた瞬間に最も目にする場所は「ホームページを開いた瞬間にパソコンのモニターの中に収まっている部分」になります。つまり、ヘッダーのデザインをカスタマイズしてあげるだけで「ユーザーに与えるインパクト」を高められます。

ポイントは「他のホームページと被らない様にすること」だと思いますので、同ジャンル(僕ならアフィリエイト系)のホームページをチェックして、他の人がやっていないデザインを意識してヘッダーのデザインをしてみましょう。

「このホームページお洒落!」とか、「このホームページ可愛い!」と思ってもらえればOKです。

美しいインテリア

(お店の外から見て、インテリアがお洒落だと入りたくなるのと同じです)

何のデザインもされていなくて、殺風景なホームページだったとしたら、離脱率も高くなってしまいますから、ヘッダー部分だけでもしっかりと整えておきましょう。

デザインが苦手であれば、無料で使えるような写真素材を使ってインパクトをつけてみると良いかと思います。例えば「空」の写真を背景にして、ブログのタイトルを乗せてあげれば、それだけでも見栄えが変わってきます。物販アフィリエイトのように化粧品を販売しているようなホームページであれば「女性」の写真を使うと効果的になりますよ。

ヘッダーはブログ・ホームページの顔です。しっかりとデザインをしましょう。

参考:「無料写真素材提供ホームページのまとめ記事」を参考に、使える写真を見つけてください。

 

POINT
ヘッダー部分だけをデザイナーに依頼するだけでも、ホームページ滞在時間が延びたり、メルマガ登録を促すランディングページ等は劇的に登録率がアップします。それくらい最初に目にする部分のデザインはとても重要なポイントになるんです。

背景のデザインを変更する。

続いては、背景の色目を変えたり、画像を挿入することでイメージを変える手法です。当ホームページも先日デザインのリニューアルをかけまして、背景を画像から、黄色の単色に変更をかけました。

僕のホームページの場合は「インパクトを重視」させたかったのと、最近黄色が好きだったので・・・このような配色にしてしまいましたが、他のホームページとの差別化は出来たし、一回見れば覚えてもらえるようなホームページに変化したかと思います。

シームレスデザイン

(例えば、当サイトの背景をこんな画像にしたら、イメージがガラっと変わります)

ヘッダーに比べれば、それほど重要ではありませんが、ホームページ全体のデザインにも関わるものとなっていますので、こちらもテーマにあったもので慎重に選ばれると良いかと思います。

気をつけたいのは、背景の画像のせいで「文字が読みにくくなってしまうケース」です。デザイン性が高まったとしても、文章が読みづらくなってしまっては意味がありません。仮に海の写真を背景に使われるのなら、深いブルーを選ばれて文字の色を白色にするか、記事の部分の背景だけは白色にするなどの工夫をして、文字を読みやすく調整しましょう。

 

デザインが苦手な方は、背景画像を利用されると簡単にキレイなホームページに仕上がりますのでぜひやってみてください。シームレス(継ぎ目のない)な背景画像にされると、簡単にデザインを変更できるかと思います。

参考:「無料で使える「背景画像」フリー素材提供サイトのまとめ」という記事が参考になると思います。

 

ロゴをデザインする。

これは結構難しい作業になるので、ホームページを作った事がないような初心者の方には、あまりオススメはしませんが、ホームページのテーマにあったロゴのデザインを作りますと一気にデザイン性が高まります。

ロゴのデザイン

正直な話、優れたロゴデザインがひとつあれば、ホームページの全体のデザインがしまって見えるくらいロゴって重要なポイントになります。

僕は重要なホームページになればなるほど、ロゴに関してはお金を支払って一流のデザイナーさんに作りこんでもらいます。1つのロゴが出来上がれば、Webホームページはもちろんのこと、名刺にも使えますので、自分をブランディングする際にも役に立ちますからね。

最初に紹介したようなヘッダーデザインにプラスして、自分だけのオリジナルロゴを余裕があれば付け加えてみてください。

参考:「無料で使えるロゴ素材サイトの一覧と、ロゴデザイン参考サイトの紹介。」という記事が参考になると思います。

 

ファビコンをデザインする

こんなちょっとした事で変わるか?と思われるかもしれませんが、意外と効果があるファビコンの変更。

yahooのファビコン

(こちらはyahooのファビコンです)

ファビコンとは、ブラウザのタブの部分に表示されている小さなアイコンですが、デザインを軽視していないホームページのほとんどは、しっかりとデザインがされています。

ロゴのデザインが出来ている方は、ファビコン用に小さく加工したものを使われると良いかと思います。劇的に変化するわけではないけど、デザインの力をアップさせる効果はありますよ。

参考:ファビコンの作成はコチラのサイトが使えます。

H○タグをデザインする

記事中に良く使うH○タグをデザインをしていない人がびっくりするほど多いのですが、記事の中で目立たせたい部分になりますし、文章を読んでいるユーザーからすると、次の項目に入ったことを知らせる「目を休める場所」でもありますので、少し工夫をしておくと良いと思います。

僕のホームページでは、黒バックに黄色文字にして目立つようしてありますが、ここに背景画像を入れたり、文字列の一番左側にアイコンを入れても良いかと思います。

見やすいホームページは、こういったメリハリがしっかりと出来ているホームページが多いので、ぜひ「見やすいサイト」を参考にチェックしてみてください。

 

フッター部分やサイドバーのデザイン

あとは、フッター部分やサイドバーのデザインですが、こちらに関しては背景やヘッダーなどのデザインの印象にあわせて変えていけばよいかと思います。

気をつけたいのは、せっかく背景やヘッダーのデザインをしっかりとさせたのに、他の部分を放置してしまうとホームページ全体がアンバランスになってしまうところですね。

オススメなのは、全体のデザイン設計図をぼんやりとでも作っておいて、それに従いながらホームページを修正していくことです。設計図というと難しく感じるかも知れませんが、使う色目は○○、背景の画像はシンプルにして、文字を見やすくする!みたいなざっくりとしたもので大丈夫です。

WORK

(白・緑・アクセントにピンクといったようなデザインイメージ)

一番良くないのは「後からジャンケン」のように、後から後からいろんなデザイン要素を追加していくことです。デザインに慣れている人なら、そんな状態でも整えることが出来ますが、デザインが得意でない方は、ただただぐちゃぐちゃになって終わりです。

 

プロフィールをデザインする

最後はプロフィールに使う写真をキャラクター化、デザイン化することで変化させる方法です。

藤村のイラスト

(これはイラストレーターさんに描いてもらいました藤村のイメージです)

自分の写真を使うのが、ホームページの信頼性を高めるためには最も効果的ではあるんですが、正直言って自分の写真なんて使いたくないですよね(笑)

と、そんな方にオススメなのが、プロフィールに使う写真をアバターにしてみたり、キャラクターを使ってしまうことです。

ちょっと気持ち悪いアバターを使っている人が多いのですが、アバターのように人の雰囲気を持たせるキャラクターをホームページ上に登場させると一気にデザインの質があがったりしますので、無料で作る事が出来るアバターサイトなどを検索してみてください。※アバターの質にもよりますが。

 

まとめ

ホームページのデザインは難しいと思い込んでいる人が多いんですが、実はそんなことはありません。

素材をちゃんと揃えていれば、あとは組み合わせるだけで意外にきれいなホームページを作ることは可能ですからね。

僕のホームページも、これからもどんどんカスタマイズをかけていきながら、ユーザーにとってモットモット見やすいホームページを目指していきたいと思いますので、もしよかったら、もっとこうしたら?とか、見やすい!などの感想をいただけたら幸いです。