ワイヤーフレームとは？

ワイヤーフレームとは、Webページの設計図のことです。家を建てる前に設計図を書くように、Webページを作る前にも、ページの構成やボタンクリック後の遷移先などについて、ワイヤーフレーム上で整理します。アプリ開発では、この設計図をもとに、HTMLやCSSを使って、画面をデザインしていきます。また、成果物でのワイヤーフレームは作り込みすぎる必要はなく、画面上のどこにどの要素を置くかがわかる程度で問題ありません。
　

draw.ioを使ってワイヤーフレームを書く

今回は、記事一覧画面と詳細画面のワイヤーフレームを作成してみます。ワイヤーフレームを書くツールは沢山ありますが、今回はdraw.ioを使用します。

①ファイル→新規作成をクリックします。

②ワイヤーフレームからテンプレートを選択します。
どれを選んでも良いですが、今回は２段目左のテンプレートを使用します。

③以下のような画面になるので、不要な要素を削除し、構成を整えましょう。

④ページ名の変更方法
ページ→名前を変更から、ページの名前を変更します。

⑤遷移先の設定方法
作成したいページをすべて作成したら、タイトルから記事詳細画面に遷移したいので、タイトル部分にリンクを挿入します。"title1”を選択した状態で、画面上部のメニューバーから＋→「リンクを挿入」をクリックします。

続いて、リンク編集画面から、遷移先を「title1の詳細画面」に設定します。

リンクが挿入されると、タイトル部分が青文字に変化します。

title1をクリックすると「title1の詳細画面」に遷移します。

draw.ioの共有方法

draw.ioファイルを共有する際の方法を説明します。（Googleの他サービスのファイルを共有する手順と変わりません。）
①画面右上にある、オレンジの「共有」ボタンを押します。

②以下の画面で、アクセス権限を「リンクを知っている全員」にします。

③次に、以下の画面で、権限を「編集者」に設定します。

④「リンクをコピー」からURLを取得できます。

最後に

成果物のワイヤーフレームでは、要素を画面のどこに置けば良いか分かるかが重要なので、このような簡素なもので問題ありません。
作成したワイヤーフレームをもとにviewをデザインしていきましょう！