Webデザイン：ステップバイステップガイド

Adobe Experience Manager Sitesを使用すれば、デスクトップPC向けでもモバイル向けでも、独自のwebページを容易に作成できます。Webサイトの作成を始める前に、まずはデザインを決定する必要があります。この記事では、webサイトの目的の決定から、ターゲットオーディエンスの特定、デザイン、プラットフォームの選定、ワイヤーフレームの作成に至るまで、webデザインの包括的な手順を解説します。

この記事の内容：

• Webサイトの目的や目標の決定
• Webサイトのターゲットオーディエンスとニーズの定義
• Webサイトプラットフォームの選定
• サイトマップを使用して、webサイトの構造とレイアウトを計画
• ページタイプの定義とワイヤーフレームの作成
• Webサイトのコンテンツ（コピー、画像、グラフィックなど）の制作および収集
• UXを考慮して、webサイトの構造とビジュアル要素を設計
• Webサイトとコンテンツのアクセシビリティを確認
• Webサイトのテストと公開
• 分析ツールを使用してwebサイトのパフォーマンスを追跡および改善

Webサイトのデザインを決める前に、webサイトを設計する理由を明確にすることが重要です。Webサイトの訪問者が誰なのかを考えてみましょう。この情報は、その後の意思決定に役立ちます。

まず、webサイトで実現したいことを考えましょう。新規顧客の獲得を目指す小売業者もいれば、非営利団体の情報発信を重視するケースもあります。Webサイトを立ち上げる目的が複数あるのは自然なことです。その場合は、各目的に応じたページを個別に設けることを検討しましょう。

主なwebサイトの種類には、次のようなものがあります。

• eコマース
• イベント
• 非営利団体
• 旅行／観光
• ビジネス
• ニュース

希望するwebサイトの種類とその目的を決定したら、webページのデザインを検討しましょう。

Webサイトの目的だけでなく、ターゲットオーディエンスもwebページのデザインに影響を与えます。

ターゲットオーディエンス を理解することで、様々なメリットを得ることができます。ターゲットオーディエンスに合わせてメッセージやwebサイトをパーソナライズして、適切なチャネルに誘導することができます。

オーディエンスを理解することで、オーディエンスが抱えている課題や主な懸念事項を把握しやすくなります。Webサイトを通じて、これらの課題や懸念事項に対処できます。顧客のニーズに合わせてコンテンツをパーソナライズすることで、強固な関係を構築し、顧客維持率、支持率、ロイヤルティを向上させることができます。

Webサイトビルダーや コンテンツ管理システム（CMS) は、webサイトのデザイン、公開、カスタマイズを支援するツールです。これらのツールを使用すると、事前構築済みのソリューションやテンプレートによってプロセスを効率化し、開発スピードを向上できます。

適切なプラットフォームやCMSを選択することは、webサイトデザインの重要なステップです。使いやすさ、カスタマイズオプション、拡張性、利用可能なテンプレートなどの要素にもとづいて、各プラットフォームを比較する必要があります。

Webサイトビルダープラットフォームを選定する際に考慮すべき機能

Webサイトを構築するためのプラットフォームを選定する際は、次の機能を備えているかどうか確認しましょう。

• 迅速なサイト作成
• モバイルとデスクトップPCの両方で使いやすく、ページの読み込みが速い
• 共通の共有環境を構築できるCMS
• プラットフォーム上のコンテンツインサイト
• プロジェクトワークフロー
• 予算に合わせたwebサイトビルダーまたはCMS
• 汎用性

検討すべきwebサイトビルダープラットフォーム

ここでは、主要なプラットフォームの長所と短所を紹介します。

