デザインの原動力–ウェブサイトの再設計のケーススタディ

ウェブサイトの再設計を行うのに最も適切な時期はいつですか？

時代遅れで見捨てられたように見えるウェブサイトに出くわしたことがない人はいますか？ 壊れたトラックの甲羅が砂漠に置き去りにされたように、何年もの間明らかに手つかずのままでした。

ウェブサイトはさまざまな理由でリニューアルされています。 残念ながら、多くの企業はWebサイトの再設計が必要であることに気づいておらず、ライバルがWebサイトを改善して競争力を獲得し、結果としてコンバージョンを促進すると、取り残されます。

企業が犯すよくある間違いは、ウェブサイトのニーズがより複雑になった場合に何が起こるかを早期に考慮しておらず、その結果、ウェブサイトを拡張する必要があるときに、困難で潜在的にコストのかかる状況に陥ることになります。 さらに、検索エンジン最適化（SEO）、SSL（ランキングとセキュリティに影響を与える）、モバイルの使いやすさ（ランキングとコンバージョンに影響を与える）などの重要な要素が無視されることがよくあります。

新しいウェブサイトのデザインは、新しいブランディングの方向性が確立され、新しいブランドマーケティングの人々が参加するトップのリーダーシップの変化のためにしばしば起こります。 会社のウェブサイトを評価すると、彼らはそれがひどいUXを持っていることを知り、かなりの量の望ましいコンテンツが欠落していることに気付くのを恐れています。 結論として、それは単に「ブランドの声」や会社が求めているコンバージョンを提供しない「パンフレットのウェブサイト」をひどくまとめたものであり、コンセンサスはそれが変化の機が熟しているということです。 ウェブサイトの刷新の時が来ました。

自動車会社のウェブサイトの刷新

この自動車のウェブサイトの再設計のケーススタディは、公式の委託された再設計ではないことに言及することが重要です。 会社、彼らのデジタル戦略、または自動車業界全体に関する内部情報はありません。 私は単に自動車業界をウェブサイトの再設計のケーススタディのテストケースとして使用しています。

このケーススタディでは、クロアチアの自動車ブランドであるRimacAutomobiliのWebサイトの再設計プロセスについて説明します。 リマックは、シンプルな車のコンセプトから始まり、その後、大手部品製造会社にまで拡大したブランドです。 多くの新興企業と同様に、会社は最終的に別の何かに進化したアイデアから始まりました。 この拡張はWebサイトの構造に影響を与え、ユーザーの焦点全体が変化しました。 市場の需要により会社は別の方向に進んだため、Webサイトの焦点もシフトする必要がありました。

優れたウェブサイトデザインソリューションを実現するために考慮すべき多くの異なる側面と角度があります。 以前のWebデザイナーには、UXの調査、ワイヤーフレーミング、プロトタイピング、およびユーザーテストのためのリソースや十分な時間がなかった可能性がありますが、デザインの全体的な品質に関しては、初期のデザインの最小の決定でさえ重要な意味を持つ可能性があります。マイナスの影響、および最適とは言えないWebサイトの品質は、最終的に2、3年でWebサイトの再設計につながります。 これの結果は、長期的には、クライアントが彼らが思っているよりも多くのウェブサイトにお金を払っているということです。 新しいウェブサイトのデザインに関しては、明確に定義されたコンテンツ戦略と情報アーキテクチャが非常に重要です。

大企業のWebサイト、ニュースポータル、およびその他のコンテンツの多いサイトを設計するとき、私はアトミックデザインの大ファンです。これは、複数の画面や予期しない状況で最初に機能するすべてのUIコンポーネントを作成する柔軟なデザインシステムです。プロジェクトの。 この特定のケーススタディは大規模なニュースポータル向けではありませんが、アトミックデザイン要素のデザインライブラリ（慎重に検討され、明確に定義されたデザインコンポーネントのセット）が機能するように設定されている場合は、プロセスがはるかに簡単になります。後で。

Webサイトに適切なコンテンツ戦略と情報アーキテクチャが導入されて初めて、ユーザーエクスペリエンスに焦点を移す必要があります。 適切なウェブサイトの構造がなければ、ユーザーエクスペリエンスのデザインには効力がありません。 一見、見た目も機能も良いのかもしれませんが、十分な柔軟性がない場合は、いつかウェブサイトのリニューアルを検討する必要があります。

なぜこの自動車会社のウェブサイトを再設計するのですか？

Rimac Automobiliは拡大しており、公式の投稿によると、 「Concept_One」と呼ばれる新しいコンセプトカーがすでに生産されています。 この委託されていないウェブサイトの再設計の時点で、彼らのウェブサイトは1台の車「C_Two」のみを展示していました。 視覚的な多様性はありませんでした。Webサイトは2つのテンプレートから作成されたため、各ページは非常によく似ていました。 デザインは、 C_Two車の品質を説明するために、車の大きくて魅力的な画像に焦点を当てました。これは、Webサイトの訪問者を車の購入の決定に導くために必要な重要な情報です。

