こんにちは。
デザインチームのAです。
未経験のデザイナーとして入社して一年が経ちました。
今回の内容も前回から引き続き私が普段行っている業務について書こうと思います。
前回の記事ではデキテル新デザイン作成工程の
４）デザイン完成まで書きました。
デキテル新デザイン作成工程
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
１）コンセプトの決定
２）デザインの紙ラフを作成
３）データラフの作成
４）カンプの作成
５）コーディング
６）コードレビューの依頼
７）テストの依頼
８）本番化
今回はその次の段階のコーディングについて書いていこうと思います。
５）コーディング
デキテル新デザイン作成では、
既存のデザインのHTMLをベースにして、
主にCSSのコーディングを進めていきます。
私は以下の順番にコーディングをしています。
ヘッダー
グローバルメニュー
メインイメージ
コンテンツ
サイドバー
フッター
グローバルメニュー（中央or左右時）
下層ページ
コンパクト時
カラーバリエーション展開
スマホ
これを毎回全て0から記述していくのはかなり時間がかかります。
なので、作成した新デザインに似た既存のデザインのCSSを
読み込んでそれをベースにコーディングを進めていきます。
デキテルでは、
画像の掲載枚数や表示サイズ
グローバルメニューの位置
などお客さま側で自由に変更できるのが良い点です。
なので、コーディングの際にはこのことも頭に入れて
常にチェックしながら進めないといけません。
画像が1枚のときは表示に問題がなかったが、
複数枚設定するとデザインが崩れたり、
グローバルメニューが中央のときに
下層ページのヘッダーのデザインが崩れたり…
他にも、
疑似要素でつけた画像などが他の背景画像の
下に回り込んでしまったり…
などけっこう苦戦しました。
特に、私が担当したレースというデザインは
疑似要素をたくさん使ったので、
カスタムした際にデザイン崩れがよく起こり
修正が多く発生しました。
６）コードレビューの依頼
コーディングを一通り終えたら、
先輩にコードレビューの依頼をします。
この際に自分で見つけきれなかった不具合や
問題が出てくるので修正をします。
修正は、コーディング時と同じぐらい
時間がかかることが多かったです。
できる限り修正を最小限にするために、
コードレビューの依頼を出す前に
必ずコーディングについてのチェックリストで
見直してから依頼をします。
（それでも修正は発生するので時間はかかってしまいますが…）
７）テストの依頼
修正が全て完了したら、総務チームにテスト依頼をします。
作業はChromeでしているのですが、
Chromeで表示に問題がなくても、
別のブラウザでデザインが崩れることなどがあるので
必ずテストをします。
Chrome
Firefox
Safari
IE
Edge
上記ブラウザのPCとスマホ表示のテストをし、
問題箇所は修正をします。
８）本番化
全ての修正が完了し、承認をいただいたら本番化をします。
￣￣￣￣￣￣￣￣￣￣￣￣￣￣
私が担当している主な業務については以上になります。
もともとHTMLとCSSの知識は少しだけあったので、
業務では分からない部分は主にネットで調べて進める…
ということをしていました。
ですが、効率良く業務を進めるためにも
調べる手間を減らせるようにしないといけないので
ちゃんとしたコーディングの勉強を最近始めました。
トレースの方は以前からしているので、
デザインとコーディングの勉強を並行して進めていきたいと思います。
ここまで読んで下さり、ありがとうございました。
