Web制作コーディング案件着手前に確認しておくべきこと【トラブルを防ぐ】

こんにちは、現在Web制作フリーランス5年目のしょーごと申します。

みなさん、コーディング案件に着手する際に、もしかしていきなりコードを書き始めていませんか？

実は実際にコーディングを始める前に、事前に確認しておくべきこととというのがいくつかありまして、

これを知らないと、直前になってパニクることになります。

案件を始める前に、不安事というのはできるだけ減らしておきたいと誰しも思うと思います。

そこで、今回は「Web制作のコーディング案件着手前に確認しておくべきこと」ということで、お話していきます。

私自身はこれまで　３年ほどフリーランスとして活動しており、100件以上の制作をこなしており、その中で培ったノウハウがありますので、

この記事を見ていただくことで、案件への不安を減らし、より円滑に進められるようになることをお約束します。

それでは見ていきましょう！

Web制作で仕事をしていこうとしている人はみるべきだ〜

以前、アニメーション確認せずにコーディング進めてて、そういやアニメーションどうするんだ？

ってなって焦った経験がありましたw#web制作
Web制作コーディング案件着手前に確認しておくべきこと【トラブルを防ぐ】 https://t.co/wwkiwEQTPT
— モリヤス (@_moriyas) July 3, 2021

しょーご

この記事を書いたのは
しょーご（@samurabrass）

当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。

＼現役エンジニアのレビュー付き／

実践レベルのコーディング課題公開中

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】 — 販売ページはこちら

デザインカンプからのコーディングを経験したい
現役エンジニアのレビューを受けてみたい
即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています！

コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。

Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！

＼無料の入門編から本格企業サイトまで／

ひとまず課題を見てみる

納期は確認事項ではない
コーディング着手まえに確認すること
ほとんどの人はコーディング前のチェックをしていない
今回の関連記事一覧

納期は確認事項ではない

案件前に確認するべきことと言うと、皆さんまず「納期」「価格」、こんなものをイメージされるかもしれません。

しかし、納期は今回紹介する確認事項には入っていません。

まず今回紹介する「コーディング案件着手前の確認事項」とはこのような立ち位置にあります。

納期というのは案件受注以前に確認していることなので、コーディング前に確認すべきことではありません。

案件受注時に既に確認しているはずのこと

かなりおおまかな仕様（例：WordPressサイトにページやLPを追加したいなど）
納期
費用

コーディング着手まえに確認すること

それではコーディング前に確認することをざっくり見ていきましょう。

コーディング前チェックシート

フォント(デバイスフォント、購入必要なものでないか)
各ページのタイトル、ディスクリプション
URL構造（スラッグ）
ファビコン
OGP
ホバーアクション
スクロールアニメーション
デザインカンプで意図しない誤差は統一してよいか

一つ一つ見ていきます。

①フォントの確認

まずはフォントのすり合わせを行います。

例えばデザインカンプに「筑紫B丸ゴシック」が使われている状態を想定します。

この「筑紫B丸ゴシック」は実はMacOSにしか入っておらず、Windowsユーザーに表示させるには

フォントを購入する
Adobe Fontsを利用する
Macのフォントブックから拝借してサーバーにアップロードして読み込む

これしか方法がありません。ただやっかいなことにたまにデザインに組み込まれていたりするので、対処方を考えてみます。

①フォントを購入する

年間定額制フォントサービス「LETS」に登録しなければなりません。

3年間で79,200円（税込）なので、先方に負担してもらうにしても、相当高いと思います。

買いきりじゃないのもややこしいですね。

②Adobe Fontsを利用する

公式サイトの文言を借りれば、こんな感じのものです。

つまり、Adobe CCを契約していれば、無数のフォントが使えてしまうという、なんとも便利なサービスだったのですが、

しかし以外に知られていませんが、2020年1月よりクライアントワークでAdobe Fontsを利用する場合は

「クライアントもAdobeの有料会員にならないといけない」という規定があるため、

現在はかなり利用ハードルが高いです。そして恐ろしいことに、Adobe CCの会員をやめるとフォント配信が解除されます。

なので、デザインにAdobe Fotnsが含まれていたら、必ずデザイナーに誰のアカウントでWebフォントのコードを取得するか確認したほうがいいです。

③Macのフォントブックから拝借してサーバーにアップロードして読み込む

一応Macのフォントブックからフォントデータ抜き出して利用できますが、ライセンスの問題があるので、要確認かなと思います。

欠点：とても重い

「筑紫B丸ゴシック」含め、日本語をWebフォントとして使おうとすると、めちゃくちゃ重いです。

