ホームページをもっとよくする!Jimdoワンポイント講座

ホームページをもっとよくする!Jimdoワンポイント講座

第41回目 「ホームページの第一印象を整えよう」

せっかく作ったホームページ、一人でも多くの人に見て、読んでもらいたいですよね。しかし「思うように表現できない」「うまく伝わらない」そんなケースが多いようです。このコラムでは、ホームページ作りに役立つ「ちょっとしたコツ」をご紹介いたします。
第41回目は 「ホームページの第一印象を整えよう」をお届けします。

ルドルフ

アリーナちゃん、どう?今日はいつもと違う雰囲気で登場だよ。


ルドルフ

ル、ルドルフくん・・・!上はビシッとジャケットでカッコいいけど、下はサンダル・・・?


笑顔アリーナ

あああああ、うっかりしてたーーー!


ルドルフ

せっかく決めてきたのに、台無しになっちゃうわね。ホームページもパッと見た第一印象がすごく大事だって知ってた?


笑顔アリーナ

そうなの?


ルドルフ

そうよ。詳しく解説するわね。


【ホームページの第一印象を整えよう】

 

「人は見た目が9割」という言葉があるように、初対面の第一印象はとても大事です。実は、ホームページにも同じことが言えます。サービスについて丁寧に書かれたページ、想いをたくさん込めたページ、集客できますようにと一生懸命頑張って作ったページ、一人でも多くの人に見てもらいたいですよね。

 

そこで、今回は「トップページ」にフォーカスし、ホームページの第一印象をグッとよくするポイントを解説します。中まできちんと見てもらえるよう、トップページを整えるコツをしっかりつかんでください。

 

(1)ホームページの印象は1秒で決まる

 

ホームページの第一印象で最も大切なことは、「一瞬で何のページかわかる」ということです。何のページか瞬時にわかれば、中まで読んでもらえる確率が上がるでしょうし、逆にパッと見て「何のページかわからない」あるいは「怪しい」と感じてしまった場合、すぐに別のページへ移動してしまうでしょう。

 

ホームページを開いたときに一番最初に視界に入ってくるエリアを「ファーストビュー」と言います。スクロールせずに見ることができるエリアです。

お店で言うと、看板や入口にあたるのがホームページの「ファーストビュー」です。このファーストビューの印象を決めるポイントは大きくわけて以下の3つです。

 

●レイアウト

●メインビジュアル

●カラー

 

この3つについて詳しく説明します。

 

 

(2)レイアウト選びのコツ

 

Jimdoには現在40種類以上のレイアウトが用意されています。それぞれにプリセットとよばれるバリエーションがあるので、合わせると200種類もの数になります。これだけあると、一体どれを使ってよいのか迷ってしまいますね。

 

Jimdoのレイアウトは、大きく分けて4つの系統があります。まずはこの基本パターンを押さえておくことでレイアウト選びもグッと楽になるはず。ポイントは「サイドバーの有無」と「メインビジュアルの大きさ」です。


 

 

Jimdoのレイアウト・4つの系統

▼①サイドバー無し、メインビジュアルがワイド

サイドバーがなく、メインのビジュアルの幅がワイドなレイアウトです。(スタイル>背景機能を使って設置)

Tokyo、RomeRio de Janeiro,Miami,Stockholm,Zurichiなど。

 

▼②サイドバーあり、メインビジュアルがワイド

サイドバーがあり、メインのビジュアルの幅がワイドなレイアウトです。(スタイル>背景機能を使って設置)
Amsterdam,Bordeaux,Chicago,Madridなど。

 


▼③サイドバー無し、メインビジュアルは任意のコンテンツ

サイドバーがなく、メインのビジュアルがコンテンツエリアに位置するレイアウトです。(例:コンテンツの追加>画像機能を使って設置)

Barcelona,Berlin,Melbourne,Osaka,Shanghaiなど。

 

▼④サイドバー有り、メインビジュアルは任意のコンテンツ

サイドバーがあり、メインのビジュアルがコンテンツエリアに位置するレイアウトです。(例:コンテンツの追加>画像機能を使って設置)

Dubai,Dublin,Havana,Helsinki,Reykjavik,St. Petersburgなど。

 


もし第一印象で、インパクトを重視するのであれば、①か②のレイアウトをおすすめします。

③や④のレイアウトは、コンテンツを追加で目立つ画像を追加することでインパクトを出すことができます。画像だけでなくロゴや、メインコンテンツの下に敷かれる背景画像を工夫するなど、自由にカスタマイズしやすいのが特徴です。

▼参考サイト

Jimdoデザインフィルター:https://jimdo.design/

Jimdoのレイアウト一覧を閲覧できます。ぜひ参考にしてください。

 

▼レイアウトの選び方・関連記事

・レイアウトの変更:http://hajimeteweb.jp/jimdo/customize/vol3.php

・業種別ホームページ作成講座:http://hajimeteweb.jp/column/hp_category/

 

 

(3)メインビジュアル選びのコツ

 

(2)のレイアウト選びで、①や②のワイドな系統を選んだ場合、背景画像の選び方で第一印象が大きく変わります。もちろん他のレイアウトでも、メインとなるコンテンツ選びはとても重要な要素です。


 

メインビジュアルは、内容と合っていて高品質なものを

 

「飲食店」のページであればイチオシメニューのおいしそうな写真、「バンド」の紹介ページだったらライブ時の写真、スポーツチームだったらプレーしている写真など、まずは内容と合ったものを選びましょう。


理想はプロが撮影した高品質な写真です。可能であれば、プロのカメラマンに依頼して撮影してもらうのがベストですが、今すぐ準備できない、あるいは予算が厳しいということであれば、素材集などの代用も検討すると良いでしょう。

会社や団体内に、写真が得意な人がいればお願いしてみるのも手です。

 


 

▼おすすめの写真・イラスト素材サイト

以下のサイトは、ホームページに使用できる写真やイラストを素材を配布しています。
※必ず各サイトの規約を確認して使用してください。

・ぱくたそ(無料):https://www.pakutaso.com/
・足成(無料):http://www.ashinari.com/
・Pixabay(無料):https://pixabay.com/
・Fotolia(有料):https://jp.fotolia.com/

▼メインビジュアルの選び方・関連記事
・ファーストビューを改善して、ユーザーの離脱を防ごう:https://jp.jimdo.com/2017/01/26/firstview/
・一瞬で伝える!魅力的なメインビジュアルの選び方:http://hajimeteweb.jp/column/jimdo_design/vol4.php