実際の設計プロセス。 ビジネス指向のWebサイトを作成する方法に関する段階的なストーリー

何千もの記事がデザインについて書かれており、多くのウェビナーが記録されていますが、初心者の専門家は同じ合理的な質問に関心があります。 この資料では、実際の例を使用して、ビジネス上の問題を解決することを目的とした設計プロジェクトを作成するために実行する必要があるアクションをステップごとに示します。

現在、私はロジスティクスの分野でスタートアップの開発に携わっており、最近では（毎週のリリースのテストに加えて）私の主な仕事は企業のWebサイトを作成することでした。 トピックから遠くに行かないように、私は輸送部門、あるいはプレミアムタクシーサービスの場所を選択します。

設計プロセス

インターネット上で可能な設計プロセスには多くのバリエーションがあります。そのため、私はクラシックバージョンに焦点を当てます。

1. タスクへの没入
2. リサーチ
3. スクリプトを考える
4. フレームワークの作成
5. 視覚スタイル検索
6. レイアウト設計

開始する前に、設計プロセスは厳密な一連のアクションではないことに注意してください。 前のステージに数回戻る必要があるか、いくつかのステージが互いに混ざり合うことさえあります。

説明されたプロセスに導かれますが、人質にならないでください。

1）タスクへの没頭またはビジネスの収益化

最初に行うことは、クライアントのビジネスが収益を上げる方法を把握することです。 タクシーは各交通機関で手数料を稼ぐため、ユーザーが注文を作成するように設計する必要があります。

すぐに、サイトの最初の画面にタクシーの注文フォームを置くというアイデアを得ました。 これにより、このサイトは情報ポータルだけでなく、本格的なサービスにもなります。

ご覧のように、顧客のビジネスを把握しようとすると、アイデアが思い浮かびます。 すぐに修正してください。さもないと忘れてしまいます。 サイトの構造を検討するとき、それらはあなたにとって非常に役立ちます。 現在のプロジェクトでは、Confluenceを使用しています。 小さなプロジェクトの場合、Apple Notesなどを選択します。

しかし、ちょっと待ってください。 サイトからタクシーを頻繁に注文しますか？ おそらく、オンラインタクシーの注文ではなく、アプリケーションのダウンロードに集中する必要がありますか？ うーん、いい質問です。 アイデアをメモに入れて、ビジネスの勉強を続けましょう。

ビジネスを理解する最善の方法は、顧客に連絡することです。 多くの時間を節約することに加えて、クライアントを作業プロセスに関与させることができ、最終的な結果は瞬間的なインスピレーションの結果ではなく、適切な視覚スタイルとビジネスロジックの組み合わせであることを示します。

ステージの要約：

顧客のビジネスがどのように収益を得ているか、ユーザーをどのような主要なアクションに導くべきかを明確に理解する必要があります。 私たちの場合、タスクはサイト訪問者を説得してアプリケーションをダウンロードすることです。

2）競合他社の調査と分析

この段階は、競合他社の調査から始めてから、メカニズムが類似するサービスをそれに接続するのが最も簡単です。

タクシーを注文する仕組みについて考えてみましょう。 まず、ある場所から別の場所に移動したい人がいます。 次に、このタスクを完了する準備ができているドライバーがいます。 同様のロジックで機能するサービスは何ですか？

AirBnBでは、1人が家を借りたいと思っており、もう1人は家を借りる準備ができていると思います。 または、顧客が何らかの作業を行う必要があるUpWorkなどのフリーランスのリソースで、そのためには請負業者が必要です。



そしてもちろん、直接の競合他社のサイト、Gett、Yandex.Taxi、CityMobil、InDriver、そしてもちろんWheelyを調べる必要があります。

これらのサイトを見るとき、同様の異なる詳細に注意してください。 たとえば、WheelyはSMSを電話番号に送信することにより、外出先でアプリケーションをダウンロードすることを提案し、Yandex.Taxiはサイトから直接注文することを提案します。

