ウェブサイトは、新たなビジネスチャンスへの重要な入り口として機能します。新しい Web サイトを構築したり再デザインしたりするのは、困難な作業となる場合があります。会社の Web サイトの再設計を主導した後、私はその過程を少し共有することにしました。新しいウェブサイトの構築または現在のウェブサイトの再デザインを検討している場合、これがあなたの旅をよりスムーズにするために役立つことを願っています。

評価

当社にとってウェブサイトは新規事業への重要な入り口です。 Web 開発のブティックである私たちがオンラインでどのように自分自身を表現するかによって、私たちの仕事と、私たちと仕事をするときに顧客が何を期待できるかについて多くのことがわかります。

新しいブランドに合わせて新しい Web サイトを作成すると決めたら、それを実行し、顧客や視聴者に高品質の Web サイトを見せなければならないことは明らかでした。私たちのチームは、作業を開始する前の準備段階で多くの考えと努力を注ぎました。

• 私たちは、「なぜウェブサイトや再デザインが必要なのでしょうか?」という単純な質問から始めました。これは、目標に集中し、脇道に逸れるのを防ぐための優れた方法です。
• その理由を理解したら、次にターゲット ユーザーを特定するプロセスを実行しました。私たちは誰に向けてこのウェブサイトを構築していましたか。誰にリーチしようとしているのか、ブランドや作品について何を知ってもらいたいのかを明確に理解することが重要です。
• それから私たちは、その聴衆に伝えたいメッセージ、私たちがどのように見られたいか、そして最も重要なことに、私たちがやっていることが得意であることをどのように証明できるかについて考え始めました。このメッセージの大部分はブランド作成中に考え抜かれており (新しいブランドの作成方法を確認してください)、それを新しい Web サイトに伝える必要がありました。
• 当社はすでにオンラインでの存在感を持っていたため、時間をかけて古い Web サイトを評価し、うまく機能していると感じた機能や側面、欠けていると感じた点をリストアップしました。
• また、このプロセス全体において、競合他社のベンチマークを追跡して、業界の企業が何を行っているかを理解しようとすることも非常に重要でした。また、参考資料やインスピレーションを得るために、他の種類の Web サイトも参照します。これにより、貴重な洞察が得られ、間違いを繰り返したり、重要な機能を見逃したりするのを防ぐことができました。
• この準備段階の最後のステップは、Web サイトに含めたい機能のリストです。これは、やりたいことはすべてできるように、ウィッシュリストを作成するようなものでした。リストには後で優先順位が付けられ、必須の機能と後で実装できる便利な機能を選択しました。最初に最も重要な要素に焦点を当てることが重要です。

それらのステップの一部はチーム全体で協力して行われました。小規模なチームであるため、全員がこのプロセスにある程度関与してもらいたいと考えていました。この最初の評価の後、私たちは分割統治を開始し、新しい Web サイトを現実のものに変える責任を負う専任のチーム メンバーを配置しました。

デザイン

私たちは、Web プロジェクトの設計プロセスに飛び込むことに興奮していました。 UI/UX デザインは、あらゆる Web プロジェクトの重要な側面です。私たちは多分野のチームに参加していましたが、デザイナーはショーのスターであり、私たちが視聴者に伝えたいメッセージの視覚的表現を作成する責任がありました。

私たちのメッセージを視覚的に伝え、それに応じてコンテンツを構成するには、デザイナーがプロジェクトのニーズと期待を明確に理解することが不可欠でした。私たちは、適切なトーンを備えた、簡潔で魅力的なデザインを目指しました。

プロジェクトのこのフェーズでは、次の手順に従いました。

• 私たちは最初からユーザー中心のアプローチを採用しました。私たちは、ターゲットとなる視聴者が私たちをどのように認識し、対話するかに焦点を当てました。このため、私たちは情報アーキテクチャに取り組み、必要なページ、セクション、コンポーネントを決定し、コピーの初稿を作成することから始めました。
• 次に、レイアウトと機能の大まかな低忠実度の表現を提供するために、ローファイ ワイヤーフレームを作成しました。これにより、設計に時間と労力を費やしすぎる前に、アイデアをテストして実験することができました。この段階では一般的なユーザーの流れも考慮しました。
• このフェーズは、使用するコンポーネントの全体像、つまりデザイン システムの作成の基礎を築くため、非常に重要です。 Figmaを使用して、デザイン パターン、ガイドライン、例を含むライブラリを構築しました。このライブラリは唯一の信頼できる情報源であり、すべての UI 要素間の一貫性を確保し、新しいコンポーネントを導入する際のスケーラビリティの基礎を設定しました。
• デザイン システムが定義されたら、高忠実度でレイアウトを構築しました。それまでに作成したローファイワイヤーフレームにUIを適用しました。この段階では、デザインがアクセシビリティ要件に準拠しているかどうか完全にテストされ、コンテンツの表示に関してより洗練された結論が導き出されました。

