皆さんこんにちは。
アシスタントクリエイターの村本です。

今回は、サイト制作時のコーディング前に気をつけたい点についてです。


サイト制作において、お客様からデザインカンプのOKをいただき、いざコーディング！
となったとき、デザイナー（コーダー）のみなさんは、どのように作業を進めていますか？

まずはトップページや、コンテンツページのベースを作成することになるかと思います。
ですがその前に、無駄なコーディング時間と後々の手戻りを無くすために、
忘れずにやっておきたいことがあります。

①共通するcssの確認
同じデザインのボタンや見出しなど、同じcssを使うべき箇所、使える箇所を
もう一度確認しておきましょう。
そしてコーディングの最初に、共通部品化しておくことが大切です。
共通箇所を頭で認識していたとしても作っておくことです。

ページ数が多いために把握しきれていなかったり、複数人で実装していて重複したりと、
無駄なコーディング時間が発生するからです。

きちんと適切なものを共通化することで、公開後に変更が入っても、
修正箇所か少なくて済むというメリットにもつながります。
-----

②使用するJavaScript（JS）の確認
JSの実装は静的なページを一通り作成してから、という順序になることも多いかと思います。
ですが、その後どのようなJSを実装する想定でいるのか、事前に確認しておくことが大切です。

でないといざJS実装となった時に、
「ここのタグはクラス名を付ける必要があった…」
「ここのhtml、divタグではなくul,liのリストにしておけばもっとスムーズにテンプレート利用ができたのに…」
などと後にhtmlの修正が発生するからです。

できれば、デザインカンプを作成する段階で、サイトで使用するJSを全て洗い出しておき、
それを確認しながら実装を進められるようにしたいですね。

ちなみに今回、スライダーのJSにslickを利用しました。
デザインやアニメーションの設定など、オプションから簡単に変更できますし、
レスポンシブデザインにも対応しているのでおすすめです。
https://kenwheeler.github.io/slick/
-----

今回は、自身の反省もふまえ注意点として書きました。
たとえスケジュールがタイトでもコーディングの前に忘れずに確認するようにしましょう。