ワイヤーフレームとは？ワイヤーフレーム作成便利ツール紹介

ホームページ制作にあたり、聞きなれない言葉を耳にすることが増えるかと思いますが、「ワイヤーフレーム」もその一つです。

ワイヤーフレームはホームページ制作には欠かせない物であり、ホームページをデザインする設計図のようなものとなります。

ワイヤーフレームとはどのようなもので、どのように作成するのか見ていくと同時に、おすすめの作成に便利なツールも紹介していきます。

ホームページの制作の流れを理解するも重要ですので、以下の記事もご覧ください。

１．ワイヤーフレームとは

ワイヤーフレームは、英語で「線」と「骨格」を表します。

その名前の通り、ホームページを制作する際の下書きとして骨格の中に線や枠で配置を決めていく「設計図」の役割を果たします。

ホームページ内のレイアウトを決めて下書きしたもので、ワイヤーフレームを作成することで完成したホームページをイメージしやすくなります。

ワイヤーフレームを作成しておくことで、後から足りない部分や修正作業を減らすことができるので、ホームページ制作には欠かせません。

２．ワイヤーフレームを作る工程

ホームページのデザインをしていく最初の骨格部分であるワイヤーフレームですが、どのように作成するのでしょうか。

ワイヤーフレームを作成する際の工程を見ていきましょう。

①：情報の整理

まずは、決められたホームページのコンセプトや目的を元に、ホームページに掲載する情報を整理していきます。

この時は、紙とペンを使い思い付くものを書き留めておく段階です。

ページに必要であると考えられる情報を書き出し、似たような情報はグループ化して分類していきます。

分類したグループを情報の優先順位を決めて、レイアウト位置を決める時の基準を作ります。

②：レイアウトを決める

情報を整理することができたら、レイアウトを決めていきます。

レイアウトは目的や打ち出したいイメージによって変わりますし、機能性なども組み込んで考えていきます。

イメージとしては、漫画のコマ部分を作成している段階で、1ページにどれくらいどのように分割していくのか枠を書いて考えていく段階です。

ヘッダーと言われるホームページの上部にある部分で、最初に目に入る部分を枠取り、フッターというホームページの一番したにある会社概要などを記載する部分を枠取りします。

そこからホームページ内に設置するメニューとなるグローバルナビゲーションや、サイドバーを設置していきます。

③：ツールで清書する

これまでの段階が下書きとなるので、いよいよ清書をします。

手書きのままからホームページ作成に移る人もいますが、清書をしておけば便利ですし、後から修正が必要になった時にも簡単に修正作業ができます。

また、ワイヤーフレームをデータ化しておけば、テンプレートとして使用することもできます。

３．おすすめのワイヤーフレーム作成ツール

ワイヤーフレーム作成の工程を紹介しましたが、最後の段階である清書となるツールは多種多様にあります。

パワーポイントやエクセルなどでも作成は可能ですが、専用ツールを利用すれば一層スムーズに作成することができます。

①：Cacoo

リンクはこちら

図形ツールで簡単にワイヤーフレームを作成できるツールです。

アプリなどをダウンロードする必要もなく、ブラウザ上で利用ができ、しかも無料なので初心者にも嬉しいツールと言えるでしょう。

データ共有が可能なので、他の人とコラボレーション作業で効率を上げることも可能です。

②：Prott

リンクはこちら

初心者でも使いやすいツールで、簡単にワイヤーフレームを作成することができます。

パーツも豊富ですし、ジェスチャーやアニメーションの設定で本物のホームページのように画面を遷移することができるので、一層仕上がりをイメージしやすくなります。

無料で使用できますが、機能制限があります。

③：Wireframe CC

リンクはこちら

無料で使えるツールで、ドラッグで範囲を作成したり移動させる簡単操作でワイヤーフレームを作成できます。

簡単でシンプルなワイヤーフレーム作成には最適で、手書きのような感覚で作業を進められます。

ブラウザ上で保存でき、URL共有でシェアもできるため複数人での作業効率も上げられます。

４．まとめ

ワイヤーフレームはホームページ制作では必要な骨組み作りの工程であり、ワイヤーフレームをしっかりと構築することでクオリティの高いホームページを制作できます。

便利なツールを利用すれば、作業効率も上がるので利用してみてください。