10クイックヒント:Webサイトのホームページデザインをより良くする方法 | チャッピーの個人ホームページ制作備忘録

チャッピーの個人ホームページ制作備忘録

個人の小さな人間のほそぼそとしたフリーランス的な感じでウェブサイト制作を行っています。
いろいろな情報を公開中


テーマ:

中小企業の所有者にとって、あなたのウェブサイトのホームページはあなたの店の窓のようなものです:それはあなたの店に人々を魅了し、あなたに何を提供するかの考えを与えます。これはまたあなたのウェブサイトのホームページがどのように見えるかがあなたのブランディングとあなたの販売の両方に大きく影響することを意味します。

ただし、店の窓とは異なり、特に中小企業を経営している場合は、Webサイトのホームページの改善にはそれほどコストがかかりません。あなたがたくさんのお金を使うか、または再設計を数週間待つことなくあなたが作ることができる多くのウェブサイトホームページの調整があります。

ウェブサイトのホームページデザイン
 

Webサイトのホームページデザインは、ビジネスの成功にとって重要です(Image Source)。
このチュートリアルでは、顧客を引き付けるWebサイトのホームページを作成する方法を紹介します。あなたはウェブサイトのホームページデザインのアイデアを探求し、いくつかの最高のウェブサイトのホームページの例を見ます。

それらのWebサイトのホームページデザインのヒントを見てみましょう。

1.軽量の画像ファイルを使用する
あなたの製品を可能な限り美しく見せたいならば、美しく、高品質のイメージを持つことは絶対必要です。ただし、重要なトレードオフがあります。通常、画像が大きいほど、または解像度が高いほど、これらの画像が訪問者にロードされるまでの時間が長くなります。ロード時間が長くなればなるほど、訪問者が去る可能性が高くなります。

Googleの調査によると、モバイルサイトの読み込みに3秒以上かかると、ウェブサイトへのアクセスの53%が放棄されます。実際、彼らのモデルはあなたのページがロードされるのにより長い時間がかかるほど、あなたの訪問者が去る可能性が高いと予測しています。同じ調査によると、Webサイトの所有者が単に画像を圧縮しただけでは、大きな違いが生じることがわかりました。

ページ読み込み時間の統計
Webページのロードにかかる時間が長いほど、訪問者がバウンスする可能性が高くなります。
美しい画像を提供することと速い積載場所を持つことの間のバランスを見つけてください。画像をさらに圧縮する必要があるかどうかを確認するには、GoogleのPageSpeed Insightsツールを使用します。もしそうなら、あなたは それらをさらに圧縮するためにTinyPNGのようなツールを使うことができるか、またはこれらのガイドを通して画像最適化についてもっと学ぶことができます:


WordPressを高速化する:画像の最適化

2.目立つように行動を起こさせる
訪問者が初めてあなたのホームページに到着したとき、次のステップがどうあるべきかについてあいまいさがあってはなりません。これがあなたの行動要請(CTA)が入ってくるところです。CTAは通常大きなボタンの形で現れます。それをクリックすることはあなたのホームページ訪問者を見込み客または売りに変えるはずです。

あなたの行動の呼びかけが折り目の上にあることを確認しなさい - あなたのホームページの一番上の部分はスクロールなしで見える。あるケーススタディでは、トランポリンを販売しているオンラインストアでは、倍以上のCTAを追加するだけでコンバージョン率が11%向上しました。 

それでも、あなたは行動の呼びかけをこの分野だけに限定するべきではありません。あなたはあなたのホームページコピーの残りを通してそれを繰り返すことができます。たとえば、特殊な毛布を販売しているオンラインストアのRumplは、行動を起こすことを目的として、自慢の商品を折り目の上で強調しています。 

アクション配置の呼び出し
CTAを折り目の上に配置しますが、ホームページ全体でそれを繰り返します。
しかし、ホームページをさらに下にスクロールすると、その商品をカートに追加するための別のCTAボタンが表示されます。Rumplは彼らのウェブサイトのホームページに他のアイテムを表示しますが、注目の製品を除いて目立つCTAを持つものはありません。

ホームページ制作 堺市の訪問者は主に注目の製品を購入することに集中しています。

あなたのウェブサイトのホームページで他の気を散らす要素を避けてください。主な焦点は行動を起こすことです。ナビゲーション項目、ソーシャルメディアボタン、およびその他の要素をWebサイトのホームページに配置する必要がある場合は、それらがメインのCTAボタンからあなたの訪問者の目をそらさないようにしてください。

あなたのウェブサイトのホームページでアクションボタンへの強い電話がないなら、Graphic Riverからこれらの注目を集めるボタンテンプレートのいくつかをチェックしてください。



