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


[読了時間: 2分]

screenshot_280

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

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

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

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

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


 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は、とにかく直感的に作れるのがすごい。作り込みは後からでもいいわけで、それよりも頭に描いていることを具現化したり、技術を目に見えるようにすることの方が優先事項。ただ、もちろん、デザインは多元的でとても重要なもの。「これで全部できるじゃん」と思い込んでしまうと、ユーザー目線を失う危険もある。製品化して公開する場合、デザイナーもしくは、その筋の経験者とともにブラッシュアップするのを忘れずに。
著者プロフィール:TechWave副編集長・イマジニア 増田(maskin)真樹
 夢を叶える技術者。8才でプログラマ、12才で起業。18才でライター。道具としてIT/ネットを追求し、日米のIT/ネットをあれこれ見つつ、生み伝えることを生業として今ここに。1990年代はソフト/ハード開発&マーケティング→週刊アスキーなど多数のIT関連媒体で雑誌ライターとして疾走後、シリコンバレーで証券情報サービスベンチャーの起業に参画。帰国後、ネットエイジ等で複数のスタートアップに関与。関心空間、@cosme、ニフティやソニーなどのブログ&SNS国内展開に広く関与。坂本龍一氏などが参加するプロジェクトのブログ立ち上げなどを主導。 Rick Smolanの24hours in CyberSpaceの数少ない日本人被写体として現MITメディアラボ所長 伊藤穣一氏らと出演。活動タグは創出・スタートアップマーケティング・音楽・表現・ミディアム・子ども・グローカル・共感 (現在、書籍「共感資本主義」執筆中)。

メール maskin(at)metamix.com | 書籍情報・ 詳しいプロフィールはこちら


About maskin

1990年代初頭からソフトからハードまで50以上のスタートアップ立ち上げを国内外で経験。平行して雑誌ライターとして疾走。シリコンバレーでガレージベンチャーに参画後は、国内でネットエイジを筆頭にスタートアップに多数関与。ブログやSNSの国内啓蒙、ソニーの社内イノベーション事業など関与。通信キャリアのニュースポータルの立ち上げ期の編集デスクとして数億PV事業に育てた後、TechWaveにジョイン。世界最大のグローバルIT系メディアであるスペインの「Softonic」の元日本編集長を経て現在に至る。
https://valu.is/maski