プロセス全体を通してFigmaを使用したため、チームとの共同作業や反復作業が容易になりました。数回の繰り返しの後、開発者が作業できる最適なバージョンが完成しました。

発達

私たちは、プロジェクトの開発段階で技術スタックの選択と設計の実装に重点を置きました。私たちは、プロジェクト マネージャーが作成したユーザー ストーリーを含む製品バックログに基づいてスプリントに取り組みました。

技術スタックの選択

設計段階が進むにつれて、構築したい Web サイトにどのテクノロジーが最適であるかを調査しました。私たちの開発者は、前のフェーズの結果に基づいてこれを判断することができました。

今日の世界では、多くのオプションが利用できるため、適切なテクノロジー スタックを選択することがこれまで以上に重要になっています。プロジェクトの要件、チームの専門知識、リソースの可用性、コスト、パフォーマンス、セキュリティ、拡張性など、さまざまな基準を検討しました。

このプロジェクトでは、シンプル、高速、そして美しい Web サイトを求めていました。

私たちはモジュール式のアプローチを採用し、Web サイトのコンポーネント、特徴、機能をより小さな再利用可能なコンポーネントに分割しました。このアプローチにより、Web サイトのさまざまな部分でコンポーネントを再利用できるようになり、開発者とデザイナー間のコラボレーションが促進され、開発された内容のテストと保守が容易になり、最終的にパフォーマンスの向上とページの読み込み時間の短縮が可能になりました。

当社の開発者は、高速でコンテンツ中心の Web サイトのためのオールインワン Web フレームワークであるAstroを提唱しました。彼らは、最速のコンテンツ重視のフレームワークを試すことを楽しみにしていました。私たちのチームは、サーバー側のレンダリング、パフォーマンス結果、柔軟性という 3 つの点に注目しました。

私たちが目指していたシンプルな Web サイトでは、本格的なコンテンツ管理システム (CMS) は必要ありませんでしたが、技術者以外のチーム メンバーでも Web サイトで作業できるようにしたいと考えていました。私たちはさまざまな CMS オプションを徹底的に調査し、堅牢な機能と使いやすさにより、最終的に Sanity を選択しました。 Sanityには優れたドキュメントと非常に寛大な無料枠もありました。

Astro と Sanity に加えて、私たちはプロジェクトにNetlifyを使用することも決定しました。まあ、私たちはいつもそうしています。 Netlify のシームレスな導入およびホスティング機能は、通常、頼りになるコンテンツ配信ネットワーク (CDN) です。また、アニメーションにはさまざまなライブラリも使用しました。これについては、別のブログ投稿 (近日公開予定) で詳しく説明します。

改善すべき点の 1 つは、潜在的な顧客が当社に連絡するために作成したフォームでした。 Netlify のフォームを使用しましたが、Astro に関するフォームの問題により、これは最良の選択肢ではないことが判明しました。私たちは解決策 (ホットフィックス) を見つけ、問い合わせフォーム用の 1 ページを作成しました。将来的にこれをどのように変更するかはまだ検討中です。

開発プロセス

開発フェーズを開始する前に、プロジェクト マネージャーは、チームが構築するすべての機能の詳細を記載した製品バックログを作成しました。これらのユーザー ストーリーにより、開発プロセスがスムーズかつ透明になりました。 Web サイトを構築する前に、チームは最初の Web サイト配信の一部となる機能に優先順位を付ける必要がありました。

コード リポジトリにはGitHub (GH)を使用し、そのプロジェクト管理ボードとスプリント プランニング機能を活用しました。通常、バージョン管理システムとして GH を選択しますが、 Notion プロジェクトを使い始めて、プロジェクト管理に気に入っています。

設計の実装を開始しました。私たちはアジャイル手法に従い、スプリントで作業して、予定どおりに進み、設定されたタイムライン内で結果を出せるようにしました。小さな注意点が 1 つあります。これは社内プロジェクトであり、私たちの主な優先事項はクライアントのプロジェクトでした。これは、チームが他のプロジェクトから休憩を取った直後にスプリントが発生することを意味します。これは通常の私たちの仕事のやり方ではありませんが、これが私たちのやり方であり、同じことを繰り返さないようにするための教訓でした。