言われているように、「第一印象を与えるチャンスは二度とありません」。 優れたデザインの影響を利用して、訪問者（この場合は主に高性能車の愛好家）に100万（USD）近くの車を購入するように効果的に説得することが重要です。 このようなハイエンドのWebサイトは、信じられないほど高い基準を満たす必要があります。 彼らは、高級感とカリスマ性を投影し、高いレベルのセールスマンシップと説得力のあるスタイルを提供する必要があります。

優れたウェブサイトのデザインは、同様のウェブサイトの海で際立っている必要があります

自動車業界の大きな問題は、その分野のほとんどのWebサイトが同じように見える傾向があることです。 異なる配色とヒーロー画像を除けば、ほとんど同じWebサイトテンプレートを使用しているように見えます。

自動車会社のウェブサイトのデザイン決定の背後にある多くの要因がありますが、100万ドルと25,000ドルの車の間で、そしてそれらが提示される方法で明確に区別する必要があります。

ハイエンドの自動車分野では、フェラーリ、ランボルギーニ、アストンマーティンは非常にシンプルで、通常は企業のWebサイトであり、（私の意見では）優れたユーザーエクスペリエンスを提供していません。

ミドルコンシューマーレンジ（フォルクスワーゲン、トヨタ、プジョーなど）は、上記のよりハイエンドな例と非常によく似たWebサイトコンテンツ構造を持っています。 ハイエンドとミッドレンジの消費者向け自動車ブランドの最大の違いは価格です。したがって、この違いを反映して高価なブランドを紹介するために、ハイエンド車を搭載したRimacには優れたWebサイトがあると予想されます。

これらの超高価な自動車ブランドのWebサイトにアクセスすると、顧客の期待は高くなります。 それは大きな財政的コミットメントであり、当然のことながら、彼らは自分たちのお金で買える最高の車を確実に手に入れたいと思っています。

なぜリマックはトヨタよりも優れているのですか？ 彼らのウェブサイトを見ると、これら2つの非常に異なるブランドの間に大きな違いはありません。 これは彼らのウェブサイトの品質から明らかであるべきではありませんか？

優れたウェブサイトデザインでハイエンドの自動車購入者をターゲットにする

すべてのWebサイトは、そのユーザーを考慮する必要があります。 この種の車のターゲットオーディエンスは誰ですか？ 彼らは何を探していますか？

リマックの車の価格は約85万ドルで、「限定版」のラベルの対象となる数台のみが製造されます。 これらの車の購入に関心のある顧客のタイプを正確に特定することはできませんが、ほとんどの顧客は裕福なエリートから来ていると推測できます。 Rimacのウェブサイトはこれらの顧客を効果的にターゲットにしていますか？

情報アーキテクチャの分析

サンプルWebサイトでは、最初のナビゲーション項目が「Concept_One」であることがわかりました（当時、これは会社の唯一の製品でした）。 その後、実際のWebサイトが更新されました。 2番目のナビゲーション項目は会社の進化、つまり自動車の製造方法であり、3番目の項目は会社の製品とサービスです。 4番目のナビゲーションアイテムは別の会社の製品（Greyp電動自転車）です。 最後の2つの項目は、プレスリリースを含む「プレス」と「ブログ」です。どちらも、ニュースのほとんどがソーシャルネットワークで公開されているため、特に有用ではありません。

もう1つの問題は、キャリアリンクが二次的で重要性の低いナビゲーションアイテムとして隠されており、会社の大幅な拡大を考えると、重要な問題であるということでした。 ユーザーを企業の懸念事項の焦点と見なすと、ほとんどの企業のWebサイト（通常の例外は企業/非常に大規模なWebサイト）で、目立つ「キャリア」リンクまたはCTAを持つことが非常に重要であることがわかります。

ウェブサイトの再設計プロセス

ホームページヒーロー画像前後

当初の目的は、より暗く、より強力なバージョンの車を作成することでした。 オンラインでConcept_One車の画像をいくつか見つけ、「Photoshopマジック」を使用して、ホームページの最初のヒーロー画像を作成しました。 次のアイデアは、アニメーションで車をゆっくりと表示し、最初に背景、次に車の輪郭、次に完全にレンダリングされた画像を表示することでした。

ホームページのデザイン

ホームページのコンセプトは、トップナビゲーションとカーヒーロー画像の2つの主要な視覚領域を定義することでした。 それでおしまい。 ミニマリストでありながら印象的なものにするために、不要なものはすべて削除されました。 一目で、すべての重要なものが表示されます。それ以外はすべて、サイト内のサブページに移動されました。

コンテンツの戦略とデザイン

