こんにちは。YMOでーす。
今月、嫁が誕生日なんですが、先日「今月は誕生日”月間”だから宜しく！」と嫁から言われました。何を宜しくしたらいいのかよく分かりませんが、とりえあえず今日は節分（原稿執筆時は2/2でした）なので恵方巻でも買って帰り、嫁の反応をうかがってみようかと思います。
さて本題ですが、私はWebサイト構築やスマホアプリ開発のディレクションをやったりするんですが、その中で画面設計をしたりします。
最近チームメンバーに画面設計を依頼したり、クライアントに画面設計を説明したりしていると、画面設計についてちゃんと考えたことって無いなーって思ったので纏めてみることにしました。
Webサイトの画面設計とは？
Webサイト構築の工程では、要件定義、画面設計、デザイン、コーディング、開発、試験などがあって、画面設計は要件定義とデザインの間にある工程です。
要件定義とは、クライントの要求をヒアリングして課題を解決するための策を整理して提案・定義する工程で、プロジェクトのゴールや開発する機能と画面、その他プロジェクトを進めるにあたり必要なことを漏れなく決める、プロジェクトの基盤となる大切な工程です。
画面設計は要件定義で決定した内容をもとに、制作する画面を具体的にかいていきます。
プロジェクトの目的を達成できるよう、クライアントが伝えたい内容をユーザに伝え、実行（購入、申し込み、認知など）してもらえるように、画面に配置する内容や動きを設計します。
デザインは画面設計をもとに行いますので、画面設計が確定できていない、または議論されていな場合は、デザイン作成後に画面要素やレイアウト変更が発生して、デザインの作り直しなどが往々にしてありますので、デザインは画面設計が確定してから進めるようにスケジューリングしましょう。
画面設計の流れ
画面設計の役割と目的が分かったので、次は実際にどのように設計を進めるかを考えてみましょう。
進め方は人によって、案件によって変わりますが、私の進め方を纏めますので参考までに留めてください。
[コンテンツ]
まずは画面設計で１番重要なコンテンツを考えます。
クライアントからヒアリングした情報をもとに、コンテンツを魅力的にユーザに伝えるための構成・ストーリーを考えて情報を整理します。
[エリア定義]
ヘッダー、フッター、ナビ、ボトム、コンテンツなど、サイトの目的にあわせ大枠の領域を決めます。
[構成要素]
エリア定義ができたら各エリアの構成を考えます。
コンテンツエリアでは下記の要素を適切に構成して、ユーザに情報が伝わるようにします。
- 見出し
- 本文
- リスト
- 表組
- 画像
- リンク
- ボタンなど
部品の最小単位でコンポネート（モジュール）化をしておけば、デザインやコーディングのテンプレートができますので、工数の削減およびルールが統一されトンマナが揃いやすくなりますので、画面設計の段階でもコンポネート化をしておきましょう。
[機能]
リンクやボタン、メニュー開閉など、ユーザが操作してアクションする部品になります。
ページ遷移やメニュー移動、画面切り替えなどになりますので、ユーザが閲覧したい情報に迷わず進めるようにユーザの動きを考えて設定する必要があります。
まとめ
作り方は人それぞれですが、クライアントが何を打ち出したいのしっかりヒアリングを行い、ユーザに何を伝え、どう実行してほしいのかを理解し、ユーザ目線で設計したら、どうにかなるんじゃないでしょうか。
以上、画面設計について考えてみました、ありがとうございました。