webサイト制作の12ステップ

今日の競合市場を勝ち抜くには、情報量が多く、使いやすく、視覚的に魅力的なwebサイトは、ビジネスの種類に関わらず不可欠です。しかし、webサイトの制作を外注すると費用がかかり、コーディング、SEO、設計などの技術的なバックグラウンドがない場合、自身でデザインするのは大変そうに思えます。しかし、webサイトの制作を学ぶことは、思っている以上に容易なことです。

この記事では、さまざまな分野のwebサイトを制作して公開するための包括的な12ステップのガイドを解説します。顧客を惹きつけ、売上を伸ばす魅力的なwebサイトを制作するためには、何を考慮すべきかを学びます。

webサイトの12ステップの制作方法

自社のwebサイトを制作するプロセスは、明確な目標を設定し、適切なツールを選ぶことから始まります。その後、webサイトを制作し、最適化します。公開後は、顧客との関わりを維持しながら、データを活用して継続的に改善していきます。

このプロセスは、次の12ステップにわけることができます。

1. webサイトの範囲と目標の設定
2. プラットフォームの選択
3. ドメインの申請
4. ブランディングの決定
5. サイトマップの作成
6. コンテンツの制作
7. モバイル最適化
8. アクセシビリティの配慮
9. 検索エンジン最適化（SEO）
10. webサイトのテストと公開
11. 分析、拡張、メンテンナンス
12. 訪問者のエンゲージメント

1.webサイトの範囲と目標の設定

webサイトの制作を始める前に、何を達成したいのかを決めることが重要です。目標や成功について改めて考えることで、webサイトに必要なものを正確に把握することができます。範囲や目標が異なれば、サイト制作の選択肢も異なるので、明確な目的意識を持つことが、選択における意思決定の指針になります。

次の3つ点について検討します。

• webサイトの目的は何か？： webサイトの種類によって、ニーズは異なります。たとえば、商品を販売することと、サービスを販売することは違いますし、従業員の獲得のためにクリエイティブな作品を載せることは、そのどちらとも異なります。また、結婚式などのイベントに関する情報を共有したり、オーディエンス向けにアイデアを載せたりすることもできます
• webサイトで何を達成するか？： コマースサイトを構築する場合は、売上を伸ばし、さらに強化する必要があります。オンラインでサービスを販売する場合は、予約を受け付けたり、詳細情報を提供することが目標になるかもしれません。ポートフォリオサイトは、作品を紹介するのに適した選択です
• どのような設計要素が目的と目標を達成するか？ 目標は、設計選択の指針となるはずです。webサイトの目的が商品の販売であれば、ショッピングカートや安全なチェックアウトプロセスが必要です。サービスを提供する場合は、問い合わせフォームやカレンダーを設置し、簡単に予約を入れることができるようにします。ポートフォリオサイトで作品を紹介するのであれば、こうした要素を省き、作品を強調するビジュアルデザインに注力することができます

2.プラットフォームの選択

webサイトを構築する場合、ゼロから制作するか、webサイト構築用のプラットフォームを利用するか、ふたつの主な選択肢があります。

ゼロから制作

webサイトをゼロから制作する利点は、見た目や雰囲気を完全にコントロールできることです。100％ユニークで、クリエイティブなブランディング要素をデザインに取り入れたwebサイトを制作することができます。欠点は、HTMLとCSSのコーディングを学ぶ必要があることと、webサイトデザイナーに高額な料金を支払う必要があることです。

webサイト構築プラットフォームを利用

wbサイト構築プラットフォームを利用すれば、コーディングの知識がなくても、自身のwebサイトを制作することができます。さまざまな目的のために設計されたテンプレートをギャラリーから選ぶことができます。また、ほとんどの構築プラットフォームでは、ドメイン名の登録も可能です。ゼロからサイトを制作するのに比べれば、柔軟性には欠けますが、予算を節約でき、工夫をこらしたテンプレートから恩恵をこうむることができます。

webサイト制作を手助けしてくれるプラットフォームサービスは多数存在します。ここでは、代表的なプラットフォームの長所と短所を紹介します。

