ITエンジニアのキャリア相談サイト > フリーランス大学 > コラム > Web制作やアプリ開発が捗る!無料で使えちゃう8つのワイヤーフレーム

2017-02-28

Web制作やアプリ開発が捗る!無料で使えちゃう8つのワイヤーフレーム

01


ワイヤーフレームはWeb制作現場では必ず使われるものです。紙にそのままイメージを描いたり、ドローソフトを使って書いたり、さまざまな方法でフレームワークを作りこんでいると思います。

ところで、最近ワイヤーフレーム作成専用のツールが次々とリリースされていることをご存知でしょうか。高度なスキルを必要とせず、感覚的に素早くさまざまなワイヤーフレームを作成できる専用ツールの存在はWeb制作業務の効率化にも貢献しています。

そこで今回は無料で手軽に使えるワイヤーフレーム作成ツールをご紹介いたします。

ワイヤーフレームを使えばWeb制作やアプリ開発が捗る

そもそもワイヤーフレームは何のために作成するのでしょうか?

ワイヤーフレームは、Webページのレイアウト見本のようなものです。このワイヤーフレームを作成することで、これから創り上げるWebページのレイアウトが「見える化」します。つまり、ワイヤーフレームを作成することで、クライアントとWeb制作者側とでどのようなページを作るかの認識を共有し、意思疎通を図ることが可能になるのです。

そして、ワイヤーフレームツールを選ぶ際にポイントとなるのは、「個人」で作るか「チーム」で作るかという点になります。それぞれの作業に対応したツールを選択することで、作業効率を上げることができるでしょう。

無料で使えるワイヤーフレーム

さて、ワイヤーフレームを作成する際、ワイヤーフレーム作成ツールを利用すると整ったワイヤーフレームを簡単に作ることができます。多くのツールは感覚的な操作で進めることができ、ブラウザ上で利用できるもの、あるいは簡単なインストールで利用できるものが大半です。

以下、無料で使えるワイヤーフレーム作成ツールのなかから操作性に優れたおすすめのツールをピックアップしてみました。

1. POP

5-1
公式サイト

POPは、手書きで作成したワイヤーフレームを手持ちのスマートフォンで撮影することにより、ワイヤーフレームデータとして取り込むことができるツールです。

ページ遷移も簡単なクリックで設定することができ、iPhoneなどのスマートフォン向けWebサイト制作にはベストマッチしているといえるでしょう。

2. Wireframe.cc

5-2
公式サイト

Wireframe.ccはブラウザ上で動くワイヤーフレーム作成ツールです。方眼紙状になった画面の上にさまざまなオブジェクトを配置したり、ドラッグアンドドロップで移動させたりすることができます。

特にマニュアルを見なくても直感的に操作できる点が大きな特徴です。インターフェイスは英語ですが、理解できなくても操作に支障は生じない作りになっています。

3. Justinmind Prototyper

5-3
公式サイト

Justinmind Prototyperはローカル環境にダウンロードして利用するタイプのワイヤーフレーム作成ツールです。インストールしてしまえばネットに接続せずとも利用できる点が特徴となっています。

必要なオブジェクトを選択しドラッグアンドドロップで画面に配置をしてワイヤーフレームを作成する方式をとっており、ボタンやアイコンのデザインもあらかじめ多くのバリエーションが用意されています。

4. Moqups

5-4
公式サイト

Moqupsはブラウザ上で利用できるワイヤーフレームツールです。こちらもインターフェイスは英語のみであり、随所に説明があるため英語を理解できないとやや操作に苦労することにあるでしょう。

ただ、一通り操作して慣れてしまえば大丈夫です。無料登録すると完成したワイヤーフレームをPDFやPNGで出力が可能となります。特に面倒な会員登録を必要とせず、誰もがすべての機能を利用できる点もポイントです。

5. MockFlow

5-5
公式サイト

無料で会員登録し、ブラウザ上で利用するワイヤーフレームツールです。豊富なUIコンポーネントが特徴であり、デザイン性に優れたワイヤーフレームを作ることができます。

また、チーム作業用にチャットルームも用意されています。無料版で十分ですが、有料版になると5アカウントでチーム作業を行えたり、プロジェクトを複数保存できたり、ストレージの割り当てが増加する機能がついており、便利です。

6. Cacoo

5-6
公式サイト

ワイヤーフレーム専門ではありませんが、Google Drive、Visioなどの他サービスとの連携が図れ、複数メンバーでの作業に向いているのがこのCacooです。

最大の特徴は日本語インターフェイスであることで、英語が苦手なメンバーがチーム内にいる際には重宝します。なお、無料版の場合、アウトプットはPNG形式のみですのでご注意ください。

7. Pencil Project

5-7
公式サイト

こちらもローカル環境にインストールして利用するタイプのワイヤーフレームツールです。いくつかのデザインテンプレートが用意されており、PowerPointに近い操作感となっているためそれほど戸惑うことなく使用することができるでしょう。

また、PNGやPDFを含む複数の出力形式でエクスポートできる点もうれしいですね。

8. mockingbird

5-8
公式サイト

Mockingbirdは非常にシンプルなワイヤーフレームツールです。ブラウザ上で動作するツールであり、操作は基本的にドラッグアンドドロップになります。

また、スタート段階からオブジェクトが配置されているため、それを感覚的に移動させるだけでワイヤーフレームを作ることができます。チェックボックスやSNS連携ボタンなどの追加オブジェクトも左メニューから選んで配置することができるため、作業の効率化に役立ちます。

おわりに

ここでご紹介したワイヤーフレームツールは使い勝手を中心にピックアップしたものです。無料で利用した際には機能が限定されているものもありますが、どれもワイヤーフレームを作るための必要最低限の機能は備わっています。

なかには、実際のWebページ遷移などの動きを確認できるツールや制作メンバーとの共有機能がついているツールもあり、作業効率を上げるにはうってつけです。こういったワイヤーフレームツールに一度慣れてしまうと、もうめんどくさい手書きには戻れませんね。


カテゴリー

このサイトについて

ITエンジニア専門のキャリア相談コミュニティ【FUTURIZM】が運営するIT・Web業界で活躍するエンジニアのための情報サイトです。日々の開発に役立つ技術情報からキャリア、ガジェットまで、エンジニアに役立つ記事を発信中。求人案件/仕事情報を探しているフリーエンジニアの方はこちらへどうぞ。

人気の記事

最新記事

運営会社