2番目のプロジェクトで続けて出会うもう1つの詳細があります。 先ほど言ったように、2種類のユーザーがいます-乗客と運転手です。 両方の役割は、異なるチャネルを経由するため、個別のページが必要です。 この場合、誰がメインページを提供する必要がありますか？ それとも、1つのブリーダーを作る価値がありますか？

人気のあるサービスを分析した後、詳細に気付きました。 同様の仕組みを持つほとんどすべての企業は、お金を払うユーザーにメインページを提供します。

つまり、AirBnBには旅行者向けの主な機能があり、住宅所有者のページはメニューに隠されています（ゲストはサービス料を支払います）。 Qlean、Wheely、UpWork、および他の多くのサービスは同じ戦略を使用しているため、私たちのプロジェクトでは、それについて詳しく説明します。 つまり、（サービスを支払う）乗客のメインページを提供し、メニューに「ドライバーになる」ページを追加します。

この段階で、競合他社のサイトを使用しているエンティティを調査し始めます。そのため、調査の最後に、ビジネスのタイプに最適な構造を選択します。 Wheely Webサイトのエンティティは次のとおりです。アプリケーションのダウンロード、運転手、自動車、保険、アプリケーションのダウンロード、レビュー。

この方法で複数のサイトを分析したら、顧客の分野をよりよく理解し、プロジェクトに適したエンティティを選択し始めます。

たとえば、新車に関するストーリーはプレミアムセグメントに適していますが、エコノミークラスを提供するサービスは、有利な価格に焦点を当てて、車の品質について沈黙を保つのに適しています。 ビジネスクラスのタクシーでは、価格はそれほど重要ではないため、公然と表示されるべきではありません。 あなたのサービスが億万長者によって使われるとき、有利な価格がどれほど奇妙に見えるか想像してみてください。

ステージの要約：

5つ以上の同様のサービスを分析し、競合他社が使用しているエンティティを書き留めました。 理想的には、各サービスの重要なシナリオに目を通し、良いアイデアを困難なアイデアから分離する必要があります。

3）シナリオを検討するか、カスタマージャーニーマップを作成する

デザイナーは、画面ではなくスクリプトの観点から考える必要があります。 画面の数は問題ではなく、サービスを使用して問題を解決するのがユーザーにとってどれだけ便利であるかが重要です。
論理的には、1つの画面内ですべてを行う方が便利なようですが、設計者は長いフォームをいくつかのステップに分割する方が良いことを知っています。 設計には基本的なルールはありません;すべては常にタスクに依存します。

私の実践では、カスタマージャーニーマップを使用してシナリオを考えます。 デザインタイムズのテレグラムチャンネルで彼の作品の本質をすでに説明しました：

CJMはテーブルであり、その垂直（列）は、ユーザーが目標に到達するために必要なステップです。 たとえば、航空会社のウェブサイトでチケットを購入する場合、テーブルの列は次のようになります。ウェブサイト、フォームへの記入（どこから、どこで、誰から、いつ）、適切なフライトの検索、詳細の表示、支払い

水平（線）は次のとおりです。

ユーザーの目標
この場合、ユーザーの目標はグローバルな目標（チケットの購入）ではなく、この段階でのローカルな目標です。たとえば、フォームに記入するか、適切なフライトを選択します。

キーアクション
目標に基づいて、キーアクションを決定できます。 フォームに入力する段階で、選択したパラメーターのフライトのリストに移動します。

気分
ここでは、各段階でユーザーが感じることを判断し、不満や混乱を避けるようにする必要があります。 連続したいくつかの段階が否定的な感情に陥った場合、ユーザーはサービスの使用を継続しない可能性があります。

考えられる問題
慎重に検討する必要がある非常に重要なステップ。 これには、インターフェイスの不注意や誤解によるエラーが含まれる場合があります。

解決策
この段階は、前の段階と密接に関連しています。 各問題について、1〜2個の解決策を見つける必要があります。 通常、考えられる問題を特定した後、解決策が明らかになります。 これが、CJMがインターフェースの設計に大いに役立つ理由です。

多くの人々は、経験のみがプロジェクトの成功を決定すると考えているため、プロセスの重要性を過小評価しています。 CJMを使用すると、よく考え抜かれた一連のアクションにより、経験不足を最小限に抑えることができます。

