プログラミング/仕事

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

コーディング着手前に確認すべきこと

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

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

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

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

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

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

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

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

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

納期は確認事項ではない

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

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

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

案件確認事項タイミング

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

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

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

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

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

一つ一つ見ていきます。

①フォントの確認

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

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

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

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

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

①フォントを購入する

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

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

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

②Adobe Fontsを利用する

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

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

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

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

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

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

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

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

欠点:とても重い

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

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

そのまま使おうとすると8MBもある

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

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

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

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

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

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

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

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

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

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

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

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

サイトマップ

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

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

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

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

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

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

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

③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でシェアすると以下のように表示されます。

twitter
facebook

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

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

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

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

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

ちなみにアクセス数多い著名サイトでも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で公開しています。

コーディング課題 XD PSDデザインデータ配布
  1. XD,PSDデザインからのコーディング
  2. 2回の表示確認特典
  3. ポートフォリオOK

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

しょーご

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

さらに、まとめて購入していただくとかなりお得になります。

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

あなたに是非読んでほしい記事です!