ウェブサイトの再設計にアプローチする方法

公開: 2020-12-17

特定のWebサイトで3〜5年ごとに再設計が行われるのを見るのは珍しいことではありません。再設計はいくつかの異なる方法で見ることができますが、要するに、それは変更できる「新しい外観」です。

ビジュアルのみ–コンテンツ、ページ、その他すべては同じままですが、サイトはより現代的に見えます。
コンテンツとビジュアル–これが最初の+ランディングページ、記事の並べ替え、新しいタイプのデータなどのコンテンツの変更になります

1つ目は、準備が必要なコンテンツがそれほど多くないため、設計者がジャンプするのがはるかに簡単です。もちろん決定されたら、これはウェブサイトの再設計の最初の段階に私たちをもたらします：

新しいコンテンツを作成するか、古いコンテンツを使用する

デザイナーは、自分がどのコンテンツを扱うかを知る必要があります。たとえば、ホームページのタイトルは何でしょうか。字幕、その後の段落、リスト、ビデオ、画像などはありますか？これらはすべて、デザイナーが実際に何かを紹介するために必要な情報です。

そして、これが最初の決定です。既存のサイトのコンテンツはそのままにするのか、それとも新しいサイトを作成するのか。それが同じままである場合、すべてのクライアントが決定する必要がある（またはそのことについてはマーケティングチーム）が全体的な方向性になります。

ただし、コンテンツを作り直す場合、デザイナーは新しいテキストの準備ができて完成するのを待つ必要があります。それを提示する1つの方法は、テキスト付きのボックスであるワイヤーフレームを介することです。これは、デザイナーが注文するか、セクションごとのコンテンツを含む単純なPDFになります。

もちろん、Webサイト全体の準備ができたら、編集およびマーケティングチームは、コンテンツを自由に操作して編集することができます。 1日目からコンテンツのコピーを入手することで、デザイナーはコンテンツに付随する視覚要素について正しい決定を下すことができます。長さ、見出しの量、リスト、機能、メディアなど。

ビジュアルスタイルを決定する

次は「どのように見えるべきか」です。これは設計者が答える質問のように思えますが、実際にはそうではありません。実際、これは設計者がクライアントに頻繁に尋ねる質問です。

視覚的な方向性は、会社のブランド変更によって決定される可能性があります。これは、Webサイトを最新化して特定の人口統計に合わせるか、サイト全体の外観を新しく更新することです。時々、ウェブサイトの再構築、デザイナーのコンセプト、すべてが会社のブランド変更を開始する可能性がありますが、その逆ではありません。また、ここでは常に大企業について話しているわけではありません。新しいWebサイトでのWebデザイナーの作業により、小規模なブランドもパッケージやソーシャルプレゼンスなどを作り直すように促される可能性があります。

これは、デザイナーが製品を「コンセプト」と呼ぶことが多いフェーズでもあります。これは、正しい言語、見た目、および/または感触を見つけることがすべてだと言う別の言い方です。このようなフェーズでは、デザインは通常、ホームページまたはサイト/アプリのメインビューを中心に展開します。

委員会/範囲に応じて、多くの概念が作成される可能性があります。このような概念を使用して、開発者、クライアント、マーケティングチーム、および設計者は、どちらが進むべきか、どのタイプの要素がうまく連携するか、コンテンツの変更や技術的な懸念があるかどうかについて話し合うことができます。

コンセプト段階もおそらく最も難しいものの1つです。これは、ほとんどの決定が行われる段階だからです。

設計者が回答する必要のある質問の例を次に示します。

それは画像が重いでしょうか、グラフィックはきれいで最小限に見えますか？
グラフィックを使用する場合、どのようなスタイルになりますか？
使用するフォント
古い配色を近代化する必要がありますか、それとも新しい配色で古い配色を置き換える必要がありますか？
サイトはどの程度インタラクティブである必要がありますか？

方向に応じて、概念で考慮すべきことがいくつかあります。

サイトの元の感触は同じままである必要がありますか？それは、配色、グラフィック、タイポグラフィのルールなどである可能性があります。
代わりに、まったく新しい感覚を導入する必要がありますか？つまり、デザイナーが持つすべての制約はコンテンツです。

1つの概念が選択されると（これは多くの改訂後に発生する可能性があります）、次の段階を開始できます。

デザインコンプを構築する

