• FVM大賞2015 優秀賞 受賞
  • 平成26年度福岡市トライアル発注認定事業者
  • 平成25年度福岡市ステップアップ最優秀賞 受賞
  • 平成25年度九州ニュービジネス優秀賞 受賞
  • 福岡県情報セキュリティ連絡協議会加盟企業
  • 福岡ベンチャーマーケットプレゼン企業
  • 福岡大学共同開発企業
  • 経営革新計画 第1936承認企業
  • 平成23年度九州地域中小企業事業家支援
    お助け隊事業アドバイザー企業
  • 平成23年度福岡市競争入札参加有資格企業

デザイン探索

伝わるデザインついて、瞬時に判断していくための知識を書き綴ります。デザイン探索

2018年9月05日(水曜日)  (muramoto.yuuri)

コーディング前の準備,確認を忘れずに

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

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


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

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

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

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

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

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

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

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

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

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