前回のBootstrap編では基本的なWebコンポーネントとSass導入方法を説明しました。
今回は実践的なBootstrapサイトを効率よく制作するための手順として スケルトンサイトからWebデザイン制作する方法を紹介したいと思います。

えーと、スケルトンサイトってなんですかぁ？

正しい言い方は人や会社によってそれぞれなんだけどデザインを作り込む前にHTMLで骨格を作成するのがスケルトンサイトだと思っています。

えっ！？HTMLだけでできるんですか。
私はインブラウザでコーディングするとデザインイメージ湧かないから苦手なんですよ〜。 逆に遅くなっちゃいますよ。

クライアントだっていろいろ修正変更とか言ってきそうじゃないですか。

デザインとコーディングを同時に修正するなんて大変すぎます。

クライアントと案件内容にもよりますがスケルトンサイト（ワイヤーHTML）から見せながら制作した方がデザインが通りやすく納得されやすい事が多かったです。

初期の段階でサイトの骨格がすでに決まっているのでコーディング時間を大幅に短縮する事も可能です。

デザイナーはデザイン作業に集中できます。

ログイン後に「+」アイコンをクリックすると下記のように新しいプロジェクトの名前をつけて Bootstrapのバージョンを選ぶことができます。

レスポンシブに対応したいので3にします。

今回は趣味の素材サイトを構築する予定があるので 素材サイトのスケルトンサイトをこのjetstrapを使って作成します。

左のパネルからどんどん入れたいパーツを追加していきます。
BootstrapのWebコンポーネントをよく知らない人でも読めば大体わかる内容になっています。

ナビや見出しの文章を変更します。
パーツをクリックしてテキストの変更も可能ですが 下部にあるCodeをクリックしてHTMLソースから追加、編集する方が入力はしやすいです。

BUILDをTESTに切り替えてPC、スマホのアイコンをクリックすると画面がブラウザで見た時のように変化します。

テキストの入力とレイアウトが完成したら、上部メニューのダウンロードアイコンをクリックし、Download ProjectをクリックするとHTMLがダウンロードされます。

上記はJetstrapからダウンロードしたHTMLサイトです。

うわぁ、本当にドラッグ＆ドロップだけである程度のサイトの骨組みが完成してしまいましたね！！

スケルトンサイトの段階では画像はアテで入れるようにしましょう。
カラーやデザインも極力手を入れずにレイアウトまでにしておきます。

このようにワイヤーフレームの段階でHTML化されていると後々のデザイン・コーディング時間を大幅に短縮することができます。

来週は「（２）デザイン作業 -基本的な書式、タイポグラフィー、サイトカラーを作成する」を説明します。