![\"image.png](\"https://c16e-esa-io-public-files.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/15637/2020/05/28/18740/ab59b0fa-dcfd-4702-bbe1-830cf78f74f7.png\")
\n「ワイヤフレーム」とはザックリ言うと、画面上のどこに何を配置するのかを記載したもので、
\nアプリやサイトの「下書きとなるドキュメント」です。
\nこの下書きを元に、細かいグラフィックデザインを決めたり、機能を実装したりしていきます。
ワイヤフレームは専用のツールを使わなくても、エクセルやパワーポイント、もちろん紙とペンでも作ることができますが、
\n専用のツールには、ボタンやフォームのステンシル(部品のモック画像)が元からついていて、ドラッグ&ドロップだけで効率的にワイヤフレームが作れます。
\nまた、チームで議論しやすようにチャットやコメント機能がついていたりします。
今回は、ワイヤフレーム作成ツールで定番(？)と思われるツールで、ずっと無料で使えるものを紹介したいと思います。
\n![\"wireframecc.png](\"https://c16e-esa-io-public-files.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/15637/2020/05/28/18740/84e0c1a4-ae5e-44a3-9ae6-6ff76b266cb4.png\")
\n無料のワイヤフレームツールでは、機能を絞りに絞った最もシンプルなツールです。
\n機能が少ないので、ワイヤフレーム作成に慣れていない方には、おすすめです。
ステンシルが数えるくらいしかないのも特徴です。
\nワイヤフレームレベルで細かいところまで作りこみたい場合には、物足りないですが、
\n箱を並べてレイアウトをざっくり把握できればいい場合は、最適なツールになります。
有料版にすると、PDF・PNG出力機能などが利用できるようになります。
\n\n![\"wireframepro.png](\"https://c16e-esa-io-public-files.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/15637/2020/05/28/18740/ba16ae8a-ad8c-4465-b513-97819779869b.png\")
\nずっと無料で使えるワイヤフレーム作成ツールでありながら、4ページまで無料で作れ、
\nしかも、PDFや画像出力もできてしまいます。
ステンシルの種類も非常に豊富で、MockStoreというツール内マーケットプレイスから、
\nステンシルをインポートすることもできます。
有料プランにすると、ページ数の上限が開放されます。
\n\n![\"moqups.png](\"https://c16e-esa-io-public-files.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/15637/2020/05/28/18740/9bf291e2-00b5-407a-a494-cb8c799b087c.png\")
\n無料版ではステンシルを300個配置することができます。
\n実際に試してみたところ、2ページくらいなら無料枠で収まります。
\nPDF・PNG出力も無料で使うことが出来ます。ステンシルの種類も豊富です。
\n無料版は、公開プロジェクトとなってしまう点には注意が必要です。
月額9ドルの有料版にすると、ステンシル数制限が開放されたり、非公開プロジェクトを作れるようになったりします。
\n→ Moqups
\nどれも無料で使うことができるツールなので、気になったものがあればお試し下さい。
\n"}},"pageContext":{"id":"DatoCmsPost-5142992-ja","description":"「ワイヤフレーム」とはザックリ言うと、画面上のどこに何を配置するのかを記載したもので、 アプリやサイトの「下書きとなるドキュメント」です。 この下書きを元に、細かいグラフィックデザインを決めたり、機能を実装したりしていきます。 ワイヤフレームは専用のツールを使わなくても、エクセルやパワーポイント、もちろん紙とペンでも作ることができますが、 専用のツールには、ボタンやフォームのステンシル(部品のモック画像)が元からついていて、ドラッグ&ドロップだけで効率的にワイヤフレームが作れます。 また、チームで議論しやすようにチャットやコメント機能がついていたりします。 今回は、ワイヤフレーム作成ツールで定","toc":[{"tag":"h1","depth":1,"href":"#wireframe.cc","text":"wireframe.cc","html":"wireframe.cc"},{"tag":"h1","depth":1,"href":"#MockframePro","text":"MockframePro","html":"MockframePro"},{"tag":"h1","depth":1,"href":"#Moqups","text":"Moqups","html":"Moqups"},{"tag":"h1","depth":1,"href":"#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB","text":"おわりに","html":"おわりに"}],"ogpImageUrl":"https://www.datocms-assets.com/29850/1593190022-pastedimage20200627146.png?fm=png&mark64=aHR0cHM6Ly93d3cuZGF0b2Ntcy1hc3NldHMuY29tLzI5ODUwLzE1OTMxNTQ2MzYtdHJhbnNwYXJlbnQtcGl4ZWwucG5nP3c9NDAwJmg9NjQmZml0PWNyb3AmYmxlbmQ2ND1hSFIwY0hNNkx5OTNkM2N1WkdGMGIyTnRjeTFoYzNObGRITXVZMjl0THpJNU9EVXdMekUxT1RFNE16TXlPVEF0WVhaaGRHRnlOVEV5TG1wd1p6OXRZWE5yUFdWc2JHbHdjMlVtWm0wOWNHNW5KbmM5TWpVMkptZzlNalUyJmJsZW5kLWg9NjQmYmxlbmQteD0wJmJsZW5kLXk9MCZibGVuZC1tb2RlPW5vcm1hbCZtYXJrNjQ9YUhSMGNITTZMeTloYzNObGRITXVhVzFuYVhndWJtVjBMMzUwWlhoMFAzUjRkQzFoYkdsbmJqMXRhV1JrYkdVbE1rTnNaV1owSm5SNGRDMW1iMjUwUFhOaGJuTXRjMlZ5YVdZbE1rTmliMnhrSm5SNGRDMWpiMnh2Y2oweU1qRTRNVFltZEhoME5qUTlZek5XY0dKbkpuUjRkQzF6YVhwbFBUTXdKbWc5TmpRJm1hcmsteD02NCZtYXJrLWFsaWduPW1pZGRsZSUyQ2xlZnQ&mark-align=bottom%2Cleft&mark-x=100&mark-y=496&blend64=aHR0cHM6Ly93d3cuZGF0b2Ntcy1hc3NldHMuY29tLzI5ODUwLzE1OTMxNTQ2MzYtdHJhbnNwYXJlbnQtcGl4ZWwucG5nP3c9MTIwMCZoPTYzMCZmaXQ9Y3JvcCZtYXJrNjQ9YUhSMGNITTZMeTkzZDNjdVpHRjBiMk50Y3kxaGMzTmxkSE11WTI5dEx6STVPRFV3THpFMU9UTXhOVEE1TkRBdFkzSmhablJ6YldGdUxUQXhMbkJ1WncmbWFyay1hbGlnbj10b3AlMkNjZW50ZXImbWFyay13PTI1MCZtYXJrLXk9ODAmYmxlbmQ2ND1hSFIwY0hNNkx5OWhjM05sZEhNdWFXMW5hWGd1Ym1WMEwzNTBaWGgwUDNSNGRDMWhiR2xuYmoxdGFXUmtiR1VsTWtOalpXNTBaWEltZEhoMExXWnZiblE5YzJGdWN5MXpaWEpwWmlVeVEySnZiR1FtZEhoMExYQmhaRDB4TURBbWRIaDBMV052Ykc5eVBUSXlNVGd4TmlaMGVIUTJORDAwTkVkaE5EUkhhalEwUjI4MU5GTm9OWEJoV2pRMFIyNDFUREpmTkRSSFNUUTBTMHcxWVRaaE5UVlhjVFEwUjNVME5FOTJORFJMYXpRMFQyczBORTg0TkRSUFZqUTBUM00wTkU4NE5EUlBaelZNTW1NMWIybFJORFJQUlRRMFR6ZzBORTl5U1VSUWNHZGlaeVowZUhRdGMybDZaVDAxTlNaM1BURXlNREFtYUQwMk16QSZibGVuZC1tb2RlPW5vcm1hbA&blend-mode=normal","otherPost":{"type":"author","title":"Slackで簡単に「日報」ならぬ「分報」をチームで実現する3ステップ 〜Problemが10分で解決するチャットを作ろう〜","slug":"/posts/56"}}}}