ウェブサイトの再設計の基礎–ケーススタディ

ウェブサイトの再設計プロジェクトを終えて、振り返って「今日知っていることを知っていたら、別のことをしただろう」と考えることも珍しくありません。

私たちは皆そこにいました。 私たちは新しいプロジェクトに興奮し、クライアントと冗談を言い、契約に署名し、プロトタイプのモックアップを開始します。 生活は良く見えますが、プロジェクトの基盤は不安定です。

必然的に、最初の設計コンセプトが提示されるとすぐに、改訂とスコープクリープが忍び込み始め、そこから下り坂になります。 コミュニケーションは崩壊し、計画通りには何も進まず、最終的に、新しくデザインされたWebサイトは、あなたが修正するために雇われた怪物に似ています。

ワールドクラスのデザインとユーザーエクスペリエンスは、見事なモックアップから始まるのではなく、戦略的計画と企業の目標に焦点を当てたデザインビジョンに基づいています。 「もっときれいなウェブサイトを作ろう」というのが主な目的ではありません。

Webサイトの設計者は、ユーザーエクスペリエンス（UX）とユーザーインターフェイス（UI）を担当します。 ユーザーが私たちが設計したインターフェースと対話するのに最適な体験をすることを確実にするのが私たちの仕事です。 これには、プロジェクトの構想から完全な計画を立てる必要があります。

この記事では、次のWebサイトの再設計が強固な基盤の上に構築されるようにするための信頼できるプロセスの概要を説明します。

ウェブサイト再設計のプロジェクト前調査の価値

プロセスを示すために、米国南西部の遺跡を探索して保護する非営利団体であるArcheologySouthwestのために完了したWebサイトの再設計のフェーズを見ていきましょう。

クライアントの分野と競争の予備調査の後、利用可能なすべてのWebサイト資産を綿密に調べます。 この分析は個別に請求され、プロジェクトの見積もりが作成される前に行われます。 このように作業することで、Webデザイナーがプロジェクトの後半で表面化する可能性のある問題を説明しようとしたときに生じる、あいまいな見積もりや膨らんだ見積もりを防ぐことができます。

Archeology Southwestの場合、私は緊急に注意が必要なサイトに直面しました。古代のCMSポータル内の山や雑然としたコンテンツの山です。 悪かったので、注文を作成しました。

ステップ1：コンテンツに精通する

家をリフォームするときは、解体日の前に貴重な材料を回収することが重要です。 同じ原則がウェブサイトのデザインにも当てはまります。 あなたはページごとにサイトを歩き回り、すべてのコンテンツを引き出す必要があります。 デザイナーとして、どのコンテンツがユニークな投稿タイプに値するのか、そしてどのページが静的であるのかを理解する必要があります。

これが完了したら、すべてを整理する方法の戦略を立てますが、どのコンテンツを残し、何を削除するかを決定しないでください。 なぜだめですか？

実際の企業や組織を扱う場合、サイトのコンテンツに責任を持つさまざまな人がいて、存在するコンテンツの量は驚異的なものになる可能性があります。 最善のアプローチは、最初にすべてを分類することです。

私は通常、メインナビゲーションから始めて、ページごとに移動します。 このようにして、最初のクライアントミーティングの前に情報アーキテクチャとサイトマップを作成します。

残念ながら、ArcheologySouthwestのサイトは典型的ではありませんでした。 ほとんどのリンクはトップナビゲーションからアクセスできず、コンテンツ内に隠されていました。 ナビゲーションだけに基づいてプロジェクトを引用したとしたら、私は厄介な驚きに直面していたでしょう。

クライアントのチームのさまざまな人々と話をすることで、プロジェクトの範囲をよりよく理解することができ、クライアントとのミーティングの後、彼らのWebサイトの焦点、ワークフロー、コンテンツ、および機能を特定することができました。 そこから、次のコアタイプのコンテンツ（一部は新規、一部は既存）を思いつきました。

ステップ2：フォーカスを作成します。 簡素化する。 整理。

