シングルページとマルチページの最適なウェブデザイン

シングルページかマルチページかは、デザイナーが新しいWebサイトのプロジェクトで最初に決めることのひとつですが、例えば、ブログが必要な場合や、複数の商品を扱うECストアが必要な場合など、答えが明らかな場合もあります。  

しかし、多くのプロジェクトでは、その決断はそれほど単純ではなく、デザイナーはビジネスゴールとユーザーのニーズを見極め、シングルページとマルチページのどちらがより効果的かを判断しなければなりません。

世界最先端のコードベースのデザインツールであるUXPinを使って、Webデザインのアイデアをデザイン、プロトタイプ、およびテストしませんか？無料トライアルにサインアップし、UXPin がデザインワークフローをどのように変革し、顧客により良いUX（ユーザーエクスペリエンス）を提供できるかをぜひご確認ください。

シングルページウェブサイト

 

シングルページウェブサイトとは

シングルページのウェブサイトは、ワンページウェブサイトとも呼ばれ、フォームを含むすべてのコンテンツが1つのページ（トップページ）にあります。ナビゲーションリンクがある場合は、新しいページを読み込むのではなく、別のホームページのセクションにジャンプします。

オーストラリアのフリーランスUXデザイナーであるペタル・チェクリッチ氏によるUXポートフォリオサイトでは、ナビゲーションとフッターのコンタクトフォームを備えた典型的なシングルページのデザインが見られます。彼は、自身のポートフォリオを表示するのに大きな画像カルーセルを使用しており、それにはWebサイトやアプリのプロジェクトも含まれています。

シングルページウェブサイトの一般的な使用例

デザイナーは、ランディングページにシングルページデザインを用いるのが一般的であり、ユーザーを1つのページに留めることで、気が散ることなく、見込み客とセールスを増やすことができます。

シングルページのデザインは、ポートフォリオ、中小企業、単一商品のECサイト、実店舗など、最小限のコンテンツしかないウェブサイトにも最適な選択肢です。

シングルページウェブサイトの利点

• シングルページのデザインは、ユーザーがスクロールするだけでウェブサイト全体を消化でき、主要なナビゲーションが隠されていることが多いモバイルユーザーにとって有益な機能である。
• シングルページウェブサイトは、デザイナーが複数ページのサイトの情報アーキテクチャやその他の特性を気にする必要がないため、デザインしやすいことが多い。
• フロントエンドフレームワークなどの開発ツールを使わずに、シングルページのWebサイトをプログラミングする方が、エンジニアにとって楽であり、基本的なHTML、CSS、Javascriptを使用することができるため、Webサイトのサイズ縮小と、パフォーマンスの向上が実現する。
• シングルページのウェブサイトは、ビジネスへの問い合わせ、ニュースレターの登録、製品/サービスの購入など、ユーザーに特定のアクションを起こさせるのに最適。
• デザイナーやマーケティング担当者は、単一の入り口である「ホームページ」を通じて、ユーザー体験をコントロールし、訪問者に一貫した説明を提示できる。

シングルページウェブサイトの欠点

• シングルページのウェブサイトは簡単ではない：ユーザーとビジネスゴールへの貢献のために、コンテンツに優先順位をつけて構成するのはデザイナーにとって容易なことではない。
• パフォーマンスが上がる反面、デザイナーが画像や動画などのメディアを多数使用すると、ページの読み込み時間が長くなる可能性がある（エンジニアは、遅延ロードやその他のパフォーマンス向上技術によって、この問題解決が可能）。
• シングルページウェブサイトでは、SEO（検索エンジン最適化）とキーワード戦略が制限され、よく最適化されたシングルページのサイトは、複数ページの競合サイトと同等かそれ以上の順位を獲得できるが、主要キーワードと関連用語に制限される。
• シングルページのデザインにより、デザイン変更なしのウェブサイトの拡張や、ブランドを拡大する能力が制限される。

