HPの作り方

ホームページを自分で作ってみる⑤トップページを作成する

更新日:

お店や会社などのホームページ(コーポレートサイト)のTOPページは、ネット上でのお店の顔(看板)と一緒の役割がございます。

またTOPページには伝えたい情報などを端的に且つ読みやすく記載するのが好ましいですが、中にはどこに何が書いてあるのかさえ分からない様なホームページもあります。

そのように何処に何が書かれているのか分からない様なHPなら、せっかくHPへ訪れた方も直ぐに開いたHPを閉じてしまう可能性もあるのでホームページのTOPページはしっかりと作りこむことが大事です。

 

ホームページのトップページはお店の看板だから、ある程度デザインにもこだわりを!!

初めて読むホームページの滞在時間を決める要因の1つに『TOPページの見やすさ(読みやすさ)』があります。

私も含めみなさんも同じかと思いますが、最近は自分でなにか情報を探す際にはインターネットを使用しその情報を掲載しているホームページから情報を探しますよね。

しかしHPをクリックした途端に古臭いデザイン(見た目)や文字だらけで読みづらいホームページなら直ぐに閉じて別のサイトで情報を探そうとしませんかね?

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

もしこれからあなたが作ろうとしているホームページも開いた瞬間に閉じられるようなホームページを作ろうとは誰もが思ってはいないかと思いますが、少しでも多くの人に読んでもらえるようにするなら少なくともTOPページの見た目などに気を使うようにHPの作成をするようにしましょう。

 

今と昔とではTOPページの作り方にも変化がみられる

ひと昔前のHPと言えばパソコンから読まれるのを前提としてHPの作成をしていましたが、ここ最近ではそれらパソコンなどのデバイス(端末)では無くスマホやタブレットなどのデバイス(端末)を介して読まれることを意識してHPを作成しなくてはいけなくなりました。

また以前であればパソコン用とスマホ(昔はガラケー)用のホームページを2つ作るのが主流でしたが、最近ではレスポンシブデザインが当たり前の時代になったので昔の様に2つのHPを作る必要もなくなりました。

またスマホなどから読まれることを前提にホームページを作成するようになったことにより、今まではヘッター画像などはデザイナーなどが作成した画像を掲載しているようなHPが多くありましたが最近ではシンプル且つ読みやすさ重視のTOPページが増えてきています。

 

ひと昔前のホームページのTOPはどのようなデザインだったのか

TOPページの構成 ひと昔前のホームページと言ってもここ数年での出来事ですが、以前のホームページは手の込んだヘッターロゴ(ヘッダー画像)がありサイドメニューも必ずあるようなTOPページばかりでした。※右図のような構成

しかし最近のデザイン性に優れているホームページのTOPページとはいうと、この様な構成では無くとてもシンプルに必要な情報のみ記載しているのが増えています。

なぜシンプルな構成のTOPページが増えたのかというと、それはスマホなどからHPを読むときにはサイドメニューなどの必要性がそれ程無くなったからだと考えられます。

スポンサーリンク

例えば皆さんもご存知のApple社のホームページなどこの様に非常にシンプルで見やすいモノになっています

 

 

またコチラはレンタルサーバーのロリポップのホームページになりますが、こちらもシンプルに縦長のTOPページを採用しています。

 

 

トップページを作る時のポイント!!

ホームページの顔となるTOPページを作る時のポイントのお話になります。

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

デザイン性に優れており綺麗で読みやすいホームページって全体的に色の統一感やその商品に合った画像などを使っていることが多く、ホームページを開いた瞬間に何を伝えたいのかなどがしっかり分かりますよね。

ですからTOPページを作る際には下記の様なことを注意して作成してみると、綺麗で読みやすいTOPページを作ることが出来るかと思いますよ。

読みやすいTOPページの特徴

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

 

お洒落なTOPページには色の統一感があります

色の統一感

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

大抵この様なホームページの特徴としては、自分では良かれと思って文字などの色を複数使用し目立たせるようにしたりしています。

しかし、実はこれって非常に読みづらくなる原因なんですよね!!

本当に読みづらいホームページとかになると、文字の色が10種類ちかく使っているホームページとかもありますよね

ですからホームページを作る際はあまり過剰な色使いをしないようにしましょうね。

そしてあまり多くの色を使い過ぎると素人感丸出しになるのでご注意をしてください。

スポンサーリンク

TOPページを作るときはちょっとしたセンスが必要かも

ちょっとしたセンスってのが意外と難しいかも知れません…

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

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

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

初めっから素晴らしモノを作れる方なんて極稀ですからね

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

 

HPの作り方⑥ 基本コンテンツのを作るをご覧ください

 

 

またコチラではホームページ制作に関する様々な情報を掲載しておりますので、これからご自身でホームページを作られる方は是非ご覧ください

 

HPの作り方関連記事

Googleアルゴリズム

SEO 整体院HP

2019/6/25

2019年6月アルゴリズムアップデートで整体院HPの検索結果大幅ダウン

Googleは2019年6月に今年度2回目となる大規模なアルゴリズムのアップデートを行いました。 また今回のアルゴリズムのアップデートは事前に告知をするなど今までとは多少異なる方法をとった形となっています。 そして今回のアルゴリズムのアップデートは「健康・医療ジャンル」などのホームぺージなどが主な対象だったようです。   整体院ホームページの検索順位が大幅下落 2019年6月3日(日本時間では4日)に行われたGoogleのアルゴリズムアップデートにより、私が普段から管理している知人の整体院ホーム ...

続きを読む

競合サイトの情報を調べる

SEO ワードプレス