3.価値提案を明確にする
あなたの訪問者が取るべき行動について明確であることは別として、あなたは彼らがなぜその行動をとる必要があるのか​​についても明確である必要があります。すべての年齢層の消費者は  、優れたデザインや完璧な文法や綴りよりも、オンラインマーケティングコミュニケーションの明確さを重視しています。それで、それがあなたのウェブサイトのホームページのコピーに来るとき、あなた自身に次のことを尋ねなさい:

訪問者は、CTAをクリックしたことで得られるものを知っていますか? 
あなたの見出し、副題、そして本文のコピーには、大きな問題点とあなたが提供する解決策が含まれていますか?
訪問者は他の人にあなたのメッセージを簡単に繰り返すことができますか?
企業コミュニケーションの透明性に関する研究
消費者は、デザイン、長さ、および文法的正確さよりもメッセージの明快さを圧倒的に重視しています。
あなたのウェブサイトのホームページコピーであなたの価値提案を明確にしたいならば、以下の例のテクニックを試してください:

1.価値命題を繰り返す
あなたのホームページコピーを通して、あなたの訪問者があなたのCTAをクリックした後に得る利益を繰り返しなさい。あなたはこれらの利点を繰り返すために異なる言葉やビジュアルを使うことができます。以下の例では、軽量の旅行用品を販売しているオンラインショップのGossamer Gearが、「超軽量のギア」の価値提案を見出しに明示しています。それはまた彼らの会社のロゴにほのめかしてあり(「もっと少なくしなさい。もっとしなさい」)そしてバナー写真は通常より小さいバックパックを運んでいる2人のハイカーを示している。

明確なウェブサイトホームページの価値命題の例
ビジュアルを含め、Webサイトのホームページのいくつかの場所で自分の価値提案を繰り返します。


2.命題が重要である理由を特定する
あなたはあなたのビジネスが高品質の製品を作っているか、良いカスタマーサービスを持っているか、または社会的に責任があると述べることができます。その理由を明確にすることで、視聴者にとってより明確にすることができます。彼らのウェブサイトのホームページで、アパレル小売業者United By Blueは、自分たちのキャッチフレーズ(「責任ある耐久財」)とその内容(公共スペースの掃除や責任ある店舗のブログへのリンク)の両方で、社会的責任を強調している。しかし、彼らのウェブサイトのホームページコピーは、数字で会社の努力を特定することによってさらに一歩前進します。 

ホームページコピーの特異性の例
価値提案をどのように実現しているかについて具体的に考えましょう。
自分の価値提案を表現する上で、より具体的になる方法について考えてみましょう。あなたのユニークな価値提案があなたが顧客がお金を節約するのを手伝うということであるならば、彼らがどれくらい節約できるかに注意してください。あなたのビジネスが耐久性のある製品を作ることに誇りを持っているならば、製品が何年続くか製品を様々なテストにかける傾向があるかを指定して、そしてあなたの聴衆に結果を示してください。

4.あなたのウェブサイトホームページコピーをスキャンしやすくする
あなたのウェブサイトのホームページが長いか短いコピーを持っているかどうか、それはテキストがスキャンしやすいことが重要です。これは、人々がテキストをオンラインでスキャンしてスキムする傾向があるためです。Nielsen Norman Groupの調査によると、  オンラインのテキストを単語単位で読む人は16%にすぎません。 さらに最近の研究で、彼らはまた、人々がF字型のパターンで重いテキストをスキャンする傾向があることを発見しました。

オンラインでテキストを読むためのF字型のパターン
ホームページに大量のテキストがあると、人々はそれをF字型にスキャンする可能性があります。
あなたの訪問者があなたの説得力のある言葉やあなたの製品の最も重要な機能を見逃したくない場合は、あなたのウェブサイトのホームページのテキストがスキャンしやすいことを確認してください。あなたが従うことができるいくつかのヒントがあります:

ホームページの内容を小見出しで分割します。
段落で説明するのではなく、リストを使用して詳細を概説します。
画像にキャプションを追加します。
短い文章を使用してください。
あなたがビジュアルを通してより速く情報を提示することができるならば、単にコピーに頼るよりそれをしてください。
小型のサイズは避けてください。
この原則の良い例が、アウトドア用品を販売しているBarebones Livingです。彼らの製品カテゴリをリストアップして、そして長い説明でそれらについて詳しく述べるよりむしろコピーは単に「あなたはどうやって屋外で過ごすのですか?」と述べます。写真と一語のカテゴリ名が重宝します。単語を読まなくても、クリックしてもいいボックスを見分けることができます。Webサイトのホームページの例を見てみましょう。