すべてのコンテンツがラベル付きのボックスに整理されたら、コンテンツを最良の形で紹介する新しい構造の青写真を作成します。 しかし、最初に、フォーカスを作成する必要があります。

Archeology Southwestによると、人々は自分のWebサイトにアクセスして、進行中のプロジェクトに関する情報を調べたり、今後のイベントについて学んだり、月刊誌を読んだりしています。 これらの活動は、「人々はサイトで何をしているのか」という質問に答えます。 しかし、そもそもなぜ人々がそのサイトを訪れるのかを明らかにしないでください。

「なぜ」がウェブサイトの焦点です。 焦点を見つけるために、組織のコアに目を向けてください。

この場合、私は「場所」が考古学南西部の中心であると特定しました。 場所がなければ、遺跡や遺跡、そして確かに博物館や展示物はありません。 考古学のすべては場所に関連しています。

焦点を特定することで、簡素化と整理が可能になります。 Archeology Southwestの場合、私はコンテンツを、チームページや年次報告書など、場所に関係のないカテゴリに分類することから始めました。 少し片付けた後、私はこの大まかな地図に行き着きました：

上の画像は、出現した2つのコア領域である「やるべきこと」と「場所」を表しています。 やるべきこと（左）は、サイトへの訪問者が学び、実行できるアクティビティをカバーしています。 場所（右）は、特定の場所に関連するサイトコンテンツに焦点を当てています。 なぜこのように構成するのですか？

平均的なユーザーはビデオやプロジェクトの名前を知らないかもしれませんが、場所の名前は知っている可能性が高いという考え方です。 このようにして、訪問者は場所に関連するコンテンツを見つけることができます。

さらに、 Locationsの各カラーブロックは、一意の投稿タイプを表します。 組織的な観点からは、展示、クラス、オンライン展示はすべて異なる性質のイベントです。

古いArcheologySouthwestサイトには、雑誌用の静的ページと、訪問者が雑誌を購入できるオンラインストアがありました。 購入を簡単にするために、雑誌のテンプレートに購入オプションを統合しました。

残りの組織構造は単純でした：

• 組織について詳しく知るための「About」ページ
• 「ストア」ページへの直接リンク
• 「寄付」ページ
• 新しい「更新」ページ

ストアと寄付のページは金儲けのページであるため、メインナビゲーションに含めることが不可欠でした。

組織の青写真が完成したら、実際のコンテンツを接続します。

ステップ3：クライアントを関与させる

サイトマップにはページタイプが含まれていますが、コンテンツのマッピングは含まれていません。 経験豊富なWebデザイナーは、クライアントがサイトにコンテンツを追加し始めたときにほとんどの問題が発生することを知っています。 この問題を回避するには、クライアントを最初からループインさせておきます。

Archeology Southwestの場合、サイトマップを含むGoogleドキュメントを作成し、クライアントに古いコンテンツを新しい構造にマップするように依頼しました。

何かが完全に適合しない場合は、後で対処しました。 これは重要なステップです。 なんで？ クライアントをプロセスに関与させるだけでなく、実装を開始する前に構造に関する問題を明らかにします。

この場合、サイトマップのメニュー項目の一部が変更され、クライアントには複数の寄付ページがあるため、そのためだけに固有の投稿タイプを作成するのが理にかなっています。

ワイヤーフレーミングによる視覚的構造の​​作成

このステップでは、作品に視覚的な構造を与え始めます。 システムがうまく機能し、「すべてが場所に関連している」という概念をうまく統合するために、私は投稿タイプ間に双方向の関係を作成しました。

基本的な考え方は次のとおりです。訪問者がArcheologySouthwestのWebサイトにアクセスしてグランドキャニオンを選択すると、その場所に関する情報が表示されますが、プロジェクト、イベント、展示、およびサイト管理者が場所としてマークするその他すべてに関連する情報も表示されます-明確。

リンクは双方向であるため、訪問者はプロジェクトページにアクセスしてグランドキャニオンにアクセスすることもできます。 最終的に、私はこれで終わりました：

