BLOG 2017.09.07
ワイヤー制作やコーディングを行う際に意識すること｜takememo Vo.11
AICスタッフ
こんにちは！AIコミュニケーションのコーダーのたけうちです。
前回のブログで勉強の時間が上手く取れないと言いましたが、その前に勉強環境を整えようとパソコンやiPhoneの中身を整理しています。
いらないデータやアプリ、写真などたまりにたまっているので整理してすっきりさせて勉強をしていこうと思います！
さて、今回は「ワイヤー制作やコーディングを行う際に意識すること」をメモしていこうと思います。
ワイヤーを作成した時や、コーディングした時、もうすこし意識すれば良かったと思うことが多々あるので、メモして今後に生かしていきたいと思います。
「こういうところも意識した方が良いよ！」ということがあったら是非共有して欲しいです！
ワイヤー制作を行う際に意識すること・気をつけること
制作するページや項目などの情報を整理する
当たり前ですが、制作するサイトによって必要な下層ページや載せる情報量が変わってきます。
いきなりワイヤーを制作するのではなく、必要な情報（必要なページや載せる情報等）整理してから進めましょう！
レスポンシブを意識しながらワイヤーを考える
わたし自身コーディングをするのでレスポンシブはいつも意識していますが、レスポンシブを考えたワイヤーフレームを制作することによってワイヤー制作自体の時間の短縮もできるほか、そのあとのデザインやコーディングもしやすくなります。
ワイヤーフレームは極力シンプルに仕上げる
ワイヤーはサイトに載せる情報の優先順位やコンテンツの確認、サイトの構造の確認になります。
フォントや色、デザインまで作り込まれていると、デザインする際にワイヤーフレームを意識しすぎたデザインになってしまうので、出来るだけシンプルに仕上げましょう！
コーディングを意識しながらワイヤーを考える
レスポンシブと同様ですが、コーディングを意識したワイヤーを制作するとコーディングの速度を上げることができ、サイト制作のスピードも上がります。
コーディングを行う際に意識すること・気をつけること
構造と見た目を分ける
コーディングする際、HTMLとCSSで組んでいきますが、よくHTMLで見た目（デザイン）を組んでしまうことがあります。
HTMLはあくまで文書構造を示すための言語になるので、デザインはCSSでコーディングしましょう！
共通の部分をパーツ化する
ヘッダーやフッター、サイドバーは基本的に同じものになると思います。
共通の部分をパーツ化することによってサイト制作のスピードが上がるだけでなく、1か所のみ修正すれば全ページに反映されるため、修正時間を短縮でき、修正の漏れもなくすことが出来ます！
見やすいコードを書く
HTMLでもCSSでもいえることですが、コーディングしていると階層が深くなり、どの部分がなにか分からなくなってきてしまうことがよくあります。
インデントや改行の統一をしたり、コメントアウトでページごとにCSSを記述するなど、自分が見ても他の人がみてもわかりやすいコーディングができることが望ましいですね！
各ブラウザで確認をする
ChromeやIE、Firefoxなどいろんなブラウザがありますが、ブラウザによって見た目が崩れてしまっていることが多々あります。
jqueryなどスクリプトをいれたときには動きの部分も確認する必要があります。
普段Firefoxをメインに作業をしているので、わたし自身、他のブラウザでのチェックを怠らないようにしたいと思います。
まとめ
ワイヤーもコーディングも少しの意識で作業効率もサイトのデザイン、出来も変わってくるかと思うので、どんなに忙しくても忘れずに作業をしたいですね！