• WordPress： 優れた柔軟性を備えた、最も人気のあるwebデザインプラットフォームの一つです。基本的な要素は容易に使用できますが、複雑な機能を活用するには、開発者が必要になる場合があります。
• Wix： テンプレートのライブラリ、組み込みのSEO機能、サポートオプションを備えており、直観的で使いやすいことで高評価を得ています。
• Squarespace： クリエイティブ分野で高い人気を誇り、高品質で受賞歴のあるテンプレートで知られています。
• Adobe Creative Cloud：Adobe Creative Cloud では、無料のwebサイトビルダーである Adobe Express を使用して、単一のwebページをすばやく容易に作成できます。Deloitteが Adobe Creative Cloudを使用してコンテンツを制作し、大きな成果を上げた事例 をご覧ください。
• Shopify： Shopifyは、webストアの運営に特に役立ちます。様々なチャネルを活用して在庫を管理できる、幅広いセールス機能を備えたeコマースサイトを構築できます。
• Adobe Commerce： オンラインショッピング体験に重点を置いた Adobe Commerce は、AIの活用や他のアドビ製品との連携を通じて、詳細にパーソナライズされた顧客体験の構築を支援します。ドラッグ＆ドロップ操作のインターフェイスは使いやすく、複数のチャネル、ブランド、地域を管理できます。コカ・コーラがAdobe Commerceを活用して、売上とコンバージョンを向上させた事例 をご覧ください。

強固な構造は、あらゆるwebサイトに不可欠です。オーディエンスと検索エンジンは、webサイトを容易にナビゲートできるようになります。Webサイトのナビゲーション、つまり適切なページを見つけられることは、ユーザーエクスペリエンスの重要な要素であり、訪問者がストレスを感じることなく、webサイト内を探索できるようにします。

シングルページレイアウト

シングルページレイアウトとは、その名の通り、webサイトに複数のページを設けるのではなく、スクロール可能な1ページにすべての情報を配置するレイアウトのことです。このフォーマットは、webサイトで共有する情報が少ない場合に最適です。

マルチページレイアウト

マルチページは、最も一般的なwebサイトの種類です。通常、ホームページがあり、サイト全体に他のページへのリンクが配置されています。マルチページ構造は、多くの情報を掲載し、複数の目的を持つwebサイトに適しています。

グリッドベースデザイン

整理されたグリッドは、オーディエンスがページ上のコンテンツを容易に閲覧したり、webサイトをナビゲートしたりするのに役立ちます。また、様々な画面サイズを横断して一貫性を維持することができます。

F型／Z型パターン

視線追跡ソフトウェア によると、人々は一般的に、webサイトをF字型またはZ字型のパターンで流し読みすることが明らかになっています。コンテンツデザイナーは多くの場合、オーディエンスによる流し読みを防ぎ、テキスト全体を読むように促します。

また、自社の目標の達成に役立つレイアウトを選択することが重要です。オーディエンスが、ページ上の重要な情報をすばやく見つけられるようにする必要があります。ここでは、webサイトのレイアウト方法を詳しく説明します。

• Webストア： Webストアのホームページでは、Amazon.comのように、訪問者が関心を持つ可能性のある製品を掲載できます。また、Nike.comのように、製品とコンテンツを組み合わせたページを制作することもできます。
• ポートフォリオサイト： 写真、グラフィックデザイン、マーケティングなどの分野の専門家は、作品を公開するポートフォリオサイトを立ち上げることがよくあります。例えば、写真家のポートフォリオサイトでは、作品をギャラリーのように展示できます。一方、マーケティングエージェンシーは、テキストと画像を組み合わせたケーススタディを共有できます。
• ビジネスサイト： ビジネスサイトは、そのビジネスが提供する価値を明確に伝えるように構成する必要があります。また、webサイトを訪問したオーディエンスによる製品の購入や、リード獲得フォームへの入力を促す方法を検討する必要があります。
• イベントページ： イベントページでは、多くの人々が求めている重要な情報を明確に伝える必要があります。
• ブログ： ブログは、オーディエンスが最新のコンテンツや最も人気のあるコンテンツをすばやく見つけられるように構成する必要があります。また、新しいオーディエンスにwebサイトの概要を伝える必要があります。

Webサイト設計の次のステップは、構築する必要があるページのマップを作成することです。リスト形式や、ページのつながりを線で示すことで、視覚的に表すこともできます。