スキャン可能な製品カテゴリ
簡単にスキャンできるWebサイトのホームページのための強力なビジュアルで単純な言語を補完します。
ウェブサイトのホームページもサブヘッドを利用しています。下のスクリーンショットでは、「なぜベアボーンなのか」という副題があります。「アフリカの農民」、「ネパールに避難所を提供する」、「ユタ州に食料を提供する」などのより小さな小見出しが続きます。このように小見出しがあるということは、短い本文を読んでいなくても、訪問者が会社のプロジェクトについて具体的な考えを持つことを意味します。 

スキャン可能なテキストでのサブヘッドの使用
サブヘッドを使用すると、訪問者が段落をスキップしてもコンテンツの要旨を把握できるようになります。
5.  持っている人あなたの写真
あなたが市場で最もフォトジェニックな製品を手に入れたとしても、あなたの製品の写真、特にあなたのウェブサイトのホームページに人を入れるのが最善です。ビジュアルウェブサイトオプティマイザーのテストでは  、イラストやアイコンの代わりに人間の写真を使用すると、コンバージョン率が向上することがわかりました。 

もっと重要なのは、あなたの顧客やあなたのスタッフの本物の写真を使うことです。The Nielsen Norman Groupの調査によると、Webサイトの訪問者は人々の写真を無視する傾向があります。

この良い例は、オンラインシードストアのRenee's Gardenです。彼らのウェブサイトのホームページには、農場の人々の写真、種子を寄付した人々の写真、そして飼い主の写真があります。目をつかんでいるこれらの写真とは別に、あなたはビジネスの後ろの人々を見ることができるので彼らはまた信頼を築きます。この即時の信頼醸成は、より確立されたブランドほど広くは評判がない中小企業に不可欠です。

写真に写っている実在の人物の例
実際の顧客とスタッフの写真を使用すると、信頼を築き、コンバージョン率を高めることができます。


6.  リスクを減らす
オンラインスモールビジネスは、より大きなブランドほど有名ではないため、消費者は、AmazonやWalmartのオンラインストアから購入するのに比べて、それらから購入するリスクがあると感じるかもしれません。このため、あなたはあなたの顧客に対する潜在的なリスクを排除する必要があります。 

ブルックリンのデザインショップであるW&Pデザインは、「Free Returns。No Hassle」を提供していることを明らかにしています。顧客が商品を好まないことが原因で買うのを躊躇している場合、彼らは会社からの面倒なしにそして追加料金を支払うことなくそれを返すことができることを前もって知っています。これがWebサイトのホームページの例です。

リスクを軽減するためのWebサイトのホームページでの返品ポリシー
Webサイトのホームページに返品条件を表示すると、顧客のリスクを軽減できます。
顧客のリスクを減らすことと密接に関係しているのは、あなたが約束を守っていることを証明しているからです。レビュー、ケーススタディ、お客様の声などの社会的証拠が出てくる場所です。顧客にあなたのビジネスを信頼させたい場合は、これらをあなたのウェブサイトのホームページに表示してください。

スマート空気清浄機を販売しているWyndは、ホームページの折り目の上に「Reviews」タブを表示することでこれを実現しています。タブをクリックすると、商品レビューが表示されます。これらのレビューは、Webサイトのホームページの別のセクションにも表示されます。

Webサイトのホームページでのカスタマーレビュー
Webサイトのホームページにレビューを追加すると、潜在的な顧客に対するリスクを最小限に抑えることができます。
Webサイトでフィードバックを収集して使用する方法に関する詳細なアドバイスについては、以下のガイドを確認してください。


7.ナビゲーションメニューを表示する
ドロップダウンメニューまたはハンバーガーアイコンを使用してWebサイトのホームページナビゲーションを非表示にすることはきちんとして現代的に思えますが、これにより、ユーザーが他のサイトに移動する可能性は低くなります。Nielsen Norman Groupの調査によると、ナビゲーションバーが非表示になると、サイトのページの発見可能性が半分になることがわかりました。訪問者があなたのサイトの他の重要なページを見つけるのにはもっと時間がかかります。 

ナビゲーションチャートまでの時間
ナビゲーションが隠されたWebサイトを閲覧するには、訪問者が長くかかります。
あなたのサイトには多すぎるページがあり、あなたが過密にならないであなたがそれらをあなたのホームページメニューに載せることができないならば、あなたは「コンボナビゲーション」を選ぶことができます。このフォーマットでは、あなたのサイトの重要なページへの静的なメニューリンクがありますが、残りはドロップダウンメニューから現れます。これは、オンラインシード商人であるJohnny's Selected Seedsが使用した方法です。彼らは彼らのオンラインショップでたくさんの種を持っているので、メインナビゲーションは主要なカテゴリーだけをリストします。他のサブカテゴリはドロップダウンメニューに表示されます。

