新しいウェブサイトを設計するときに従うべきステップ

公開: 2021-04-19

優れたWebデザインとは、優れた美学と優れた機能を組み合わせることです。見事にデザインされたウェブサイトを実現するには、最初にさまざまなスキル、少し創造的な才能、そしていくつかの組織が必要です！

このガイドは、すばらしいWebサイトの作成を支援することを目的としています。見栄えが良く、さらにうまく機能するもの。可能な限り最高のウェブサイトを実現するために必要ないくつかの重要なステップを実行します。始めましょう！

目的と研究

あなたがウェブデザインプロセスの創造的な部分に取り掛かる前に、あなたが最初に確立しなければならないいくつかのことがあります。重要なのは、ターゲットオーディエンスを理解することです。これは非常に重要です。結局のところ、ターゲット層のニーズを満たさないWebサイトに時間とお金を注ぐことはほとんど意味がありません。

この最初のステップはかなり注意が必要です。あなたがあなたの聴衆が何を望んでいるかを知っていると仮定するのは簡単です。ただし、最初にこれを実際に調査するために時間をかけることで、プロジェクトの後半で多くの時間を節約でき、Webサイトが成功する可能性が高まります。そして忘れないでください、あなたがクライアントのためにウェブサイトをデザインしているなら、あなたがこのプロセスに彼らを巻き込むことを確認してください！

特にWebサイトがクライアント向けである場合、考慮したいいくつかの重要なポイントは次のとおりです。

ウェブサイトはそれ自体がスタンドアロンのアイテムですか、それともより包括的なマーケティング戦略の一部を形成していますか？
すでに強力なブランドがありますか？もしそうなら、ウェブサイトがこれを反映することが重要です。ブランドによってすでに確立されているスタイルと必ずしも快適に調和しているとは限らない現代のデザイントレンドに焦点を合わせたいという誘惑があるかもしれないので、これは時々難しいことかもしれません。新しいサイトが最初から時代遅れに見えないことが重要であるとはいえ、ブランドによってすでに確立されているコアデザインの原則から大きく逸脱することもできません（ブランドがイメージの全面的な見直しを進んで行わない限り）。
あなたやあなたのクライアントの競争相手を見ることも非常に重要です。新しいサイトに成功に必要なすべてのものが組み込まれていることを確認するために、それらの長所と短所を特定します。競合他社を見ることも、潜在的に重要な機能を見逃さないようにするために役立ちます。

調査が完了すると、デザインする新しいサイトがクライアント（またはもちろん自分自身）の要件を満たしていると確信できるはずです。研究は退屈に感じることがあります。特に、創造的なジュースに溢れていると感じ、画面上に具体的なものを表示し始めたいという願望が圧倒される場合があります。このステップをスキップしないでください、しかし魅力的です。それはあなたに将来多くの時間を節約することができます。

タイムライン

Webサイトを完成させるために必要な作業のタイムラインを作成することを強くお勧めしますが、必須ではありません。タイムライン内のマイルストーンは、空白のページから完成したWebサイトに到達するために必要なプロセスを明確にするのに役立ち、最初にプロジェクトを正確に見積もるのに役立ちます。大規模なサイトの場合、マイルストーンのあるタイムラインを使用すると、チームメンバー間で作業をより効率的に分割でき、全員が自分の作業（および期限！）が全体像にどのように適合するかを確認できます。

Asanaのようなツールを使用すると、このプロセスを支援するのに役立ちます。ウェブサイトの各要素を注意深くタスクに分解することで、隙間をすり抜けることがなくなり、より自信を持ってクライアントにウェブサイトの完成日を提供できるようになります。新しいWebサイトが既存のWebサイトに取って代わる場合は、古いページから新しいページへのリダイレクトなどを行う必要がある「稼働中」の移行を管理するために、時間をかけて構築することを忘れないでください。

最後に、常に約束を下回り、過剰に提供することを忘れないでください。ほとんどのプロジェクトと同様に、Webサイトは常に最初の見積もりよりも時間がかかるため、経験則として、最初の見積もりにさらに20％の時間を追加して、実行していることに気付くという古くからの罠に陥らないようにすることをお勧めします。最初から時間が足りない（したがって、締め切りに間に合わない可能性が高い）。

サイトマップ

