UI設計書とは？基本設計や作成ポイントを解説【2024年最新版】

UIとは、ユーザーインターフェースのことです。優れたUIを設計するためには、ユーザー視点が欠かせません。さらに設計書にまで落とし込むには知識が必要です。
この記事では、さまざまな分野の発注先を比較検討できる「アイミツ」が、UI設計書の目的や作成するポイントについて詳しく解説していきます。

【関連ページ】
UI設計にかかる費用・相場感のご紹介。あなたの目的別にシステム開発会社をお探しいただけます。

システム開発会社一覧
システム開発の費用・相場

UI設計書とは、画面や帳票のレイアウトをはじめとする、ユーザーが操作する機能について設計したものです。
UI設計では、解釈の仕方が異ならないように、画面のどの位置にどのパーツを配置するのをUI設計書に詳しく記載します。構築者と実際のシステム運用者は異なることも多いため、現場にあわせてUI設計書を作成することが重要です。

WebサービスやWebアプリなどのシステム開発における設計書と仕様書の違いについて解説します。設計書に記載される内容は、主にシステムが完成するまでの工程。そのため、設計書を作成するには、技術的な知識が必要です。
一方の仕様書には、システムの完成イメージなど、全体として目指すべき方向性が記載されています。受託開発を行う場合は、クライアントと受託開発企業の担当者が一緒となって仕様書を作成するのが一般的です。
設計書と仕様書の片方だけではシステムを構築できません。仕様書で全体を組み立てて、設計書に落とし込む必要があります。

UI設計は、システム開発においては基本設計の工程にあたります。開発の流れは一般的に「要件定義」「基本設計」「詳細設計」「プログラミング・構築」「単体テスト」「結合テスト」「運用テスト」「運用・保守」という順番。
現場によって呼称や工程の詳細区分けは異なりますが、基本設計はUI工程とも呼ばれます。要件定義書をもとに土台を固める非常に重要なパートです。画面デザインや遷移設計など、システムを利用するユーザーの使いやすさに大きく影響する工程だと言えます。

「自社にあった会社が見つからない」「会社選びに時間が割けない」とお悩みの方は、お気軽に「アイミツ」にお問い合わせください。数あるシステム開発会社からあなたの要望にあった会社をピックアップして無料でご紹介いたします。

UI設計書の意味や目的が理解できたところで、具体的な作成方法について確認していきましょう。ここからは、UI設計書を作成する上で、押さえるべきポイントについて詳しくご紹介します。

画面設計書（画面レイアウト）作成では、できる限りシステムの完成イメージに近づけることがポイントです。UI設計工程ではクライアントの合意を得ていたとしても、実際のシステム画面がユーザーのイメージとは異なってしまった場合、手戻りが発生する可能性があります。そのため、見た目をしっかりと作り込むことが重要。
また、画面設計書をクライアントに提案する前には、実際の開発難易度について担当者に確認しておくことも重要です。

UI設計書は、システムを運用する方のための設計書です。とくに機能面では、誤解を生まないよう、ユーザー目線で記載するのも重要なポイントです。
また、共通言語を使用し、誰が読んでもわかりやすい表現で記載することも意識しましょう。一般的にはシステムの内部処理を表現するような記述はしません。

画面レイアウトにおける、一般的な成果物の定義について解説します。重要視されているのは、画面で使用される部品と配置の設計です。部品それぞれのスタイルや、分割設定まで意識して設計する必要があります。
また、設計した画面レイアウトの各部品を操作する際の内部処理と発生タイミングについての記述も必要です。これらの定義を意識して画面レイアウトを設計していきましょう。

ここからは、画面設計書に記載する具体的な内容について詳しくご紹介します。事前に確認し、漏れのない画面設計書を作成していきましょう。

画面レイアウトの構成要素には、実際の画面デザインや操作した際の動きを具体的に記載します。レイアウト図や識別ID、ラベル、画面部品の種類、表示範囲、処理内容、操作手順などの情報が必要です。
スムーズに画面レイアウトを構築するためにも、構成要素をわかりやすく記載しなければなりません。

共通情報には、主にプロジェクト名やシステム名、工程名、ドキュメントID、ドキュメント名、作成者、作成日付、バージョン、更新者、更新日付などを記載します。画面設計書を管理するための情報です。
ここでは、画面レイアウトや画面表示に関するルールを記述しておくことがポイント。各情報を共通化することで、個別に作成する工程成果物の記述量を減少させることができます。結果として業務効率や設計品質の向上を実現することが可能です。

書誌情報は画面を管理・判別するための情報です。開発するシステムによっては複数画面を構築するため、それぞれの画面設計書を取り違えないよう、書誌情報で管理します。
書誌情報として記載すべき内容は、画面IDや画面の名称、概要です。これらの記載によって、どの画面設計書がどの画面に対応するのかを明確にできます。

一般的な画面レイアウトを構成する部品として、下記のものが挙げられます。

・テキストボックス
・リストボックス
・コンボボックス
・チェックボックス
・ラジオボタン
・登録ボタン、キャンセルボタンなどのボタン
・ラベル
・罫線
・表
・画像

画面に配置する部品は種類によって特徴が異なるため、組み合わせによって使い勝手が大きく左右される場合があります。そのため、画面設計書には部品の種類を明確化して記述することが大切です。

最後に、システム開発を外注した際にかかる費用相場をご紹介します。

システム開発の費用相場をご紹介しました。より正確な費用を知りたい方は料金シミュレーターをご利用ください。

UI設計書の内容は、端的に言えば画面レイアウトのことです。注意すべきは完成イメージの共有。事前にクライアントや開発担当者と打ち合わせを行い、実際に実現可能かどうかを確認することが重要です。

UI設計書を正確に作成できればトラブルを未然に防止できますが、システム開発の経験が豊富な外注先を探すのは非常に大変で時間もかかります。UI設計の依頼先探しでお悩みの方は、ぜひアイミツまで問い合わせください。無料で見積もりを取得することも可能です。

【相談前にまずは会社一覧を見たいという方はこちら】
システム開発会社一覧

【費用感を知りたいという方はこちら】
システム開発の費用・相場