AIエンジニアが一ヶ月でアプリ開発４：ワイヤーフレーム（初稿）

こんにちは、りぼっちです。

普段はAIエンジニアをしていますが、今回は個人的に一ヶ月くらいでアプリをリリースしてみたいと思い頑張っている記録です。

前回までに、ざっと機能一覧を作ってみました。一部、改修する内容もありましたが、それを元にワイヤーフレームを作ってみたいと思います。

ワイヤーフレームの作り方

はじめてワイヤーフレームを作るにあたって、主に二種類のやり方がありそう。
機能やUXなどを確認しつつ、修正することを前提にしたラフ画やスケッチを使ったもの。もう一つは、最終的な色やデザインなどのUIを作り込んで確認するときのもの。仮に前者をUXワイヤーフレーム、後者をUIワイヤーフレームと名付けるとして、それぞれを作る時に活用できそうなツールを少し紹介したいと思う。

UXワイヤーフレームを作るときのツール

ノートとペン

一番簡単で直感的。何も気にせず最速で作り始めることができる。ツールの使い方などを覚える必要もなく、修正も簡単に行える。デメリットとしては、人と共有しづらいことや、字が汚いと人に読んでもらうことができない。あとは色をつけるのが大変だということだと思うが。
それでも一番最初にワイヤーフレームを作り始めるのには、もっとも優れているんじゃ無いかと思う。

draw.io

直感的に使えて、よく使われる素材も豊富で共有も簡単にできる。
これだけ高機能なのに無料ってところも大きい。最終的なUIの作り込みをしようと思ったら、さすがに別のツールを使うが、UXやイメージの共有くらいなら思ってることを簡単に表現できる非常に良いツールだと思う。

PowerPoint

一応、外せないと思ったので挙げておくが、これも非常に使いやすいツールで共有も簡単に行うことが出来る。なにより普段使っている人も多いので、思ってるものが正確に表現することが出来るしアニメーションなども活用できる。
ただし、やっぱりプレゼンテーション用のツールなのでUIの素材は少ないし表現の幅もない。それでも簡単な画面デザインの共有までならお薦めのツールだと思う。

その他にも、よさげなツールは多くあるのでググってみると良いと思う。

UIフレームワークを作るためのツール

Adobe XD

なんといっても最も有名なツール。無料で多くの機能が使えて素材も多く、ネット上に使い方を紹介した動画なども多数あるので学習も容易。無料枠だとドキュメント数や容量に制限があるのが、それほど大規模なものを作るわけじゃなければ無料で十分だし、他のAdobeツールを使ってる人だとセットで使えるので便利。

Sketch

よく分からないけどメチャメチャ有名なMac専用のワイヤーフレームを作るためのツール。Webサイトやアプリなど作ることができる。サードパーティのテンプレートが豊富で、テンプレートを使うことで効率よくワイヤーフレームを作ることができるらしい。

STUDIO

日本製の良い感じのWEBツール。UIがカッコよくてコミニティもしっかりしている。まだ出来たばかりなのでネットの情報が少ないが、公式のYoutube動画解説があるから勉強は簡単だと思う。とにかくUIがカッコよくて使いやすいのでお薦め。

どっちのワイヤーフレームもできる超絶便利ツール

cacoo

高機能で共有などもできる何でもできる図形描画ツール。少人数での共同作業なら無料プランで十分使える（有料プランは３人以上だったはず）。
テンプレートも豊富で、使い方もネットに大量に転がっている。ただし昔からあるツールなだけあって古い情報も多い。

これ以外にも、moqupsやprototyper など無料でも使えるWEBツールがたくさんあるので触ってみると良いと思う。

今回のワイヤーフレームを作ってみた

ノートとペンを使って作ったワイヤーフレーム第一弾がこちら

いろいろ考えてさせられる。ページの入れ替えと、リストの削除ボタン表示を両方ともスワイプにしてしまうと被るので、どちらかを別の方法にしなければならない。
あと設定画面が途中でチカラ尽きてしまったが、本当だとちゃんと作り込んだほうが良いんだろうなぁ〜。手書きの面倒なところはコピペができないところだということが分かった。

今後の進め方

これだけだと、いろいろ破綻しそうなので、もう一段ちゃんとUIを考慮したワイヤーフレームを作ろうと思う。今のところ Adobe Xd を使って作る予定だけど、LP は STUDIO を使ってみようと思ってる。

最後に

今回、ワイヤーフレームを作ることについて調べた。最初はワイヤーフレームを自分で作るってワクワクしってたけど、実際作ってみると意外と面倒くさい。自分は、エンジニアなので直接コードを書いた方が早いんじゃない？っと思ってしまうが、チーム開発するときは必要になるんだろうなぁ〜っとはおもっった。なので共有が簡単にできるってことはツールを選定するうえで重要なんだろうとは思う。
っとはいえ、今回は一人で開発してるので、触ってみたいやつを使ってみる予定。

次回は、UI作る前にサービス名を考える！