MENU CLOSE

【WEB制作・初心者】制作の流れ ③制作編
2020/03/21

みなさん、こんにちは。 Mon Webの楠本です。

今回はいよいよ制作のついての流れを書いていこうと思います。
自分の場合は、デザインとコーディングをチームで分けて行っていますので、それでの流れで書いていこうと思います。


デザイン制作

まずはデザインの制作から取り掛かります。
このデザインの段階である程度コーディングを意識してデザインを制作していく事がオススメです。

デザインの段階で気をつけていることは、

1.コーディングを見越したデザインをする
2.極力WEBフォントでのテキスト作成
3.ルールを決めてデザインを行う


になります。


まずはコーディングを見越したデザインに関してですが、主に気をつけているのは図形描写やドロップシャドウなどのアピアランス関係です。
自分に関してはイラレのカンプデータを扱う事が多いのですが、実際イラレと同じようにアピアランスをWEB上で表現するのは難しいです。
可能な限り近いものを作るようにはしますが、全く同じということはかなり難しいです。
時間をかければ出来るかもしれませんが、納期の兼ね合いを考慮するとあまりよろしくないと考えています。

コーディング

次はコーディング作業です。
コーディングの場合はデザインよりもより細かくルールを設定しておくほうがスムーズに作業が進む事が多いです。

コーディングの段階で気をつけていることは、

1.共通クラスなどのルール決め
2.IEなどを加味したCSSなどの構文作成
3.カンプからのデータ作成のルール決め


になります。


まずは共通クラスなどのルール決めに関してですが、チームで分かりやすい、尚且つ後からの改変などの保守作業を見越してルールを決めます。
なのでcommon.cssなどを作成して全ページに共通のルールを反映できるように設定をする事が多いです。
もしそのページで共通クラスにどうしても別の設定を上書きしたいと言う時には、そのページのCSSを後読みさせて上書きしていくスタイルを取る事があります。(あまりよろしくないですが…)
なので本当の共通部分にできるクラスは何かを精査する事で構文も分かりやすくなります。

次はIEを加味したCSSや構文を書く事についてです。
これは見る人がどのブラウザで見るかと言う事が分からないので、レイアウトが崩れないように設定しておく事になります。

よくCSSにて書く-moz-とかはそのブラウザに合わせた設定を書いている事になります。(ベンダープレフィックス) になります。
モダンブラウザに関してはこの設定が無くてもレイアウトが崩れる事が少なくなりましたが、古いブラウザに関してはやはり設定を書いておかないと崩れてしまう事が多いと考えられます。
なのでどのバージョンまで網羅した構文にするかと言うのを決めておくといいかもしれません。

最後にカンプからのデータ作成のルール決めについてです。
これはカンプデータから画像などを書き出す際のルールなどを決めておく事になります。

自分に関してはRetina Displayで見ることを見越して、画像は使用する倍のサイズで書き出し解像度を下げ目にして書き出しをしています。
これを使用するサイズに設定すると画像の荒さが目立ちにくくなります。
また書き出した画像は容量が軽くなるのでサイトでの読み込みも早くなるメリットがあります。
それでも画像の読み込みが遅いなどと感じる場合は、画像の不可逆圧縮をしてくれるサイトもありますので、そちらを利用するのも良いと思います。

最後に

チームで気をつけている事を書いてみましたがいかがでしたでしょうか?
それぞれ開発環境が違ったりするので一概には当てはまらない部分もあるかもしれませんが、メンバーを意思疎通をしっかりと図り、良いものを作り上げる心構えを持って制作に取りましょう。


次回は納品する時に気をつけている事を書いていこうと思います。

良かったらTwitterのフォローとFacebookのいいねをお願いします!