住宅の設計とウェブデザインのフローを比較してわかったBootstrap4の有用性について

　最近、『Udemy』というオンライン講座でHTML5とCSSについて学び直しています。（講座はこちら　=>>　【実践webサイトコーディング講座 | Udemy 】）

Udemyでオンライン講座受講中

　始める前の状態としては、パソコンに付属のメモ帳でhtml形式で書けばホームページが作れる、CSSはhtmlを装飾するもの、というぐらいの理解でした。はてなブログではCSSをいじったり、これまでにiOSのアプリを作ったりしてプログラミング自体には抵抗感はありませんでした。

　CSSは、いつか分かるようになるだろうと思ってこれまで来ましたが、一向に理解が進まなかったので、上記講座で勉強する事にしました。定価9,600円のところ、割引で1,800円くらいでした！

講座の感想 - ウェブデザインでも設計図が必要！

　３分の１ぐらいまで進んだので、感想というか、自分的に理解が進んだ部分について書いておこうと思います。

　細かいコーディングの理解も進んできていますが、一番面白いと思ったのが、ウェブサイトのプログラミングにも設計図が必要なんだという事実でした。CSSのコーディングではピクセル単位で指定が必要になってくるので、あらかじめそういったデザインが決まっていると便利です。

　住宅の設計で例えるなら、スケッチを書いて大工さんに渡して家を建ててもらう状態から、スケッチから寸法の入った図面を起こして、図面をもとに家を建ててもらう状態へと理解が進んだようなものです。（上記講座では、暗に図面がなきゃ作るの大変だよというスタンスです。）

　ウェブデザインの図面はCADではなく、フォトショップやイラストレーターで作られるようです。そこからピクセル数（隙間や線の太さ、色、フォントの仕様など）を測って、ウェブサイトのコーディングに落としていくのです。

講座の先 - スマホ対応で設計図はどれだけ必要？

　【実践webサイトコーディング講座 | Udemy 】では、スマホのデザインには触れていませんが、少し考えてみました。ウェブを表示できる端末の画面の大きさは18,000種類も存在するそうです。（参考｜https://creativeweb.jp/manga/webdesigner/page1/

）本来であれば、18,000枚の図面が必要なところです。

　現実的なところで、スマホ用・タブレット用・デスクトップ用ぐらいの図面を用意します。これが、デザインが固まった状態です。

ワイヤーフレームで企画とデザインをつなぐ！

　その一歩手前で、住宅設計のスケッチに相当するのが、ウェブデザインのワイヤーフレームというものです。必要な要素やコンテンツを洗い出して大まかに配置します。もし発注するなら、ワイヤーフレームぐらいまで進んでいると、デザイナーも図面を書く作業がしやすいでしょう。

　ワイヤーフレームを作る時に便利なのが、Bootstrapのジェネレーターです。従来のイラレやフォトショップで作るワイヤーフレーム作成に比べてより完成形がわかりやすくなります。ブート何とかと聞くと、パソコンの立ち上げ時のBIOS画面を思い出して鳥肌がたちますが、Bootstrapはよく使うhtmlやcssやJavaのパーツや設定があらかじめ揃ったものです。（Bootstrapは建築設計で言うところの基本設計に強いベクターワークスみたいなものです。）