こんにちは、学生起業家を支援しています。わでです。

今回は、ユーザーが実際に触れるプロダクトのガワだけ再現したワイヤーフレームと呼ばれるUIの作り方を紹介します。
実際のプロダクト開発にも役立つだけでなく、投資家への説明や、ユーザーヒアリング、エンジニアとのコミュニケーションにも役立つので、作ってみて損はないかと思います。
ただ、個人的にこれを作るのは凄く楽しく、こだわると無限に時間を吸われるので、ほどほどにするのがおススメです(笑)

ワイヤーフレームってなんだ？

ワイヤーフレームとは、コーディングなしで、実際のプロダクトの画面のレイアウトや遷移（どこをタップしたらどのページに行く）を表すものです。
エンジニアでない場合はフロントの言語が書けない場合でも、非常に簡単に「こういうアプリ（サイト）が作りたい！」という頭の中の構想を形にすることが出来ます。

おススメツール

アフィリ記事ではないので、簡単な紹介しかしませんが、こちらのツールはおススメです。

ペーパーモック
ツールではありませんが、一応紹介します。
その名の通り、紙に作りたいアプリやサイトのレイアウトを書き示すものです。何より無料なのと、他のどんなツールよりも自由度が高いのが特徴です。

Adobe XD
初心者からプロまで、汎用性高く使用することが出来るのがこちらのツールです。筆者もこの他に2つ程ツールを使用したことがありますが、一番操作が簡単で、ページの設計から遷移の指定まで楽に行えます。学生だと、クリエイティブクラウドが月2000円弱で使えるはずなので、アドビの他のソフトも使われる予定のある方はこちらが圧倒的におススメです。

その他
他にもUI設計のソフトは10程存在しますので、他のソフトが気になる方は、「ワイヤーフレーム　ツール」なんかで調べてみるとよいと思います。