設計プロセスの次のステップは、サイトマップを作成することです。あなたのサイトが小さい場合でも、それを持っているのはいいことです。サイトマップは、新しいサイトのレイアウトを完全に視覚化するのに役立つだけでなく（したがって、重要なものを見逃したり、混乱を招くナビゲーション構造を持たないようにする）、最終的には、サイトが公開されたときにGoogleがサイトをクロールするのに役立ちます。 SEO。

デザイナーの中には、お気に入りのイラストツールを使用してサイトマップをスケッチすることを喜んでいる人もいますが、WriteMapsなどの専用のサイトマップツールを使用して作業を楽にすることもできます。

ワイヤーフレーム、モックアップ、プロトタイプ

ウィキペディアでは、ウェブサイトのワイヤーフレームを「ウェブサイトの骨格フレームワークを表すビジュアルガイド」と定義しています。ウェブサイトのワイヤーフレームを作成することは、サイトのレイアウトを明確にするのに役立つため、通常、ウェブサイトを設計する際の最初のステップです。ワイヤーフレームは、提案されたデザインのより具体的な視覚化を提供するため、クライアントやチームと新しいサイトについて話し合うときに使用する優れたツールでもありますが、重要なことに、ページの実際のモックアップよりもはるかに迅速に作成できます。これにより、利害関係者は、サイトに何時間も沈む前に設計を批評することができます。

モックアップは、ワイヤーフレームを次のレベルに引き上げます。一部の設計者は、ワイヤーフレームの少し肉付けされたバージョン（おそらくグレースケールに固執する）であるサイトの「ベアボーン」モックアップを作成することを選択する場合がありますが、他の設計者は、画像、色、さらには一部の機能を含む完全なモックアップを作成することを選択します。モックアップをどこまでプッシュするかは、提案するデザインにどれだけ自信があるかによって異なります。クライアントがサイトデザインのかなりの部分を変更したいと思う場合は、提案されたデザイン/機能を伝えるために必要なだけモックアップをシンプルに保つことが明らかに理にかなっています。

あなたとあなたのクライアントがデザインに自信を持ったら、ページまたはウェブサイト全体のデザインを完全に示す完全なモックアップを作成できます。

モックアッププロセスを大幅に高速化できるオンラインツールは多数あります。これらには、MockflowとMoqupsが含まれ、どちらもワイヤーフレームから完全なWebサイトモックアップまで移動できます。

モックアップではWebサイトの機能を完全に伝えることができなくても、サイトのデザインに関しては、あなた、あなたのチーム、およびクライアントがすべて100％同じページにいることが保証されます。そして、生計を立てるためにサイトをコーディングする私たちの誰もが知っているように、モックアップでサイトのデザインを変更することは、最終的なサイト自体よりもはるかに簡単です！

あなたが取りたいかもしれない最後のステップは、プロトタイプのウェブサイトを構築することです。従来、これには時間がかかりました（そして、最終的なサイト自体を構築するのとほとんど同じです）。ただし、Framerなどのツールのおかげで、モックアップデザインに機能要素を導入することで、モックアップを次のレベルに引き上げることがこれまでになく簡単になり、クライアントはサイトの動作を実際に「感じる」ことができます。

このセクションの最後の注意として、選択が多すぎると悪いことになる可能性があることを覚えておく価値があります。最終的に、クライアントが何を言おうと、あなたはデザインの専門家であり、チームと協力して、Webサイトのデザインで最適な結果をもたらすものを最もよく理解する可能性があります。このため、クライアントが選択できるさまざまなオプションを提供することで、最も効果的で混乱しないように、色とレイアウトを提示する方がよい場合があります。これにより、クライアントが、組み合わせて互換性がない可能性のある要素から「選択して選択」することを回避できます。少ないほうが間違いなく多い場合があります！

素晴らしいコンテンツを書く

ウェブサイトのデザインがどんなに優れていても、サイトのコピーが目的のメッセージを伝えていなければ、最終的には意味がありません。このため、最初からプロジェクトにコピーライターを関与させることは優れた方法です。彼らは本当に読者を引き付けるコンテンツを作成するのを助けることができます、そしてあなたはそれからこれが最適な方法でサイトに置かれることを確実にするために彼らと協力することができます。

たとえば、コピーライターは、製品/サービスを1つの文で伝える素晴らしいタグラインを思い付く場合があります。これは明らかに重要な情報ですが、プロジェクトの最終段階でコピーライターのみを関与させる場合、このテキストを表示するのに適した場所でデザインしなかったことがわかる場合があります。明らかにそれは大きな間違いでしょう。

