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

● ワイヤフレーム

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

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

● プロトタイプ

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

--

--

アプリ開発、システム開発 https://finitefield.org

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store