今日はサンプルサイトのワイヤーフレームを元に、コーディング前のいろんな設計をしました。

38歳からWebエンジニアを目指しているフェニックスA子（@lipton_milk999）です。

ここで「設計手順おかしくない？」と思った人もいることでしょう。そんなお話です。

ワイヤーフレームで先にイメージをつけた（半分失敗）

私はもともとHTMLやcssで趣味ページ（黒歴史サイト）やWordpressのブログを作っていたことから、なんとなく「サイトのイメージが先にできてしまう」ので、いきなりトップページのワイヤーフレームを作ったわけです。

そのログは前回のnoteに書いてます。

Mockflowというツールを適当に選び、パーツが置けるのが楽しくて形を作りました。

そして、それから本の手順にそってマークアップをしようと思ったのですが・・・

「あれ？#headの中に#navが入るけどこれいいの？」←Bootstrap4に影響された

「右上のやつを#asideにすると、#mainにあたるコンテンツがL字型になるんだけど・・・」

みたいな違和感が次々と出てくるわけです。

「マークアップうまくできない」原因を考察

＜マークアップがうまくできない原因＞
・見た目のバランスしか見ずにパーツを配置した（ここ空いてるからなんか埋めよう、とか）
・HTML5の文書構造（アウトライン優先）に慣れてない
・「目線の流れ」や「先に来るべきコンテンツ」を考えず、使いやすいと思うところにボタンやアイコンを置いた
・深く考えていないのにレスポンシブ設計を狙っている
・このせいで、mobileで一カラムになると、重要ではないものが上に来てしまう

HTML5＋css3の本を一通り読んで、理解したつもりだったんですけど、画面を眺めてから作り出すと全然取り込めてないですね。

やっぱり、手順通りに設計するべきです。

しかし、「ワイヤーフレーム」を先につくったことで、それを元に印刷してタグなどを書き込める、という点は良かったポイントです。Web制作に慣れてきたら、イメージ（ワイヤーフレーム）を先に形に起こす手法も、良いかもしれないですね

たまに手戻りは発生しますが。

Web設計手順（コーディング前）を細分化

というわけで、今日はWeb設計の部分を次の流れに細分化。

<Web設計、コーディング前の手順の細分化>
① 文書構造設計（HTMLマークアップ）
② 情報構造設計・レイアウト設計（ブロック分け）
③ cssセレクタ設計（idやクラスの割り振り）
④ サイズ、色コード指定（縦横幅や余白のピクセル数）
⑤ デザインカンプ作成（実際に色や画像の入ったモックアップを作る）

なお、この手順は、書籍などを参考に拾っています。

というわけで、実際にやってみました。

① 文書構造設計（HTMLマークアップ） 

書き込んで見ました。「HTMLなんて簡単でしょ！」と思ったら、そうでもなかった・・・

「dl/dt/ddとul/liはどっちがいいのかわからない」

「よくわからんパーツはとりあえずdiv」

という問題がでてきます。

一応、「マークアップでやりがちな間違い」という類のサイトは見ましたが（笑）

細かいことで悩んでいては何も出来上がらないまま時間だけが過ぎて行くので、とりあえず適当に割り振って次へ進むスタイルでいきます。

② 情報構造設計・レイアウト設計（ブロック分け）

はい、初学者がまず詰まるのここだと思います。詰まりました。

なんとなくイメージできてるつもりでも、やってみたら「あれ？」ってなりますね。

「navがheaderにめり込んでる」
「トップ画像はheaderなのか違うのか」
「割とどうでもいい情報（営業日カレンダー）をasideにしようとしたら、mainがL字型に曲がる（これでコーディングできるのかどうかわからない）」
「mobileで見るとどうでもいい情報が上に来て違和感が出る」

こんなところです。

結局、上の画像の構成は、その修正後になります。

前回の記事までは、グローバルナビが右上にいたんですが、トップ画像の下に変更しました。

また、営業日カレンダーのいた場所には、ファーストビューで見たい情報である店舗情報（住所、営業時間、MAP）が入ってきています。

この辺は、正直「今やることじゃなかった」といったとこですね。

たぶん、①で済ませておくべきなんだと思います。あるいはもっと前か。

③ cssセレクタ設計（idやクラスの割り振り）

cssセレクタ設計は、IDを使うのかクラスを使うのか、その名前などを決めていきます。

クラスをつけるのはどの階層が適切か、を考えながらやりました。

例えばstaffのとこは、囲いのsectionに「.staff」をつけておけば、その下の名前や説明は「.staff > dl」とかで指定できると思うのでこれでいいかなと思ってます。現段階では。

コーディングしてみて「あれ？」ってなったら、手戻りして変えますw

④ サイズ、色コード指定（縦横幅や余白のピクセル数）

サイズは、今回は先にMockflowでパーツを作っていたおかげで、そのツール上でpxを図れます。全部じゃないですけど、ブロック要素の縦横幅くらいは。

今回はデザインの美しさはとりあえず後回しなので、色コードはなんとなくでいいです。

ちなみに、色コードはMockflowのツールで事前にまとめておきました。

今回やったのはここまで。

これで、実際にデザインカンプ（画像や色をいれたモックアップ画面）を作ってみようかと思います。

これはPhotoshop月額契約するかなぁ・・・絶対必要になるだろうし。

昔オタク活動でCG書くときに使っていた以来ですね。ロゴとかも作りたいけど、今はiPad Pro + Apple pencilがメインなので、作るならこれで作ることになりそう。（デザインは二の次なので、あまりそこで時間とられたくないな）

今回はここまでです。

【この勉強ログは、マガジンにしています。フォローしてね。】