SE ブログ

【無料ツールあり】Webシステム開発のワイヤーフレーム作り方ガイド

 

悩んでいる人
ワイヤーフレームってどうやって作るの?おすすめのツールは?作り方を教えてほしい!

 

こんなお悩みを解決します。

 

本記事の内容

  • ワイヤーフレームとは
  • ワイヤーフレームの作り方
  • おすすめツール3選

 

本記事の信頼性

この記事を書いている僕は、SE歴8年、ITコンサルタント歴3年。
これまで、多数のWebシステム開発案件に携わってきました。
現在は、Web・アプリの開発やITコンサルタントとして月250万円以上を稼ぎながら暮らしています。

 

Webサイトやスマホアプリの開発では、要件定義から設計にかけて、ワイヤーフレームを作成する場面も多いと思います。

本記事では、初心者にも分かるよう、ワイヤーフレームの作り方を紹介していきます。


ワイヤーフレームとは

 

ワイヤーフレームは画面のレイアウトを決める設計図です。

画面の枠(フレーム)を決めて、ボタンや画像を配置し、見た目で分かりやすく記したものになります。

主にWebサイトやスマホアプリで使われることが多いです。

ワイヤーフレームで、画面の共通部品などがしっかり決まっていれば、デザイン制作にかかる時間を大幅に短縮することができます。

 

目的

ワイヤーフレームを作る目的です。

  • たたき台
  • アイデア出し
  • 情報整理
  • 認識合わせ
  • レイアウト決め

 

いきなり、画面をコーディングし始める時間がかかってしまい、修正も大変なため、ワイヤーフレームをたたき台にして、詳細を詰めていきます。

ワイヤーフレームだと、誰でも簡単に修正できるので、作業の分担がしやすいです。

どういった画面にするか、アイデアを出しながら情報を整理し、ワイヤーフレームをブラッシュアップしていきます。

プロジェクトメンバーの認識を合わせながら、レイアウトを明確化することで、後工程のデザイン、プログラミングがスムーズに進められるようになります。

 

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

 

ワイヤーフレーム作成の流れ

  1. サイトマップを作る
  2. レイアウトを決める
  3. ワイヤーフレームを書く

 

1.サイトマップを作る

 

ワイヤーフレームを作る前に、サイトマップを作るのが一般的です。

サイトマップは、全画面の構成を表した全体マップです。

どういった画面があり、どういう遷移をするか、サイトマップを作成した上で、各画面のワイヤーフレームを作っていきます。

 

2.レイアウトを決める

 

各画面の共通部分となる、メニューやヘッダー、フッターのレイアウトを決めていきます。

レイアウトは、ユーザーの使いやすさを左右する重要なポイントです。

コンテンツの目的にあったレイアウトにしましょう。

Webサイトは、PCよりスマホのアクセス数の方が多いので、先にスマホのレイアウトを決めることが多くなっています。

 

3.ワイヤーフレームを書く

 

 

まず、レイアウトのテンプレートを作成し、それに沿って各画面のワイヤーフレームを書いていきます。

ぶっちゃけ、ワイヤーフレームにルールはありません。

目的を果たせれば、どのように書こうが自由です。

ただ、それぞれの人が自由に書いてしまうと、バラバラになってしまい、認識の齟齬が生まれたりします。

ですので、ボタンや画像の凡例を決め、それをレイアウトのテンプレートに配置するなど、各ワイヤーフレームの見た目がバラバラにならないように工夫するようにしましょう。

 

共通部分(メニュー、ヘッダー、フッターなど)は、共通部分ごとワイヤーフレームを作り、まとめておきます。

そうするこにより、各画面のワイヤーフレームに共通部分の詳細を書かなくてよくなります。

修正するときも、共通部分のワイヤーフレームだけを修正すればいいので、楽チンです。

 

ワイヤーフレームを書いてて困ったら、競合のWebサイトやスマホアプリを見てみると参考になると思います。

 

おすすめツール3選

各プロジェクトで既にツールが決まっているときは、それを使いましょう。

決まっていなければ、以下の3つで検討してみることをおすすめします。

  • PowerPoint
  • Draw.io
  • Cacoo

 

PowerPoint

PowerPointのメリットは、使い慣れている人が多いということです。

いろんな人が使えると分担できるので、工数削減につながります。

PowerPointはプレゼンテーションツールですが、テンプレートを用意し、1スライドに1画面ずつ書いていけば、きれいに書けます。

ただ、複雑なレイアウトになると編集しにくかったりするので、操作ミスで要素を消さないよう注意しましょう。

細かすぎて、どうしても1スライドに収まりきらない場合は、別スライドに切り出すなどすれば、問題なしです。

 

Draw.io

ブラウザ上で使える無料の作図ツールです。

Draw.ioサイト

図形も多く用意されているので、見栄えの良いワイヤーフレームを作ることができます。

作成したワイヤーフレームは保存もできますし、画像やPDFで出力することも可能です。

作図領域の限界がないので、細いところまで書けるのがメリットです。

デメリットは、使い慣れている人が少ないということでしょうか。

ワイヤーフレーム以外にも、フローチャートやオフィスのレイアウト図、ネットワーク図なども作成できます。

 

Cacoo

ブラウザ上で使える有料の作図ツールです。

Cacooサイト

ページ制限がありますが、無料でも使えますが、本格的に使うのであれば、有料版が必要になります。

ワイヤーフレーム作成の専用ツールのため、図形素材が豊富で、簡単なレイアウトのテンプレートも用意されています。

他のメンバーへの共有機能もついているので、有料版を使えるのであれば、おすすめのツールです。

Draw.ioと同様、使い慣れている人が少ないというデメリットがあります。

 

まとめ

Webサイト、スマホアプリ開発において、ワイヤーフレームがどこまで正確にできているかは、とても重要です。

ワイヤフレーム作成にルールはありませんが、以下の目的を果たすために、分かりやすい図を作りましょう。

  • たたき台
  • アイデア出し
  • 情報整理
  • 認識合わせ
  • レイアウト決め

 



-SE, ブログ

© 2021 もくもくブログ Powered by AFFINGER5