• WordPress： WordPressは、webサイトをカスタマイズできる柔軟性があるため、webサイトを制作するための最も人気のあるプラットフォームのひとつです。基本的な要素だけを利用するのであれば簡単に使えますが、利用可能なあらゆるオプションを活用したい場合は、コードの書き方を知っているか、開発者を雇う必要があります

• Wix： Wixは、ドラッグ＆ドロップ操作のインターフェイスによる直感的な使いやすさ知られています。豊富なテンプレートライブラリーに加え、組み込みのSEO機能や有用なサポートオプションも提供されています。しかし、大半の機能は高額のプランでのみ利用可能であり、サイト稼動後にテンプレートを切り替えることはできません

• Squarespace： クリエイティブ分野で人気のSquarespaceは、高品質で受賞歴のあるテンプレートで知られています。エディターは、ドラッグ＆ドロップとポイント＆クリックの中間のような操作方法であり、習得するのに少し時間がかかるかもしれません。Squarespaceの料金プランの数は限られています。

• Adobe Creative Cloud：Adobe Creative Cloudには、単一のwebページをすばやく容易に制作できる無料のwebサイトビルダー、Adobe Expressが提供されています。ドメインの登録やオンラインストアの運営はできませんが、料金を払う必要はなく、数十種類の無料フォント、テンプレートのライブラリ、高品質で検索可能な画像を利用できます

• Shopify： オンラインストアを運営する人にとって、Shopifyは、Facebook、Instagram、Amazon、eBayなどのさまざまなチャネルを利用できる豊富な販売機能を備えたコマースwebサイトの構築を支援します。また、在庫管理も可能です。ただし、Shopifyは,Shopify Paymentsとの取引手数料がかかること、無料テンプレートの数が限られていること、エディターの学習に少し時間がかかることなどに注意が必要です

• Adobe Commerce： オンラインショッピング体験に重点を置いたAdobe Commerceは、AI（人工知能）とほかのアドビ製品との統合により、高度にパーソナライズされた顧客体験を構築することができます。ドラッグ＆ドロップ操作のインターフェイスは使いやすく、複数のチャネル、ブランド、地域の管理をサポートしています。ただし、独自のサーバーを用意し、ドメインを取得する必要があります

  

3.ドメインの申請

ドメイン名は、webアドレスとも呼ばれ、webサイトを一意に識別するためのものです。ドメイン名は、名前と拡張子（.comや.orgなど）で構成されます。ドメイン名が記憶しやすいほど、利用者がwebサイトを探しやすく、覚えやすくなります。

カスタマイズされたドメイン名は、ビジネスに責任感や信頼感をもたらし、検索エンジンからのトラフィックを増加させます。また、潜在顧客に強い印象を与えることができるため、優れたドメイン名を選択することは、オンラインブランディング戦略において不可欠な要素です。

ドメイン名を選ぶときは、短くシンプルにすることを心がけましょう。そうすることで、覚えやすくなり、間違えにくくなります。可能であればビジネスに関する名称を入れ、記号や数字など紛らわしい文字は避けましょう。また、正しい拡張子を選ぶことも重要です。組織の種類や所在地を基準にするとよいでしょう。

4.ブランディングの決定

顧客にとって、新しいwebサイトと、オフラインを含むほかのチャネルで、シームレスな体験ができることは重要です。既にブランディング戦略やガイドラインがある場合は、webサイトをデザインする際に参考にしてください。ブランディングをゼロから考える必要がある場合は、次のような要素を考慮してください。

カラースキーム

色は、ブランドを認識するための強力なツールです。商品の色は、顧客の購買意思決定の80％に影響し、色彩心理学の研究によると、色の種類によって特定の感情が呼び起こされることがわかっています。たとえば、赤はエネルギーや興奮を、青は信頼や安心感を連想させます。

オーディエンスに何を伝えたいかを考えて、ブランドの基本色と補助色、補色を選びます。webページのデザインで最も目立つ要素には基本色を使い、ハイライトや重要度の低い情報には補助色を使うようにしましょう。

タイポグラフィ

