レスポンシブデザインの Webサイトを高速プロトタイピングするなら Pinegrow がオススメ！
少し前まで、高速プロトタイピング用に Prott というツールを使っていました。
これもとてもいいツールで、ノンプログラマーでもワイヤーフレームの作成機能が簡単にでき、画面のデザインや画面遷移などを気軽に確認することができます。
ただし、お値段が少し高い。ワイヤーフレームの作成機能を使おうと思うと、Pro プランが必要となり、¥3,510/月 必要となります。年間だと ¥42,120。貧乏な個人事業主にはちょっと厳しい価格です。
また、Prott で作ったワイヤーフレームは開発の初期に関係者間の意識合わせに使われますが、以降のフェーズでは参考にはされるものの、コードを流用できるようなものではないため、せっかく作ったのにもったいないな〜という意識がありました。ワイヤーフレームが、そのまま Bootstrap でできればいいんじゃないかと思うようになり、探してみたところ、Pinegrow というアプリを見つけました。
日本語の情報がほとんどないので、あまり知られていないのかなと思いましたので、紹介したいと思います。
Pinegrow とは
Bootstap のコンポーネントをドラッグ＆ドロップで配置することによって Webサイトを高速で作れる Bootstrap Builder のひとつです。最近、WordPress のテーマなども作れるようになりました。
Pinegrow Web Editor Intro - YouTube
他の Bootstrap Editor との違い
Bootstrap Editor もいろいろとあるようで、比較している記事がありました。
こちらを参考にすると以下の点で Pinegrow は優れていると言えます。
・HTML が Clean である。（逆に言うと、Bootstrap Builder はソースが汚いものが多い）
・GUI が素晴らしく、簡単。
・既存のテーマを簡単に流用、カスタマイズできる。
その他にも以下の点が優れていると思います。
・Web アプリではなく、ローカルで動作するアプリであるため、安全かつ高速で動作する。
・価格が安く、１度払うだけでよい。（$49〜）
ダウンロード＆起動方法
Pingrow のホームページで「Download for Mac, Win and Linux」をクリックします。
自分の環境に合わせて、インストーラーをダウンロードします。
私の場合は、Mac だったので、Disk Image でダウンロードされました。
ここで、「Pinegrow Web Designer」をダブルクリックすれば、Pinegrow が起動します。
使い方
起動すると次のような画面が表示されますので、「New page」をクリックします。
New page の選択画面が出ますので、テンプレートでイメージに近いものがあれば、それをそのまま使うと早いと思います。
しかしながら、せっかくなので、ここでは新機能の「Bootstrap Blocks」を使ってみたいと思います。「Bootstrap Blocks」を選択して、「index.html」のところをクリックします。
白紙の index.html が中央に表示され、左側に Bootstrap Blocksが表示されます。
Bootstrap Blocks から欲しいブロックをドラッグ＆ドロップで index.html に配置することで Webサイトができていきます。
文字については画面上で編集することもできますし・・・
直接コードを書くことも可能です。
まとめ
いかがでしたでしょうか？
操作感などは上に紹介した動画をみていただいた方がわかりやすいと思いますが、直感的なインターフェースで高速プロトタイピングすることができると思います。ただ、Pinegrow はローカルアプリなので、実際に使う場合には、Github Pages などで公開する必要があります。
美しい HTML が素早く簡単にできますので、高速プロトタイピングするなら Pinegrow はオススメです。ぜひ、一度触ってみてください。
