Webデザインプロセスの8つの戒め(初心者向けおよびコードなし)
公開: 2021-11-01
構造化されたウェブサイトのデザインプロセスに従って、成功するウェブサイトを作成する方法をご覧ください。
私たちの仮説は、あなたはすでにドメイン名とホスティングプロバイダーを見つけているということです。
まだホストを選択していない場合は、パートナーのCloudwaysをお勧めします。
以下の例では、自分でWebサイトを作成する場合の手順を示しています。 Webサイトがクライアント向けの場合、プロジェクト計画、期限の設定、契約などの点で新しいステップが発生する可能性があります。 ただし、基本的には、以下に示す手順に固執する必要があります。
ここで、手順は次のとおりです。
- スコープの識別:Webサイトはどのようなニーズを満たす必要がありますか? ウェブサイトは誰と話しますか? その目標と動機はどれですか? あなたと同じ範囲とターゲットオーディエンスを持っている企業はどれですか?
- Webサイトのサイトマップの定義:ビジネスとオーディエンスが目標を達成するのに役立つWebページと機能は何ですか?
- コンテンツの作成:ウェブサイトのページのコピーを準備します。
- ビジュアルブランドの作成:Webサイトのデザインで使用するカラーパレット、フォント、グラフィックを準備します。これにより、ビジュアルアイデンティティが形成されます。
- ワイヤーフレーミング: Webページのレイアウトをスケッチします。
- ウェブサイトのデザイン:実際のウェブサイトを作成し、使用しているツールの制限に注意してください。
- テスト:リンクからフォームやボタンまで、すべてが機能することを確認します。 さまざまなブラウザやデバイスでWebサイトをテストして、正しく機能することを確認します。
- 立ち上げ:慎重に計画されたコミュニケーション戦略でライブに移行する前に、少し騒ぎましょう。
それらを一つずつ取りましょう。
ウェブサイトのデザインプロセスのステップ
1.スコープの識別
この段階で、あなたとあなたのチームは、以下のいくつかの質問に対する答えを理解する必要があります。
- 誰のためのサイトですか?
人目を引くウェブサイトには特典があるかもしれませんが、ウェブサイトの訪問者にお金や時間をコミットしてもらいたい場合は、コミットメントに十分な価値があることを彼らに納得させるために、さらに掘り下げる必要があることを意味します。 説得力を持たせるには、ターゲットオーディエンスを理解し、そのニーズ、内部および外部の動機を理解する必要があります。
この掘り起こしは、有用で誰かのニーズを解決する製品を作成する必要があることも意味します。
たとえば、私がペーパーフラワーアレンジメントを作るのが趣味で、それをさらに進めてビジネスに変えたいとしましょう。 紙の花はありますか? これらの人はどこにいますか?
まあ、私はウェディングプランナーと将来の花嫁がそのようなオプションを望むかもしれないと思うかもしれません。
しかし、私はさらに先に進まなければなりません。 すべての花嫁は私の紙の花を欲しがるのか、それともただの花嫁を欲しがるのか?
これは、いくつかの調査を経て競合他社をチェックする必要があることを意味します。 他に紙の花の商人はいますか? また、古き良きフラワーショップと競争します。 それでは、あなたの付加価値となるのはどちらですか、それとも独自の価値提案ですか?
- あなたのウェブサイトの訪問者はあなたのウェブサイトで何を見つけることを期待しますか?
私たちの例に戻ると、おそらくあなたの訪問者は、色、輸送に関する情報(紙の花が壊れやすいので、彼らはいくつかの特別な注意が必要かもしれません)などのさまざまな製品を見たいと思うでしょう。 ? たぶんあなたのクライアントは環境への影響を非常に意識していて、そのような詳細に気を配っています
誰かが花を借りることもできますか?
さて、あなたがいくつかの証言を含めるとどうなりますか? たぶん、あなたはあなたの友人の結婚式のためにいくつかのペーパーフラワーアレンジメントをデザインしました。
私がどこに向かっているのか分かりますか? あなたはウェブサイトのデザインに飛び込む前にあなたの研究をする必要があります。
- コンバージョンはどのように見えますか?
コース登録、製品の購入、ニュースレターの購読について話しているのですか?
月曜日の場合、ホームページから簡単にコンバージョンを把握できます。
主な変換は、中央の折り目の真上に配置されている「開始」の行動の呼びかけから明らかです。
もう1つのマイクロコンバージョンは会議登録です。これは、左上隅のメッセージからわかります。
もう1つのマイクロコンバージョンは、「コンタクトセールス」です。
あなたのウェブサイトはどうですか、主なコンバージョンはありますか? 二次的なものはありますか?
- カスタマージャーニーはどのように見えますか?
カスタマージャーニーマップは、訪問者がWebサイトの入り口から目的の目標に到達して離れるまでの経路を視覚的に表したものです。
カスタマージャーニーマップには、訪問したページやその順序、Webサイトの訪問者が目標を達成するために必要な手順、会社とWebサイトの訪問者とのやり取りのポイント(フォーム、チャットなど)、潜在的な摩擦点。
カスタマージャーニーは固定されていません。 仮定から始めて、途中で調整します。 Google Analyticsなどのツールを使用して、Webサイトの動作を分析し、実際の洞察に基づいて最適化を行うことができます。
2.Webサイトのサイトマップを定義する
ソース
カスタマージャーニーが明確になったので、サイトマップを作成します。 Webサイトのサイトマップは、Webサイトの情報アーキテクチャを確立するために使用され、さまざまなページ間の関係を説明します。
ExcelからFigmaまでのツールでサイトマップを作成できます。
3.コンテンツの作成
Webサイトの構造が確立されたので、次は個々のページのコンテンツを作成します。
コピーライティングに関しては、次のベストプラクティスがあります。
- 理想的なユーザーに馴染みのある言葉や概念を使用してください。
- 綿毛や専門用語を使わないでください。
- 通常の対面の出会いと同じようにコミュニケーションをとるようにしてください。 このようにして、親しみやすさを感じさせます。
- 現在形で書き、受動態を避けます。
- 常に読みやすさを確認してください。 このために、 Readableなどのツールを使用できます。
- 友人、見知らぬ人、同僚とあなたの見出しをテストします。 デビッドオギルビーが言うように:
「平均して、本文を読むよりも5倍多くの人が見出しを読みます。 あなたがあなたの見出しを書いたとき、あなたはあなたのドルから80セントを費やしました。」
これは、見出しがWebサイトで不可欠であることを意味します。
視聴者(SEO)に関連する特定のキーワードを中心にコンテンツを最適化してみてください。 Googleトレンド(無料)、 Ubersuggest (無料)、 Ahrefs (有料)などのツールを使用できます。
- AIDAコピーライティングフレームワークを活用してください。
A –注意:注目を集め、好奇心を刺激し、ブランドについてもっと知る必要があることを視聴者に納得させるコンテンツを作成します。
I –関心:訪問者に関与し続ける理由を与えます。 ここで重要なのは、問題を個人的なものにして、見込み客だけに話しかけ、他の誰にも話しかけないようにすることです。
D –欲求:これは、ホームページの訪問者に、提供物が問題/痛みの解決策をどのように提供するかを示す場所です。 ここでは、製品の機能について説明し、それらの機能がどのように生活を改善できるかに焦点を当てることができます。
A –アクション:今度は、見込み客に行動を促すときです。購入、購読、景品のダウンロード、試用の開始などです。
4.ビジュアルブランドの作成
このステップは、必ずしも4番目のステップである必要はありません。 これにより、プロセスのさらに早い段階から始めることができます。