タイポグラフィ（テキストの配置、書体やフォントの選択）は、サイト訪問者に微妙な、しかし強力なメッセージを送ることができます。フォントには、文字の端に装飾線が付いているセリフ（Serif）体と、装飾がないサンセリフ（Sans Serif）体の2つの基本タイプがあります。

一般的に、セリフフォントは、伝統的な印象を与えたいときに使い、サンセリフフォントはモダンな印象を与えたいときに使います。また、スクリプトフォント（手書き風フォント）やディスプレイフォント（自由にデザインされた装飾的な要素が強いフォント）などは、見出しや画像などの目立つところにだけ使用するようにしましょう。

画像

画像は、写真、イラスト、アニメーションなど、サイトを生き生きとさせる視覚的要素です。画像は、顧客の注意を引き、言葉だけでは伝えきれない感情やアイデアを伝えることができます。ブランドと関連性があり、商品のメッセージをサポートする画像を選びましょう。ストックフォトから選ぶ場合は、本物らしくない印象や、一般的な印象を与えないものを慎重に選びましょう。

画像の品質も重要です。高品質な画像からはプロ意識を感じますが、低品質な画像はブランドに対する 信頼感を損なう可能性があります。一方で、画像の解像度を最適化し、サイトの速度を落とさないことも大切です。

ボイス＆トーン

ブランドボイスは、企業の個性を反映したものです。テクニカルでフォーマルなものから、ゆったりとした親しみやすいものまで、メッセージを伝えるためのアプローチを取ることができます。最も重要なことは、ブランドボイスが一貫しており、企業の使命や価値観と結びついていることです。

一方、トーンは文脈によって変えることができます。たとえば、ソーシャルメディアチャネルではユーモアを交えたトーンを使い、webサイトでコンプライアンスの技術的な側面を説明するときは、よりシリアスなトーンにすることができます。

5.サイトマップの作成

webサイト制作の次のステップは、制作する必要があるすべてのページのマップを作成することです。リスト形式でもよいし、ページのつながりを線で示して視覚的に表すこともできます。

サイトマップを作成することで、重要なページや情報をもれなく掲載することができ、それらを連携させて訪問者の行動を促すことができます。この機会に、目標を見直し、マップの特定のページに適用してみましょう。

まずトップページをつくり、社名やロゴ、そしてほかのページへのわかりやすいナビゲーションリンクを配置します。また、連絡先ページには、メール、住所、電話番号、ソーシャルメディアチャネルなどを掲載することが重要です。

そのほかにも、目的によってサイトに掲載するページは変わってきます。たとえば、商品やサービスを販売するのであれば、商品ページ、ショッピングカート、確認ページなどの機能を備えたオンラインストアが必要です。また、自社の専門性をアピールしたり、継続的な情報を提供したりするのであれば、ブログが有効でしょう。また、FAQページや工夫された404エラーページの制作も検討しましょう。

6.コンテンツの制作

さて、webサイトの基礎と構造ができたら、次はページをコンテンツで埋めていきましょう。サイトマップを使いながら、1ページずつ、潜在顧客が求めている情報を考えていきましょう。

各ページには、特定の目標が必要です。たとえば、何かについて訪問者を教育したり、購入するように誘導したりします。テキストや画像を使ってその目標の達成を目指しますが、行き過ぎ禁物です。優れたwebサイトは、コンテンツの情報量で圧倒するのではなく、質に重点を置いているものです。

また、この機会にブランドガイドラインを活用し、音声や画像がブランドイメージに沿っていることを確認するのもよいでしょう。webサイト、ソーシャルメディア、メール、印刷物など、さまざまなチャネルをまたいでコンテンツを合理化し、連携する方法を検討しましょう。

7.モバイル最適化

大多数の人が携帯電話やタブレットでコンテンツにアクセスする状況では、サイトがモバイルフレンドリーであることを確認することは極めて重要です。パソコンで見ることを前提に設計されたwebサイトは、小さな画面では適切に表示されず、モバイルデバイス向けに最適化しない限り、モバイルユーザーは利用するのが難しくなります。