ひらがな、カタカナ、漢字など、明らかにアルファベットよりバリエーション豊かなのが原因なのかなと思っています。

なので、サイトスピードは諦めてもらう他なくなります

一応フォントの軽量化もできて、

font-weightを絞る
サブセット化し、必要な文字のみ読み込むようにする

などで軽量化できます。が、それでも英字フォントに比べて圧倒的に重いです。

結論：できればシステムフォントかGoogleフォントがベスト

正直フォント周りはものによってはかなり高額だったり、サイトが激重になったりで無理があるので、

適切なライセンスを所持していない場合で、それでもWebフォントを使いたいのなら、Googleフォントの中から選ぶのが無難かなと思います。

フォントは本当に「筑紫B丸ゴシック」でないといけないのか。

そういった点も加味してデザイナーとすり合わせしてみてください。

結構Webのフォント実装の制限や不自由さを知らないデザイナーさんも多いので、コーダー側から積極的に確認したほうがいいかなと思います。

②各ページのタイトル、ディスクリプション

できれば先方から「サイトマップ」をもらうのがいいです。

サイトマップ（構成図）をエクセルで簡単に作成する方法【テンプレート付き】
https://web-kanji.com/posts/making-sitemap-by-excel

ここに「各ページのタイトルやディスクリプション」がまとまっていることが多いです（リンク先ではもっと紹介なものが見れます）

制作会社案件などだと準備していることが多いです。

しかし、特に直案件だと準備していないクライアントも多いので、その際は

タイトル・ディスクリプションを準備してもらいつつ、
その間こちらで仮のテキストを入れておく
先方の準備ができ次第、入力していく

こういった対応を取ることになるかと思います。

③URL構造（スラッグ）

例えばこのブログ記事の場合URL（WordPressなので厳密にはスラッグ）は「pre-check」となっています。

ここの文字列をどうするかということです。

先程のサイトマップにも「URL」ということで規定されていたと思います。

複数ページコーディングの際は重要になってきますので、サイトマップに準拠して設定していき、

先方に用意がなければこちらで仮のものを入れておくことになります。

例えばお問い合わせページなら「contact」などになりますね。

④ファビコン

ファビコンとは例えばこのブログの以下のようなタブの部分の画像のことです。

<head>
  <link rel="icon" href="images/favicon.svg" type="image/svg+xml">
</head>

大抵はアイコンを指定する傾向にありますが、暗黙の了解的な感じで仕様でも無視されやすい項目なので、しっかりと先方と使用する画像を確認しておきましょう。

昔は1つの画像ファイルでデバイスや環境に応じて最適なサイズで表示することができますので、ico形式がおすすめだったんですが、

2020年からはsvgに対応したので、縦横32pxほどのsvgのアイコンを一つ用意しておけばいいかなと思います。

⑤OGP

FacebookやTwitterなどのSNSでwebページやブログの記事がシェアされた時、

そのページのタイトル、URL、概要、画像を表示させる仕組みのことです.

例えばしょーごログを各SNSでシェアすると以下のように表示されます。

普段SNSを使っている方は一度は見たことがあるのではないでしょうか？

これって実はブラウザがよしなに表示してくれているのではなくて、しっかりコードを書いてあげないとこのようなカードは表示されないんですね。

それをOGP設定と言います。

設定していないと、ただのリンクになってしまいます。

当然SNSでシェアされやすい今の御時世、しっかりOGPを設定しておくことはクリック率を上げる上で大事になってきます。

ちなみにアクセス数多い著名サイトでもOGP設定されてなかったりします。カードが展開されずリンクだけなので、シェアしたとき見栄え悪くて、非常にもったいないなと感じます。

こういった知識も、提案の材料にできるかなと思います。

OGPが設定されていれば、ページや記事の内容を分かりやすくユーザーに伝えることができます。

OGP設定の方法

例えばTwitter用OGPの設定コードは以下のような感じです。

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/ fb# prefix属性: http://ogp.me/ns/ prefix属性#">
<meta property="og:url" content=" ページの URL" />
<meta property="og:type" content=" ページの種類" />
<meta property="og:title" content=" ページの タイトル" />
<meta property="og:description" content=" ページのディスクリプション" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content=" サムネイル画像の URL" />
<meta name="twitter:card" content="カード種類" />
<meta name="twitter:site" content="@ツイッターユーザー名" />

とはいえこれを毎回書くのはめんだくさいですよね。

そこで様々な無料便利ツールを紹介します。

ちなみに弊コーディング教材でもファビコン、OGP設定を案内してますので、まだ設定されてない方は、試しにしてみるといいかなと思います。