Chrome Life

Chrome OS, Chrome Web Store などChrome関連の話題、Google+などの新しいGoogleサービス、HTML5, JavaScript, CSS3によるWebアプリ開発、ChromeBook、MacBook Air、クラウドの活用方法などを紹介

ホーム > HTML5 > BootstrapのUIがドラッグアンドドロップだけで組める!最速でウェブのユーザーインターフェースが構築できるエディタ「Jetstrap」

BootstrapのUIがドラッグアンドドロップだけで組める!最速でウェブのユーザーインターフェースが構築できるエディタ「Jetstrap」

先日、Twitter Bootstrapが2.1.1にアップデートされました。

Bootstrapが2.1になって大幅に機能も追加され、ウェブサイトを構築する上で必要なUIがほとんど揃っている感じがします。

最近では、スタートアップ系のWebサービスを作る人にとっては、Bootstrapが必要不可欠な存在になりつつあります。

とはいっても、Bootstrapに慣れていない人が、実際にページを作っていくにはコンポーネントのタグ構造やClass名を意識して作らないといけないので、少し難しい部分もあります。

Bootstrapのサイトを見ればマークアップのサンプルがあるので、それを見ながら作れば良いのですが1つ1つ確認しながら行うのも手間です。

そこで今回ご紹介するのが、BootstrapのUIをドラッグアンドドロップだけで簡単に組めるエディタ「Jetstrap」です。

Jetstrap」を使えば、Bootstrapベースのページデザインが、ブラウザ上でパーツを組み合わせていくだけで作ることができます。

Bootstrap版 Dreamweaver

のようなものです!

手軽にページデザインができるので、サイトのモックアップを作る段階などに使うと効果的です。

それでは、実際に使い方をみていきましょう。

Jetstrap」にアクセスして「Try it now」のボタンをクリックします。

Twitterアカウント、Googleアカウント、GitHubアカウントの何れかでログインします。

ログインすると、Jetstrapのエディタが開きます。
初期状態で、NavbarとHero Unitが設置されています。

Hero Unitの「Hello, World!」の部分をダブルクリックすると、テキストを編集することができます。
書体(太字、斜体、下線)やリスト、リンクのツールバーが用意されています。

Navbarの部分をクリックすると、コンポーネントの属性が編集できるダイアログが開きます。
TypeをDefaultからInverseにすると背景が黒に変更できました。

Componentsの中から追加したいコンポネントをドラッグアンドドロップで配置することができます。
Buttonをドラッグするとボタンが配置できました。

Componentsには、Bootstrapで使えるコンポーネントが全て用意されているので、簡単にタブやパンくず、フォーム、グリッド、テーブルなどを追加することができます。

Responsiveデザインの確認を行うこともできます。
上部にある4種類の解像度別ボタンをクリックすると、そのサイズで確認ができます。

PreviewをOnにすると、ボタンやリンクなどの動作を確認することができます。

CSSを編集する機能もあります。
配置したコンポーネントにIDやClass名を予め設定しておき、CSSボタンをクリックするとCSSの編集エリアが表示されるので、自由にデザインを調整することが可能です。

最後に、Exportボタンをクリックして、生成されたHTMLを確認します。
「Download .zip」ボタンを押すと、HTMLとBootstrapの一式をダウンロードすることができます。

今まで、Bootstrapのコンポーネントを覚えるのが大変だった人や、初めてBootstrapを使う人にとっては重宝するエディタだと思います。

Jetstrap」はBootstrapをうまく融合した

最速でウェブのユーザーインターフェースを構築するツール

すごく便利なので、デザイナーもプログラマーの方も是非、チェックしてみてください。

それでは、また!

【Chromeをバリバリ使っている開発者の方へ】
ChromeのWebインスペクターで表示されるソースのスタイルを変更する方法を見つけました。こちらも合わせてチェックしてみてください。
Chrome Developer Toolsのテーマを開発者好みに切り替える裏ワザ

【なかなか仕事が思うどおりに進まない方へ】
やるべきタスクが消化できずに溜まっていく一方で困っている方に、それを解消する方法とツールを紹介しています。このツールを使うことで、重要な仕事にフォーカスできるので、仕事が空回りせずに、地に足の着いた進め方ができるようになりますよ。こちらも合わせてチェックしてみてください。
一日のやるべき事に集中できる!クールなタスク管理ダッシュボード「Momentum」

デザインに関するオススメ書籍

タグ: , , , , , ,

新着記事

この記事の読者におすすめの記事

このブログを購読しませんか?

RSSリーダーを使うと、このブログの更新情報がすぐに入手できるようになります。
このブログのRSSをRSSリーダーに登録すれば、更新されるたびに記事の本文を読むことができます。

Twitterでもこのブログの更新情報や筆者が見つけた情報をつぶやいていますので、@opakenをフォローしていただけるとうれしいです。

Facebookのファンページも用意しています。こちらでも更新情報を配信しています。「いいね!」をクリックしてもらうだけで購読できます。