読む人にも、書く人にも、
真に価値ある情報を。
wordpressの初心者向け情報サイト『webcode』
webデザイン

かっこいいトップページにするために必要な5つのこと

laptop-2411303_1280

ホームページを作る際には必ず必要となるトップページ。あなたはこのトップページの作り方に悩んだことはありませんか?

 

ユーザが使い続けてくれるようなWebサイトにするためにはトップページに載せる情報を整理し、わかりやすくする必要があります。今回は、そんな「トップページの作り方」について紹介していきます。

 

そもそもトップページとは?

 

questions 2212771 640 - かっこいいトップページにするために必要な5つのこと

 

まず、最初に「トップページとはWebサイトのどの部分を指しているのか」しっかりとおさえておきましょう。

 

トップページとは、特定のWebサイトへの入り口にあたるページのことである。各Webページへのリンクなどを含み、サイト全体の顔としての役割を果たす。(IT用語辞典バイナリより)

 

つまり、トップページはWebサイト全体の「顔」になります。なので、デザインでユーザに強い印象を与えることも有効な手段の1つです。

 

トップページに載せるべき情報とは?

 

entrepreneur 593378 640 - かっこいいトップページにするために必要な5つのこと

 

先ほどもお伝えしたように、トップページはWebサイト全体の顔になります。デザインでユーザに強い印象を与えることも重要ですが、「ユーザが知りたい!」と思っている情報が載っていなければ意味がありません。

 

ユーザが価値を感じてくれなければ、そのWebサイトは再び見てもらえる可能性は非常に低いです。

 

だからこそ、トップページで載せるべき情報の取捨選択は重要になってきます。ここでは、トップページを作る際に考えるべき5つのことについて紹介します。

 

「既に自分のサイトを持っている」という方もこれを見ながらできているかどうか確かめてみましょう。

 

1.何のサイトなのか?

 

「パッと見て何のサイトなのか」わかるようにすることが必要です。

 

例えば、企業のサイトであれば企業のロゴや、企業が提供しているサービスが目につくところに載せることなどです。

 

ここで重要なのが、ユーザに一瞬でも考える隙を与えないことです。考える隙ができてしまうと、ものすごいファンでない限りそのページをすぐに閉じてしまいます。

 

2.何を提供しているのか

 

提供しているサービスはどんなものか、何のためのサイトなのかを明確に伝えます。

 

例えば、フリーで働いているWebデザイナーの方であれば、自分の存在やスキルを知ってもらい、仕事の依頼を増やすことが目的になるかもしれません。

 

目的は何でも良いですが、ユーザに対して簡潔に伝えることが重要です。

 

企業名やロゴの隣に提供するサービスを一文程度でまとめて簡潔に伝えると良いでしょう。

 

3.どんな情報が掲載されているのか?

 

サイトの構成は多種多様です。シンプルで文章をできるだけ少なくしていることやページ数や情報量が非常に多くなっていることもあります。

 

シンプルなデザインであれば、ユーザが求めているページには行きやすいかもしれません。ですが、情報量が多いページのときを考えてみてください。

 

情報量が多いと、ユーザがパッと見て一瞬で必要な情報を見つけることは難しいです。だからこそ、メニューやナビゲーションを設置してユーザが求めている情報にスムーズにたどり着くようにする配慮も必要になります。

 

メニューの項目やその配置にも気を配りましょう。メニューがせっかくあっても、わかりにくい位置にあったら意味がありません。

 

4.どんな特徴があるのか?

 

サイトのデザインを通して企業や自分をアピールしていきましょう。このデザイン1つが変わるだけでもユーザに与える印象は大きく変わります。

 

ユーザに強い印象を与えるためにはどのようなデザインにする必要があるのか考えてみましょう。

 

デザインを考える1つの手段としては、フォントのスタイルや配色、アイコンが挙げられます。

 

5.次へのステップがわかりやすくなっているか?

 

トップページの情報を一通り読んでくれたユーザを次のページに誘導していくことを考えてみましょう。

 

次のページに良い情報が載っていたとしても、次のページに誘導するための行動喚起がされていなければ、すぐにそのページを閉じてしまいます。

 

例えば、「次のページへ」や「お問い合わせはこちら」などのボタンやリンクを設置しましょう。

 

このボタンやリンクの位置としては目につきやすく、クリックしやすい場所に配置することがポイントになります。

 

ここまででトップページに載せるべき情報、気を付けるべきことについては理解できたでしょうか?

 

2ページ目の作り方は?

 

to think about 1722755 640 - かっこいいトップページにするために必要な5つのこと

 

トップページでは、ユーザに強い印象を与え、行動喚起をして次の行動に移ってもらうことを意識して作っていきます。

 

