Web制作の仕事をするうえでの心構え【初心者必見】
初心者向けにWeb制作の仕事をするうえでの心構えについて解説します。制作物を顧客へ納品する前に確認するポイントや納品後、運用の際のサイト品質向上のためのメンテナンス事項をまとめました。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
この記事を書いた人
テックアカデミーマガジン編集部
Web制作の仕事をするうえでの心構えについて解説します。
最近、在宅でできる副業としてWeb制作の仕事を目指す人が増えています。
ここでは一例として、実際にホームページを制作して顧客へ納品する前にどのようなポイントを確認するのかを説明します。
また、納品後のサイト運用の際にも活用できる内容ですのでしっかりと確認して、サイトの品質向上に役立てましょう。
目次
1 制作前と制作中の注意点
1.1 ヒアリングの際に注意すべき事
在宅でできる副業としてWeb制作の仕事をする場合、Webディレクションからデザイン、コーディングまでの一連の作業を一人で行なうことがあり、効率よく進めることが納期を達成する鍵になります。
顧客からヒアリングを行ない、仕様をまとめワイヤーフレーム、デザインカンプを作成し、コーディングを行なって、公開となります。その際、制作の根底にある、以下のようなサイト制作の目的を顧客と共有します。
- なんのためにサイトを作るのか
- サイトを作ったことで何を達成したいのか
その目的にあったデザイン・システムの提案と設計、導線設計、SNSやWeb広告などの戦略やユーザビリティも加味した仕様書・ワイヤーフレーム・デザインカンプの作成を進めていきましょう。
顧客ともワンチームということで認識を合わせ、同業他社のページや実際にあるサイトのページを見ながら打ち合わせを行なうなど、イメージを共有しながら進めるとズレがなくスムーズに進行します。
あとになって、大幅な仕様追加などの要求が出ないように小まめに情報や目的を共有するためにコミュニケーションを取りましょう。
1.2 制作中に注意すべき事
いざ、仕様が決まりワイヤーフレーム、デザインカンプ作成からコーディングを行なう際の注意点として、顧客とFIXした仕様書のとおりにデザインを作成し、コーディングを行なっているかが大前提となります。
以下のようなエラーがあるままで納品してしまうと信用を損なってしまい、次の仕事につながらなくなります。
- デザインが崩れている
- プログラムが動作しない
- フォントの種類がデザインカンプと異なる
- 異なるブラウザやデバイスによる見え方の調整を行なっていない
- etc…
また、無事納品は終えたとしても、目標達成のためのデータ解析や分析タグの設定などの対策を怠ると、せっかく受注して仕事をしても今回きりで後々のお付き合いにはつながらない可能性があります。
ページ管理やリニューアル等でも末長いお付き合いを続けるためには、目的を達成するためのツールとしてお金をいただいてホームページを作成するという意識を忘れず、ユーザや顧客に自分を置き換えて、他者目線も意識した、快適に目的を達することができるサイト作成をしましょう。
2 制作後、納品前の注意点
2.1 デザイン関連のチェック項目
2.1.1 表記チェック
デザインカンプと仕様書の条件を確認し、顧客の指定の表記方法に基づいているか、スペルミスや表記ゆれも同時にチェックします。
ページ内のテキストチェックツール difff(デュフフ)
2.1.2 デザインチェック
デザインカンプと比較し、レイアウト配置や色、余白、文字（フォントの種類、サイズ・太さ・文字間隔・ジャンプ率）などデザインを忠実に再現しているか確認します。
2.1.3 ダミーチェック
提案時にダミーで入れたテキストや画像をそのままにしていないか、画像・動画の表示有無やサイズ、容量が適切かも最終チェックします。
2.1.4 faviconの設定
Webページに設置するシンボルマークのことです。設定は必須ではありませんが、タブ内にページの象徴するアイコン（例：会社ロゴ等）があることにより、ユーザはサイトを認識しやすくなりリピートに繋げることができる重要なアイコンです。
WebブラウザではURLの左横またはタブに表示され、お気に入りに登録するとブックマークアイコンとして表示されます。
ファビコン favicon.icoを作ろう！
https://ao-system.net/favicon/
設定した後は、しっかり表示されるかどうかを必ず確認しましょう。
2.1.5 著作物、使用写真等流用掲載についての確認
一般的に、写真や音源、動画などには著作権が設定されており、他者の著作物をWebページで掲載する場合は、権利元が設定している利用規約を確認する必要があります。著作物によっては、権利元に承諾を得てから掲載することが求められます。
著作物をダウンロードするときだけでなく、Webページの公開前にも再度、利用規約を確認しましょう。
2.2 コーディング関連のチェック項目
2.2.1 ブラウザチェック
レスポンシブサイトの場合は、Google Chromeのデベロッパーツールに付属のエミュレーターでのチェックの他、WindowsやMacといったPCでFirefox・Safari・Edgeでのブラウザチェック、スマートフォン（iPhone/Android）の実機を使ったチェックを行ないます。
各種ブラウザでチェックを行ない、レイアウトの崩れがないか確認しましょう。
2.2.2 HTML/CSS記述チェック
制作したホームページのHTMLやCSSが要求仕様に即した正しい記述をしているかを以下のチェックツールで確認し、エラーがあれば修正しましょう。
The W3C Markup Validation Service
Another HTML-lint gateway
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
2.2.3 jQuery・JavaScript・PHP等で作成したコンテンツ
jQuery・JavaScript・PHPなどのコンテンツについて、以下のような内容の動作チェックを行ないます。
- 正常に動作するかどうか
- 読み込み速度は遅くないか
- 画像容量は重くないか
- 各種ブラウザに対応しているか
- etc…
また、商用利用や改変は可能か、使用可能であっても著作権の表示などの条件はないか、などを公開前にあらためて確認しておきましょう。
海外のサイトからのオープンソースを流用した場合は、翻訳機能を使用するなどして、しっかりと確認してから使用しましょう。
PageSpeed Insights
https://pagespeed.web.dev/?utm_source=psi&utm_medium=redirect&hl=ja
たくさんあるオープンソースライセンスのそれぞれの特徴のまとめ
https://qiita.com/tukiyo3/items/58b8b3f51e9dc8e96886
2.2.4 リンクチェック
リンク切れしていないかをチェックします。パンくずリストのリンクもチェックします。ヘッダーやフッターなどの共通部分についても、リンク切れがないか確認しましょう。
リンク切れチェックツール Dead-link-checker.com
http://dead-link-checker.com/ja/
2.2.5 404ページ
サーバに接続できたものの、該当するページが移動または削除されたことでページがない場合に表示させるページを「404ページ」といいます。
サイトの品質維持のためにも、あらかじめオリジナルページとして作成しておきます。このページが正しく表示されるか確認しましょう。
2.2.6 301リダイレクト設定
あるページへのアクセスを別のページに転送させることを「301リダイレクト」といいます。
たとえばサイトをリニューアルしてURLが変わった場合は、301リダイレクトの設定に漏れがないか、新旧サイトの各コンテンツ（ページ）の設定が1対1になっているか確認しましょう。
301リダイレクトは、ドメインやサーバに変更がある場合、必須となる設定です。301リダイレクトの設定をすることにより、検索順位が下がるリスクを軽減します。
2.3フォーム関連のチェック
2.3.1 入力された内容のチェックに関する動作確認
フォームの各項目の入力内容に対し、「必須項目なのに入力されていない」「半角英数のみ受けつけるルールなのに全角文字が入力されている」などがあった場合にエラーメッセージを返しているか確認しましょう。
2.3.2 ページ遷移の確認
入力画面→確認画面→完了画面にページが正しく遷移するかどうかを確認しましょう。
2.3.3 自動返信メールの確認
送信完了の画面が表示された際、ユーザのアドレスと管理者のアドレスにそれぞれメールが届いているかを確認します。
サンクスメールの文面やアクセスページなどへのリンクを設けた場合は、リンク切れのチェックも行いましょう。
2.4 タグ関連のチェック（SEO関連設定チェックも含む）
Googleの検索エンジンのロボット（クローラー）のページ理解を上げる対策が、ページの管理や整理にもなり、結果としてサイトの検索順位の向上やページの質の向上につながります。そのため、作成後のチェックだけで終わらせず、ページを運用する際にもこれらの作業は日々継続して行なうとよいでしょう。
2.4.1 metaタグの設定チェック
Googleの検索エンジンの進化とともに、以下のようなWebページが検索上位に表示される傾向となってきました。
– コンテンツとページ内容をしっかりと作成している
– 内容に準じた適切なmetaタグを設定している
各ページに適したタイトル・ディスクリプションが、適正な文字数で、なおかつページに即した内容で設定されているかを確認しましょう。
また、キーワードは重要視されなくなりましたが、ページ内容に準じて設定しているかどうかも、合わせて確認しておきましょう。
META SEO inspector
サイト作成後のチェックだけでなく、運用の際のサイトメンテナンスとしてGoogle Chromeのアプリとして設定して使用できる便利なツールです。
https://chrome.google.com/webstore/detail/meta-seo-inspector/ibkclpciafdglkjkcibmohobjkcfkaef
WordPressでページを作成した場合は、プラグインを使います。
All in One SEO
metaタグ作成の他、後述の「サイトマップXML」の作成もできます。
https://ja.wordpress.org/plugins/all-in-one-seo-pack/
2.5 OGPの設定
OGP（Open Graph Protocol）は、SNSでシェアされた際に、そのページのタイトルや概要・URL・アイキャッチ画像を表示させるためのhtml要素です。
OGPを設定しておくと、ユーザに対してページの内容を正しく伝えることができます。設定していない場合、SNS側で勝手に説明文や画像を抽出して表示してしまい、サイトオーナーの意図していない内容がSNSに表示されてしまいます。
また、Facebookでは、OGPを設定することにより、分析や解析ツールである「ページインサイト」の機能を利用できます。
以下のサイトで、設定したOGPがSNSでシェアされた際にどのような見え方なのかを確認できます。
OGP確認
2.6 hタグ（見出し）の設定
h1からh6の見出しタグが適切に設定されているかどうかを確認します。数字が小さいほど重要度は上がります。クローラーがページを理解するための大切な要素です。
hタグの使用には順番のルールがあります。数字が小さい順（重要度の大きい順）に並べます。マトリョーシカ人形と同じイメージで、たとえば、h3より重要度の大きなh2をh3の中に入れるような並べ方は推奨されません。
クローラーにコンテンツの構造を正確に伝えるためには順番を守って使用するようにしましょう。
2.7 alt属性
alt属性には、各画像の説明を入力します。alt属性を設定することで、万が一、画像が表示されていない場合に、画像の説明が表示されるようになります。
入力内容については、SEO対策にもなるように、画像の内容に即した内容を入力します。検索順位向上のためには、画像の内容説明はページ内容をクローラーに認識させる大事な要素ですので、漏れがないように登録しましょう。
2.8 サイトマップXML
クローラーにページの構造を理解してもらうために使います。以下のようなツールを使って簡単に作成できます。作成後は、サーバに設定することでクローラーがサイトを認識します。
サイトマップを作成-自動生成ツール sitemap.xml Editor
1,000ページまでのサイトであれば無料で作成できます。
ページの新規追加やリニューアル等でページ構成が変わった際には、サイトマップも合わせて同期しておきましょう。
新ページだけでなく旧ページもアップしておく場合など、内容の重複するページが存在する場合は、「悪質なコピーコンテンツではない」ということや、「重要なページである」ということをクローラーに知らせる必要があります。本記事では説明を省略しますが、「canonical」の設定や、「.htaccess」によるURLの正規化設定も、必要に応じて行なうようにしましょう。
また、サイトのリニューアルの場合は、ページの統合やURLの変更が多々ありますので、古いURLから新しいURLに自動的にページを転送する「リダイレクト」の設定も合わせて行ないましょう。
2.9 Web解析、計測タグ チェック
2.9.1 解析ツールタグ・コンバージョン計測タグ・リマーケティングタグの設定
顧客とFIXしたサイト仕様書に応じて、GoogleAnalyticsやGoogle Adwords、Yahoo!プロモーション広告、タグマネージャーの設定内容と設置場所を確認します。
申し込み数・資料請求数などをコンバージョンとして設定し、計測する場合は、行動につながる導線設計が適切か正しく設定されていて、データが計測されているかも確認しましょう。
3.まとめ
Web制作の仕事は、Webサイトなどの成果物に対して対価をいただく仕事です。
完成した成果物をチェックしてエラーや不具合がないことが必須となります。上記のチェック事項を参考にして、作業の区切りで確認、修正を経て品質の高いサイトを作成して納品するようにしましょう。
ひとつひとつの正確で丁寧な作業が、信頼を築き、新たな受注につながります。トライ＆エラーを繰り返しながら技術を身につけ、サイト制作を重ねていくことにより成長していきましょう。
Web業界でキャリアを重ねていくには、継続的な技術習得と努力と柔軟な対応力が必要です。習得した技術を活かせる制作業務を楽しみととらえ、日々前進しましょう。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
Web制作の仕事を確実にしたいなら
Web制作はスキル習得の難易度が低いため、競合となる働き手が多いです。
もちろん、企業で実務経験を積んだハイレベル人材とも案件を取り合うことになります。
そのため、未経験からだとなかなか案件を獲得できないことも。
テックアカデミーのはじめての副業コースでは、Web制作の案件紹介をしているので、確実に仕事を受けられます。
※フリーランスを目指す方にもおすすめです。
※コース終了後の審査に合格し、案件に応募された方には1ヶ月以内の案件紹介を確約しています。
その他、案件サポート対象コースはこちら
- Webデザインコース
- フロントエンドコース
- フロントエンド副業コース（審査の合格までサポート）
また、このようなお悩みを持ったことはありませんか？
「スキルは習得したけど、自分の実力でこなせる自信がなく、案件への応募に躊躇してしまった」
このあるあるを解決すべく、現役エンジニア/Webデザイナー講師が案件の進行や、技術的なわからない点のサポートを無料で行います。
- お仕事紹介
- プロのサポート
この2つのサービスがあるので、安心してお仕事に取り組めます。
Web制作に必要なスキルを体系的に学んで、確実にお仕事を手にしませんか？
まずは無料体験からお試しください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
