どうも、くまだです。
Web制作学習初期のころと、案件をやり始めての今現在とで「初期のころはそこまで意識して勉強していなかった」なと思うことがあります。
コーディングだけでもやることは多い
Web制作学習初期は、とりあえず教材なりスクールなりで学習で手一杯だと思います。
ただ勉強しながらでも以下のことはコーディングする前に確認することと思います。
- デザイン確認(SP/PC)
- フォント(フリーフォントか有料フォントか)
- 色
- 画像の用意(クライアントからの提供もしくはデザインカンプから書き出しなど)
- コンテンツ幅
- 共通パーツ(ヘッダー、フッター、ボタン、その他使い回せるパーツなど)
- ブレイクポイント
コーディングだけでも、コーディング前の準備やること多すぎな件。
ちなみにPCだけデザインが来て、SPはよしなにパターンもあります。
私はデザインを(今のところ)やっていないのでコーディングだけですが、、、
それでこれだけで済んでいるのですが、もしこれをデザインから作るとなれば、クライアント様とのやりとりや要件定義などからしなければなりません…。
コーディング後の作業もそれなりにある
コーディングが終わった後も各種ブラウザチェックやエラーのチェックなど確認・修正作業があります。特にコーディング後の作業というのは、Web制作初期のころは全く意識していなかったです。
各種ブラウザの表示確認も主要なものだけに限れば以下のとおりです。
- Chrome
- Safari
- Firefox
- Edge
確認するのはもちろんPCとスマホです。
WindowsとMac両方もっているなら両方で確認し、AndroidとIOS両方持っているなら両方で確認です。持っていなければ、持っている人に確認を頼むか、中古でもいいから買うしかないです…
これらのブラウザそれぞれで確認するのは、ブラウザによって表示に差異があるからです。
Chromeでだいじょうぶでも、他のブラウザでは表示が崩れている、ということもあります。
基本的に確認するブラウザ幅は320~1920px、そして2000px以上のときです。
例えばデザインカンプが375px幅や1280px幅でもらっていて、375px幅や1280px幅でコーディングして表示確認してだいじょうぶだから、374px~1279pxは確認しなくていいというわけではありません。
その辺りは検証ツールを開いてブラウザ幅を狭くしたり、広くしたりしながら上から下まで確認するという作業が発生します。
- コンテンツが想定外の部分に被っていないか、隠れていないか
- コンテンツ幅よりはみ出していないか
- 変なところでコンテンツの改行が行われていないか
JavaScriptのエラーチェック、バリデーションのチェックなども込み込みです。
あと公開前のサイトでサーバーで実機確認するときはベーシック認証だったりgoogleに検索されないようにnoindexをつけたりとか…
正直、Web制作学習初期のころはそこまでやるということを全く意識していなかったです。
私は最初の案件からいきなりできていたわけではなく、正直いえば徐々に学んでいった感じです。
クライアント様から制作の料金をいただくと思いますが、コーディング後のチェック作業も込みの料金をもらいたいところ…
それも込みの料金だといわれればそれまでなのですが、ブラウザ確認はまあまあ時間取られるので、いただけるものはいただきたい笑
何がいいたいかというと、デザインカンプみてコーディングするだけじゃないってこと。
ここまで読んでくださりありがとうございました。