最近のほとんどのテンプレートにはモバイルオプションが用意されており、さまざまなデバイスでデザインがどのように見えるかを確認することができます。しかし、モバイルサイトは、デスクトップPCやノートPC向けのデザインから、よりモバイルフレンドリーなデザインに変更する必要があることを心に留めておいてください。

モバイルデザインを決める際には、重要なページ要素に優先順位を付け、最も重要な情報が、スクロールしなくても表示されるようにすることを心がけましょう。また、画像やボタンなどのインタラクティブな要素のサイズを変更するのも有効な方法です。

8.アクセシビリティの配慮

障がいを持つ人を含め、あらゆる人のためにデザインすることは、今日のwebサイトにとって不可欠です。視覚、聴覚、運動機能など、さまざまな障がいを持つ人が利用しやすいwebサイトにすることで、より多くの潜在顧客にサービスを提供することができ、また、包括性がビジネスにとって重要であることを示すことができます。

スクリーンリーダーがサイトで機能するためには、情報を階層的に整理し、説明的なヘッダーを使用して情報レベルを示すようにしてください。あらゆる画像にわかりやすいaltテキストを付記したり、キーボードしか使わない人でもサイトが機能するようにします。

また、色に気を配り、テキストと背景にコントラストの強い配色を使うことも重要です。しかし、色だけでコミュニケーションを図るのではなく、知らせる必要があることを常に文面にする必要があります。

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

テキストや画像、サイトの読み込み速度などを少し工夫するだけで、検索エンジンの結果で上位に表示されるようになります。検索エンジンで上位に表示されれば、webサイトへのトラフィックが増加し、コンテンツがより多くの人に届くようになるので、時間をかけて改善する価値は十分にあります。

SEOで優位に立つためのベストプラクティスをいくつか紹介します。

キーワード調査

さまざまなSEOツールは、検索エンジンに入力される可能性の高い検索語を見つけ、分析するのに役立ちます。頻繁に検索されるだけでなく、トラフィックをもたらすキーワードを探すのが最善です。さまざまなキーワードを試し、自身で検索してみて、どのようなコンテンツが表示されるか、現在どのようなページが上位にランクされているか、キーワードに空白領域はないか、優れた検索キーワード候補はほかにないか、などを確認します。

オンページSEO

オンページSEOとは、ページを最適化するためにおこなうあらゆる調整のことを指し、オフページSEOとは、その他の方法でコンテンツの注目度を高めることを指します。トップキーワードを特定した後、ビジネスに最も関連性の高いキーワードを数個選びます。そのキーワードをwebサイトのコンテンツ、特にヘッダーに戦略的に組み込み、自然でオーガニックなテキストになるようにします。オンページSEOのほかの側面としては、メタデータ、altテキスト、内部リンクが挙げられます。

メタデータ

メタデータには、ページURL、SEOページタイトル、SEO説明文が含まれ、検索結果にサイトが表示されるときに表示されます。検索エンジンにサイトについて知らせるために、メタデータのこれらの場所にトップキーワードを使用してください。このテキストは検索結果にだけ表示され、サイト内で確認することはできませんが、全体的なSEOランキングのために重要です。

Altテキスト

webサイトの画像のaltテキストの説明は、アクセシビリティのためだけではありません。検索エンジンにとっては、画像の内容と、特定の検索との関連性を知るのにも役立ちます。ここにキーワードを挿入し、SEOランキングを向上させることもできます。

内部リンク

自社webサイトのページ同士をリンクさせることで、検索エンジンから見て読みやすくなり、インデックスされやすくなります。また、webサイトの滞在時間が長くなり、セッションの持続時間が向上し、コンバージョンが促進されます。内部リンクには、ナビゲーションリンク、フッターリンク、インテキストリンク、イメージリンクなどがあります。サイトマップを参照し、webサイト内のページからページへの移動を促す方法について戦略的に考えましょう。

10.webサイトのテストと公開

ここまでで、webサイトを公開する準備はほとんど整いましたが、公開する前に、すべてが機能し、利用者が納得できるものであることを確認しておくとよいでしょう。友人や同僚、ターゲットオーディエンスにwebサイトのプレビュー版をテストしてもらい、デザインと機能の両方についてフィードバックを入手しましょう。このとき、すべてのリンクが機能すること、複数のブラウザーやオペレーティングシステムで動作すること、色、テキスト、画像が正しく表示されることを確認します。