場所のインデックスページには、最新のものが一番上にあるすべての場所が表示されます。 検索バーは、ユーザーがページにアクセスしたときに最初に表示されるものです。 Googleマップは画面の約80％を占めます。 これにより、ユーザーは地図上のポイントを選択でき、スクロールまたは検索すると、リストグリッドが表示されます。

単一の場所のページでは、本体が最も重要な情報であるため、左側にあります。 関連するメタ情報は二次的なものなので、右側にあります。 バランスの取れたレイアウトを実現するには、1番目、2番目、および3番目の要素ブロック間に明確な階層を設定することが重要です。 これにより、目はセクション間を簡単に移動できます。

Archeology Southwestレイアウトでは、ユーザーの目はヘッダーから始まり、コンテンツブロックに移動し、最後に右側のサイドバーに移動します。 関連する各コンテンツは、関連性の高い順に表示されます。 たとえば、ユーザーがグランドキャニオンについて読んでいる場合、このコンテンツの後に写真と地図が続く可能性があります。

これは主に教育サイトであるため、「この場所に関連する」オプションを用意することが重要です。 ただし、各場所に一意に関連付けられているコンテンツはあまりないため、めったに使用されない（ただし関連する）コンテンツを本文の下の1つのブロックに結合しました。

関連コンテンツの下に雑誌とビデオの親指を置くと、視覚的な要素が追加され、ユーザーは「購入」ページに移動します。 関連する場所を表示してページを完成させます。 これは、ユーザーがサイトをさらに探索するように促すための優れた方法です。 次のステップは、他の投稿タイプに対してこの構造を継続することです。

ホームページに明確な目標を提供する

投稿タイプの一般的なモデルが整っているので、ホームページに集中できます。 最初のステップは、ホームページの目標を考え出すことです。これは、UIデザインの重要な部分です。 クライアントの調査によると、多くのユーザーがサイトが何であるかを完全に理解せずにサイトに出くわしました。 したがって、紹介と歓迎のテキストは、ユーザーが最初に目にするものである必要があります。

新しいコアフォーカスは、ロケーションのセカンダリブロックを中心に展開します。 これに続いて、archaeologysouthwest.orgで起こっているすべてのこと（現在の雑誌、ブログ、イベント、ニュースレターなど）が続きます。 レイアウトプロセスの反復は次のとおりです。

V1（左）を使用して、元のホームページに似た基本的なレイアウトを設計しました。 階層はあまりありません。 ユーザーが最初に目にするのは注目の場所ですが、そこからは列で迷子になる可能性があります。

V2（中央）の場合、目がわかりやすい別の列を作成しました。 ただし、それでも改善することができます。 ここで、コンテンツの知識が主要な役割を果たします。 Archeology Southwestでは一度に2つ以上のイベントが開催されることはないので、ホームページに複数のイベント用のスペースを設けるのは意味がありません。

V3（右）では、今後のイベントに焦点を当てました。 何らかの理由で3つ以上のイベントがある場合、ユーザーは[詳細]ボタンをクリックして残りを表示できます。 また、現在の雑誌はクライアントの金儲け者であるため、さらに強調します。 ユーザーは上から始めて、Fパターンで下に向かって進みます。 目の流れは次のとおりです。

注目の場所>ようこそ>雑誌>イベント>ニュース

視覚的なワイヤーフレームとサイトの構造が整っているので、機能と物事がどのように機能するかを固めるのがはるかに簡単です。 この時点で、クライアントとの別の会議で、機能とユーザーインタラクションのフローについて検討します。どちらも、この段階でははるかに明確です。

今後も改訂はありますか？ はい。ただし、プロセス全体の変更ではなく、微調整が行われます。 最も重要なことは、驚きがないことです。

ブランドスタイルガイドを組み込む

次に、エキサイティングな部分があります。ワイヤーフレームを、人々が使用して体験するものに変換することです。 このプロジェクトでは、ブランドカラーとタイポグラフィを実装することで、書かれたコンテンツを消化しやすくすることを目指しました。

