はじめに
この章では、本書の目的と全体の流れをわかりやすく説明します。iPhoneでWebサイトをホーム画面に追加する際、使いやすいアイコン表示や見た目の調整に迷う方は多いです。本書はそうした疑問に答えるために作りました。
対象は普段からiPhoneを使う一般の方です。専門知識は不要で、操作手順は画面の具体例を交えて丁寧に解説します。第2章ではSafariからホーム画面に追加する基本手順を、第3章で追加したアイコンの特徴と制限を説明します。第4章はショートカットアプリを使ったアイコンのカスタマイズ方法、第5章で「Webアプリとして開く」機能の意味、第6章でアイコンの整理方法、第7章で実践例と利点、第8章でChromeでの類似機能を扱います。
この章を読んでから次に進むと、どの章で何が学べるかがすっきりします。まずは基本から順に進めていきましょう。
iPhoneのSafariでWebサイトをホーム画面に追加する基本的な方法
概要
iPhoneのSafariでよく使うWebサイトをホーム画面に追加すると、アプリのようにワンタップで開けます。手順は簡単で、特別な設定は不要です。
手順（4ステップ）
- Safariで追加したいWebサイトを開きます。
- 画面下の「共有」アイコン（上向き矢印のある四角）をタップします。
- 共有オプションの一覧から「ホーム画面に追加」を選びます。
- 表示された画面で名前を確認して「追加」をタップします。
これでホーム画面にアイコンが並びます。アイコンは通常のアプリと同じように移動やフォルダ管理ができます。
注意点
- アイコン画像はサイト側の設定（faviconやApple touch icon）に依存します。設定がないと自動でスクリーンショット風の画像になることがあります。
- 名前は追加時に編集できます。長い名前は省略されるので短めにすると見やすくなります。
- ホーム画面から起動すると通常はSafariでタブが開きます。サイトが「Webアプリ化」に対応している場合は別挙動になることがあります（この点は第5章で詳述します）。
小技と整理方法
- 不要になったら長押し→削除で簡単に外せます。
- フォルダに入れるとホーム画面がすっきりします。
- 頻繁に使うサイトはDockに置くとさらにアクセスが早くなります。
ホーム画面に追加したWebサイトのアイコンの特徴と制限
アイコンの見た目
Safariで「ホーム画面に追加」すると、iOSはそのページの代表画像やスクリーンショットを元にアイコンを作ります。サイトが正式なウェブアプリアイコン（apple-touch-icon）を用意していない場合、見切れや余白ができやすく、統一感が欠けます。
サイズと形
iPhoneのアイコンは角が丸く表示され、サイズも端末や表示モードで自動調整されます。画像が正方形でないとトリミングされるため、重要な部分が切れることがあります。
制限事項
Safariの「ホーム画面に追加」機能では、アイコン画像を直接指定して変更できません。サイト側が適切なメタタグ（apple-touch-icon）を用意していれば改善しますが、個別に差し替えることはできません。したがって、見た目を細かく整えたい場合は別の方法が必要です。
カスタマイズの方法（ヒント）
ショートカットアプリを使えば、自分の好きな画像に差し替えられます。手順は後の章で詳しく説明します。
ショートカットアプリを使用したアイコンのカスタマイズ方法
Safari単体ではホーム画面のアイコン画像を変更できませんが、ショートカットアプリを使えば見た目を自由にカスタマイズできます。手順とポイントを分かりやすく説明します。
手順（簡潔）
- ショートカットアプリを開き、右上の「＋」で新規作成します。
- 「アクションを追加」で「URLを開く」または「URL」を検索し、開きたいWebサイトのURLを入力します。
- アクションを保存したら、右上の…（詳細）をタップします。
- 「ホーム画面に追加」を選びます。
- ホーム画面に追加する画面で、アイコン部分をタップし「写真を選択」か「ファイルを選択」または「写真を撮る」で好みの画像を設定します。
- 表示名を入力し、「追加」をタップすれば完了です。
注意点
- 画像は正方形が見栄えよく、透過PNGや高解像度の画像を用意するとキレイに表示されます。
- ショートカット経由で開くため、起動時にショートカットアプリが一瞬表示される場合があります。完全にネイティブなWebアプリ表示には戻せません。
- 同じサイトをSafariから「ホーム画面に追加」している場合は、アイコンが重複します。不要なら片方を削除してください。
使い方のコツ
- シンプルなアイコン（単色や絵文字）は小さくても判別しやすいです。
- アイコンを統一したい場合はサイズや色調を揃えた画像をまとめて作ると見た目が整います。
「Webアプリとして開く」機能について
機能の説明
Safariで「ホーム画面に追加」をするときに「Webアプリとして開く」をオンにすると、ホーム画面のアイコンをタップした際にそのサイトが単独のウィンドウで立ち上がります。ブラウザのアドレスバーやタブバーが表示されず、見た目・操作感がアプリに近くなります。
具体的な挙動例
- 全画面表示で起動し、URL欄やツールバーが非表示になります。
- サイト内のナビゲーションはそのウィンドウ内で完結しますが、外部リンクは通常のSafariで開く場合があります。
利点
- 起動が早く、画面が広く使えます。
- ユーザーにアプリらしい体験を提供できます。
制限と注意点
- プッシュ通知や一部のネイティブ機能は利用できない、あるいは制限されることがあります。
- サイトごとの対応状況で挙動が変わることがあります。データやログインの挙動も実装により差が出ます。
実務上のポイント
ホーム画面に追加する前に一度試して、表示やリンクの開き方を確認してください。挙動が合わなければ通常のブックマーク化やショートカットアプリでのカスタマイズを検討すると良いです。
ホーム画面に追加したアイコンの管理方法
削除する方法
- 長押しして表示されるメニューで「ホーム画面から削除」または「ブックマークを削除」をタップすると削除できます。アイコンが揺れる編集モードにした上で、左上の「－」をタップして削除することもできます。
フォルダで整理する
- アイコンを別のアイコンに重ねると自動でフォルダが作れます。フォルダに入れることで、ジャンル別にまとめられ、ホーム画面がすっきりします。フォルダ名はタップして編集できます。
配置を整える・移動
- アイコンを長押ししてドラッグすると好きな場所に移動できます。ページ間の移動は画面端にドラッグするだけです。複数をまとめて移動したいときは、アイコンをドラッグ中にほかのアイコンをタップして選択すると同時に動かせます。
同じサイトをまとめるコツ
- よく使うサイトは1つのフォルダに入れ、サブカテゴリ（例：ニュース、買い物、仕事）で分けると探しやすくなります。トップに置くアイコンは3〜6個に絞ると効率的です。
注意点
- ブラウザでサイトのタイトルを変更すると、新しく追加したときの名前に影響します。アイコンの見た目を細かく変えたいときはショートカットアプリでカスタムアイコンを作る方法もあります。
実践例と利点
実践例：YouTubeチャンネルのショートカット作成
YouTubeのよく見るチャンネルは、ホーム画面にショートカットを作ると便利です。Google画像検索などで見つけたチャンネルのロゴ画像を使い、ショートカットのアイコンに設定します。複数のチャンネルを異なるアイコンにすれば、視覚的にすぐ識別できます。
手順の一例
- Safariでチャンネルのページを開きます。
- 共有メニュー→「ホーム画面に追加」を選びます。デフォルトのアイコンでも追加できます。
- より分かりやすくする場合は、ショートカットアプリで新規ショートカットを作り、取得した画像をアイコンに設定してホーム画面へ追加します。
利点
- ブックマークより見つけやすくなります。
- ワンタップで目的のチャンネルを開けます。
- 見た目が整理され、ホーム画面の操作が快適になります。
注意点
- 著作権に注意して、公式アイコンや利用許可のある画像を使ってください。
Chromeでの同様の機能
ChromeでもWebサイトをホーム画面に追加できます。ここでは手順と特徴、管理時の注意点をわかりやすく説明します。
手順
- 追加したいWebサイトを開きます。
- 画面右上のメニュー（三点アイコン）をタップするか、iPhoneではアドレスバー右の共有ボタンを利用します。
- メニューから「ホーム画面に追加」を選び、表示名を確認して「追加」をタップします。
アイコンの特徴と制限
- サイト側がPWA用のマニフェストや適切なアイコンを用意していると、きれいなアイコンが使われます。
- 用意がない場合は小さなファビコンや簡易アイコンになることがあります。
- Chrome単体ではアイコン画像を自由に変更できません。カスタマイズは別のアプリが必要です。
Webアプリとして開くかどうか
- サイトがPWA（マニフェストとサービスワーカー）に対応していれば、ブラウザUIなしで独立したアプリのように開きます。
- 未対応の場合は通常のブラウザタブとして開きます。
管理方法と注意点
- ホーム画面のアイコンは長押しで移動や削除ができます。端末によって操作が異なるので確認してください。
- アイコンを削除してもサイトのブラウザデータは残ることがあります。
- サイト側でアイコンを更新しても反映に時間がかかることがあります。