Webサイトのマップを作成することで、重要なページや情報をすべて網羅できるようになります。この段階で目標を見直し、マップ上の特定のページに適用することをお勧めします。

まずは、他のページへの明確なナビゲーションリンクを備えたホームページから着手しましょう。また、オーディエンスが自社と連絡が取れるようにするために、自社の連絡先情報を記載した問い合わせページを作成することも重要です。FAQページや工夫された404エラーページの作成も検討しましょう。目的に応じて、作成するページを決定します。

ほぼすべてのwebサイトに必要なページは、次のとおりです。

1. ホームページ： Webサイト上で最も重要なページであると言えます。オーディエンスがwebサイトにアクセスしたくなるような、魅力的なCTAをホームページに配置しましょう。
2. 企業情報： 自社の使命、歴史、従業員、独自の価値提案を共有する必要があります。
3. 問い合わせページ： 訪問者が本社やカスタマーサービス部門に連絡できるように、必要な情報を提供する必要があります。
4. 製品ページ： 提供されている各製品またはサービスに関する詳細情報を提供します。
5. ブログ： 通常、ブログページには、webサイトで公開されている最新のブログ記事のリストやグリッドが表示されます。
6. FAQ： FAQページを公開することで、チームが同じ質問に何度も回答する必要がなくなり、よく寄せられる質問に効率よく回答できます。

Webサイトの基盤と構造が完成したら、コンテンツを追加しましょう。

通常、最初に作成するページは、上記で説明したページです。必要なコンテンツは、webサイトの目的によって異なります。コンテンツには、画像、テキスト、ロゴ、動画などが含まれます。

ページごとに明確な目的を定義

サイトマップを使用して、潜在顧客がwebサイトを訪問する際に、どのような情報を求めているのかを考えてみましょう。各ページには 明確な目標 が必要です。

複雑な専門用語を避け、わかりやすい文章を作成

魅力的なコンテンツは、優れたwebサイトに欠かせない要素です。メッセージを明確に伝えることができる、独創的で魅力的なコンテンツを制作しましょう。コンテンツは関連性が高く、簡潔で、内容を容易にすばやく把握できる必要があります。

見出しや箇条書きを使用してページのコンテンツを分割

見出しや箇条書きなどの書式を使用して、膨大なテキストを分割することで、はるかに容易かつすばやく読むことができるようになります。

ブランドガイドラインに沿ってコピーや画像を編集

この段階では、ブランドガイドラインを活用して、ブランドボイスや画像の一貫性を確保しましょう。

オリジナルの写真や高品質なストック画像を使用

独自の画像がない場合は特に、新しいwebサイトでストック写真を使用したくなるかもしれません。しかし、オーディエンスのエンゲージメントが低下する可能性があります。

様々なwebサイトにおけるコンテンツの種類の例。

• Webストア： eコマースサイトでは、オーディエンスが製品を実際に見て触ることができないため、詳細な製品情報や高品質の画像を提供することが重要です。
• ポートフォリオサイト： ビジュアルメディアとテキストコンテンツが混在することが多いです。
• ビジネスサイト： 顧客の声、製品情報、ブログ投稿など、様々な種類のコンテンツを使用します。
• イベントページ： 過去のイベントの写真ギャラリー、プロモーション用グラフィック、テキストコンテンツなどを共有できます。
• ブログ： 従来のブログはテキストベースのコンテンツが主流でしたが、今日のブログでは、写真、ビデオコンテンツ、アニメーション、インフォグラフィックなどを共有できます。

Webサイトの内容は、企業や個人のニーズに応じて異なります。しかし、優れたユーザーエクスペリエンスを実現するには、次の要素を考慮する必要があります。

