【ディレクター育成研修レポート】 先輩が講師となり、若手に知識・スキルを伝授 Vol.5「設計(サイトマップ・ワイヤーフレーム)」
研修の目的
戦略プロデュースグループの先輩が講師となり、若手に知識・スキ物事ルを伝授。研修を通してディレクターに必要な一通りの基本スキルを習得し、一人立ちすることを一緒に目指します。
今回のテーマ
- グルーピング
- サイトマップ作成(サイトの全体構成)
- ワイヤーフレーム作成(画面設計)
目指すところ
- 簡易サイトであれば、自身でディレクション・設計が担えるようになる
- 将来、大規模サイトのディレクションも担えるよう、概念・手法を理解する
研修の概要
「サイトマップ」「ワイヤーフレーム」の完成をゴールに、ユーザーの行動を繰り返しシミュレーションしながら、企業が伝えたいメッセージが届いているか?ユーザーのニーズを満たせているか?を十分に検証し、「サイトの全体構成」「画面設計」の精度を上げていく練習を行いました。
ワークの流れ
1. 情報設計とは?
ワークに入る前に、そもそも情報設計とは何を意味し、どんなことを行うべきかを学習理解。
- 情報は、「組織化」し、「構造化」することで、はじめて意味を持つ
- 情報の組織化とは、情報を「部分集合」にまとめること
- 情報の構造化とは、情報に「意味・価値」を持たせること
2. グルーピングの練習(課題: ハウスメーカー)
「組織化」「構造化」の概念をつかむためのワーク。「企業」「ユーザー」この両方の視点に立ち、情報に「意味・価値」を持たせながらグルーピングしていきます。
3. サイトマップを作ってみる(課題: 外資系のカーディーラー)
実践に近いワーク。ユーザー導線を繰り返しシミュレーションしながら、企業が伝えたいメッセージが届いているか?ユーザーのニーズを満たせているか?を十分に検証し、サイトの全体構成(ページと導線)を設計します。
ポイント
- ユーザーシナリオを検証しながら、ナビゲーション・導線をより精緻なものへと高めていく作業
- ユーザーを、企業との最初の接点からゴールまでスムーズに導けているか、途中に課題は残っていないか、もっと良くできる施策は残っていないか、何度もシミュレーションを重ねることが大切
4. ワイヤーフレームを作ってみる(課題: 地域密着型スーパー)
実践に近いワーク。フォーカスポイントを導線から画面に移し(ただし、常に、導線と画面の両方を考える)、より詳細にユーザーの行動をシミュレーションしながら、画面を設計します。
ポイント
- まず、「エリア定義(画面のレイアウトを設計すること)」からはじめる
- 大枠を固められたら、次に、各エリアの掲載要素(画像、見出し、テキストなど)を洗い出し、配置していく
- エリアや要素を掲載する順番は、ユーザーシナリオをもとに優先順位を考え、組み立てる
受講者の感想
- 「ユーザーシナリオ」「サイトマップ」「ワイヤーフレーム」と一連の流れで構成までできたことがやりやすかった。整理しやすかったです
- 楽しくワイヤーフレームを作成できました。今後は「ユーザーシナリオ」をしっかり考えたいと思います
- 自身で定義した内容に合わせて「サイトマップ」など作成していったので、ワイヤーが作りやすいと思いました
インスタグラムをはじめました!!
https://www.instagram.com/unt_factory_official/
@unt_factory_official
「un-T sketch 〜フレッシュで未完成〜」
駆け出しメンバーが、アンティー・グループについて思い想いに描き出していくアカウント
アンティーで働く個性豊かな社員についてや、
仕事、制作、時には社内行事に対しても
情熱を注いでいる日常の様子などを
スケッチに描き出すように、思い想いに発信していきます。