コピーライティングは、ウェブサイトで見過ごされがちな要素です。私たちは皆、視覚的な魅力に夢中になりますが、コピーは、誰も好意を持たない「最後の最後」の追加になる可能性があります。

コピーライターを最初から関与させるもう1つの理由は（疑問がある場合）、サイトがSEOの観点から最適化されていることを確認することです。コピーはウェブサイトのSEOを作成または破壊する可能性があるため、それが重要でないと思われる場合は、もう一度考えてみてください。キーワードとキーフレーズを正しい方法で使用することにより、検索エンジンがSERPでより高い優先順位を与える可能性が高くなります。 Googleキーワードプランナー、スクリーミングフロッグのSEOスパイダー、Googleトレンドなど、SEOの改善に役立つ優れたツールがいくつかあります。

そして、あなたがコピーライターを雇う贅沢を持っておらず、「一人で行く」ことを考えているなら、あなたはあなたの人生を楽にすることができるいくつかの執筆リソースとツールをチェックしたいかもしれません。一見の価値がある最初のツールは、使いやすいライティングアシスタントであるGrammarlyです。 Grammarlyは、タイプミスを回避し、テキストのフォーマット方法を（言語学の観点から）改善して、コピーを可能な限り読みやすくするのに役立ちます。

2つ目は、ツールではなく、Storybrandと呼ばれるマーケティングリソースです。 Storybrandは、「メッセージを明確にする」のに役立つワークショップを実行します。そうすることで、明確で明確な言葉であなたのビジネスについて伝えるメッセージを後押しすることによって、あなたのウェブサイトの成功を急上昇させることが可能です。彼らのワークショップが高すぎる場合は、彼らのマーケティングフレームワークに関する本をチェックしてください。

ビジュアル

ウェブサイトの訪問者の頭に浮かぶ可能性が高い最初のものは、ウェブサイトのビジュアルです！したがって、これらは非常に重要であるとは言えません。

デザイナーとして、使用したいビジュアルの種類について具体的な考えを持っていることは間違いありません。これらは、アニメーションの描画から、製品の写真やブランドとその製品を表す写真まで多岐にわたります。使用するものが何であれ、これらのビジュアルが高品質であることを確認してください。そうしないと、他のすべての努力が無駄になります。

ビジュアルは、競合他社との差別化を図ることができる重要な領域です。この機会を無駄にしないでください！プロジェクトを見積もり、承認する前に、使用するビジュアルについてクライアントと話し合ってください。彼らがあなたが使用できる社内の画像ライブラリを持っているかどうか、あるいはおそらく彼らが必要な画像を取得するために写真撮影をすることを計画しているかどうかを調べてください。そうではなく、適切な品質の画像が手元にない場合は、Shutterstockなどの写真ライブラリから妥当な「一般的な」画像を見つけることができますか？

最後に、開発段階では、これらの画像のサイズに注意を払い、サイトの速度が低下しないように最適化されていることを確認してください。 TinyPNGのようなツールを使用する価値は十分にあります。あるいは、ホストがPressidiumで使用しているImageSmackingツールなどの同等のサービスを提供する場合もあります。

レイアウトが完成したら、書かれた適切な画像をコピーして、エキサイティングなマイルストーンに到達しました…開発！これが何を伴うのか、そして注意すべきいくつかの落とし穴を見てみましょう。

発達

自分でビルドを処理しているのでない限り、開発者が自分のことを実行できるように、サイトのデザインを開発者に出荷するときが来ます。デザインが明確になり、必要な追加機能の説明も明確になると、開発者は視覚化したサイトを簡単に提供できるようになります。これは、Framerのようなツールを使用して作成されたプロトタイプサイトが実際に独自のものになる可能性がある場所です。

ビルド中に、多くの開発者は、クライアントに渡すことができる開発リンクを提供して、ビルドがどのように行われるかをプレビューできるようにします。一見すると、これは良いアイデアのように見えます。作業が進行中であることを示すことができるのは常に素晴らしいことです（特に、クライアントがサイトを完成させるためのプレッシャーをかけている場合）。多くの開発者は、作業が進行中であることをクライアントに示すために、いくつかの開発リンクを作成する傾向があります。

これをやりたくなった場合は、一時停止して、これが本当に良いアイデアかどうかを検討してください。ほとんどのクライアントは、開発者が従うワークフローを理解しておらず、任意の数のクエリに加えて、おそらく変更要求でさえもあなたに戻ってくる可能性があります。この段階でこれらに対処しなければならないことは逆効果であり、リアルタイムの樹液になる可能性があるため、最終的なサイトの準備が整うまで待ってから、完全に実行することをお勧めします。

