フリーランスの忘備録

Dark Mode

searchKeywords

sellBlog Taglist

boltおすすめ記事

コーディング後に使う検証用のwebサービスなどをまとめてみた

コーディング後に使う検証用のwebサービスなどをまとめてみた

コーディングの後に確認したり、検証したりすることって意外に多くて忘れてしまいます。今回は備忘録としてまとめてました。
確認したり、検証したりするwebサービスの紹介もしていますので、制作の際に参考にしてみてください。

コーディング後の確認の流れ

  1. 実機確認・表示確認
  2. html,cssの検証
  3. favicon作成
  4. metaデータを設定
  5. OGPを設定
  6. 構造化マークアップ
  7. 共通パーツを共通化
  8. アナリティクスを設定
  9. PageSpeed Insightsで速度チェック

実機確認・表示確認

コーディングが完了したら、ちゃんと表示崩れをしていないかを確認することは当たり前のことです。
私はmacユーザーなので、実機のパソコンではChrome、Safari、Firefoxで確認した後に、iPhoneのChrome、Safariで確認します。

その後はwebサービスなどを利用して確認します。私が使用している表示確認用のツールを紹介します。

  • Sizzy

    一度にさまざまなデバイスサイズで確認ができるwebサービスです。
    ChromeのExtensionもあるので準備されているので、Extensionで追加しておくと便利です。

  • VirtualBox

    windows以外のOSもサポートされている仮想化ソフトウェアです。
    MicrosoftのDownload virtual machinesで確認したいIEのバージョンとOSを選んでダウンロードすれば、VirtualBoxの細かな設定しなくても仮想マシンをすぐ立ち上げることもできます。

html,cssの検証

htmlやcssの書式が間違っていないかを確認するのも大切なことです。
検証は以下のサービスでやっています。

favicon作成

特に先方から指示をいただいていない場合はロゴからfaviconを作成します。
faviconはいろいろなサイズを準備をする必要があり、全てのサイズを自分で用意するのは大変なので以下のwebサービスで一括で作成しています。

  • Favicon Generator for all platforms

    512×512以上のファビコンの画像を準備して、アップロードするとさまざまなプラットフォームに対応したファビコンを作成してくれます。

metaデータを設定

SEOに関連するtitleタグ、descriptionを設定します。
keywordsは、、、設定しなくてもいいですかね。

OGPを設定

次はOGPを設定します。
ogpタグを記述する際は、htmlタグまたheadタグに下記の記述を追加します。

prefix="og:http://ogp.me/ns#"

ogpタグは共通用、facebook用、twitter用で設定します。

<!-- 共通用 -->
<meta property="og:site_name" content="サイト名">
<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="ページの説明文">
<meta property="og:type" content="ページのタイプ ※ほとんどの場合は「website」また「article」">
<meta property="og:url" content="ページのURL">
<meta property="og:image" content="サムネイル画像のパス（絶対パスで記述）">

<!-- facebook用 -->
<meta property="fb:app_id" content="facebookアプリID">

<!-- twitter用 -->
<meta name="twitter:card" content="サムネイル画像の表示の仕方。必須タグ。「summary」「summary_large_image」「app」「player」のいずれか">
<meta name="twitter:site" content="該当サイト用のtwitterアカウントがあれば、そのusernameを設定">
<meta name="twitter:title" content="ページタイトル。必須タグ。「og:title」と同じであっても設定">
<meta name="twitter:description" content="ページの説明文。「og:description」と同じならば設定しなくてもよい">
<meta name="twitter:image" content="twitter用のサムネイル画像があれば設定する。「og:image」と同じならば設定しなくてもよい">

他にもタグはいろいろありますが、とりあえず上記の分で大丈夫かなと思います。
もっと詳しく知りたい方は下記の公式ドキュメントをご覧ください。

構造化マークアップ

SEO強化のため構造化マークアップもやります。ただこのことを事細かに書いているとこの記事が終わらない気がしますので、まだ別記事で書きたいと思います。
構造化マークアップに関連するサイトをまとめておきます。

共通パーツを共通化

ヘッダーやフッターなどの共通パーツをphpやDreamweaverのライブラリを使って共通化します。
私はDreamweaverでコーディングをしていないので、phpが使えないとなると自作のライブラリjsを使っています。
自作のライブラリjsはNode.jsを使って、Dreamweaverのライブラリ機能を作ってみたで紹介しています。

アナリティクスを設定

アナリティクスタグを設定を設定します。解析のために必要です。
Googleタグマネージャーとか、Googleアナリティクスとかはまだまだ勉強中です。

PageSpeed Insightsで速度チェック

PageSpeed Insightsで読み込み速度をチェックします。
読み込み速度が遅いとwebサイトを閲覧する前に離脱することも多くなるので、必ずチェックします。
最適化されていない場合は最適化された画像やcssなどを作ってくれてダウンロードできるので、なんて気の利いたサービスなのだろうと驚きました。

コーディングが終わったら、一仕事終えた気がしてここまでいろいろ確認するのを忘れてしまうこともあるので、今回は備忘録としてまとめることができてよかったです。
少しでもみなさんの参考になればと思います。

arrow_circle_up