ホームページを作成する際に参考にすべき10の良い例&悪い例
公開日 2014年1月29日、更新日 2023年10月28日
![ホームページを作成する際に参考にすべき10の良い例&悪い例](https://static.wixstatic.com/media/a3d4e4_a92bbfd8c94b40a3ba65e042f73e2ee9~mv2.png/v1/fill/w_49,h_28,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/a3d4e4_a92bbfd8c94b40a3ba65e042f73e2ee9~mv2.png)
ホームページは、オンライン上における店舗といえます。訪問者がそのホームページに滞在するかどうかは、たった一瞬の第一印象が鍵を握ります。そのため、良いホームページを作成するためには、美しいデザインというだけではなく、ユーザーを引き込み、興味をもってもらうためのポイントを掴む必要があります。
そこでこの記事では、「良いホームページ」を構成する基本的な要素と、ポイントについてわかりやすく解説します。ホームページの最も重要なポイントを押さえて素敵なホームページを作成しましょう。
01. レイアウト
![ホームページを作成する際に参考にすべき10の良い例&悪い例 ① レイアウト](https://static.wixstatic.com/media/0719d4_a608bd5285694c5bb68addd57e74047e~mv2.jpg/v1/fill/w_139,h_79,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/0719d4_a608bd5285694c5bb68addd57e74047e~mv2.jpg)
ホームページをすっきりとしたデザインに仕上げ、ごちゃごちゃとした印象になるのを避けましょう。あまりにも多くの情報や画像がいきなり表示されると、訪問者は圧倒されてしまいます。ホームページには、最も大切な情報のみを選別することが重要です。コンテンツが上手くまとまっておらず、すっきりと配置されていない場合、プロフェッショナルな印象を与えることはできません。
良い例:情報が整理された操作しやすいレイアウトにしましょう。訪問者がスクロールダウンしなくても目に入るホームページ上部に、メニューや画像、メッセージなど、あなたが伝えたいコンテンツ全てが含まれているか確認してください。
悪い例:画像やアイコン、クリップアート、長すぎるテキストなどを追加しすぎて、ホームページにごちゃごちゃと情報を詰め込むのはやめましょう。散らかった情報を親切にまとめてくれる訪問者はそう多くはないはずです。
02. 画像
![ホームページでの画像の使い方良い例と悪い例](https://static.wixstatic.com/media/a3d4e4_08ecefd487194788aa3c4674f27ec985~mv2.png/v1/fill/w_46,h_26,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/a3d4e4_08ecefd487194788aa3c4674f27ec985~mv2.png)
写真は、サイト訪問者にあなたのホームページが何についてなのか、を瞬時に伝えることができます。ホームページに使いたい高画質な写真を持っていない場合は、プロフェッショナルな写真素材が豊富に揃っているWixフリー素材から選んでサイトに追加することができます。Wixエディタを開き → 画像 → 画像の変更 → Wixフリー写真 から好きな写真を見つけましょう!または、フリー写真素材サイトを活用してもいいでしょう。印象的な画像を使い、テキストの何倍もの効果を発揮させましょう。
良い例:サイト訪問者が他のページも見たくなるような、高解像度の写真を使いましょう。クオリティの低い写真を使うと、それだけでプロフェッショナルな印象が崩れてしまいます。
悪い例:気に入っている写真を全てホームページに掲載する必要はありません。最も美しい写真を数枚掲載するだけで十分です。
03. 色&背景
![ホームページの背景と配色の良い例と悪い例](https://static.wixstatic.com/media/a3d4e4_f72baaba9d7b4bb2bc400510472b34da~mv2.png/v1/fill/w_49,h_28,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/a3d4e4_f72baaba9d7b4bb2bc400510472b34da~mv2.png)
シンプルかつ大切な役割を果たすホームページの色彩と背景は、サイト全体の雰囲気を決める重要な部分です。そう考えると、慎重に背景や色使いを選びたいものです。Wixエディタを使うと、多彩な背景デザインから好きな背景を選ぶことができ、カラーパレットという機能を使ってサイト全体の配色を簡単に変更することができます。好きな配色パターンをクリックしてサイトがどんな雰囲気に変わるかを試してみたり、カラーパレットをカスタマイズすることもできます。また、オリジナル画像をアップロードして、背景として設定することもできます。
良い例:ブランドの魅力を最大限に引きだす色の組み合わせを使用しましょう。
悪い例:さまざまな色を使いすぎたり、ブランドメッセージではなく背景自体に焦点が移ってしまうような背景は避けましょう。
04. CTA ボタン
![ホームページへのボタンの配置 良い例と悪い例](https://static.wixstatic.com/media/62c832_2df7a516df4f47568c5f9aa4a9704a1b~mv2.png/v1/fill/w_49,h_28,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/62c832_2df7a516df4f47568c5f9aa4a9704a1b~mv2.png)
全てのホームページにボタンを追加する必要があるわけではありませんが、ボタンを使用するならば、適切に使用するべきです。ボタン、もしくは行動喚起(CTA:コール・トゥ・アクション)は、大切なページや製品ギャラリー、キャンペーンぺージへの玄関口です。ボタンを配置する目的が、訪問者に行動をとってもらいクリックしてもらうためなら、魅力的なボタンにする必要があります。
良い例:ボタン上の行動喚起テキストをできるだけ明確に短くしましょう。
悪い例:訪問者が見過ごしてしまうような場所に配置するのは厳禁です。CTA ボタンを配置する位置も、目立つ位置で他の要素に近すぎないようにしましょう。
05. テキスト(コンテンツ)
![ホームページでのテキストの使い方良い例と悪い例](https://static.wixstatic.com/media/a3d4e4_a9d921c646514432b081f1fd077262b3~mv2.png/v1/fill/w_49,h_28,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/a3d4e4_a9d921c646514432b081f1fd077262b3~mv2.png)
あなたのホームページの一番の目的は、サイト訪問者に何のホームページなのかを瞬時に伝えることです。ホームページでは長々と文章を書き綴る必要はありません。また、モバイル端末でホームページを見ている可能性もあるため、文字サイズはある程度大きくしましょう。
良い例:テキストの内容は、常に最新のものを保ちましょう。そうすることで、きちんとサイトを更新していることを訪問者にアピールできます。
悪い例:決して、書きすぎないように意識しましょう。ほとんどの場合、あなたのホームページをじっくりと読むために、何時間も時間を用意している訪問者はいません。見出しを流し読みするだけで、重要な内容がわかるように端的にまとめましょう。
![](https://static.wixstatic.com/media/a3d4e4_c7668b21ceef47d69eb0703ce4cfe2db~mv2.png/v1/fill/w_60,h_60,al_c,q_85,blur_3,enc_auto/a3d4e4_c7668b21ceef47d69eb0703ce4cfe2db~mv2.png)
編集者:Miyuki Shimose
SEO & ブログコンテンツマネージャー