Web制作の実務で必要な知識やスキル

皆さん、Web制作の方法を学んで来られたかと思うのですが、実際に現場未経験ですと何かと不安かと思います。

特にいきなり案件受注してやれるかな？などです。

私が経験したものになりますが、

・どのような流れでWebサイト制作を進めていくか
・必要なスキルは何か

をお伝えしたいと思います。

Web制作の受注から公開後までの大まかな流れ

だいたいは、

営業　→　受注　→　ヒアリング　→　制作（デザイン・コーディング）　→　納品・公開 →　保守・改修

のような流れになるかと思います。

引用：UP POINT.inc　https://up-point.jp/blog/detail/675/

企業では、ディレクターやデザイナー、コーダーなど、分業制でやる場合も多いです。

フリーランスや副業であれば、どのフェーズ・どの担当で入るかによりますね。

見積もりのやり方

見積もり、、、難しいですよね。

私が企業にいるときに外注で見積もりをフリーランスの方に依頼させていただいてましたが、皆さん難しいとおっしゃってました。

相手の予算より高く出しすぎて、お仕事もらえないのも避けたいし、安すぎても困るし、といったところでしょうか。

基本的に単価は以下のように出します。

💡単価（1人日）　×　日数（制作にかかる工数）　=　見積もり額

1人日というのは、1日の実働時間（大体は8時間）ですね。他には1人月（20日）で出すこともあります。

ですので、

・自分の単価
・制作にかかる日数

でおおよその見積もりが出ます。

「自分の単価をいくらにするか」

というのも大事ですね。

ただ注意して欲しいのは、工数を出す時に以下のことも考慮して欲しいことです。

顧客または関係者とのやり取りにかかる時間
確認依頼後に修正があった場合、その工数
見積書や請求書の作成にかかる時間
想定外のエラーや未経験の技術に対する調査や実装にかかる工数
他の人に依頼しても、その方の管理工数というものも必要ですね。

なので、単にコーディングの時間だけで計算してはダメです。

これは、見積もりだけでなく、スケジュールに関しても同じことが言えます。

見積もり書・請求書

見積もり書や請求書を作成するときは、期限も設定しておきましょう。

見積もりは3ヶ月くらい、請求書は翌月末などでしょうか。

秘密保持契約（NDA）

実際に受注する際に、NDA（Non-Disclosure Agreement、秘密保持契約）を行います。

ビジネスで秘密情報の取り扱いを明確にするために、クライアントとWeb制作会社（またはフリーランス）間で結ばれる契約の一つです。

制作プロジェクトに関する情報を他者に漏らさないよう、守秘義務を徹底するためのものです。
これにより、クライアントの機密情報や未公開のアイデアが無断で第三者に公開されることを防ぎます。
NDAに基づき、契約を破った場合には法的な措置を講じられることもあります。

スケジュール管理

プロジェクトのスケジュールに関しては、

WBS（Work Breakdown Structure）というツールを、ディレクターが作成します。

作業工程を分解して示したもののことです。

誰がどの工程を担当しているのか、今はどこまで進んでいないといけないのか、などが分かりやすいですね。

※Googleスプレッドシートのテンプレートで用意されていたりもするので便利です。

必要な作業工程を分解し、工数の見積もりやスケジュールに設定しているので、「基本、このスケジュール通り」に進めていくのが大事です。

ですので、

いまスケジュール通り（オンスケ）に進んでいるのか、遅れているのか、といったことは、きちんとディレクターや顧客に共有することが大事です。

業務委託としてWeb製作会社から受注した案件であれば、毎日進捗報告しましょう（進んでいなくても）

でないと、Web制作会社が顧客に進捗報告が出来ないですもんね。

コーディング規約を確認しよう

サイト制作をする上で、コーディング規約というものを大抵の会社は持っています。

コーディング規約というルールを定めるのは、

コードの一貫性を保つ
コードの品質を向上させる
メンテナンス性の向上
チーム間のコミュニケーションの効率化
ユーザビリティへの影響
SEOへの影響

などを考慮して作成されています。

案件を受注した際には必ず確認しましょう。

私が知る主なコーディング規約について下記にまとめていくので参考にしてみてください。

https://www.moncoure.com/web/coding-standards

CSS設計やSCSSの利用

BEMやFLOCSSなどのCSS設計を意識すると、読みやすいクラス名になるかと思います。

もし、案件を受注したときに「BEMで書いてください」と言われたら従いましょう。

SCSSも同じで、使うかどうかは基本自由（私はSCSS使わない）ですが、指定された時に使えるようになっておきましょう。
また、構築済のサイトを改修する依頼があったときに、SCSSが使えないとダメですので。

jQuery

スクールによっては教えないと思いますが、jQueryも使えるようになっておきましょう。

なんだかんだ便利ですしね。普段使わなくても良いので、必要なときに使えるくらいにはなっておきましょう。

SCSSと同じく、構築済のサイト改修時にjQueryが使われているかも知れません。

また、jQueryに依存したJavaScriptのライブラリ（例：slick.js）やWordPressのプラグインなどもあるので、まだ現役です。

🔽jQueryの記事は下記にまとめています。

https://www.moncoure.com/web/jquery

WordPress

Webサイトの4割はWordPressで作られているという統計が出ています。（以前は6割だったのでだいぶ減りましたね）

なぜWordPressで構築するのか？

それは、Web制作のスキルがない顧客が記事の更新や配信が出来るからですね。

テーマの自作は出来るようになっておきましょう。

また、WordPressの最低限のセキュリティも覚えていて欲しいですね。

Googleマップの埋め込み

使用頻度高めです。簡単なので覚えておきましょう。

埋め込みたい場所を検索し、「共有」ボタンを押します。

「地図を埋め込む」があるので、こちらのタブを選択すると、埋め込み用のHTMLがあります。

公開のために：サーバーについて勉強しておこう

サイトはどうやって公開するかについても勉強しておきましょう。

必要なのが、

サーバー
ドメイン

です。

WordPressのサイト公開の方法については別記事でまとめています。

🔗「WordPressで作ったサイトを公開する」

今はレンタルサーバーが沢山あり、WordPressの構築がすぐにできる機能があったり、大変便利ですね。

下記のレンタルサーバーなどは使いやすかったです。

・シンレンタルサーバー

「シンレンタルサーバー」は、エックスサーバーのシステムをベースに、最新技術を迅速かつ積極的に取り込むことを目指したサービスです。

🔗リンク

・ドメインといえば、「お名前.com」

よく使いますね。

🔗リンク

HTTPSにしているか

HTTPS（Hypertext Transfer Protocol Secure）は、WebブラウザとWebサーバー間の通信を暗号化するプロトコルです。データの盗聴や改ざんを防ぎ、安全な通信を実現します。

HTTPからHTTPSへの301リダイレクトも設定しておきましょう。
（301リダイレクトを使用すると、リダイレクトが恒久的であることを検索エンジンに伝えることができ、SEOに良い影響を与えます。）

Googleの便利なサービス

現在のWebサイトに、

Googleタグマネージャー
Googleアナリティクス
Googleサーチコンソール

などのサービスは必須です。

Googleタグマネージャー

通称GTM

Googleタグマネージャーは、Webサイトやモバイルアプリにタグ（JavaScriptやHTMLのコード片）を管理するためのツールです。
例えば、GoogleアナリティクスやFacebookピクセル、広告用の追跡コードなどを一元的に管理し、コーディングの知識が少なくても簡単に導入・変更が可能です。