みなさんが一番最初に開くTOPページを少しばかり見栄えの良いものに変えると、そのホームページの印象はガラリと変わります。

また、このTOPページがとても「見ずらかったり」「古く感じさせるデザイン」だと、せっかくあなたのホームページへ訪れてくれた方々でも直ぐにページを閉じて違うホームページへ移動してしまいます。

もくじ

スポンサーリンク

TOPページはお店の看板だから、多少なりともデザインにこだわりを!!

初めて見るホームページの滞在時間を決める要因の1つに、『TOPページの見やすさ(読みやすさ)』があります。私も含めみなさんも同じかと思いますが、最近は自分でなにか情報を探す際にはインターネットを使用しその情報を掲載しているホームページから情報を探しだしますが、開いた瞬間にデザイン(見た目)が悪いホームページなら直ぐに閉じて別のサイトを探しませんか?

特にTOPページは1番最初に訪問してくれる人の割合が高く、いくら他のページに探している情報が掲載されていたとしても、あまりにもTOPページのデキが悪いとその情報を掲載しているページまでは行きつくことが出来ない場合が多いです。

これから、あなたが作ろうとしているホームページも、開いた瞬間に閉じられるようなホームページを作ろうとは誰もが思ってはいないかと思いますが、少しでも多くの人に見ても会える様にするには、多少なりともTOPページの見栄えをよくして作成するようにしてください。

TOPページの見栄えを良くする「ヘッドロゴ」

ヘッドロゴとは

ヘッドロゴとは図を見ていただければお分かりになるかと思いますが、「ヘッダー」部分に入る画像のことです。

このヘッダー部分に会社のロゴを入れたり、商品の画像を挿入するだけで、何を伝えたいホームページなのかわかりやすくなります。

しかし、自分も含めそうでしたがパソコン初心者の大半の方は画像を編集した事なんて無いし画像編集ソフトは高いし・・・ちなみに、画像編集ソフトで有名なのがphotoshopやIllustratorですがと何万もするので購入するとなると少し身が引けますよね。


そこで、これら何万円もする高額な画像編集ソフトではなく、無料でも使えるフリーソフトの「インクスケープ」を私はおすすめいたします。

インクスケープは無償(フリーソフト)ですが、Illustratorなどと性能差もあまり無くこれらのソフトを初めて使う初心者の方でも非常に使いやすいソフトです。

多少使い始めの際には操作方法を覚えるまでに時間はある程度かかりますが、操作方法を覚えると意外と簡単に画像などの編集(加工)が出来るようになります。

実際にこちらでインクスケープなどを使ってTOP画像の作り方のお話をしています。気になる方は見てください。



ヘッドロゴを作る時のポイント!!

ホームページの顔となるヘッドロゴを作る時のポイントです。

HPの作り方手順①で色々なホームページを見てくださいとお伝えしましたが、綺麗で見やすいホームページとなんとなく見ずらいホームページがあったと思います。

綺麗なホームページは全体的に色の統一感やその商品に合った画像等を使っていおり、ホームページを開いた瞬間に何を伝えたいホームページなのかしっかりとわかる作りになっています。

綺麗なヘッドロゴの条件

  1. 色の統一感
  2. キーワードの統一感
  3. サイトのデザインテンプレートとの統一感
  4. ちょっとしたセンス

上記のようなことを意識しながらヘッドロゴの作成をしてみてください。また、いきなり初めから素晴らしいヘッドロゴを作るには多少なりと難しいかと思います。始めの頃は誰もが「ヘタ」なので少しづつで良いので頑張って素晴らしいヘッドロゴを作ってみてください。

スポンサーリンク


カッコいいヘッドロゴは色の統一感があります

色の統一感は大事です

実際にホームページを開き見た瞬間に「何となく見づらいなぁ」とか「ここのサイトは読まないな」って思うことはありませんか?

大抵この様なサイトは、自分では良かれと思って文字などの色を何種類も使用し目立たせるようにしたりしています。実はこれって非常に読みづらくなる原因です。酷いサイトになると文字の色が10種類ちかく使っているサイトもありますよね

ホームページを作る際はあまり過剰な色使いをしない方がいいです。また、ヘッドロゴを作る時もそうですが、余り色を多く使い過ぎると素人っぽく見えてしまいますのでご注意を


キーワードの統一感

あなたがこれから作成するホームページのキーワードと異なる画像を使うと見ていて何を伝えたいホームページか分からなくなります。

例えば、この「誰でも簡単にホームページは自分で作れる QHM」のヘッドロゴですが、ホームページと関連のあるキーボードの画像を使っていますが、これが動物の画像だとどうでしょうか?※当サイトは現在大幅なリニューアルをおこないTOP画像は変更されています。

ホームページの作り方を検索しているのにTOP画像に動物の画像ですと「アレ間違ったかな」と思ってしまいますよね。

実際に元の画像を動物の画像変更するとこの様なイメージになります。

画像の説明
元のtop画像

画像の説明
動物のtop画像

イメージがかなり変わりホームページの作り方が掲載されているサイトではない感じになってしまいますよね。

サイトのデザインテンプレートとの統一感

QHMデザインテンプレートの種類 138種類

こちらのサイトで使用しているホームページ作成ソフトのQHMにはデザインテンプレート138種類(2013年時)があり、そのデザインテンプレート(雛型)とある程度統一感を持ってヘッドロゴを作ると全体的に見やすいホームページになります。

また、他のHP作成ソフトでホームページを作る際にはそのソフトで選べるテンプレートが数種類あるかと思うので、まずはどの様なテンプレートが有るのか確認してからTOP画像の制作に取り掛かると良いと思います。

QHMの場合、サイトのデザイン(テンプレート変更する)を変更するにはボタン一つで変更できるのでTOP画像を作ってからヘッドロゴにデザインテンプレート(雛型)を合わせる方法でも良いかもしれません


ヘッドロゴを作るときはちょっとしたセンスが必要かも

ちょっとしたセンスが必要かも

ちょっとしたセンスってのが意外と難しいかも知れません…私も決してセンスがあるという訳ではありませんし、逆にセンスは無い方だと思っています…それならば、センスが無い方はどうしたら良いのかと言うと、センスのある方(プロが作ったもの)を参考にしたら良いのです。

ヘッドロゴを全てコピペするのでは無く、自分の気に入ったホームページのヘッドロゴの色の使い方や文字の配列等を参考に自分のホームページ用に作成してみてください。

「サルまね」ではございませんが、初めて取りかかる作業でいきなり自分のオリジナルで素晴らしいモノなんて作れません。初めっから素晴らしモノを作れる方なんて極稀ですからね

私が作ったホームページも決して綺麗で見やすいとは言えないですが、なるべく見やすいよう心がけて作る様に努力していますが、『何も考えないで作る』のと『これらの事を考えながら作る』だけでも完成した時の見栄えは大きく変わります※全て真似するのはいけません!!著作権法にひっかかりますよ

フリーソフトの紹介

これから自分でTOP画像などを作ってみようと思われた方は、まず画像編集などに必要な無料で使えるフリーソフトをダウンロードして下さい。

TOP画像の作り方

こちらでTOP画像の作り方の説明をしています。独学で覚えた方法ですので、もっと簡単に作れるかも知れませんが参考程度にはなると思うので覗いてみてくださ。

HPの作り方の手順一覧

前へ≪ 1234567 ≫次へ


HPの作り方関連ページ&お得情報

スポンサーリンク