そのため、ユーザは期待して2ページ目を開いてくれることが多いです。しかし、そこで求める情報が載っていなかったり、内容が薄かったりすれば、すぐにページを閉じてしまいます。

 

ユーザにしっかりと呼んでもらうためには、トップページ以上にユーザへの配慮が必要になります。

 

例えば、次のようなことが挙げられます。

 

  • 文章が多くなる分、画像も多めに入れていくこと
  • 画像を入れてイメージしやすくする
  • 「どこからどこまでがどんな内容になっているか」を明確にする

 

画像を入れることで、どんな内容が書かれているのかイメージしやすくなり、内容も頭に入りやすくなります。

 

また、「文字ばかりが載っている」というマイナスイメージを少なくすることができるので、読んでもらいやすくなります。

 

トップページの参考になるトップページギャラリーとは?

 

ここで、トップページの参考となるギャラリーサイトを紹介します。

 

「かっこいいデザインが思い浮かばない…」「ユーザに印象を与えるデザインがよくわからない…」と悩んでいるあなたもこのサイトを見て参考にしてみましょう。

 

今回は日本のギャラリーサイトと海外のギャラリーサイトを分けていくつか紹介します。

 

日本版

1.MUUUUU.ORG

muuuuu - かっこいいトップページにするために必要な5つのこと

http://muuuuu.org/

 

デザイン別、色別などとカテゴリ分けがされているので、検索がしやすくなっています。

 

 

2.ウェブ・ファインダー

finder - かっこいいトップページにするために必要な5つのこと

http://w-finder.com/

 

こちらも細かくカテゴリわけがされているので、目的に合わせた検索ができます。

 

 

3.週刊ウェブデザイン

webdesign - かっこいいトップページにするために必要な5つのこと

http://www.dailywebdesign.com/

 

こちらのサイトは、毎週追加サイトが追加されています。毎週追加されているので、非常に量が多いです。

 

 

海外版

 

1.AWWWARDS

awwwards - かっこいいトップページにするために必要な5つのこと

https://www.awwwards.com/

 

ギャラリーのユーザの投稿によって掲載されているサイトの評価が決まるのが特徴的なサイトになります。

 

 

2.Admire The Web

admiretheweb - かっこいいトップページにするために必要な5つのこと

https://www.admiretheweb.com/

 

シンプルなデザインのサイトになっていて、ギャラリーそのものがわかりやすくなっています。

 

 

3.Siiimple

siiimple - かっこいいトップページにするために必要な5つのこと

https://siiimple.com/

 

このサイトは、更新頻度が高く、常に新しいデザインを閲覧することができます。

 

 

まとめ

 

今回はトップページの作り方を中心にお伝えしました。

 

トップページの印象が変わるだけでも多くのユーザに訪れてもらいやすくなります。最後に紹介したサイトを参考にユーザの印象に残るようなトップページを作ってみましょう。

 

最後まで読んでいただき、ありがとうございました。

WordPressでおすすめのプログラミングスクール

オンラインマンツーマンならCodeCamp

bgt?aid=160728030173&wid=010&eno=01&mid=s00000016159001010000&mc=1 - Wordpressでおすすめのプログラミングスクール0 - Wordpressでおすすめのプログラミングスクール
CodeCampは、完全オンラインで、現役エンジニア講師のマンツーマンレッスンを受けられるプログラミングスクールです。

CodeCampは期間限定でWordpressコースを提供していますが、上場企業のグループ会社が運営していることもあり、これまでに2万人以上の受講実績があります。

プログラミング未経験者でも、WordPressのインストール、サーバーの準備、テーマの設定、プラグインの導入など、WordPressでサイトを構築するためのスキルを身につけることができます。

プログラミングのオンラインスクールCodeCamp0 - Wordpressでおすすめのプログラミングスクール

CodeCampの口コミはこちら

オンラインテキストを自習形式ならTechAcademy

bgt?aid=160728030174&wid=010&eno=01&mid=s00000016188001104000&mc=1 - Wordpressでおすすめのプログラミングスクール0 - Wordpressでおすすめのプログラミングスクール
TechAcademyは、1ヶ月の短期集中でWordpressについて学べる、完全オンラインのプログラミングスクールです。

基礎的なPHPの知識に加えて、サイト制作における企画・設計・制作・運用方法、WordPressテーマのカスタマイズ方法、プラグインを利用した機能の追加方法、オリジナルWordPressテーマの作成方法などを学ぶことができます。

TECH ACADEMYでは申込みから1週間の間、オンライン教材・メンターによるサポート等の学習システムを無料で体験することも可能です。

TECH ACADEMYの無料体験はこちら0 - Wordpressでおすすめのプログラミングスクール

TECH ACADEMYの口コミはこちら