元の意思決定ステップでコンテンツ/サイト構造が同じままであると決定された場合、デザイナーの作業は少し簡単になります。彼らがしなければならないのは、古いデザインを新しいコンセプトに変えることだけです。つまり、彼/彼女は通常、ページごとに移動し、新しいルックアンドフィールに従うように各コンポーネントを作り直すことができます。ここでは、コンポーネントのリワーク（間隔、タイポグラフィ、色など）のような小さな変更、またはレイアウトの変更（要素の位置、順序など）のような大きな変更が表示されます。

サイトの再設計の重要な部分は、独自のビューです。ページのレイアウトとコンポーネントが異なる限り、開発チームのためにデザインを準備する必要があります。デザイン的には、注文/コンテンツにわずかな変更を加えたアートボードのコピー＆ペーストのみが必要になるため、わずかなバリエーションを紹介するのもかなり簡単です。したがって、これは間違いなくスキップする価値のないステップです。

設計が完了したら、設計者とクライアント、およびマーケティング、販売、開発者などの関係者が再度再確認する必要があります。設計は開発段階に比べて比較的簡単に作り直したり変更したりできるため、これは大きな変更の最後の理想的なステップです。

開発フェーズ

これは通常、設計者が作業を完了し、プロジェクトを開発チームに引き渡す場所です。これ以降、設計者はほとんどの場合、質問に回答し、アセットを提供し、場合によっては設計に欠けている特定のコンポーネントの状態を設計します。

理想的には、新しいサイトを立ち上げる前の開発段階で設計変更を行わないでください。これにより、配信が遅れたり、関係するすべての関係者に不必要なストレスがかかることがよくあります。

開発中、通常、それにアプローチする2つの方法があります。

新しいビルド
既存サイトのリワーク

WordPressのコンテキストでは、多くの場合、新しいビルドは、新しいプロジェクトを完全にセットアップし、古いサイトからデータベースをインポートし、クリーンなコードベースで新しいテーマを作成し、デザインを最初から実装することを中心に展開します。さらに、この場合、可能なプラグインとテーマの統合を除いて、レガシーコードはありません。

締め切りが非常に厳しい場合、新しいテーマで時間どおりに開始するには2つの方法があります。

すべてをオンにしてライブに移行しないでください。これが最も合理的なアプローチです。最優先のページをリストアップし、それらだけを開発します。彼らと一緒にライブ配信し、リリース後数週間で他の機能やページを公開します。
大まかなバージョンを使用してください。つまり、すべてのページを実装する必要がありますが、必ずしも編集可能である必要はありません。テストを行う時間がほとんどないため、または単に修正する時間がなかったために、要素を1つか2つ非表示にしたり、バグを修正したりする必要がある場合もあります。
開発者の時間のほとんどを占めるデザインのUI要素を簡素化します。たとえば、複雑なナビゲーションメニュー（デスクトップとモバイル）、マップ/トグル/検索、スライダー、または複雑なレイアウトである可能性があります。

優先順位（締め切りまたは品質）に応じて、クライアントは、代理店またはフリーランサーの2つのうちどちらを最初に取り組むかを選択する必要があります。

ただし、数週間かけて徐々にやり直しが必要な場合は、代理店やフリーランサーが既存のテーマをやり直す必要があります。ここでは、開発者はほとんどの場合、すべて完了したときに移行できる新しいサイトの新しいスタイルシートを作成し、ヘッダー/フッターから既存のテンプレートの再構築を開始します。

ページごとに置き換えて更新をロールアウトすると、サイトはページ全体で新旧の外観と矛盾するように見えます。 Webサイトではありませんが、Windows10はその一例です。

ライブフェーズに移行

これは、ライブ化の待望のフェーズです。一般に、サイトのQAとレビューのほとんどは、新しいWebサイトで公開するのと同じ手順に一致します。多くのテスト、あらゆる場所をクリック、各メニュー項目が機能すること、ページが適切に機能すること、コンテンツが優れていること、すべての統合は機能しています。

再設計と新しいサイトの主な違いは、特にサイトの構造に変更があった場合の既存のコンテンツです。古いURLは機能しますか？失われたコンテンツはありますか？古いデータはすべて最近移行されましたか？通過する「ローンチ日」リストは非常に長く、優れたWeb開発機関のサービスを使用するのが最も安全です。

概要

ウェブサイトの再設計は、多くの人が関わる長いプロセスです。また、答えるのが難しい質問がたくさんあり、技術的なハードルを克服する必要があります。ありがたいことに、ほとんどの場合。この変化は、ブランドにとって非常に前向きであることがわかりました。