マルチページウェブサイト

マルチページウェブサイトとは

マルチページウェブサイトには、ユーザーがサイト内を移動できるようにナビゲーション付きのページが複数あり、コンテンツ、製品、トピックなどを分けることができるため、ほとんどの企業でマルチページデザインが使われています。

ページが複数あるということは、ユーザーの検索エンジンやSNS、他のウェブサイトで、自身のウェブサイト知る「入り口」が多数あるということです。例えば、BBCのようなニュース出版社では、ユーザーがサイトに入ることができるページが何万、何十万とあります。

マルチページウェブサイトの使用例

特に、複数の商品を扱うECショップやブログ、ニュースサイトなどでは、カテゴリーやコンテンツを分けるのに別のページを使うなど、大抵のWebサイトで複数ページのレイアウトが採用されています。

ニューヨークタイムズは、マルチページレイアウトのいい例です。ヘッダーのナビゲーションでは、ユーザーが話題のニューストピックにサッとアクセスできるようになっており、トップページではその日の世界最大の話題に特化しています。そしてフッターには、ニュースのカテゴリー、ポリシー、連絡先、その他の役立つ情報への追加リンクがあります。

マルチページウェブサイトの利点

• マルチページのサイトでは、ユーザーは必要なものを見つけるために1つのページをスクロールするのではなく、自分が最も価値を置くコンテンツに行ける。
• マルチページウェブサイトには、特にウェブサイトがブログを備えている場合は、マーケティング担当者がさまざまなキーワードやトピックをターゲットにするための多くの SEO の利点と機会がある。
• デザイナーは、マルチページウェブサイトの拡張に新しいページの追加ができる。

マルチページウェブサイトの欠点

• 大規模なウェブサイトでは、情報アーキテクチャやコンテンツが見つかりやすくなるための慎重な配慮が必要であり、このプロセスは、コストと市場投入までの時間の増加につながる。
• マルチページウェブサイトはファイルのサイズが大きく、サーバーへのリクエスト処理も多くなるため、ホスティングのコストが上がる。
• 特にレスポンシブデザインの場合、マルチページウェブサイトでは、デザインやコンテンツの更新に時間がかかる。
• 複数のページからウェブサイトに入ることができるため、デザイナーやマーケティング担当者は、ユーザーを製品やサービスに導くために、サイト全体でCTA（Call to Action）の作成が必要。例えば、UXPinでは、UXPinを試すよう訪問者に促すCTAがすべてのブログ記事に付いている。

ここで重要なのは、デザイナーやエンジニアには、こうしたマルチページウェブサイトの課題の克服に使えるツールやテクニックがあるということですが、ユーザビリティの問題を引き起こさないためには、このような問題に対処しなければいけません。

シングルページとマルチページウェブサイトを使い分けるタイミング

プロジェクトにシングルページとマルチページのどちらのウェブサイトが必要かを決める要因はいくつかありますが、多くのプロジェクトに影響を与える主要因を以下に3つ特定しました：  

• ビジネス目標：何を達成したいのか
• コンテンツ：どの程度のコンテンツを表示したいのか
• SEO（検索エンジン最適化）：コンテンツデジタルマーケティングの目標

ビジネス目標

人や企業というのは、大抵意図や目的を持ってウェブサイトを作成します。シングルページのウェブデザインは、見込み客の獲得、アプリのダウンロード促進、単一の製品の販売など、ビジネス上の目標が絞られている場合に最適です。  

複数のCTAがある場合や、複数の製品/サービスを宣伝する場合は、別々のページ作成が最適です。このように分けることで、ターゲットとするオーディエンスに対して別々のキャンペーンを行い、1つのCTAに誘導することができますが、これが1つのページで複数のアクションを行うとなると、混乱を招き、コンバージョンに影響を与える可能性があります。  

