デザイナーやコーダーがいなくても、BootstrapベースのかっこいいWebページが驚くほど簡単に作成できてしまう -Assembly

デザインやHTML, CSSの知識は不要。Bootstrap 3ベースのかっこいい縦長ページや複数ページのサイトが簡単に作成でき、デザイナーやコーダーがいなくても、そしてデザインやコードが分かる人には今までの作業がぐっと楽になるオンラインサービスを紹介します。

サンプルを元にカスタマイズしてもよし、ヘッダやコンテンツなど100種類以上のコンポーネントからクリック一つでぽんぽんページのレイアウトが完成してしまいます。

サイトのキャプチャ

Assembly

Assemblyは無料で利用でき、一部のコンポーネントとHTML化が有料($17)です。
$17は2016年2月現在、1,900円なので、フル機能でこの値段は有りですね。

まずは、Assemblyでどんなページができるか見てみましょう。

サイトのキャプチャ

縦長スクロールのページで、ヘッダは大きい写真画像、コンテンツが数パターンあり、フッタがデザインされています。コマ数を落としているので分からないと思いますが、随所にスクロールのエフェクトも仕込まれています。

実際のページは、下記から確認できます。
対応ブラウザは、IE9+ですべてのモダンブラウザに対応しています。

サイトのキャプチャ

デモ: Agency

右上の「Demo Page」からは、他にもたくさんのデモを見ることができます。

ページの設計もしっかりしています。
グリッドやエレメントなど、コンポーネント単位で統一して作られているので、組み合わせて使用することができます。

サイトのキャプチャ

グリッド

フォームやアコーディオンなども、用意されています。

サイトのキャプチャ

エレメント

各コンポーネントのコードも確認することができます。
ごく普通のコードで、そのまま使ってもよし、カスタマイズしてもよしです。

サイトのキャプチャ

コード: ヘッダ

サイトのキャプチャ

コード: コンテンツ

サイトのキャプチャ

コード: フッタ

Assemblyをはじめてみよう

Assemblyを試してみました。
トップページの右から「Assembly: Builder」のアクセスします。

サイトのキャプチャ

Assembly: Builder

左サイドにツール類が配置されており、一番上からヘッダやコンテンツやフッタを簡単に配置できます。

サイトのキャプチャ

コンポーネント パネル

さまざまなコンポーネントが用意されています。

サイトのキャプチャ

コンポーネントの一部

コンポーネントは、クリックで簡単に配置できます。

サイトのキャプチャ

ヘッダを配置

続いて、コンテンツを配置してみます。

サイトのキャプチャ

コンテンツを配置

配置したコンポーネントを削除する時は、各コンポーネントの右上「Delete」です。

サイトのキャプチャ

コンポーネントの削除

デザインのカスタマイズは、左ツールの3番目「Designer Mode」です。

サイトのキャプチャ

デザインのカスタマイズ

「Designer Mode」でタブを変更すると、アニメーションを設定できます。

サイトのキャプチャ

アニメーションのカスタマイズ

左ツールの2番目はページの管理です。

サイトのキャプチャ

トップページに設定

完成したページは、左ツールの4番目「Download」からダウンロードできます(有料)。

サイトのキャプチャ

ページのダウンロード

top of page

©2016 coliss