• アーキテクチャ： Webサイトをスムーズにナビゲートするには、各ページを直観的な方法で整理し、関連付ける必要があります。これにより、訪問者は、ナビゲーションバーやサイトページのリンクを介して、webサイト上で最も重要なページをすばやく見つけることができます。
• ナビゲーションメニュー： ナビゲーションメニューでは、webサイト上で最も重要なページへのリンクを論理的に整理、配置する必要があります。メニューが乱雑になるのを避けるために、カテゴリーやグループの使用を検討しましょう。また、メニューがあらゆるデバイスで正しく動作するように、レスポンシブデザインを導入する必要があります。
• 色：カラーホイール を使用すれば、調和のとれたカラーパレットを作成できます。原則として、配色は3色までに制限する必要があります。1色目は60％、2色目は30％、3色目は10％の割合で使用することをお勧めします。
• フォント： 色と同様に、ブランドガイドラインに沿ったフォントを選択する必要があります。また、小さな画面でも判読可能なフォントを採用することが重要です。
• ヘッダーとフッター： ヘッダーには、ロゴ、ナビゲーション、webサイト上の重要なページへのリンクを配置することで、オーディエンスがwebサイトを明確に認識できるようにしましょう。フッターには、連絡先情報、ソーシャルメディアへのリンク、CTAを配置する必要があります。
• モーション： ページ上のモーション要素は、オーディエンスを魅了し、webサイトに長く滞在してもらうのに役立ちます。ただし、過剰な使用を避ける必要があります。Webサイトの動きが多すぎると、読み込み時間が遅くなったり、オーディエンスが重要なコンテンツを見つけられなくなったりする可能性があります。

Webサイトのビジュアルデザインの選択は、訪問者がブランドに対して抱く印象を決定づけるうえで、重要な役割を果たします。シンプルで洗練されたデザインは、誠実で信頼できるブランドイメージにつながります。一方、乱雑で一貫性のないレイアウトでは、オーディエンスは離れてしまいます。

Webサイトのアクセシビリティは重要です。訪問者のニーズを問わず、webサイト内をスムーズにナビゲートし、タスクを完了できる必要があります。Webサイトのアクセシビリティを向上させる方法は、いくつかあります。ここでは、それらの方法を紹介します。

Webサイトの使用方法

多くのオーディエンスは、マウスを使用してwebサイトをスクロールし、デフォルト設定で閲覧します。しかし、すべてのオーディエンスがそうするわけではありません。次の点を考慮する必要があります。

• 一部の訪問者は、マウスではなくキーボードを使用してページをナビゲートする
• 訪問者は、コンテンツを読みやすくするためにブラウザーの設定を変更することがある
• 視覚障がいのある訪問者は、スクリーンリーダーによるコンテンツの読み上げ機能を使用することがある
• 訪問者は、画面の一部を拡大することがある
• 訪問者は、webサイトをナビゲートするために音声コマンドを使用することがある

コンテンツ構造

スクリーンリーダーを使用する訪問者にとって、見出し構造は、ページ上のどこにいるのか、また段落間の関連性を把握するのに役立ちます。H1、H2、H3などのHTML見出しを使用すると便利です。

キーボードのみを使用するオーディエンス

キーボードのみを使用するオーディエンスにとって、webサイトをスムーズにナビゲートできることは非常に重要です。一般的なオーディエンスの平均的な操作を考慮して、キーボードでもナビゲートしやすいwebデザインを検討しましょう。

画像とメディア

アクセシビリティにおいて考慮すべき重要な点の一つは、画像やメディアの代替テキストを使用することです。代替テキストは通常、webサイト上には表示されませんが、スクリーンリーダーで読み上げることができます。代替テキストは、画像やメディアの内容を説明するために使用されます。

色とコントラスト

Webサイトを設計する際は、フォントや背景の色を慎重に検討しましょう。色の組み合わせによっては、他の色よりも効果的に調和するものもあります。視覚障がいや色覚障がいのある訪問者にとって、配色は特に重要です。テキストと背景はコントラストを持たせ、ページ上でテキストが明確に表示されるようにしましょう。しかし、配色だけでコンテンツをわかりやすく説明しようとするのは賢明ではありません。

モーションコンテンツ

