Webサイト公開時に完成度を高めるポイント

6644 ワード
HTML ProgressiveWebApps Web HTML テキストリンク

はじめに

Webサイトを作って公開するときに、あともう一手間二手間かけるだけで完成度はグンと高まります。
Webサイト公開時に私が実践しているポイントをご紹介します。

アイコンとOGP画像

2種類の画像を用意しましょう。

1つ目はアイコンで、ブラウザのタブに表示されるfaviconや、Progressive Web Apps (PWA)でホーム画面に追加した際のアプリアイコンになります。
iPhoneでホーム画面に追加すると以下のように表示されます。

解像度は512x512で作成しておくと良いでしょう。

2つ目は、SNSなどでURLが貼られると表示されるWebサイトの
以下はSlackにURLを貼ったときの表示例です。

こちらの解像度は1200x630で作成しておくと良いでしょう。

ウェブアプリマニフェスト

ウェブアプリマニフェストは、PWA向けのアプリケーション情報を記述するファイルです。

Web App Manifest Generatorで必要な項目を入力し、アイコン画像をアップロードすると、ウェブアプリマニフェストのファイルと必要なサイズのアイコンを精製してくれます。

各項目の詳細についてはMDN等のドキュメントを参照してください。

head要素

faviconの設定や、検索やSNSでシェアされたときに表示されるWebサイトの情報、PWAの設定等をhead要素に書いておきましょう。

設定できる項目が多いため、私が最近作成したアプリでの実装例の紹介に留めますが、これぐらいあれば最低限の用途には耐えられるでしょう。

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#fff" />
    <title>ふせんトレーナー</title>
    <meta
      name="description"
      content='デザインセンスを磨く"ふせんトレーニング"のアプリです。'
    />
    <meta property="og:url" content="https://sticky-note-training.vdslab.jp/" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="ふせんトレーナー" />
    <meta
      property="og:description"
      content='デザインセンスを磨く"ふせんトレーニング"のアプリです。'
    />
    <meta property="og:site_name" content="ふせんトレーナー" />
    <meta
      property="og:image"
      content="https://sticky-note-training.vdslab.jp/ogp.png"
    />
    <meta name="twitter:card" content="summary_large_image" />
    <link
      rel="apple-touch-icon"
      sizes="192x192"
      href="./images/icons/icon-192x192.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="192x192"
      href="./images/icons/icon-192x192.png"
    />
    <link rel="manifest" href="./manifest.webmanifest" />
  </head>

画像等のパスは皆さんのアプリの状況に応じて適切に設定してください。

ホスティング

Webサイトのホスティング先を選ぶ際に押さえておきたいポイントは、HTTPSを必須にできることと自分の所有するドメイン（カスタムドメイン）を設定できることの2つです。

最近では、安全なWebサイトを提供するためにHTTPではなく、HTTPSの使用が推奨されています。
PWAでもHTTPSの使用が推奨されていて、Service Workerなどいくつかの機能はHTTPSでホスティングされていないと動作しません。

カスタムドメインの設定は必須ではありませんが、ブランディングにもつながりますし、Webサイトへの愛着も湧くでしょう。
安いものでは年間1000円程度の金額でドメインを取ることができます。
私はGoogle Domainsでドメインを取っています。

私はWebサイトのデプロイ先として、よくNetlifyを利用します。
無料プランでも、本格的なWebサイトを公開するのに十分な機能を備えています。
Netlifyを使えば上記の2つにも簡単に対応することができます。

公開後のチェック

Lighthouseは主にPWAを対象としたWebアプリの監査ツールですが、PWAに限らなくてもモダンなWebサイトに必要なベストプラクティスが詰まっているので、デプロイが完了したら一度チェックしてみましょう。

また、SNS共有の設定が適切にできているか確認するために、TwitterのCard Validatorにかけてみましょう。
問題がなさそうなら、実際にTwitterやSlack等にURLを貼ってみて設定した情報が表示できているか確認してみてください。

おわりに

それぞれの項目については、既に詳細な解説などが多く存在しているので、本記事で紹介されたキーワードでわからない点などは個別に調べてみると良いでしょう。
はじめてWebサイトを公開する人などの参考になると幸いです。