ワイヤーフレームの作成手順を一から調べて実践してみた（要件設計編）
この記事を読むことで
この記事を読むことで
ワイヤーフレームとは何なのか？
ワイヤーフレームを作成するメリット
具体的なワイヤーフレームの作り方（要件設計まで）
を学ぶことができます
ワイヤーフレームとは？
UI設計の中でペルソナ設定の次に行うのがこのワイヤーフレームの作成です
ワイヤーフレームとは、Webサイトやアプリケーションの設計・開発において使用されるデザイン設計図のことです。
ページや画面のレイアウトを示すもので、各要素の配置や構造を視覚的に表現します。
なぜワイヤーフレームを作成する必要があるのか
ワイヤーフレームを作成することで次のようなメリットがあります
情報設計の明確化
Webページやアプリの情報をどのように配置するかを視覚的に示せるので、必要な情報や機能が漏れなく含まれているかを確認し、優先順位を整理することができます
コミュニケーションの円滑化
デザイナー、開発者、クライアント間での認識を共有しやすくなります。
これにより、プロジェクトの目的や要件に対する理解のズレを防ぎ、効率的にプロジェクトを進めることができます
プロトタイプの基盤
プロトタイプ（目的の動作が実行できるか、デザインが希望通りかを確認するための試作品）を作成するための基盤として機能します。
プロトタイプを作成することで、ユーザーが実際にインターフェースを操作する際の体験をシミュレーションでき、ユーザビリティの評価や改善に役立ちます
デザインの方向性の確認
デザインの大まかな方向性を早期に確認することができ、デザインの修正や改善を行うための指標にできます
ワイヤーフレームの作成手順
ワイヤーフレームの作成は下記の手順で進めていきます
目的と要件の明確化
レイアウトの設計
画面遷移の設計
ツールの選定と作成
レビューと改善
目的と要件の明確化
プロジェクトの目的やユーザーのニーズを明確にし、どのような機能や情報が必要かをリストアップします。
ユーザーリサーチやUIリサーチの結果をもとに、必要な要素を洗い出します
レイアウトの設計
ページの構造やコンテンツの配置を視覚的に表現するために、各要素の位置やサイズを決定し、ページの全体的なレイアウトを設計します。
色は使わず、シンプルな線や枠で表現します
画面遷移の設計
どのようにページ間を移動するか、またはどのように機能を利用するかを示す画面遷移図を作成します。
これにより、ユーザーの操作フローを明確にします
ツールの選定と作成
Adobe XD、Figma、Sketchなど、どのデジタルツールを使用か検討します。
決まり次第、作成を進めていきます
具体例
ここからは実際に手を動かして具体例を示していきます
（記事のボリュームが大きくなるため、今回は要件設計までを記載します）
また、こちらの記事で作成したサービス内容、ペルソナを参考に進めていきます
サービス概要
ToB向けの動画教育システム
ペルソナ
名前: 田中 太郎
年齢: 45歳
職業: 製造業の人事部マネージャー
業界: 製造業
勤務地: 東京都
使用デバイス: デスクトップPC、スマートフォン
職務内容: 新人や若手に向けた研修の企画・運営、現場作業員のスキルアップに関する企画・運営
課題に感じていること: 新人教育のにかかる人的コストを削減したい、若手のオンボーディングに用いられているベテラン社員の教育コストを削減したい、新人の早期戦力化を進めたい
目的の明確化
効率的な作業方法の伝達
動画を活用して、正しい作業方法をわかりやすく伝えることで、紙のマニュアルに依存しない教育を提供する
業務負担の軽減
ベテラン社員に業務が集中する状況を改善し、教育にかかる負担を軽減する
教育コストの削減
新人教育の人的コストを削減し、効率的なオンボーディングプロセスを実現する
新人の早期戦力化
新人が迅速に必要なスキルを習得し、早期に戦力化できるようにする
要件の明確化
ユーザーフレンドリーなインターフェース
現場、デスクワーク双方の利用を考慮し、PCとスマートフォンの両方で使いやすいUIとする
動画コンテンツの管理と配信
アップロード、管理、配信を簡単にできるUIとする
アクセス制御とユーザー管理
ユーザーごとにアクセス権を設定し、必要なコンテンツにのみアクセスできるようにする
コメント機能
改善点を見つけるためのコメント機能を提供する
サービスに必要な画面の洗い出し
上記の目的に沿ったサービスに必要な画面を考えました
youtubeや競合サービスになりそうなtebikiというコンテンツを参考に必要な画面を検討しています
この後ユーザーストーリーや画面遷移図を作成するうえでさらにブラッシュアップしていく形になります
ダッシュボード画面
概要表示: ユーザーの進捗状況や最近のアクティビティを表示。
ナビゲーションメニュー: 各機能へのアクセスを容易にするためのメニュー。
動画ライブラリ画面
動画一覧: アップロード済みの動画をサムネイル付きで一覧表示。
検索・フィルタ機能: 動画をキーワードやカテゴリで検索・フィルタリングする機能。
動画詳細画面
動画再生: 動画の視聴ができるプレーヤー。
メタ情報表示: 動画のタイトル、説明、作成日、関連資料などの表示。
コメント・フィードバック機能: 動画に対するコメントやフィードバックを残せる機能。
動画管理画面
動画アップロード: 新しい動画をアップロードするためのインターフェース。
編集機能: 動画の情報を編集する機能（タイトル、説明、カテゴリなど）。
削除機能: 不要な動画を削除する機能。
ユーザー管理画面
ユーザー一覧: 登録されているユーザーの一覧表示。
ユーザー詳細: 各ユーザーの詳細情報（名前、役職、アクセス権限など）。
ユーザー追加・編集: 新規ユーザーの追加や、既存ユーザーの情報編集。
アクセス権限設定: ユーザーごとのアクセス権限を設定する機能。
ログイン画面
認証機能: ユーザーがシステムにログインするための画面。
パスワードリセット: パスワードを忘れた場合のリセット機能。
設定画面
プロフィール設定: ユーザー自身の情報を編集する機能。
通知設定: システムからの通知のオン/オフを設定する機能。
今記事のまとめ
目的と要件を明確にしたのちに、他サービスなどを参考に必要な画面、機能を洗い出しました
次回以降の記事で
ユーザーストーリーの定義
画面遷移図の作成
ワイヤーフレームの作成
と進めていければと思います
参考サイト
この記事が気に入ったらサポートをしてみませんか？