Webサイト上のモーションコンテンツ（GIF、動画、アニメーションなど）には、再生、一時停止、停止などの操作がしやすい設計にしましょう。同様に、点滅するコンテンツには「無効化」機能が必要です。

Webサイトを公開前にテストすることで、優れた機能性、スピード、セキュリティ、使いやすさを確保できます。ページやリンクの破損など、ユーザーエクスペリエンスに影響を与える問題を防ぐために、webサイトを定期的かつ入念にテストすることが重要です。

機能テスト

Webサイトが適切に動作しない場合、訪問者の不満につながります。公開する前に、リンク、ナビゲーションメニュー、ボタン、ドロップダウン、フォームなど、すべてが正常に機能することを確認しましょう。

モバイル対応テスト

多くの人々は携帯電話からインターネットにアクセスするため、webサイトは従来のwebブラウザーだけでなく、様々なモバイルプラットフォームにも対応していることが重要です。

Webサイトの読み込み速度とパフォーマンスのテスト

インターネット利用者が待てる時間は短いため、webサイトを数秒で読み込む必要があります。Google PageSpeed Insights などのツールを使用すれば、webサイトの読み込み速度を確認できます。

A/Bテスト

A/Bテスト は、複数の選択肢をテストし、オーディエンスに最適なものを判断するための便利な方法です。画像からレイアウトに至るまで、あらゆるものをテストできます。

ユーザビリティテスト

ユーザビリティテスト（ユーザーテスト）では、webサイトの利用状況をモニタリングし、問題を特定します。多くの場合、webサイトの正式リリース前に実施され、webサイトが意図したとおりに動作しているかどうかを確認するのに最適な方法です。

Webサイトを公開すれば、パフォーマンスに関する情報の収集など、あらゆるメリットを享受できます。この情報は貴重であり、webサイトを継続的に最適化し、維持していくために必要となります。

Web分析を通じてwebサイトのパフォーマンスを追跡

多くのプラットフォームには、webサイトのパフォーマンスを測定するための 分析機能が組み込まれています。また、webサイトをGoogle Analyticsに接続して、ページビュー、各ページでのオーディエンスの滞在時間、コンバージョン率、直帰率などの特定の指標を追跡することもできます。

このデータは、訪問者がwebサイト内をどのように移動しているのか、どのページを改善する必要があるのか、オンページSEOを強化すべきページなどを把握するのに役立ちます。分析を入念に行うことで、オーディエンスをより深く理解し、オーディエンスにとって効果的な施策を特定できます。

Webサイトのメンテナンスによってwebサイトを更新およびモニタリング

メンテナンスもまた、webサイトを設計するうえで重要な要素です。リンクやキーワードは時間とともに変化し、デザインのトレンドも変化するため、一度webサイトを作成しても、定期的なメンテナンスなしに放置することはできません。リンクや画像の確認、キーワードの更新、webサイトの読み込み速度の監視、コンテンツの追加や削除を定期的に実施することで、webサイトの鮮度と関連性を保つことができます。

分析とメンテナンスは、トラブルシューティングだけでなく、需要に応じてwebサイトを改善、拡張するための強力なツールです。Webサイトのパフォーマンスを常に把握することで、オーディエンスとの良好な関係を維持し、適切なタイミングでスマートかつ柔軟なビジネス戦略を策定できるようになります。

Webデザインを始める

この記事で解説した知識とガイダンスをもとに、webデザインに取り組み始めましょう。成功を収めているwebサイトからインスピレーションを得て、クリエイティビティを発揮しましょう。

Adobe Experience Managerを活用すれば、独自のwebサイトを作成および管理し、パーソナライズされたweb体験を提供して、オーディエンスのエンゲージメントを維持できます。複数のチャネルに対応した顧客体験の構築、テンプレートのカスタマイズ、コンテンツの更新など、あらゆる作業を1つのプラットフォームから行えます。

Adobe Experience Managerが独自のwebサイトの作成にどのように役立つのか、概要ページ をご覧ください。