タイポグラフィの組み合わせを試す

タイポグラフィは優れたWebデザインに不可欠であるため、タイプスキームを早期に把握する必要があります。 Archeology Southwestのアイデンティティのほとんどは、UniversCondensedLightとAdobeCaslonフォントを使用しています。 Adobe Caslonをいつ使用するかについての規則はありませんでしたが、Universほど頻繁には使用されていないことに気づきました。

私は小さなフォントの調査を実施して、どの組み合わせがプロの非営利組織にとって最高の感触を生み出すかを確認しました。 しかし、私はまた、私のタイプスキームがクライアントのマーケティング担保とあまりにも異なって見えることを望んでいませんでした。

フォントの比較を行った結果、Adobe Caslonをタイトルフォントにし、Universを字幕に使用することが明らかになりました。 センテンスケースでメインタイトルを設定すると、ブランドはより個人的な雰囲気になりますが、すべてのキャップはより企業的な雰囲気を生み出します。

ウェブサイトのルックアンドフィールを磨く

Archeology Southwestが親しみやすく、非常に有能であるとユーザーが感じられるように、私は軽くてオープンな体験を作り出すことに着手しました。 分析データに基づくと、訪問者の大多数はデスクトップブラウザを使用しています（おそらくほとんどの人が調査のためにサイトにアクセスしているためです）。 したがって、私の最初の焦点はデスクトップユーザー向けの設計でした。

デスクトップから来るとき、私は訪問者にすぐに注目の場所、ウェルカムテキスト、そして雑誌のタイトルの一部が続く今後のイベントを見てもらいたいと思いました。 このように、人々は最初に会社が何であるか、そして彼らが何を促進しているかを見る。

モバイルデバイスでは、優先順位が少し異なります。 ユーザーは外出先で情報にアクセスしているため、イベントはより重要であり、リストの上位に配置されます。

また、フッターの寄付ボタンをボタンから文に変更することで、より親しみやすいものに更新しました。

強く仕上げる：細部に気を配る

ユーザーが詳細ページにアクセスする理由は2つあります。ランドマークについて詳しく知りたい場合と、場所について既に知っていて追加情報（道順、電話番号など）を探している場合です。 したがって、ユーザーが検索に行く必要がないように、両方のオプションをすぐに提示することが重要です。

詳細列をコンテンツ領域から切り離して、ページに重みを付け、ページをより面白くすることにしました。 これは構成階層の作成に役立ちます。そのため、訪問者がページにアクセスすると、最初にページタイトルが表示され、次に画像の小さなギャラリーが表示され、次に詳細列が表示されます。

このタイプの設計により、ユーザーは場所の詳細にすぐに気付くことができます。 カラムを囲む少し余分なパディングにより、目を集中させ、情報をスキャンしやすくします。

モバイルビューは、予想どおりに崩壊します。 コンテンツが最初にワイプされ、次にメタ情報が続きます。 動画や雑誌はモバイルユーザーにとって最も重要ではないため、モバイルページの最後に配置しました。 他のページも同じ構造に従って、一貫したフローとエクスペリエンスを作成します。

Webの再設計は、慎重な計画に基づいて構築されています

ウェブサイトの再設計プロセスを振り返ると、時間の大部分が整理と計画に費やされていたことが明らかです。 プロジェクトの30％だけがサイトの設計に費やされました。

多くの場合、デザイナーが自分の作品を展示するとき、コミュニケーションの要点にどれだけの時間が費やされているかを伝えることができず、経験の浅いデザイナーがモックアップに直接飛び込むことになります。 結果？ 脱線したプロジェクトと不幸なクライアント。

Webサイトの再設計を成功させるには、詳細な計画を立てる必要があります。 時間をかけてプロジェクト前の調査を行い、既存のコンテンツに精通し、クライアントを巻き込むことが重要なステップです。

最終的には、それを回避する方法はありません。 驚くべきウェブサイトの再設計と専門家としての自信への道は、プロジェクト組織への系統的なアプローチによって舗装されています。