コンボナビゲーションメニューの例
あなたのオンラインストアであまりにも多くのアイテムを持っているならば、あなたのメニューの主要なカテゴリーだけをリストしてください。重要なことは、目に見えるメニューがあるということです。
8.ライブチャットを試す
あなたが試したいと思うかもしれない1つの事はあなたのウェブサイトのライブチャットの使用です。ライブチャットは、Webサイトの訪問者があなたやあなたのスタッフとリアルタイムでチャットできるようにする機能です。あなたは彼らの予備的な質問に答える、あなたのウェブサイトをナビゲートするのを手伝う、または直接販売をするためにライブチャットを使用することができます。顧客にとっては、サイトを閲覧しているときにチャットをすることができるため、ビジネスに電話をかけたり電子メールを送信したりするよりも簡単です。 

オンラインサインサプライショップであるJSI Signsは、ライブチャットを使用して、店舗で受ける電話の量を  減らします。彼女は他の仕事をしているので潜在的な顧客からの質問に答えることができるのでこれはまた所有者のマルチタスクを助ける。このWebサイトのホームページの例でチャットを見てみましょう。

中小企業のWebサイトでのライブチャットの例
Webサイトのホームページでライブチャットを行うと、Webサイトの訪問者に商品を説明してコンバージョン数を増やすことができます。
しかしあなたのウェブサイトのホームページにライブチャットを追加することには他の重要な利点があります。Apex Chatの調査によると、ライブチャットではコンバージョン数が最大40%増加する可能性があります。それはまた最高の顧客満足度レベルを提供し、消費者の73%が彼らがライブチャットから得るサービスに満足しています。電子メールは61パーセントの満足率で2番目に来る。

ライブチャットの満足度
顧客は、電子メール、電話、ソーシャルメディア以上のライブチャットサポートに満足しています。
ライブチャットを始めたい場合は、以下のライブチャットサービスを利用できます。

9.ビデオを埋め込む
ホームページにビデオを追加すると、コンバージョン数を増やすことができます。Treepodiaの調査によると、これはいくつかの製品カテゴリに当てはまる。このため、あなたのウェブサイトのホームページにビデオクリップさえ追加するなら、それは役に立つかもしれません。ビデオが長すぎるとエンゲージメントが低下する傾向があるため、短くしてください。Wistiaの統計によると、ビデオは2分以内に短くすることをお勧めします。

動画変換率の向上を検討
上記の商品タイプ全体で、ビデオの追加によりeコマースのコンバージョン率は上昇しました。
ビデオの内容に関しては、それは説明者、顧客の声、製品のデモ、あるいはあなたの店の簡単なツアーかもしれません。あなたのニーズや予算に合ったものは何でも、実写またはアニメ化することができます。以下の例では、マッシュルームコーヒー会社のFour Sigmaticがホームページにビデオを掲載しています。ここでは、創設者が製品の使い方を説明しています。ビデオは、ほとんどの人が慣れていない可能性があるきのこのコーヒーなどの珍しい商品には特に重要です。 

Webサイトのホームページの埋め込みビデオの例
商品デモビデオを追加すると、珍しい商品を販売するときに役立ちます。


10.簡素化
上記のリストがあなたのウェブサイトのホームページを改善することがより多くの要素を追加することを意味すると考えるなら、それは必ずしもそうではありません。あなたが追加するそれぞれの新しいアイテムはあなたのメインメッセージから気をそらすことができて、行動を起こすことができます。また、それはあなたの訪問者に悪い印象を残すことができます。

グーグルの調査によると、視覚的な複雑さ - 多くの要素の存在 - は、あなたのサイトが訪問者にとってどれほど魅力的であるかに影響を与える可能性があります。たとえ人々がこれらのサイトに17ミリ秒間しかさらされなかったとしても、視覚的な複雑さが少ないサイトが最も魅力的であることがわかった。言い換えれば、あなたのウェブサイトのホームページの最初の印象は重要であり、そしてこの印象はできるだけ単純であるべきです。上記の推奨事項に従っているときは、この点に注意してください。それらを補うために新しいものを追加するのではなく、不要または無効な要素を置き換えます。

ビジネスをもたらすウェブサイトのホームページ
あなたはたった今ウェブサイトのホームページデザインのアイデアについて学びました。Webサイトのホームページの例をいくつか調べました。Webサイトのホームページをより効果的にする方法について、いくつかのアイデアがあります。

覚えておいて、あなたのウェブサイトのホームページは決してあなたのマーケティング戦略の装飾的な部分であるべきではありません。代わりに、それは販売をもたらし、潜在的な顧客にあなたのブランディングメッセージを繰り返すことにおいて積極的な役割を果たすべきです。 

あなたのウェブサイトのホームページがその約束を果たしていないようであれば、上記の推奨される変更のいくつかに取り組みなさい。実装が最も簡単なものから始めることができます。これらの簡単な変更を加えることによって、あなたのウェブサイトのホームページはあなたの最も重要な顧客獲得チャネルの1つになるかもしれません。