このようなウェブサイトの刷新プロジェクトでは、サイトの構造や視覚的な美学だけでなく、コンテンツもデザインすることが重要です。 これは委託されていないWebサイトの再設計であるため、実験の自由度が高くなり、独自の設計決定を行う機会が十分にある場合の美的柔軟性も提供されます。

プロセスは簡単です：

1. ウェブサイトに表示される本文を準備します。
2. アイコンやインタラクティブなアニメーションを使用して、加速、馬力、最高速度などの目を引く詳細など、いくつかのデザイン要素を伝えます。

これにより、UIに補助的な単語が不要になり、Webサイトの訪問者にとってより重要な領域に注意が向けられます。

ウェブサイトナビゲーションの再設計

Webサイトのナビゲーション構造は、重要度の階層に基づいて再配置されました。 ナビゲーションの最初のドロップダウンとしてVehiclesがあります。これにより、会社は将来、より多くの車種を追加できるため、設計の柔軟性が高まります。

ホームページからセカンダリ製品ページにすぐにアクセスできるようにするために、効率を上げるために、（別のWebページに）別の製品リストページを作成する代わりに、製品とそのサブカテゴリをドロップダウンエリアとしてホームページに組み込み、その一部にすることが決定されました。ナビゲーション。 以下のデザインは、訪問者がナビゲーションで[製品]をクリックしたときにホームページにアイコンとして表示されるさまざまな製品を示しています。 製品の第2レベルを表す3D製品レンダリングについては、よく知られている標準化されたツールであるThree.js、WebGL、Canvas、およびGreensockをお勧めします。

ウェブサイトの再設計内のセカンダリページ

ホームページとは対照的に、 AboutページやServiceページなどのセカンダリページは、異なる、よりZパターンのグリッドを使用します。 さまざまなグリッドレイアウトの目的は、これらのページをスキャンしている間、訪問者により興味深くダイナミックな環境を提供することです。

中心的なアイデアは、テキストをできるだけ少なくした視覚的なミニマリズムです。 人々は、多くのテキストを読むためにこれらのタイプの自動車のWebサイトにアクセスするのではなく、情報をすばやく視覚的に取得するためにアクセスします。 これは、ページタイトルの大きく太字のフォントとさまざまなフォントスタイルの採用の背後にある考え方でした。

この種の「会社のパンフレット」のWebサイトの再設計は、サービスの再設計とは異なることに注意することが重要です。 「会社のパンフレット」のウェブサイトは、製品のマーケティングに関するものです。 サービス指向のWebサイトの再設計は、クリックをコンバージョンに変換し、最終的には利益を得る方向に傾いています。

結論

他にもいくつかのデザインブログ記事があり、デザイナーが委託されていないデザインプロジェクトに参加するのが良い考えである理由を推奨しています。 本当にクールなプロジェクトを設計したい場合は、Webサイト、アプリ、エンタープライズSaaS製品などのアイデアを選び、その設計上の問題を解決してください。

Dribbbleは、デジタルデザイナーが自分たちのデザインのチョップを披露する機会を持つ、一方的な概念の再設計プロジェクトでいっぱいです。 世界に創造的な解決策を提示するクールなデザインを提供するだけでなく、「実際の」製品の問題に取り組むことで、潜在的な企業やクライアントにあなたの考え方、プロセス、専門知識を示すことができます。

私の場合、この分野のWebサイトの設計が非常に高い基準を満たすことが特に重要であるため、ハイエンドの自動車Webサイトに取り組むことは素晴らしい演習でした。

ただし、注意が必要です。デザインに飛び込んでデザインを開始する前に、デザインの美学だけでなくコンテンツの観点からも、特定のWebサイトが3年後にどのように見えるかを前向きに検討することをお勧めします。機能、および構造。 組み込みの柔軟性が設計上の重要な考慮事項であることが重要です。 Webサイトまたはサブページが機能し、スケーラブルである場合、将来の要求に合わせて小さな調整を行う方が簡単で、効率的で、はるかに簡単です。

時々、潜在的なクライアントにウェブサイトの刷新をするように説得するのは本当に難しいです。 多くの場合、クライアントは、リソース、資金、または時間の不足のためにコミットすることを躊躇します。 それにもかかわらず、一方的なWebサイトの再設計は、Webサイトの再設計プロセスを世界に紹介するための優れた方法です。 そして、誰が知っていますか？ あなたのウェブサイトの再設計は、彼らが「本物の」プロジェクトのためにそれを青信号にするのに十分な気が進まないクライアントを感動させる可能性があります。

•••

Toptal Designブログでさらに読む：

• ウェブサイトの再設計の基礎–ケーススタディ
• UXの真のROI：B2B再設計のケーススタディ
• IKEAを箱から取り出し、16億人のユーザー向けに再設計
• Facebookを再設計しましょう：始めるための10のインスピレーション
• CrunchBaseの設計方法