プログラミング/仕事

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

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

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

みなさん、コーディング案件を始めるにあたってどういった事項を事前に確認しているでしょうか?

ゆうすけくん
ゆうすけくん
え、特に何も確認してないんですけど。なんとなくスタートしてます
ようこちゃん
ようこちゃん
納期は確認してます!
しょーご
しょーご
え、それだけ…!?
しょーご
しょーご
ちょっとそれだと早いうちにトラブりそうだから、コーディング案件前に絶対確認しておくべきことを今回紹介するよ!

納期は確認事項ではない

さきほど「納期」という言葉が出ましたが、納期は今回紹介する確認事項には入っていません。

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

案件確認事項タイミング

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

案件受注時に既に確認しているはずのこと
  • かなりおおまかな仕様(例:WordPressサイトにページやLPを追加したいなど)
  • 納期
  • 費用

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

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

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

一つ一つ見ていきます。

①フォントの確認

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

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

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

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

これしか方法がありません。

①フォントを購入する

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

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

②Adobe Fontsを利用する

以外に知られていませんが、クライアントワークでAdobe Fontsを利用する場合は「クライアントもAdobeの有料会員にならないといけない」という規定があるため、

かなりハードルが高いです。そしてAdobe CCの会員をやめるとフォント配信が解除されます。

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

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

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

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

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

そういった点も加味して先方とすり合わせしてみてください。

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

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

サイトマップ

サイトマップ(構成図)をエクセルで簡単に作成する方法【テンプレート付き】

https://web-kanji.com/posts/making-sitemap-by-excel

ここに「各ページのタイトルやディスクリプション」がまとまっていることが多いです。

しかし準備していないクライアントも多いので、その際は

  1. 先方に準備してもらう
  2. こちらで仮のテキストを入れておく

どちらかの対応を取ることになるかと思います。

③URL構造(スラッグ)

例えばこのページの場合URL(WordPressなので厳密にはスラッグ)は「pre-check」となっています。

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

例えばお問い合わせページなら「contact」「inquire」の両方の可能性があります。

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

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

④ファビコン

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

しょーごログ
<head>
  <link rel="icon" href="/favicon.ico">
</head>

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

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

これはジェネレーターで簡単に作成することができます。

Favicon ジェネレーター

https://favicon-generator.mintsu-dev.com/

⑤OGP

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

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

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

Twitter
しょーごログ
facebook

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

当然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="@ツイッターユーザー名" />

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

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

metaタグ一括設定

https://metatags.io/

OGP表示確認(ラッコツール)

https://rakko.tools/tools/9/

Twitter Validator(Twitter公式)

https://cards-dev.twitter.com/validator

ちなみに弊コーディング教材でもファビコン、OGP設定を練習することができますので、よろしければ覗いてみてください!

⑥ホバーアクション

主にボタンのアニメーション周りになります。

以下のアニメーションを御覧ください。

ホバーアクション

一見単純なボタンも、アニメーションが複雑でネットに情報もないと、時には数時間かかったりします。

想定していた工数がアニメーションで後ろにずれ込むことがあるので、最初の段階で依頼者に確認しておきましょう。

自分はシンプルでいいと思っていても、先方はおしゃれなアニメーションを期待しているケースは悪夢の始まりです。

⑦スクロールアニメーション

スクロールアニメーションとは、スクロールとともにふわっと表示されるアニメーションのことです。

確認チャート
  1. まずアニメーションの有無を確認
  2. 必要なら、種類を確認
  3. 実装工数と相手の希望に齟齬がある場合は相談

③について補足:落とし所を見つける

  • 納期が極端に短く予算も無いのに豪華なアニメーションつけたい場合は減らす相談
  • 読み込み速度や返って情報にアクセスしにくくユーザビリティー的によくない場合は削る

そういった相談をしたほうがいいかなと思います。

⑧デザインカンプで意図しない誤差は統一してよいか

デザインを見ていると、余白やフォントサイズ、line-heightやletter-spacingがバラバラなことがよくあります。

コーディングに取り掛かる前にデザインカンプを見て値がずれている箇所を発見したら、

これらの値をこちらでそしなに調整してよいか確認しておきます。

一番最悪なのは、デザインどおりにバラバラにつくったら

クライアント

バラバラなんで直してください!

と言われることです。徒労で終わります。

ぶっちゃけ値がバラバラだとSassで変数やmixinにまとめにくいので、実装も地味に大変になります。

デザイナーが意図したものは、ズレではない

ちなみに、デザイナーに確認せず勝手に値を調整することは推奨できません。

なぜなら我々コーダーにはわからない「1pxのこだわり」がある可能性があります。

Webデザイナーは1pxの違和感のあるズレに普通に気づくので、きちんとデザイナーとコミュニケーションを取ることをサボらないようにしましょう。

デザイナーとディレクターを介してコミュニケーションを取る場合も同様

基本的にデザイナーと直接やり取りする人よりも、「制作会社のディレクター」と案件のコミュニケーションを取る人が多いかと思います。

その場合はコミュニケーションが円滑に行かない場合もありますが、

  • デザイナーに確認してもらう
  • デザイナーと直接つないでもらってコミュニケーションをとる

のどちらかをしたほうがいいと思います。

ほとんどの人はコーディング前のチェックをしていない

ここまででコーディング前チェックの項目をもう一度復習しましょう。

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

これらをコーディングを始めるまでに確認するひとは正直ほとんどいない印象で、あなたもなりゆきでコーディングしてませんでしたでしょうか?

しょーご
しょーご
まあ私も最近意識できるようになった口なんですが…

今回の記事をきっかけにコーディング前に確認する癖がつけば、優秀な実装者になること間違いなしです。

頑張っていきましょう!!💪😁

今回の関連記事一覧

Web制作の流れ解説

今回はコーディング前のチェック事項ピンポイント解説でしたが、Web制作全体の流れも解説しています。

コーディングのチェックポイント

コーディングの初稿提出前のセルフチェックポイントをまとめています。

納品方法解説

コーディング後の納品方法について解説しています。

\\\コーディング教材公開中///

HTML初心者からWordPress実案件レベルまでのコーディング教材noteで公開しています。

コーディング教材
  1. XDデザインからのコーディング
  2. 2回の表示確認特典
  3. ポートフォリオOK

初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編WordPressの実案件を模擬体験できるレベル感にしています。

しょーご

自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります!

マガジンでまとめて購入していただくとお得になります。

書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!