自分でできるデザイナーズ・サイト、Bootstrapをさらに簡単に最速でUIを構築できる「Jetstrap」は全てのウェブ制作関係者必携サービスとなるか 【増田 @maskin】

[読了時間: 2分]

　「アイディアはあるんだけど、モックすら作れないIT起業家」「“UIだけなら自分で作れる” とやってみたけど、見にくいページにしかならない、どうしよう、、、」。高度なテクニックは不要、でも、やっぱりデザイナーさんに依頼しないといけないシーンが多いこの業界。

　しかし、「Twitter Bootstrap」(以下 bootstrap)の登場により、多くの人がデザイン性の高いページデザインを短期間で作れるようになり世界は変わった。bootstrapは、プログラマーやディレクターなどが、最低限のコードの組み合わせでスッキリと解りやすいユーザーインターフェイス(UI)を構築できるライブラリ(支援プログラム群)のこと。

　Bootstrapの登場で、スタートアップはスピーディにページを作りあげ、プログラマーは必要なページを “とりあえず” 作っておくくらいのことをするのが手軽になった。ただ、bootstrapはあくまでHTML&CSSコーディング支援をするもの。最低限、HTMLやCSSの構造を理解していないと使えない。

　そこで登場したのが、bootstrap連携のサービス「Jetstrap」だ。画面のように、必要なボタンや文字要素などをドラッグ&ドロップするだけでデザインが完成する。ウェブデザインソフトウェのような感覚で、あっという間に整然としたUIを作ることができるのだ。

機能を実現するだけなら必要充分

kobo Touch （ブラック） 価格：7,980円（税込、送料込） 楽天ブックスで詳細を見る

　Bootstrapは、ボタンやメニュー、テキスト、画像などの要素を見やすく配置できるようにする “仕組み” がルール化されたもの。様々な連携&支援サービスがあり、デザイナーが使用する高度なツールを使用しなくても、一定の完成度を保つページを構築することができる。

　あくまでHTML&CSSの範囲で適用されるため、グラフィック&画像については別途制作しなければいけないが、例えばアイコンをフォントファイルで表現する「Font Awesome」など使用することで、画像制作の多くをデザイナーいらずで処理することが可能だ。

　もちろん、できないことも多く、プロダクトとして世に出す場合はデザイナーの力が必要になるが、機能提供型ウェブサイトなどの場合であれば、Bootstrapだけで事足りてしまうケースがほとんどだ。

「Jetstrap」はスマホ・タブレット・PCにも対応

　「Jetstrap」の最大の魅力は、完成までHTML&CSSコードを見なくてもいい点。テンプレートも用意されており、そこにメニューを追加したり、テキストボックスを置いたりするだけで、最後にCSS/HTMLタブボタンからコードをダウンロードして、本サイトに適用すればいい。もちろん、CSS/HTMLともに自分で手を加えながらの作業も可能だ。

　また、右上のアイコンをクリックするだけで、スマホ・タブレット・PCで見た場合のビューに切り替えながら作業をすることもできる。デザインは複数保存しておくこともできるのが便利。

　実際に作業をしてみると、ベーシックな会社案内的サイトのUIなら、テンプレートを駆使してものの数分で出来きてしまう。これなら、HTML/CSSの知識が無い人でも「こんな感じ」くらいのことなら作れてしまうだろう。

【関連URL】
・Jetstrap – The Bootstrap Interface Builder
http://jetstrap.com/
・Twitter Bootstrap
http://twitter.github.com/bootstrap/

蛇足：僕はこう思ったッス
IT業界はとにかく人材不足。テストサイトとかモックアップくらいなら起業家やディレクター、エンジニアがささっと作ってしまうくらいのスピード感が大切。Jetstrapは、とにかく直感的に作れるのがすごい。作り込みは後からでもいいわけで、それよりも頭に描いていることを具現化したり、技術を目に見えるようにすることの方が優先事項。ただ、もちろん、デザインは多元的でとても重要なもの。「これで全部できるじゃん」と思い込んでしまうと、ユーザー目線を失う危険もある。製品化して公開する場合、デザイナーもしくは、その筋の経験者とともにブラッシュアップするのを忘れずに。