初心者でも使える6つ厳選！無料でワイヤーフレームを作成できるツール
無料で使える「ワイヤーフレーム作成ツール」を6つ紹介する記事です。初心者でも簡単に使えるツールだけピックアップしています。手書きやIllustratorなどで作るよりも、効率的にWebサイトの設計ができるので便利です。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
ワイヤーフレームとはWebサイトのデザインの設計図で、サイトのどこに何を配置するかをイメージしたものです。モックアップとも呼ばれます。最近ではWebサイトだけでなく、スマートフォン用のサイトやアプリの開発の際も利用されます。
手書きで書いたり、Illustratorなどを使っても作成可能ですが、ワイヤーフレーム作成ツールを使って効率的に作成する方法もあります。
今回は、初めて使う人でも簡単に利用できるおすすめの無料ツールを7つ紹介するので、気になったものから使ってみてください。
なお、モックアップを作成できるツールの記事も用意しているので合わせてご覧ください。
Cacoo（カクー）
日本語で利用でき、グループでチャットをしながら作業も可能な多機能サービスです。細かいチュートリアルがあるため、操作の手順をいつでも確認することができます。
また、他のユーザーが作成した画像を購入あるいは無償でダウンロードして、作成の際に使用することも可能です。
利用するには会員登録が必要ですが、メールアドレスでの登録以外にもtwitterやFacebookとの連携もできるようになっています。作成したものはPNGやPDFで出力することができます。
moqups
英語のサイトですが、web上で手軽に操作できます。
アカウント登録することでローカルからアップロードした画像をワイヤーフレーム内で利用したり、作成したものをPDFやPNG形式でダウンロードすることが可能です。
moqups利用方法
wireframe.cc
こちらも英語のサービスですが、解説ムービーがあるので初めての方でも安心です。
ドラッグで範囲作成、ツールを選択、右クリックからのメニューなど機能が多く充実したツールです。saveボタンを押すと独自のURLが割り当てられ、そこに続けて保存することが可能です。
有料版ではPNGとPDFで保存できるようになっています。
wireframe.cc利用方法
Prototyper
WindowsとMacに対応したダウンロードソフトのツールです。
フリーソフトでありながら本格的ですが、さらに高性能な有料版も存在します。フリー版ではPDF形式で保存することができるほかに、有料版ではHTMLで書き出しすることも可能です。
Prototyper利用方法
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
mockingbird
最後も英語のサービスです。左のツールボックスからドラッグ＆ドロップで簡単に操作できるのが特徴です。
ツールの内容は動画や地図の画像、RSSのアイコンなど実際によく使うものも多いためイメージがしやすくなっています。また、複数のページ構成を見ながら編集することができます。
PNG形式でダウンロードが可能です。
mockingbird利用方法
POP
スマホアプリを利用したワイヤーフレーム作成サービスです。
1ユーザー、1プロジェクトまでであれば無料で利用できます。
スマホで操作することができるため、空き時間に簡単にワイヤーフレームが作成可能です。
使用方法
手書きのワイヤーフレームを書きます。
↓
スマートフォンのPOPアプリで撮影します。
↓
アプリ側で操作します。
↓
タップすると手書きのワイヤーフレームが反応して、ページ遷移なども可能になります。
POPの使い方を説明している動画は次のとおりです。
いかがでしたか？
フリーソフトなので、ぜひ気になるものから使ってみてください！
XML形式のサイトマップを無料で作成できるツールもあるので、合わせてチェックしてみてください。
[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。ワイヤーフレームの作成方法もカリキュラムで扱っています。
| この記事を監修してくれた方
中本賢吾（なかもとけんご） 開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。 その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。 |
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
