サービスを「いざ、リリース！」と思ったタイミングで、実はまだまだ必要なタスクが残っていた事に気がつくのは、本当にエンジニアあるあるなのではないでしょうか。
この記事では、今までWebサービスをリリースしてきた筆者の経験を元に、共通して必要だと感じた「細かいけどとても大切なタスク」の数々をジャンル毎にまとめてみました。
目次
サービス全般
画像素材系
サービスロゴ作成
画面を占める割合は小さいですが、ユーザーの印象に強く残る重要なパーツです。
ロゴ作成の工程は専業の方がいるレベルで重要な工程なので、こだわりだすとキリがありません。
デザイン技術を持たないエンジニアで、現実的に対応出来る範囲だと次のような方法がオススメです。
おしゃれなフォントの力を借りる
フリーフォントや有償フォントの中でイメージに合うものを探しましょう。
Adobe Fonts を使えば気に入ったフォントをすぐにWebFont として利用出来るためとても便利です。
ロゴジェネレーターを使う
ロゴ画像を生成してくれるサービスがあるのでそれを利用します。「logo maker」等で検索すると結構引っかかるので好きなサービスを利用しましょう。
ココナラ、ランサーズといったクラウドソーシングを利用する
ロゴ作成やデザインのタスクを受け付けている方を見つけ、予算に合わせて依頼をかけてみましょう。
ロゴ販売専用サイトから購入する
logomarket.jpといったロゴ販売専用サイトでは、既に作成されているロゴの中から気に入ったものを購入することが出来ます。
様々なジャンルのロゴが数多く登録されており、更にアレンジや修正箇所、カラー変更等の要望も可能なため、予算が許す限り柔軟な対応が可能です。
apple-touch-icon 作成
スマートフォンでWebアプリをホーム画面に追加した際にアイコンとなる画像です。
下記のようなmeta タグで設定します。
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" sizes="180x180">
apple-touch-iconはiOS、Android、双方から利用されます。
アイコンのサイズは様々な物が指定可能ですが、180×180のサイズを一つ指定しておけば必要十分かと思います。
apple-touch-startup-image 作成
こちらはSafari 固有の設定となります。
Safari は読み込み中、アプリの前の状態のスクリーンショットを表示しますが、この設定を行うことで明示された起動画像を表示することが出来ます。
<link rel="/apple-touch-startup-image" href="icon.png">
高度なメディアクエリを使用して、あらゆるデバイスにおいて適切な画像を設定する方法はこのページが参考になります。
favicon 作成
PCブラウザのタブ部分やお気に入りに登録した際に表示される小さなアイコンがfavicon です。
32×32 程度の小さな画像ですが、サイトをお気に入り/履歴から探し出す際や、複数タブを移動する際等に高頻度で見られているため、非常に重要な画像です。
<link rel="icon" href="/favicon.ico">
Webアプリ自体の信頼度やユーザビリティにも非常に大きな影響を与える存在なので必ず設定するようにしましょう。
運用系
利用規約作成
作ったサービスをWeb上に公開する上で、最も重要なタスクの一つです。
何かあったときに運営チーム（大抵自分）を守ってくれる最後の砦と言える存在です。
またサービスの詳細な仕様/挙動は作成した本人が一番把握しているので、利用規約の作成は本来アウトソースすること無く、サービス作成者/作成チームが対応すべきタスクです。
とは言え、利用規約を0→1で起こすのは相当な労力が必要なため、Webサービスにおける利用規約のテンプレートをベースに、自身の作成したサービスに合わせて拡張していくのがオススメです。
プライバシーポリシー作成
こちらもサービスをWeb上に公開する上で、非常に重要なタスクです。
特に個人情報を収集するようなサービス（会員登録等があるサービス）ではその扱いをどうするか、収集した情報はどのように/何に利用するのか、情報を削除したい場合はどのような手順で申請したらよいか、等の細かい手順を明記する必要があります。
Google Analytics、Google Adwords 、アフィリエイト等でCookie を利用する際は、ここでCookie の利用に関して明記する必要があります。
画像を掲載するようなサービスの場合、その画像の著作権/肖像権等の扱いを明記し、外部リンクを掲載するサービスの場合、移動先サイトで提供される情報/サービス等についての責任の所在を明確にしましょう。
また、提供するサービスがEEA域内の個人データを取扱う場合、GDPR対応版プライバシーポリシーを作成する必要があるので、こちらも漏れなく対応する必要があります。
UI/UX系
基本フォント指定
サイト全体の基本フォントを指定しましょう。使用デバイスにより表示フォントが変わってしまうと、ユーザーに対してなんともダサいサイトという印象を与えてしまいかねないのでしっかりと設定します。
font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'Open Sans', sans-serif
游ゴシック、ヒラギノ、メイリオを高優先度で、英語フォント用に、sans-serif を指定しておけば最低限OKかと思います。
meta theme-color 設定
Android 版のChrome では下記のようなmeta タグを追加することで、アドレスバーの背景色を指定することが出来ます。
<meta name="theme-color" content="#4285f4">
細かいですが、特定のプラットフォームにおいてよりWebアプリらしさを演出するために貢献してくれます。
SEO
sitemap.xml 作成
Google bot を始めとした検索クローラーが正しくサイトをクローリング出来るようにsitemap.xmlを作成します。
sitemap.xmlの作成方法はこのページが参考になります。
ウェブマスターツール登録
Google のウェブマスターツールにサイトを登録します。これによりGoogle はウェブサイトの存在を認知します。
クローラーフレンドリーなサイト構造であれば、サイト登録をするだけでクローリングが実施されますが、よりインデックスの最適化を行いたい場合、同ツール上よりsitemap.xmlを送信することが推奨されます。
WebSub 機構実装
新規公開コンテンツを即座にインデックスさせる手段がWebSub です。
※厳密なWebSub の定義はこちら
コンテンツを公開すると同時にその情報を特定のフォーマットでGoogle に申告することで、いち早いコンテンツのクローリングを促します。
これにより他のクローラー、bot等よりも先にGoogle がコンテンツを認識するため、パクり防止対策として大いに貢献してくれます。
ページコンテンツに応じたtitle、各種meta タグ設定
title タグ
ページに応じてタイトルを適切に設定します。
トップページは
サイトのキャッチコピー | サイト名
下層ページは
ページの内容/概要 | サイト名
といった感じで設定すると良いでしょう。
meta タグ
keywords
keywords は現在「SEO指標として使えない」というのが各社の見解なので、適当に設定しておけばOKかと思います。
description
description は検索結果画面に表示される可能性があります。コンテンツの内容を端的表現しておくと良いと思います。内容によりクリック率に大きく影響するため、しっかりと設定します。
copyright
サイトの著作権情報を記述します。
SEO的には何の効果もないため、余裕があれば記述しておこうくらいの認識で問題ありません。
計測/監視
Google Analytics 導入
サイトのPV/UU等を計測するためにとりあえず導入しておきます。
SPAに導入する場合は、ナビゲーション発生時にgtag('config', ...);がコールされるように組み込めばOKです。
Sentry 導入
Sentry はJavaScript 側で発生したエラーを収集するためのサービスです。
ユーザー操作により発生したJavaScript 側の予期せぬエラーは、再現やデバッグが非常に困難なため、Sentry の様なエラーロギングツールを導入することをオススメします。
SNS
OGP Image 作成
OGP Image はFacebook やTwitter 等のSNSでサイトがシェアされた際に表示される画像です。
画像が設定されていないと、せっかくシェアされた時に非常に残念な感じになるので、必ず設定するようにしましょう。
各種meta og 属性設定
SNS全般
og:site_name
サイト名を設定します。
<meta property="og:site_name" content="サイト名">
og:title
ページタイトルを設定します。
<meta property="og:title" content="ページタイトル">
og:description
ページの概要を設定します。
<meta property="og:description" content="ページ概要">
og:type
ページのタイプを設定します。値はwebsiteかarticleの何れかで、下層のコンテンツに対してはarticleを設定します。
<meta property="og:type" content="website">
og:url
ページのURLを設定します。
<meta property="og:url" content="https://example.com">
og:image
ページのOGP Image を設定します。SNSへシェアされた際にこの画像が表示されます。
<meta property="og:image" content="https://example.com/ogp_image.jpg">
og:image:width
OGP Image の横幅を設定します。
<meta property="og:image:width" content="800">
og:image:height
OGP Image の縦幅を設定します。
<meta property="og:image:height" content="800">
og:locale
ページの言語設定を設定します。サポートしているロケールを設定することで適切な翻訳が行えるようです。
<meta property="og:locale" content="ja_JP">
twitter:card
Twitter でURLをシェアされた際にどのように表示するかを設定出来ます。
値はsummaryかsummary_large_imageの何れかを指定します。
<meta name="twitter:card" content="summary">
summary_large_imageの場合
Happy 3rd anniversary #TBT! See how "Throwback Thursday" cemented its status as a weekly Twitter tradition: https://t.co/IhGdmShWH6
— Twitter (@Twitter) 2015年4月30日
summaryの場合
twitter:site
サイトのTwitter アカウントを指定します。
<meta name="twitter:site" content="@username">
twitter:creator
サイト作成者のアカウントを指定します。
<meta name="twitter:creator" content="@username">
fb:app_id 設定
facebook for developers で作成したアプリのIDを指定します。
これはFacebook が提供している、アクセス解析ツールであるFacebook インサイトを利用する際に必要となります。
SNS運用を本格的に取り組む場合は必ず設定しましょう。
各種SNSシェアボタンの設置
SNSへのシェアを行いやすい様にシェアボタンを設置します。
よく見かけるこのようなボタン達です。
必要なプラットフォーム分対応するようにしましょう。
マネタイズ
Google Adwords 導入
サイトマネタイズの一つの手段として、導入を検討します。
年々審査が厳しくなっているため、申請にあたっては様々な方の記事を参考にしましょう。
おわりに
思いついたアイディアを一心不乱に形にしていく作業はとても楽しいものです。
メイン実装以外のタスクは大抵退屈で面倒な作業ですが、せっかく作り上げたサービスを世の中へ公開するためにも、一つ一つ真摯に対応して行きましょう (｀･∀･´)ゞ
Webサービスは公開して、やっと”スタートライン”です。