ノーコーディングで簡単! Bootstrap を使った UI を最速で構築できるウェブサービス [ Jetstrap ] 使ってみました~。

ノーコーディングで簡単に Bootstrap を使った UI を構築できるウェブサービス [ Jetstrap ] 使ってみました~。

jetstrap-01

Jetstrap – The Bootstrap Interface Builder

要会員登録。有料サービスだが、基本的な機能は無料で使えます。

Jetstrap の利用開始手順 ———————————————————————-

jetstrap-01

Jetstrap のサイトを開いて、[ Log in ] をクリック。

jetstrap-02

▲ 今回は、Twitter アカウントを使ってログインするので、[ I signed up with Twitter ] をクリック。

jetstrap-03

▲ [ 連携アプリを認証 ] をクリック。この後、メールアドレスを入力します。

jetstrap-04

▲ これで、Jetstrap の準備が出来ました。

Jetstrap の使い方 ———————————————————————-

jetstrap-04

▲ 画面のプラスアイコンをクリック。

jetstrap-05

▲ プロジェクトの名称を入力し、[ Create ] をクリックします。 無料プランだと、プロジェクトが1個で、3画面まで作ることができるようです。

jetstrap-06

▲ 右下から必要なコンポーネントをドロップして編集します。

jetstrap-07

▲ 様々なデバイスでテスト出来ます。

jetstrap-08

▲ HTML ソースコードも見ることが出来ます。

jetstrap-09

▲ 完成した画面はダウンロードできます。

ダウンロードしたファイルは、そのまま、サーバにアップして利用できます。

[ 蛇足 ] 僕は、こう思いました。 ———————————————————————-

無料プランだと、プロジェクトが1個しか作れませんが、モックアップ作成と割りきって、ザクっと作り、ダウンロードして微調整するのが良いかなと思いました。

似たようなサービスに、LayoutIt! – Interface Builder for Bootstrap があります。

Bootstrap については、Bootstrap 日本語ドキュメント というサイトがありました。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です