視覚的アイデンティティとは、ブランドを取り巻く認識を形作る方法を指します。
これはそれ自体がプロセス全体です。
ここでは、次のことを行う必要があります。
- グラフィックがどのように見えるかを定義します。 図形、3Dグラフィックス、イラストを使用しますか?
ソース
- あなたのウェブサイトのタイポグラフィを定義します;
ソース
- カラーパレットを選択します。 カラーパレットからスタイルガイドに進化し、リンク、見出し、ボタン、背景などの色を設定できます。このために、 Adobeカラーホイールなどのツールを使用できます。
ソース
- あなたのブランドのストーリーを伝えるキュレート画像。
出典: https ://convertsquad.com/blog/
- ロゴをデザインする
ソース
- 物理的な資産(製品のパッケージなど)を準備します。
ソース
上記の要素のほとんどは、ムードボードを作成するために使用できます。 フォント、グラフィック、色をムードボードに集めると、Webサイト全体のムードビジョンをよりよく理解できるようになります。 あなたの全体的なトーンと声はどのようになりますか:明るいか暗いですか? フォーマルですか、それとも遊び心がありますか?
ソース
5.ワイヤーフレーミング
ソース
ワイヤーフレームは、ウェブページまたはアプリのスケッチです。 ウェブサイトの複雑さに応じて、手で描いたり、Googleドキュメント、Sketch、またはFigmaで作成したりできます。 ワイヤーフレームは、ページのコンテンツと機能をレイアウトするために使用されます。 デザイナーに、ビデオ、画像、ヘッドライン、コンテンツブロック、ボタンなどを配置する場所を指示する必要があります。ワイヤーフレームを使用すると、柔軟性が向上するため、デザインに飛び込む前にワイヤーフレームを使用することをお勧めします。 既製のウェブサイトよりもワイヤーフレームの構造を修正する方が簡単です。
6.ウェブサイトのデザイン
ソース
今、私たちはビジネスについて話している!
コンテンツ、ワイヤーフレーム、ビジュアル要素が揃ったので、作業を開始します。
タイトルで述べたように、Webサイトを作成するのにWebデザイナーやコードオタクである必要はありません。 コードなしでWebサイトを設計するのに役立つツールはたくさんあります。 それらはページビルダーと呼ばれます。
それらのほとんどは、デザインの隅々までカスタマイズし、応答性を高めることができます。
WordPressの内部では、たとえば、独自のColibriビルダーやElementorを使用できます。 WordPress以外では、WixとSquarespaceが非常に人気があります。 これらのツールは、独自のセクション、ビジュアル、およびコンテンツを追加することで強化できるテンプレートを提供できます。
ここで、デザインに特定のアニメーションやエフェクトが必要な場合は、コードを追加する必要があるかもしれません。
7.テスト
さて、あなたのコンテンツとビジュアルがアップしているとしましょう。 あなたの仕事はまだ準備ができていません。 すべてが機能することを確認するときが来ました。どこにも通じないリンク(リンク切れや404)がないこと、すべてのボタンとフォームが機能すること、ほとんどのブラウザやデバイスでWebサイトが見栄えがすることです。
さて、立ち上げの前に、あなたのウェブサイトが外部の人々によってどのように認識されているかを少しテストすることができます。 このようにして、自分の偏見にとらわれることを避けることができます。 このために、簡単なユーザー調査を行うことができます: 5秒のテスト。 これは、たとえば、ホームページを表示してから最初の5秒以内にユーザーが得る第一印象を測定するのに役立つ方法です。
8.起動
これで、起動するときに[公開]をクリックするだけで完了です。 いいえ、あなたはいくつかの話題を作り、いくつかのPRキャンペーンを開始し、ソーシャルメディアの叫び声を上げてあなたが外出していることを人々に知らせる必要があります!
そして、それはラップの人々です。 これで、Webデザインプロセスの正しい手順が完了しました。
幸せなウェブサイト構築!
この記事が好きで、WordPress Webサイトのデザイン方法について詳しく知りたい場合は、 ColibriのYoutubeチャンネルに登録して、 TwitterとFacebookでフォローしてください。