Movementの執筆者、チーフエディターです。素敵なWeb体験をこよなく愛し、ユーザのために日々奮闘しています。Movementからの翻訳転載です。配信元または著者の許可を得て配信しています。Which14タイトルとURLをコピーウェブサイトのUXデザインは、各ページがどうなっているかを理解するだけでは足りません。それぞれのページがどのような流れになっているかをも理解する必要があります。ページフローを前もって考えていなければ、デザインし始めた途端に問題発生ということもあり得ます。・サイトプロセスの一定のページをデザインし忘れている・あるページをリンクするコールトゥアクション(CTA)をデザインし忘れている・あるページがサイトの階層のどこに属するかわからない・ユーザーがタスクを完了するためにどのページをナビゲートしなければならないかがわからないもし、こうした問題を1つでも経験したことがあるなら、1度はサイトやユーザーフローを作っておくべきです。すれば、こうした問題に取り組んだり、問題を回避したりするのに役立ってくれるようになります。その経験を実際に使うには、まずはどう違うのかを理解しなければなりません。サイトフローとユーザーフローは同じではないサイトフローとユーザーフローを混同しているデザイナーはたくさんいます。どちらもページフローの説明になりますが、視点と目的が異なります。サイトフローは、言ってみれば地図を見ているようなものです。地図は全体を見ることができ、どこに行けるかの大体の方向性がわかります。して全体像が見えるため、サイトのサイズや複雑性を感じとることができます。ユーザーフローは、A地点からB地点までの道順を見るようなものです。どの道を通ってどこで曲がって、目的地までにどのくらいかかるのかということがわかります。いった具体的な情報は効果的に目的地に到着するのに役立ってくれます。して低い視点から見ることで、タスクの完了にどのぐらい時間がかかるか、どのぐらいの労力が必要かということを感じることができます。いつサイトフローを使うかワイヤーフレームを作る前に、サイトでどんなページが使われているかを知ることは重要です。その後、どのページがお互いにリンクされているかを知らなければなりません。することで、正しいページフローに沿ってユーザーを導くコールトゥアクションがデザインできるのです。サイトフローは、ナビゲーションの階層を明確に把握することができます。ナビゲーションの幅と奥行きがざっとわかります。ナビゲーションパスが深すぎれば、合理化してもいいですし、ナビゲーションの幅が広すぎれば、関連ページをまとめてもいいと思います。これら全てが、よりシンプルなナビゲーションのエクスペリエンスをデザインするのに役立ってくれるのです。チームの他のメンバーにとってもサイトフローはプラスとなります。ディベロッパーはコードを書き加える際にどのページがリンクし合ってるかを知る必要がありますが、サイトフローがあれば、間違ったリンクやリンク忘れを防いでくれます。サイトフローはまた、特定のページでどんなマイクロインタラクションが行われるのかをディベロッパーに知ってもらうのに効果的な方法でもあります。マイクロインタラクションは大量のコードや機能性と関係していることも多く、サイトフローがあれば、それらを前もって計画し、必要に応じた方法を見つけやすくなります。いつユーザーフローを使うか全てのタスクがわかりやすいパスになっているとは限りません。複雑に入り組んでいるものもあります。いったページフローはより複雑で、徹底的に検証する必要があります。ユーザーフローはこういったタスクの有効性を分析するのにぴったりです。パスワードを忘れてリセットする場合、ただページをクリックしていくだけではすみません。ユーザーはまずパスワードのエラーを認識し、必要事項を入力して、それからメールをチェックしなければなりません。ユーザーフローを使うと、タスク全ての面を検証してくれるので素早く簡単に分析ができます。ユーザーフローはシステムが、ユーザーの行動にどう応じているかをディベロッパーが理解するのにも役立ちます。エラーが生じた時は、システムがユーザーに応答してアクションを起こすようになっていなければなりません。ディベロッパーはユーザーフロー上のインタラクション全ての詳細を見ることができます。素早いフロー作成のためのツールキットフローを作成するのにあまりにも時間をかけすぎてはいけません。フローはデザインを始めるのに役立てるものであって、デザイン自体を遅らせるものではないのです。フローパターンのようなツールキットが必要になります。フローパターンは既に設計された様々なフローページがあり、アレンジやカスタマイズができます。マイクロインタラクション、マーカー、コールアウトなどがついていて、素早くフロー作成ができます。フローは皆のためフローはデザイナーだけが見るためのものではありません。チームの全員でサイトのビジョンを分かち合うものです。全員が地図を手にしていれば、行き先についてもっと安心していられます。ユーザーにとってもフローはプラスに働きます。時間をかけて計画を練り上げているため、ナビゲーションもページフローのエクスペリエンスもより良いものとなるからです。サイトフローとユーザーフローは構造上の面でUXに影響します。デザインプロセスの必須部分とすれば、皆にとってプラスになるのです。MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。