[jin-yohaku30]
[chat face=”mameshiba001.png” name=”まめしばくん” align=”left” border=”gray” bg=”none”] コーディングってどんな流れで行われてるんだろ？[/chat]
[jin-yohaku20]
[chat face=”animal_smile_neko.png” name=”ねこくん” align=”left” border=”gray” bg=”none” style=”maru”] プログラミングスクールで学んできたけど業務の手順がわからないにゃ〜[/chat]
[jin-yohaku20]
こんな疑問を持つ人に読んでほしいです。
[jin-yohaku30]
目次
web制作コーディングの流れってどんなもの？
この記事ではどのようにコーディング業務が進められているかについて書きます。
独学やスクールで学んできた方は、わからない人も多いのではないでしょうか。
今回はweb制作のなかでは最も簡単と言える、ページ1枚をコーディングする場合の流れを紹介します。
実際の作業手順を確認し、制作業務について理解を深めて行きましょう。
【1】命名規則に則って各ファイルを作成
会社のルールや案件によってファイル名の付け方にルールがあります。
そのルールに則ってhtmlやcssに名前をつけます。
ページで使用する画像ファイルの作成は
【3】デザインデータを受け取りスライスで行います。
【2】構成案を確認
デザインよりも前の段階で作成する大まかな構成（どこに何を配置するかなど）を表した図です。
この時点では具体的なデザインは決まっていません。
構成案を元に決まっている部分だけを先にコーディングして起きましょう。
例えば、
「画像の下にテキストがあり、またその下にボタンがある」
ということが構成案の時点で決まっている場合は、その部分を先にコーディングしておきます。
具体的な幅や余白などのデザインはデザインが決まってから指定するとして、
事前に大枠だけでもコーディングしておくことで後々の作業がスムーズになります。
【3】デザインデータを受け取りスライス
デザイナーがPhotoshopなどで作成したデータを受け取ります。
これをスライスしてコーディングに必要となる画像を作っておきます。
（制作会社によってはデザイナーがスライスまでを担当する場合もあります。）
画像ファイルを作る際は、会社の命名規則に合わせて保存しましょう。
【4】コーディング
コーディング方法も会社によってルールが異なります。
HTMLやCSSの書き方やファイルをどの階層に配置するかなど事前にルールを確認しましょう。
毎回同じような構成であれば、使い回せるよう事前にテンプレートを用意しておくと作業時間の短縮になります。
【5】セルフチェック
何回も制作を経験していくうちにどこを注意すればいいかわかってきます。
注意すべき箇所を記載したチェックリストを用意しておくといいと思います。
【6】作成したファイルをテストサーバーにアップロード
コーディングしたファイルをテストサーバーにアップロードします。
テストサーバーとは
- 会社が用意している制作物を確認するためのサーバーです。
- アップロードしたものは会社内でのみ閲覧できます。
- テストサーバーにアップしても世の中に公開はされません。
ファイルのアップロードの方法は会社によって異なるので教えてもらいましょう。
間違えて本番アップしないよう注意！
【7】検証
PCやスマホで見てみて問題がないかを確認します。
コーディングをした人以外がチェックすることで、制作物に間違いがないかしっかり確認することができます。
[jin-yohaku10]
[box03 title=”チェック項目の例”]
- 表示崩れがないか
- ファイル名は命名規則に則っているか
- リンクは正しいか
- コンソールエラーは出ていないか
- 文言に間違いはないか
- meta情報は間違えていないか
[/box03]
【8】修正
検証で発見した表示崩れやバグを修正します。
修正コーディングした後はテストサーバーにアップロードし、再度検証を行います。
【9】配信予約
公開日時に合わせて配信予約を行います。
配信日時を間違えないように！
配信まで行わず、制作したファイルを発注元に渡して完了という会社もあります。
その場合は作成したファイル一式を圧縮して発注元に納品します。
【10】配信確認
本番配信後、念の為コンテンツに問題がないか確認しましょう。
[jin-yohaku40]
[jin-yohaku40]
以上がコーディングの大まかな流れになります。
会社のルールや案件によってはコーディング方法が異なる場合もあります。
また案件がもっと複雑になれば工程は増えていきます。
今回はHTML/CSSをメインとした簡単なページ作成を想定して流れを紹介しました。
[jin-yohaku40]
[chat face=”mameshiba001.png” name=”まめしばくん” align=”left” border=”gray” bg=”none”]コーディングの流れがわかったぞー！[/chat]
[jin-yohaku20]
[chat face=”animal_smile_neko.png” name=”ねこくん” align=”right” border=”gray” bg=”none” style=”maru”]慣れてきたら効率よくコーディングできるよう工夫してみよう！[/chat]
[jin-yohaku30]