CJMの作成には時間がかかりますが、これも設計であることに注意してください。 おそらくこれは、グラフィックエディターで行うことよりもさらに設計が進んでいる可能性があります。

最後の部分は非常に重要です。 初心者のデザイナーは常に分析段階を無視し、すぐに描き始めます。 最初は同じことをしましたが、説明したプロセスを使い始めた後、私のプロジェクトはもっと思慮深くなりました。

この場合、シナリオは小規模（Webサイト→アプリケーション）になりますが、その場合でもユーザーに問題がある可能性があります。

たとえば、あなたのサービスに自信を示さないかもしれません（レビュー、保証を追加しますか？）、サイトの外観はプレミアムに見えません（視覚スタイルを変更しますか？）、SMSコードは来ません（再送信、オンラインサポートを追加しますか？）、...

ステージの要約：

ユーザーのやり方でどのような問題が発生する可能性があるかを理解し、それらを回避できるいくつかの解決策を考え出す必要があります。

4）フレームワークの作成

フレームワークは、インターフェイス要素が構築される構造です。 たとえば、Gmailメールサービスには、メールの上部にある検索バー、左側のメニュー、右側の部分があります。 このような構造がフレームワークです。

ユニバーサルフレームワークがないため、デザイナーが存在します。 各サービスには独自のサービスが必要です。 もちろん、最上位の設計ルールがありますが、少し深くした後、独自のソリューションを考え出す必要があります。そうしないと、ユーザーは最適な方法で問題を解決できません。 それはあなたの手を踏むようなものです。 動きはありますが、足を使った場合はそれほど効果的ではありません。

サイトの場合、フレームワークは、調査段階で書き出されたエンティティから組み立てられた順次ブロックです。 あなたのビジネスがユニークな場合、あなたはあなた自身の何かを考え出す必要がありますが、実践が示すように、ほとんどの企業は経験を採用できるいくつかの直接的な競合他社を持っています。

***

サイトにアクセスした訪問者は何をしますか？ サービスが彼に馴染みがある場合、彼はすぐに登録またはエントリに進みます。 そうでない場合、論理的および感情的な確認を求めてメインページ全体を見るのは興味深いでしょう。 ページ全体を調べたユーザーがアプリケーションのダウンロードフォームを失うことがないように、以下に複製することをお勧めします。

WheelyのWebサイト構造を思い出してみましょう。アプリケーションのダウンロード、運転手、車、保険、アプリケーションのダウンロード、レビュー。

ご覧のとおり、ページの最初と最後で主要なアクションが繰り返されるため、すべてのブロックを確認したサイト訪問者が離れることはありません。 このルールは全員に適用されます。

サイトのメインブロックは、プロジェクトのタイプに応じて選択する必要があります。 ビジネスクラスのタクシー注文サービスでは、ステータスと従来のサービスとの違いを示す必要があります。 Wheelyは、スーツを着たドライバーの写真と雨の中で傘と会うなどの機能のリストを使用してこれを行います。 サービスに他の機能がない場合は、競合他社の構造を使用できます。 しかし、多くの場合、直接の競合他社は、強調する必要のある機能を備えています。

あなたのサービスは女性ドライバーのみを雇うとしましょう。 この場合、写真を使用してそれを表示し、少女のドライバーが最良の選択肢である理由を説明する必要があります（通常、顧客はコンテンツを提供します）。

このようなサービスは、有名人のレビューや人気メディアの出版物へのリンクによって妨げられることはありません。 これにより信頼が高まります。これはインターネット時代において非常に重要です。

明確にするために、アプリケーションのスクリーンショットとその主な機能の説明でブロックを示します。 彼が注視されることを期待しないでください、しかし、彼の存在は自信を高めます。

必要なサイト構造を決定するには、競合他社が使用するすべてのエンティティを書き出して、ビジネスに最適なエンティティを選択し、タスクに合わせてわずかに変換すれば十分です。

