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