デザイナーやコーダーがいなくても、BootstrapベースのかっこいいWebページが驚くほど簡単に作成できてしまう -Assembly
Post on:2016年3月1日
デザインやHTML, CSSの知識は不要。Bootstrap 3ベースのかっこいい縦長ページや複数ページのサイトが簡単に作成でき、デザイナーやコーダーがいなくても、そしてデザインやコードが分かる人には今までの作業がぐっと楽になるオンラインサービスを紹介します。
サンプルを元にカスタマイズしてもよし、ヘッダやコンテンツなど100種類以上のコンポーネントからクリック一つでぽんぽんページのレイアウトが完成してしまいます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016030106.png)
Assemblyは無料で利用でき、一部のコンポーネントとHTML化が有料($17)です。
$17は2016年2月現在、1,900円なので、フル機能でこの値段は有りですね。
まずは、Assemblyでどんなページができるか見てみましょう。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016030107.gif)
縦長スクロールのページで、ヘッダは大きい写真画像、コンテンツが数パターンあり、フッタがデザインされています。コマ数を落としているので分からないと思いますが、随所にスクロールのエフェクトも仕込まれています。
実際のページは、下記から確認できます。
対応ブラウザは、IE9+ですべてのモダンブラウザに対応しています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016030108.png)
右上の「Demo Page」からは、他にもたくさんのデモを見ることができます。
ページの設計もしっかりしています。
グリッドやエレメントなど、コンポーネント単位で統一して作られているので、組み合わせて使用することができます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016030109-01.png)
フォームやアコーディオンなども、用意されています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016030109-02.png)
各コンポーネントのコードも確認することができます。
ごく普通のコードで、そのまま使ってもよし、カスタマイズしてもよしです。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016030110-01.png)
コード: ヘッダ
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016030110-02.png)
コード: コンテンツ
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016030110-03.png)
コード: フッタ
Assemblyをはじめてみよう
Assemblyを試してみました。
トップページの右から「Assembly: Builder」のアクセスします。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016030112-01.png)
左サイドにツール類が配置されており、一番上からヘッダやコンテンツやフッタを簡単に配置できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016030112-02.png)
コンポーネント パネル
さまざまなコンポーネントが用意されています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016030111.png)
コンポーネントの一部
コンポーネントは、クリックで簡単に配置できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016030112-03.png)
ヘッダを配置
続いて、コンテンツを配置してみます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016030112-04.png)
コンテンツを配置
配置したコンポーネントを削除する時は、各コンポーネントの右上「Delete」です。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016030112-05.png)
コンポーネントの削除
デザインのカスタマイズは、左ツールの3番目「Designer Mode」です。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016030112-06.png)
デザインのカスタマイズ
「Designer Mode」でタブを変更すると、アニメーションを設定できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016030112-07.png)
アニメーションのカスタマイズ
左ツールの2番目はページの管理です。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016030112-08.png)
トップページに設定
完成したページは、左ツールの4番目「Download」からダウンロードできます(有料)。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016030112-09.png)
ページのダウンロード
sponsors