特定の分野でコンピテンシーを取得したので、新たに毎回このステージを通過する必要がなく、定期的に関連性を維持しながら成果を使用することができます。 だからこそ、デザイナーやスタジオがあらゆる分野に特化することは有益です。

ステージの要約：

使用するエンティティ（ブロック）とその順序を理解する必要があります。 紙またはテキスト文書にスケッチの形で枠を付けるとよいでしょう。

5）視覚スタイル検索

この段階については別の資料を書きましたが、その主なアイデアは次のとおりです。

理解すべき主なことは、視覚的なスタイルがブランドメッセージと一致する必要があるということです。 これが作業の主な基準です。 スタイルは、ファッショナブルで、退屈で、未来的でも、他のスタイルでもかまいませんが、まったく重要ではありません。 彼が必要な感情を目覚めさせることだけが重要です。

ビジネスクラスのタクシーサービスのウェブサイトはどのような感情を呼び起こすべきですか？ 彼が高レベルの品質とプレミアムサービスを示すべきであることは論理的です。 これを実現するにはいくつかの方法があります。

最初は色です。 プレミアムブランドを見ると、主に黒または金の色が使われています。 これはドグマではありません。特に、主な競合他社であるウィリーはすでに黒を使用しているためです。 したがって、目立つためには、他の何かを選択する必要があります。 たとえば、追加の色（金、黄色？）を追加するか、メインの色として赤を選択します。 予想外の解決策ですが、うまくいくかもしれません。 たとえば、ビジネスクラスのサービスを提供しているにもかかわらず、ヴァージンアトランティック航空は赤を使用しています。

2番目は画像です。 サイトに入ると、すぐにアクションが表示されます-黒いメルセデスのドアを開けると、サイトは必要な感情への訪問者を誘導します。



3番目はインフォグラフィックです。 ときどき、デザイナーは自分がどのような視覚的なメッセージを運ぶかを考えずに、最初に出会ったアイコンを取り上げます。 Googleが提供するカスタマイズオプションの種類をご覧ください。 そこで、アイコンのスタイルをカスタマイズし、最適なものを選択できます。 flaticon.comでさまざまなスタイルを表示できます。 実験できる主なパラメーターは、色またはb / w、塗りつぶしまたは等高線、丸みを帯びているかどうかです。

ステージの要約：

プロジェクトで使用するメッセージを決定し、色、画像スタイル、アイコン（またはアイコンなし）およびフォントを選択する必要があります。

6）レイアウト設計

構造と視覚スタイルを決定したら、画面の設計に進むことができます。 特にシンプルなサイトに関しては、言えることはほとんどありません。 あなたのアイデアを現実に移すだけです。

大規模なサービスで作業している場合は、メインスクリプトの一部である画面から開始する必要があります。 その上で、スタイル、構造を考え出し、顧客への最初のプレゼンテーションを行うことができます。 サイトの場合は、メインページから開始してスタイルを作成し、他のページに拡大する必要があります。

通常、私はサイトの最初のドラフトを手作業で行い、構造を決定した後にのみグラフィックエディターにアクセスします（もう半年前からfigmaに参加しています）。 1〜2画面を撮影した後、一時停止し、欠陥を見つけようとします。 したがって、フッターに進み、その後、サイトを改善するためにいくつかの反復を行うことができます。

ステージの要約：

必要なレイアウトの設計は準備が整っており、何度も改善を繰り返しています。

***

この記事では、単純な設計プロジェクトを作成するプロセスを示しました。 初心者のデザイナーは、テンプレートをテンプレートとして安全に使用し、ニーズや好みに合わせて変更できます。

記述されたプロセスは、食料品店ではわずかに異なるため、顧客の作業に最適です。

結論の代わりに

理解すべき主なことは、実践に取って代わる資料はないということです。 仕事で得た知識を適用し始めるだけで、進歩を期待できます。

彼らは皆ゼロから始め、年々スキルを向上させました。 これは非常に簡単ですが、同時に、あらゆる分野で重要な結果を達成するための基本的なことです。

あなたのキャリアを戦略的に見て、毎日の仕事があなたの職業上の目標を達成するための新しいステップになるようにしてください。