2019/6/7

競合店がどんなWordPressテーマを使っているのか調べる方法

整体院や美容院・飲食店など地域に密着した商売などの集客方法の1つになりつつあるホームページですが、ここ最近ではWordPress(ワードプレス)と呼ばれるCMSでホームページを作られる方が増えています。 このWordPress(ワードプレス)は世界中のホームページの約3割がWordPressで作られていると言われているくらい多くの方が利用していますが、ひょっとして自分の商売の競合先もこのWordPress(ワードプレス)でホームページを作られているかも知れません。 そしてその競合店のホームページのデキが非 ...

続きを読む

レンタルサーバーロリポップ

HAIK(旧QHM) サーバー

2019/5/30

複数のサイトを作る(ロリポップ編)

初めてのホームページが完成し、さらにもう1つWebサイト(ホームページ)を作りたくなったけどどうやって作るのか? 簡単HP作成ソフトのHAIK(旧QHM)なら、独自ドメインを所有している方ならサブドメインを使用し簡単に複数をサイトを作ることが出来ます。 また、コチラではレンタルサーバーのロリポップを使用時の複数サイト作成方法の説明となります。※レンタルサーバーのプランによってはサブドメインを使用できない場合がありますのでプランの変更が必要となる場合がございます。   HAIK(旧QHM)を使って ...

続きを読む

ホームページの作り方(手順)

HPの作り方

2019/6/21

ホームページを自分で作る方法(手順)初心者向け

ホームページの作り方(作成手順) 初めてホームページを作られる方向けのホームページの作成手順の説明です ここでは初めてホームページを自分で作ってみようと思う人向けにホームページの作り方を分かりやすく順を追って説明しています。 1つ1つ手順を追って説明していきますので、HPを初めて自分で作ってみようと思う方でもきっとホームページを作る事が出来るかと思います。 また当サイトの管理人自身がHPを作り出してまだ数か月のHP作成初心者なので難しい専門用語などは使っていないので(私自身専門用語が分からない)、これから ...

続きを読む

HPの作り方

2019/5/27

ホームページを自分で作ってみる①HPを作る前にしっかりとリサーチをする

HPを作る前にはリサーチをしよう 初めて自分でホームページの作成をされる方にとってHP作成とはどのようなモノなのか分からないのは当然かと思います。 また「どの様なデザインのほーうページが良いのか」や「どの様に文章を書けば読みやすいか」など分からなくて当たり前です。 そこでこれから初めて自分でホームページを作ろうとされている方は、先ずはたくさんのホームページを見ることをおすすめいたします。 またお店などのホームページをつくるのであれば、同業種で競合とされているお店のホームページを見てみることが大事になってき ...

続きを読む

HP作成に独自ドメインが必須だよ

HPの作り方

2019/6/21

ホームページを自分で作ってみる②独自ドメインを取得する

HPを作るなら独自ドメインを取得する HPの作り方①で(リサーチする)で説明した通り様々なホームページを見ることで、どの様なホームページにしたいのかなどのイメージが掴めるかと思います。 またどの様なホームページが「綺麗で読みやすいのか」や「こんなHPなら読みづらいな」って分かれば自分で作成しようとされているHPのイメージがなんとなくでいいので想像出来てくるかと思います。 それでは、HPの作り方②ではホームページ作りには欠かせ無い「独自ドメイン」についてのお話をさせていただきます。   独自ドメイ ...

続きを読む

レンタルサーバー

HPの作り方

2019/6/21

ホームページを自分で作ってみる③レンタルサーバーを選んでみる

ホームページの作成をする為には、先ずはホームページのデータ(情報)を保管するためのサーバーが必要になってきます。 このレンタルサーバーを用意しないとHP作成ソフトを購入したり独自ドメインを取得したとしても、自分で作成したホームページをネット上で公開することは出来ません。 またレンタルサーバーには毎月の月額がかかる有料サービスと無料でも利用が出来る無料のレンタルサーバーサービスなどがございますが、お店(商用目的)などのホームページを作成する場合には有料のレンタルサーバーの利用が一般的となっております。 サー ...

続きを読む

HPの作り方

2019/5/27

ホームページを自分で作ってみる④HP作成ツール(ソフト)の必要性とは

お金をかけずに無料でホームページは作ることは出来ますが、それなりの専門的な知識が必要になります。 なのでこれから初めてHPを作ろうとされているHP作成初心者の方にはおすすめいたしません。 仮に実際にお金をかけないで無料でHPを作るのであれば、windows に標準でインストールされている『メモ帳』を使って、ソースと言われる『HTML言語』を打ち込んでいく(これはプログラムを作ると言った方が分かりやすですかね)作り方がありますが、ハッキリ言って初めてホームページを作る方にはほぼ99.9%無理な話です。 それ ...

続きを読む

HPの作り方

2019/7/11

ホームページを自分で作ってみる⑤トップページを作成する

お店や会社などのホームページ(コーポレートサイト)のTOPページは、ネット上でのお店の顔(看板)と一緒の役割がございます。 またTOPページには伝えたい情報などを端的に且つ読みやすく記載するのが好ましいですが、中にはどこに何が書いてあるのかさえ分からない様なホームページもあります。 そのように何処に何が書かれているのか分からない様なHPなら、せっかくHPへ訪れた方も直ぐに開いたHPを閉じてしまう可能性もあるのでホームページのTOPページはしっかりと作りこむことが大事です。   ホームページのトッ ...

続きを読む

ホームページの作り方手順

-HPの作り方
-, ,

Copyright© HP自作コム , 2019 All Rights Reserved.