iPhone・Androidで「ホーム画面に追加」する方法をわかりやすく解説

iPhone・Androidで「ホーム画面に追加」する方法をわかりやすく解説

「このページ、毎回検索するの面倒だからホーム画面に置きたい」
ということ、ありますよね。

この記事では、iPhone(Safari)と Android(Chrome)で
標準の「ホーム画面に追加」機能を使う方法 を、最短でわかるようにまとめます。

さらに、
サービスのアイコンになってしまう理由
自由に置けない時の解決策
についても触れていきます。

iPhone(Safari)でホーム画面に追加する手順

  1. 追加したいページを Safari で開く
  2. 下の共有ボタン(□↑)を押す
  3. 一覧の中から「ホーム画面に追加」を選ぶ
  4. 名前を確認して「追加」をタップ

以上でホーム画面にアイコンが作成されます。

iPhoneでアイコンが自由に変えられない理由

Safari は Web サイト側に設定されている
apple-touch-icon を参照します。

そのため BOOTH のショップを追加すると「ラクダアイコン」、
BASE なら「三角ロゴ」など、
サービスのロゴが勝手に使われる仕様 になっています。

Android(Chrome)でホーム画面に追加する手順

  1. Chrome でページを開く
  2. 右上の「︙」をタップ
  3. 「ホーム画面に追加」を選択
  4. 名前を確認して追加

Android も同じく、Web サイト側の設定に従ったアイコンになります。

ホーム画面に追加できない時の原因

  • サイトがホーム追加に対応していない
  • Safari では “簡易表示” のままになっている
  • Chrome のメニューに表示されないタイプのページ

特に多いのは、「サイト側がアイコン設定をしていない」パターンです。

自由なアイコンでホーム画面に置きたい場合は?

標準機能では、
アイコン・名前・URLを自由に変えることはできません。

そこで使えるのが OJapp です。

  • 好きなアイコンが使える
  • アプリ名も自由
  • BOOTH / BASE / note など何でも置ける
  • ショートカット不要

👉 OJapp を使って自由なアイコンでホーム画面に追加する

ホーム画面に置く文化がもっと使いやすくなるので
覚えておくと便利です。

ホーム画面から始まる、OJappのWebアプリたち

OJappでは、PWAをベースに「URLをホーム画面へ置く体験」をテーマにしたWebアプリを開発しています。

  • OJapp:manifest.jsonを動的に変更してアイコンを自由に変える
  • Petal:人のページや名刺をホーム画面に置く、緩やかな繋がり
  • OJ-Pass:PWA+sw.jsを利用した、オフラインで使える軽量パスワード生成ツール

当ブログ(tips.ojapp.app)の検証結果や、PWAのさまざまな設定による挙動の違いは、実験サイトである**「PWA LAB」**で実際にテストし、プロダクトに反映しています。

軽量で静かに使える、Webをもっと自由にするための小さなツールたちを覗いてみませんか?


👉 OJapp Tools を見る

>OJapp / Petal

OJapp / Petal

OJappは、Webページをそのままホーム画面に置ける仕組みを提供しています。
Petalは、その仕組みを使って “人のページを名刺のように持つ”ためのサービスです。
QRからすぐ開けて、ログインなしでも見れる。 でも、必要なときだけつながれる。
そんな「弱いつながり」を残すために作られています。

CTR IMG