第一印象は重要です。webサイトを初めて訪れた人が、サイトが準備不足だったために嫌な思いをするのは避けたいものです。時間をかけて綿密にテストし、集めたフィードバックをwebサイトを次のレベルに引き上げるための糧として活用しましょう。最終的な修正と更新が完了したら、公開ボタンを押す準備が整います。

11.分析、拡張、メンテンナンス

webサイトを公開したら、あらゆる利点を享受することができます。webサイトのパフォーマンスに関する情報を収集する機会もそこに含まれます。この情報は貴重であり、webサイトを継続的に最適化し、メンテナンスするために必要なものです。

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

このデータは、訪問者がwebサイト内をどのように移動しているのか、どのページを改善する必要があるのか、オンページSEOを改善する必要があるのはどのページかなどを知るのに役立ちます。分析に注意を払えば払うほど、オーディエンス自体について、そしてオーディエンスにとって何が効果的なのかを知ることができます。

メンテナンスもwebサイトを制作する上で重要な要素です。リンクやキーワードは時間とともに変化し、デザインのトレンドも変化します。リンクや画像のチェック、キーワードの更新、サイトの読み込み速度の監視、コンテンツの追加や削除を定期的におこなう、サイトの鮮度と関連性を保つことができます。

分析とメンテナンスは、トラブルシューティングだけでなく、需要に応じてwebサイトを改善したり拡張したりするための強力なツールです。webサイトのパフォーマンスを常に把握しておくことで、オーディエンスに歩調を合わせ、的確なタイミングでスマートなビジネスを俊敏に展開することができます。

12.訪問者のエンゲージメント

今日の顧客は、webサイトを訪れたときに、企業と関わることを期待しています。顧客から質問やフィードバックがあったときに、あるいは顧客が自社のコンテンツを誰かと共有したい場合に、それに耳を傾け、応えていることを示す必要があります。

webサイトの制作を通じてエンゲージメントを促進する主な方法には4つあります。

1. チャットボックス： ライブサポートであれ、チャットボットであれ、チャットボックス機能を追加することで、質問に答える姿勢を示すことができます。また、チャットボットは、サイトで何が機能していて、何が機能していないかについての情報を収集するための手段にもなります
2. ソーシャルメディア： webサイトとソーシャルメディアを連携することで、両者間のトラフィックを促進し、顧客がさまざまな方法で企業とやり取りする機会を提供する必要があります。ソーシャルメディアへのリンクを容易に識別できるようにし、ソーシャルメディアチャネルからwebサイトに誘導するためのソーシャルメディアプロモーションについて検討しましょう
3. ニュースレター： メールによるニュースレターの配信は、オーディエンスを育成することができ、オーディエンスは、企業との特別なつながりを感じることができます。限定商品やキャンペーンを提供したり、記念日を祝ったり、最新のブログ記事を紹介したりすることができます。webサイトの目立つところにニュースレターの登録欄を設け、簡単に登録できるようにしましょう
4. フォームまたはフィードバック： 自社に対する印象を共有する方法を顧客に提供することは、関係性を構築し、有益な情報を収集するのに役立ちます。これには、選択形式のアンケートや、顧客がフィードバックや体験談を提供できる自由形式の質問などがあります

優れたwebサイトを制作するには強力なツールが必要

優れたデザインのwebサイトは贅沢品ではなく、今日の市場で競争力を維持したい企業には絶対に必要なものです。

webサイト制作を始める準備ができたら、まず、webサイトの目的と達成したい目標を明確にすることから始めましょう。現在使用しているソフトウェアやツールが、目指すwebサイトの制作やメンテナンスに対応できるかどうかを評価します。

Adobe Experience Manager Sitesなら、柔軟なフレームワークとカスタマイズ可能なレイアウトで高品質のwebサイトを容易に制作でき、コンテンツをより早く市場に投入することができます。

Adobe Experience Manager Siteが独自のwebサイトの制作にどのように役立つか、概要動画および製品ツアーでご確認ください。