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

• About
• Latest Posts

maskin

Editor In Chief at TechWave.jp

1990年代初頭から記者としてまた起業家としてITスタートアップ業界のハードウェアからソフトウェアの事業創出に関わる。シリコンバレーやEU等でのスタートアップを経験。日本ではネットエイジ等に所属、大手企業の新規事業創出に協力。ブログやSNS、LINEなどの誕生から普及成長までを最前線で見てきた生き字引として注目される。通信キャリアのニュースポータルの創業デスクとして数億PV事業に。世界最大IT系メディア（スペイン）の元日本編集長、World Innovation Lab(WiL)などを経て、現在、スタートアップ支援側の取り組みに注力中。

Latest posts by maskin (see all)

• 「ソラコム」がスイングバイIPOを実現、東証グロース市場上場承認 - 2024-02-22
• （更新）結果速報 LAUNCHPAD SEED#IVS2023 #IVS #IVS @IVS_Official - 2023-03-09
• 「始動 Next Innovator 2022」締め切りは9月5日（月）正午ー経産省・JETRO主催のイノベーター育成プログラム #始動2022 - 2022-09-01

[読了時間: 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は、とにかく直感的に作れるのがすごい。作り込みは後からでもいいわけで、それよりも頭に描いていることを具現化したり、技術を目に見えるようにすることの方が優先事項。ただ、もちろん、デザインは多元的でとても重要なもの。「これで全部できるじゃん」と思い込んでしまうと、ユーザー目線を失う危険もある。製品化して公開する場合、デザイナーもしくは、その筋の経験者とともにブラッシュアップするのを忘れずに。