コンテンツ

  表示するコンテンツの量や種類によって、判断に大きな影響を与えることがあります。例えば、複数の動画を表示すると、ページのファイルサイズが大きくなり、パフォーマンスに悪影響を及ぼします。ちなみにYouTubeの動画ですらページを読み込む際に追加のリクエストが発生するんです。  

画像もまた、特にモバイル端末やインターネット接続が不十分なユーザーにとって、ページのパフォーマンスを低下させることから、デザイナーは、コンテンツがUXとアクセシビリティにどのような影響を与えるかの考慮が必要になります。  

SEO（検索エンジン最適化）

SEO対策も、シングルページとマルチページのウェブデザインを決定する重要な要素のひとつです。1つのキーワードをターゲットにするのであれば、シングルページのデザインで十分ですが、多様なSEO戦略をとるのであれば、マルチページのデザインが適しています。  

シングルページとマルチページのデザインを決める7つのヒント

 

1. コンテンツ優先のアプローチを取る：ユーザーが注目するコンテンツは何かを考え、それに合わせてインターフェースをデザインする。必要な数のページ（とコンテンツ）だけを入れる。
2. 自身のサイトがシングルページでの体験に適していることを確認する：1ページにすべてを収めるのが難しい場合は、代わりにマルチページのデザインを検討する。
3. マーケティング戦略上、SEOを優先するのであれば、マルチページデザインを取る方がいい場合が多い。
4. シングルページのサイトやランディングページは、有料広告キャンペーンでよりいいパフォーマンスが発揮される：気が散るようなものを排除し、ナビゲーションを行うことで、ユーザーのページ離脱を防ぎ、コンバージョンの向上につながる。
5. ナビゲートや消化しやすいウェブサイトにする：各ウェブページで明確な視覚的階層を作成し、マルチページウェブサイトのユーザーニーズを解決する情報アーキテクチャを計画する。
6. 確実にすべてのユーザーにとって消化しやすく、操作しやすいウェブサイトを実現するために、ウェブアクセシビリティガイドラインに従う。
7. 混乱をなくし、ユーザーに明確な目標を提供するために、1ページにつき1つのCTAを使う。複数のCTAが必要な場合は、シングルページよりもマルチページウェブサイトを検討する。

UXPinによるWebデザイン

UXPinのコードベースのデザインツールで、デザイナーは、ユーザーテストやステークホルダーからのフィードバック、デザインハンドオフを改善すべく、完全に機能するレスポンシブWebサイトのプロトタイプを作成できます。  

デザイナーは、UXPinのモバイル、タブレット、デスクトップの各フレームを使った、ビューポートごとの複数のレイアウト作成から始めることができます。さらにUXPinには、アプリデザイン用にウェアラブルフレームとTVフレームもあります。

コンテンツとデータがあれば、デザイナーは、JSON、CSV、または Google Sheets を使用して実際のデータを UI 要素に入力することができます。レイヤー名でコンテンツを一致させると、数回のクリックでフィールドにダミーデータを入力でき、また、UXPinのデザインキャンバスを離れることなく、メディア要素にUnsplashの画像を埋め込むことができます。

その結果、最小限の労力で実データを取り込んだ美しいユーザーインターフェースが実現しました！  

画像ベースのデザインツールとは違い、UXPinではデザイナーは1つのフレームを使ってインタラクティブなプロトタイプを作成でき、また、条件付きインタラクション、フォームバリデーション、ユーザー入力バリデーション、コンポーネントステートなどの優れた機能を享受することができます。

UXPinの高度なプロトタイピング機能を使用して作成したウェブサイトのサンプルプロジェクトをご覧になりませんか？このプロジェクトをダウンロードし、UXPinで検査することで、このインタラクティブなプロトタイプをどのように構築したかをぜひご確認ください。

世界最先端のコードベースのデザインツールで、ウェブデザインプロジェクトを強化しませんか？UXPinがどのようにUXワークフローを革新し、顧客により良いユーザー体験を提供するか、無料トライアルにサインアップしてぜひご覧ください。