【画面遷移図のススメ】失敗しないウェブサイトの作り方

今の時代、あらゆるビジネスやサービスでウェブサイトを用意することは、ほぼスタンダードになっています。ウェブサイトを作りたくても何から始めたら良いかわからないという場合、ぜひウェブサイトにどのような機能を求めるのか、画面遷移図をつくるところから始めてみてください。初めて画面遷移図をつくるという人でも簡単にできる方法を、お伝えします。

そもそも画面遷移図はどうゆうもの？

「画面遷移図」という名前からも想像ができる通り、ウェブサイトやアプリなどのユーザーが目にする画面の構造を可視化し、動作の流れを含めて図解したものを意味します。画面遷移図をつくる時の注意事項は、誰が見てもわかるようにするため、動作の流れは左から右へと統一することや、画面の名前をわかりやすいように「商品リスト」や「マイページ」など、名称を明確にしておくこと、そして画面内の階層構造をわかりやすく表記するなどがあります。これらをゼロから行うとどのように書くべきか難しいと感じるはずです。そこで、Miroのようなオンラインホワイトボードツールが無料で提供している画面遷移図テンプレートを活用することで、簡単に作成を行うことができます。お手本となる画面遷移図を見ながら、自分が理想とするサイト構造を組み立てていくことが可能です。

画面遷移図を書いてみよう

画面遷移図テンプレートを活用して、実際に画面遷移図を書いてみましょう。作りたいサービスの概要が固まってきた段階で、サービスを体験してもらうためのウェブサイトの構成を考えるために画面遷移図を活用します。まずは、必要なウェブページを書き出していきます。そして、ユーザーがこのボタンを押すとどのページに遷移するのか、という導線を具体的にイメージしていくことで、全てのページをもれなく洗い出すことができます。画面遷移図を構築していくときは、ユーザー視点が非常に重要です。実際にユーザーだと使いづらいと感じないか、ここで離脱したくならないか、など正直な感想を、ぜひ画面遷移図にコメントとして残してみましょう。

チームで共有してみんなの視点を反映しよう

ユーザー視点が重要だという話をしましたが、より多くの気付きを反映させるためには、チームメンバーと協力して画面遷移図をブラッシュアップしていくことが重要です。Miroの画面遷移図テンプレートは、複数人が同時にオンラインで編集ができ、リアルタイムで変更内容が反映されます。そのため、打ち合わせをしながら共同作業を進めたり、後に確認した人が気になるところにコメントを残すなど、チーム間での連携を効率的に行うことができます。

失敗しないウェブサイトを作成するには設計が肝心

ウェブサイトを作成する際、まずはデザインをどのような風につくるかなど、見た目の華やかなところに意識が向きやすいですが、デザインの前に重要なことは、ウェブサイトの設計です。ウェブサイト内でユーザーにどのようなアクションをとってほしいのかということを明確に持ち、画面遷移図を活用してサイト構造を設計することで、きちんと機能するウェブサイトを作成することができるのです。新しくウェブサイトをつくる際には、ぜひ画面遷移図の作成から始めてみてはいかがでしょうか？

Oshita Takumi

「不治の思想家。食品愛好家。微妙に魅力的なアルコール学者。ポップカルチャーの擁護者。」