開発プロセス全体を透明かつ機敏にするもう 1 つの重要なポイントは、プロジェクトの開始時からステージング リンクを用意することでした。プロジェクトに関係する全員がそれにアクセスでき、進捗状況を確認し、フィードバックを提供し、必要と感じた場合には変更や小さな修正を加えることができました。

開発段階で、マーケティング チームはコンテンツの挿入を開始できました。これは彼らが正気度に慣れるのに役立ち、より現実的なフィードバック ラウンドに貢献しました。全体として、開発フェーズは、プロジェクトの目標を達成するためにチーム全体が協力する共同作業でした。

品質保証

開発中、1 人または 2 人の開発者がすべての機能をテストしました。すべてのコードはコードレビューを受け、最終的にはテストのための最後のスプリントを実行し、Web サイトが正常に動作していることを確認しました。

上で説明したように、ユーザビリティとアクセシビリティのテストは設計段階ですでに行われています。一般的なテストでは、プロジェクト マネージャーが作成したユーザー ストーリーと合格基準をガイドとして使用しました。

• 機能テスト: すべての機能が期待どおりに動作していることを確認します。
• パフォーマンス テスト: Lighthouse を使用して速度負荷やその他のスコアを確認します。
• クロスブラウザおよびクロスデバイスのテスト: さまざまな Web ブラウザ (Chrome、Firefox、Safari、Edge など) およびデバイス (デスクトップ、モバイル、タブレット) で Web サイトをテストし、互換性と一貫したユーザー エクスペリエンスを確認します。このために、 BrowserStackを使用しました。彼らの製品は非常に直感的に使用でき、多くのテストが可能です。

稼働開始の準備

Web サイトをステージング リンク上で公開する準備はすべて整っていましたが、作業を進める前に、新しいドメインへのリダイレクトと SEO という 2 つの重要なことを慎重に検討する必要がありました。ドメインを変更する予定だったので、SEO ランキングが影響を受けないようにすることが重要でした。

したがって、301 リダイレクトを使用して、元の URL が新しい URL に完全に置き換えられたことを検索エンジンとブラウザに通知することにしました。私たちがやったことは次のとおりです。

• 現在の Web サイトのすべてのページのリスト:
• ページの URL 構造が同じままである場合は、301 リダイレクトが機能していることを確認します。
• 古いページの URL が新しい Web サイトにない場合は、最も適切なページへのリダイレクトを作成します。
• Google でインデックスに登録されているページをリストし、すべてのページにリダイレクトが設定されていることを確認します。
• Netlify を使用して、次の手順に従ってすべてをリダイレクトします。 Netlify ドキュメント。
• コンソールの変更について Google に通知する住所の変更道具。
• 古いページが表示されないように、新しいドメインのインデックスを再作成するよう Google に依頼してください。これは、次の手順に従って、Google コンソールで直接実行されました。 Google コンソールのドキュメント。

最後に重要なことですが、SEO ランキングを向上させるためのベスト プラクティスを検討し、改善が必要な点を正確に特定することに時間をかけて取り組みました。マーケティング チームは次のことを確実に実行しました。

• 検索エンジンの結果で上位にランクされ、オーガニック トラフィックを引きつけたい関連キーワードに合わせて新しい Web サイトを最適化するため、Google キーワード プランナーや SEMrush などのツールを使用してキーワード検索を実行し、人気のあるキーワードや競争力の低いキーワードを発見します。
• 各 Web ページのメタ タイトル タグとメタ ディスクリプションを可能な限り最適化し、関連するキーワードと説得力のある CTA を組み込んで、ユーザーが検索エンジン結果ページ (SERP) からクリックスルーするように誘導しました。
• URL がクリーンで簡潔で、ターゲットを絞ったキーワードが含まれていることを確認します
• 代替テキスト: 必要に応じてキーワードを使用して、画像の説明的な代替テキストを提供します。
• ページ速度の最適化を確認します (使用したスタックでは、ここで優れた結果が得られないのは困難でした)。

結果

そうですね、ウェブサイトを公開するまでは長い旅でした。でも、どうだろう？作業は発売後も続けられました。

最初のフェーズは、私たちが達成したいことの強力な基盤でした。モジュール式のアプローチで構築することで、Web サイトを繰り返し、変更し、新しいトレンドやニーズに適応させる柔軟性も得られました。私たちは結果に満足しており、ここにたどり着いたことを誇りに思っています。私たちのこれまでの経緯を共有することで、新しい Web サイトを構築したり再設計したりするときに何が起こるかを理解していただければ幸いです。

ここで共有したすべてを要約するために、プロジェクトで使用できるように小さなチートシートを用意しました。