品質テスト

最終的なサイトの準備ができたら、稼働を検討する前にいくつかのチェックを実行します。これらはかなり広範囲に及ぶ可能性があり、見逃しがないことを確認するためにチェックマークを付けることができる再利用可能なチェックリストを作成する価値があります。（順不同で）確認したいことのいくつかは次のとおりです。

HTMLとCSSの検証： W3CHTMLバリデーターやCSSバリデーターなどのツールを使用してHTMLとCSSを検証します。 W3Cは、Webサイトを他の言語に簡単に翻訳できるかどうかを確認するのに役立つ国際化チェッカーも提供します。
リンク：このステップでは、すべての内部リンクと外部リンクが正しく機能していることを確認することが不可欠です。
文法とスペル：うまくいけば、コピーライターから提供されたドキュメントからテキストがコピーされて貼り付けられています。これで問題ありません。それでも、スリップアップが発生する可能性があるため、再読み取りすることは時間の価値があります。
フォーム：これらの作業を期待どおりに確認すると、提出物が届きます。サイトが稼働したらこれらのフォームを再テストし、その後、おそらく月単位で、将来のテストをスケジュールするようにクライアントに指示することをお勧めします。
読み込み時間：高速なウェブサイトは必須です。 WebPageTest、GTMetrix、PageSpeed Insights、Pingdomなどのツールを使用して、読み込み時間が適切で高速であることを確認できます。サイトがライブサーバーとして使用されない開発サーバーでホストされている場合は、サイトがライブになったときに再テストする必要があります。
モバイル応答性： Webサイトがすべての種類のデバイスで正しく表示されることを確認してください。これを行うには、BrowserStackなどのツールを使用できます。
機能性：お問い合わせフォームなどを超えてサイトにさらに高度な機能がある場合は、これらの機能を注意深くテストする必要があります。たとえば、WooCommerceサイトを立ち上げる場合、テストプロセスは、パンフレットスタイルのWebサイトよりも集中的に行う必要があります。例としてWooCommerceを使用して、支払いゲートウェイ、カート機能、プロモーションコードなどの機能などをテストします。テストテストしてもう一度テストしてください！
ビジュアルチェック：カラーパレットと間隔、マージン、パディングなどの一貫性を確認します。タイポグラフィと画像の配置、解像度、最適化についても同じことが言えます。
ブラウザの動作：次のリストは、複数のブラウザとデバイスにわたるWebサイトの動作をチェックすることです。
SEO： SEOをもう一度確認してください！これには、見出し、段落、リスト、使用している可能性のあるその他の種類のタグ、メタタイトルと説明、ソーシャルメディアのOpen Graph設定など、セマンティック構造のすべての要素が含まれます。

サイトが期待どおりに機能し、期待どおりに表示されていることに満足したら、立ち上げの準備ができていると思うかもしれません。実際には、プロジェクトに関与していない5人ほどの人にサイトのテストを依頼することをお勧めします。理想的には、これらのユーザーはあなたよりも「技術志向」ではないでしょう。あなたは新鮮な目が何を拾うことができるかに驚かれることでしょう。これを行うことで、立ち上げ後の「実際の」顧客の問題を回避し、サイトの流れをさらに改善する機会を得ることができます。

発売

これです！理想的には、トラフィック量が少ない可能性が高い時間帯にサイトを立ち上げます。 CloudflareのようなDNSプロバイダーを使用すると、DNSキャッシュの問題を回避するのに役立ちます。また、開発者が手元にいるときに起動して、問題が発生した場合に開発者が介入して支援できるようにすることもお勧めします。

これでライブになりました。サイトの再確認に時間をかけ、不具合が見つかっても心配しないでください。何かが亀裂から落ちるのを避けることはほとんど不可能ですが、うまくいけば、徹底的なチェックリストを使用することで、ほとんどの主要なアイテムが期待どおりに機能することを確認できます。

結論

良いウェブサイトをデザインすることは大規模な仕事であり、目の前の仕事に少し気が遠くなるような気がしやすいものです。仕事を管理しやすいチャンクに分割し、行き詰まる前に計画を立てることで、プロセスをより成功させるだけでなく、楽しいものにすることができます。

幸運を！