【UI/UXデザインプロセス】 第7回 プロトタイプを作成する

● ワイヤフレーム

紙と鉛筆を使ってワイヤフレームを作成します。

上の画像にあるように、詳細な文章を書かずに、おおまかなつくりだけを書きます。そうすることにより、手間をかけずに何度も書き換えることができます。文章を横棒、画像をバツ印で省略します。ボタンの文字のような重要な部分だけ文字を記述します。

● プロトタイプ

ワイヤフレームが固まったなら、より詳細にデザインしていきます。この段階で Figma や Adobe Xd 等のデザインツールを使います。上の写真では Figma が使われています。