はじめに
@かい です。私は仕事でもプライベートでもよく Web アプリを作っています。
この記事では自分の知っている Web アプリを改善していくアイデアを全部書いていきます。
項目をリストアップしたら１００以上あった ので、毎日少しずつ書いて更新していきます。
プライベートで運営しているサイトの PV は現在、6万PV 程度です。このアイデアをもとに改善していく過程をブログや X に書いていってます。
Web アプリ改善アイデア
OGP(Open Graph Protocol)は、X、Facebook、Slack、LINE などの SNS やメッセージアプリで、URL をシェアした時にリッチなデザインで表示してくれる仕組み。HTML のメタタグで指定する。「OGP 確認」と検索すると OGP チェッカーを探すことができる。X などの SNS で自分のページのリンクがイメージ付きで大きく表示されるのはメリット。
Web ページの品質をチェックするための OSS ツール。認証が必要なページでもチェックできる。Chrome 開発者ツールから実行できる。Performance、Accessibility、Best practices、SEO の4つの大項目からチェックできる。
Google 検索からサイトへの流入をチェックできるツール。検索キーワードごとのアクセスや検索順位を確認できる。ページがちゃんとインデックスされている(Google に認識されている)かも確認できる。
サードパーティ製のツールをサイトに導入するためのコード(タグ)を配信してくれる。GTM を介してコードを配信することで、ソースコードを変更することなくツールを導入できるのがメリット。主にトラッキングコードなどを追加する。追加しすぎるとサイトが重くなってしまうので注意が必要。
ページ内で使用する文字のみが収録されたフォントファイルを作成して使用するテクニック。サブセットを使用することでロード時のデータ量が削減できる。特にデータ量の多い日本語のフォントファイルでは効果が高い。
リクエストごとに Web サーバーがレスポンスを生成して返却するのではなく、生成したデータを一定期間保存しておいて返却に活用する仕組み。レスポンスを生成しなくなる分、データ返却までの時間が早くなる。
習慣大事。
画像はテキストに比べてデータ量が多くなる。重い画像ばかりのページは表示が遅くなり、「使いにくいサイト」という印象をユーザーに与えてしまう。
WebP は PNG や JPEG にかわる次世代画像形式。PNG、JPEG に比べて約25%から34%容量が少なくて済む。
テキストだけで説明するのではなく、イラストや写真などを交えながら説明した方がユーザーに伝わることはよくあります。
GitHub Actions などの CI/CD ツールを使って、Git にコミットしてプッシュすると自動的に本番環境にデプロイできる。私はプロジェクトを始めるとまずこの部分を整備する。その方がデモしやすいし、Git にコミットするだけでサイトに反映されていくのでモチベーションも維持しやすいからだ。
メディア掲載を狙って発信された、新着情報をプレスリリースと言います。専用のサービスもあるが、自サイトに掲載してもよい。検索結果などからユーザーの目に触れることも多い。
悪意のある攻撃から、サイトを守ること。攻撃手法も、対策も幅広い。セキュリティ対策は一つではなく幾つも行うことが必須。情報漏洩が起きると、評判が落ちてしまうのでユーザーが減ってしまう。
サイトの使い方や、使ってみた感想を掲載するとサイトの露出が増える。note や、Zenn などのプラットフォームに掲載してもいいし、ブログやサイト本体に載せても良い。SEO の効果もある。
Google などの検索サービスで、あるキーワードで検索された回数を検索ボリュームという。 私は検索ボリュームはある種、世の中の需要の強さを図るバロメーターとしても使えると思っています。
関数化とも言う。頻出するコードはコンポーネント(部品)としてまとめておくことで、生産性高く開発できる。
ユーザーはタイトルを見てクリックするかを決めている。本のタイトルと同じでとても重要。
タイトルタグと一緒に検索結果に表示される。
イラストで機能などをわかりやすくナビゲーションできる。世界共通。
サイトの顔。
iOS など何もしないと、サイト名の頭文字が登録される。メタタグから設定できる。
多ければいいと言うわけでもないが、SEO で多くのキーワードでキャッチされるようになる。
thumbnail タグを設定していると、検索結果に画像が表示されるようになる。 必ず表示されるわけではないが、表示に成功するとユーザーの目を引きやすくなる。
アクセシビリティが良くなる。Google などの画像検索にも表示されるようになる。
ツールアプリなどで初期情報が入力されていると、ユーザーがアプリの使い方をイメージしやすくなることがある。ユーザー情報を入力箇所では使えないので注意。
デザインが良いかどうかは、そのサイトに愛着を持って使ってもらえるかにとても影響すると思います。 また、ビジネス用途のサイトでも、「デザインにお金をかけられないサイト」とみなされて、信頼性を高めるのに障害となってしまってはもったいないです。 デザインキットやテンプレートを使うだけでも大きく、デザイン性を底上げできるのでおすすめです。
GA4 のカスタムイベントはオリジナルの GT4 イベントを作って計測できる機能です。 例えば私は、アプリを利用開始した時や、複数項目のフォームで離脱が増えるポイントを計測するのに使っています。 収集したイベントは GA4 のイベントとして記録されます。キーイベント(コンバージョン)としても登録できます。 さらに Google 広告と連携させることで、カスタムイベントが最大数発生するように AI が広告を配信してくれます。
ログイン機能のあるサイトは Google アカウントなどのサードパーティアカウントでログインできるようにするとサイトの利便性を向上させることができます。 そのサイトのパスワードを覚える必要がなくなるからです。日本国内のサイトであれば、LINE アカウントでのログインもおすすめです。
私が「どのページに手を入れればいいかわからない」時に実践しているテクニックです。 Googel Search Console で表示回数が多い順で並べ替えます。その後に検索順位が１２位から２位までのページに順番に改善させていきます。 表示回数が多いということは１位になった時の効果も高いということなので、コスパ良く改善していけるのではと思っています。
「ページがインデックスされる」と言うのは、Google などの検索サービスのデータベースに登録されている状態のことです。 ページがインデックスされないとどんなに良いコンテンツのあるページを作成しても検索結果には表示されません。 また、検索結果に表示したくないページはインデックスされないようにする必要があります。
トレイリングスラッシュとは Web ページの URL の末尾にあるスラッシュ(/)のことです。 基本的に付けても付けなくてもどちらでも大丈夫です。ただ、どちらかに統一したほうがわかりやすいです。 2つ目のサイトをサブディレクトリに作る場合は、トレイリングスラッシュを有りにしたほうがいいです。 サブディレクトリに2つ目のサイトを作る時、Google search Console ではトレイリングスラッシュ有りの方が管理しやすいです。
Google、Yahoo!、LINE、X いくつか広告媒体があります。 Google 広告の P-MAX がおすすめです。広告の内容と基本設定をするだけで、 あとは Google の広告ネットワーク内で最適な広告露出パターンを機械学習を使いながら自動的に最適化してくれます。
サイトのコンセプトをきっちり作ることをとても重要だと思います。 リリース後でも、今のサイトのコンセプトがユーザーに刺さるものなのか考えるべきだと思います。
例えば英語に翻訳すると、日本語のページよりたくさんのユーザーにリーチできる可能性があります。 日本語話者より英語話者の方が多いからです。
例えばブログ記事であれば、ページ下部に関連記事のリンクを設置する。のようにコンテンツを楽しんでもらった後に、次のアクションを考えて想起させる。
イラストやアイコンの素材がセットになったもの。書籍として売っている。
サイトからどのような形で収益を得るのか考えること。 サービスの受注をサイト経由で受け付けたり、サイトに広告を掲載して収益を上げるなど様々な方法がある。
アナロジーとは、ある物事の特徴を別の事柄の似てる部分に当てはめて考えることを言います。 サイト、機能のアイデアを、別のサービス、ビジネスから着想を得ると案外良いアイデアになるかもしれません。
特にテキストコンテンツのサイトでは、文章が分かりやすいことはとても大事です。
𝕒𝕓𝕔のような特殊文字で、ユーザーの気を引きます。SNS の名前などでよく使われています。
トピッククラスターとは SEO のテクニックです。記事をトピックごとにグループ化した上で、そのトピックについて網羅的にまとめた親ページをつくります。その後に子ページから親ページに内部リンクを貼ることで SEO 評価を親ページに集めます。こうすることで検索結果の上位表示を狙います。
各ページのカテゴリーを決めた上で、カテゴリーごとに記事へのリンクを貼ったページを作ります。ヘッダーやフッターにカテゴリーの一覧も作成することで、ユーザーが目的の情報に辿り着きやすくなります。
「お風呂でいいアイデアを思いつく」よく言われていることですが、本当にあると思っています。私は以前関わったプロジェクトでシステムの設計の仕事をしていました。ものすごいタイトなスケジュールできつかったのですが、お風呂で思いつく設計のアイデアには本当に助けられました。職場で頭の中が煮詰まるまで考えて、スパッと諦めて帰るのです。その後家でお風呂に入ってると良いアイデアが思いつくという塩梅でした。
事前に仕様を全て確定させる、ウォーターフォールではなく、小さい機能ごとに仕様確、実装を回していくアジャイル開発の手法。 私はこの開発手法のメリットは大きく二つあると思っています。 一つ目は、ユーザーに初めてサービスを提供できるまでの期間が短くなる。 二つ目は開発の方向性を修正しやすいことです。
Four Keys などの開発指標は、健全な開発サイクルを回せているかの確認に使えます。 例えば、Four Keys では、デプロイの頻度、コミットから本番環境までのリードタイムなどを使って算出します。
ステージング環境とは、本番環境とは別に開発中のコードを確認するための環境のことです。 ステージング環境→本番環境と段階を踏むことでバグを本番環境に行く前に発見します。
ちゃんと寝て、スッキリした頭で作業するべし。
タイトルタグにはいくらでも長いタイトルを入れることができますが、検索結果に表示される文字数には限りがあります。大体30文字以内に収めるとうまく表示されます。
アイドルでもない自分が、例えば「今日、お昼に何を食べたか」についていくら発信しても誰かの興味を引くことはありません。それより、その人の人生が現れているようなコンテンツが受け入れられるのではと思っています。
特に個人でサイトを作る場合では、有用な方法の一つだと思います。 自分が欲しいものなのでモチベーションが続きやすいです。
作ろうとしてるサイトや機能を使えってもらえそうか、ターゲットになりそうな人に聞いてみます。特に作ろうとしてる領域に詳しくない場合、頭でっかちなアイデアになりがちです。
サイトでも文章でも、作ったものは自分以外の人に確認してもらうと思わぬ視点を得られたりします。例えば、ユーザー登録フォームだったら実際に操作してるところを後ろから見せてもらうと、どの項目の入力で躓いてるのか気付きを得られることがあります。第三者を用意できない時は「数日経った自分」も第三者になり得ます。
特にリモートワークで全く家から出なくても済む状況だと、ほとんど体を動かさずに生活できてしまいます。散歩することで健康維持できるし、気分もリフレッシュしましょう。
一度に多くの機能追加や修正をリリースにするのではなく、細かく分割してリリースするやり方。バグが紛れ込むリスクの量をコントロールしながらリリースできるのがメリット。自動デプロイなど、リリース作業のコストが少なくなるようにしておくと、導入しやすい。
X、Instagram、TikTokなどで情報発信する。
SNS で開発状況を発信することで潜在顧客を獲得できる。
Google の検索結果に日付が表示されることがある。 これは鮮度が重要な情報での検索で、ページの日付が表示される仕組みになっている。 お知らせやブログの記事のページに日付を記載すると Google が自動的に判断して検索結果に日付を表示してくれる。
一度に多くの機能追加や修正をリリースにするのではなく、細かく分割してリリースするやり方。バグが紛れ込むリスクの量をコントロールしながらリリースできるのがメリット。自動デプロイなど、リリース作業のコストが少なくなるようにしておくと、導入しやすい。
X、Instagram、TikTokなどで情報発信する。
SNS で開発状況を発信することで潜在顧客を獲得できる。
Google の検索結果に日付が表示されることがある。これは鮮度が重要な情報での検索で、ページの日付が表示される仕組みになっている。お知らせやブログの記事のページに日付を記載すると Google が自動的に判断して検索結果に日付を表示してくれる。
マルチタスクとは同時に複数のことを実行すること。様々な研究でマルチタスクは効率が悪いことがわかっている。一度に一つのことを実行するシングルタスクになるようにする。
ポモドーロ法とは、25分の作業と5分の休憩を繰り返すテクニックです。効率よく作業できると言われています。
検索で何かを調べる時、なんと入力して検索すればいいのか思い浮かばない時がある。そういう時は、「検索するためのキーワードを検索する」ことを意識する。
例えば検索するときに、「site:example.com SEO」と入力すると example.com のページに絞った上で SEO というキーワードで検索できます。
「site:www.nta.go.jp 消費税」と入力すると消費税に関する国税庁のページのみ抽出できる。
一次情報とは、自身の経験や調査で得られた情報のこと。その人独自の視点が含まれるので、興味を引くコンテンツになる。
Electron はクロスプラットフォームなデスクトップアプリを作れるフレームワーク。Web の技術を使って制作するので、Web サイトから転用しやすい。
Mac でも Windows でも一つの PC を長く使っていると、当初必要だったソフトがいらなくなっていたりして動作が重くなってきます。そうならないように対策していることを紹介します。1.なるべくインストールしない 2.homebrew などでアンインストールした時にゴミデータもキレイに消えるように 3.Docker、Hyper-V、Windows サンドボックスなど仮装環境にインストールする
背もたれ、アームレストがある少し良い椅子を使うと姿勢を保ちやすい。
マーケティングにおけるペルソナとは、ターゲットとなる個人を想定したもの。ペルソナを設定して施策を進めることで、マーケティング戦略のブレをなくす効果がある。
そのサイトが提供する付加価値はなんなのか考える必要があると思っています。「情報を提供する」なのか、「商品を買うことができる」なのか。
クレジットカードの悪用を防ぐための本人確認の仕組み。2025年4月から対応が義務化されている。
訪問販売、通信販売など特定の取引形態において、事業者が守るべきルールを定めている法律。
運営するサイトの種類によっては、対応しなければならない法律がある。
サイトを利用する際の規約を定めたページを設定する。
サイトを利用する際に収集される個人情報の取り扱いについて書かれているページ
ページの内容についての情報を整理して公開するための仕組み。対応すると Google の検索結果にリッチリザルトとして表示されることがある。
PC とスマホでは画面のサイズが違うので、必要な画像のサイズが違う。サイズを変えた画像を用意して、ページを読み込んだ時にブラウザのサイズによってロードする画像を変える。
