「保存した画像はどこ？」Webアプリのダウンロード問題をWeb Share APIで解決する

1. 開発者の​挫折：ダウンロードボタンが​「保存」に​ならない​現実

1.1. 王道の​「ダウンロードボタン」が​通用しない？

Webアプリで画像を生成するツールを開発していると、最後に必ずぶつかるのが保存の難しさです。

私も例に漏れず、生成された画像をサクッと手元に残してもらうために、王道である download 属性を使ったボタンを実装しました。

<!-- よくある実装方法 -->
<a href="generated-image.png" download="my-art.png">保存する</a>

これで完璧！と思ってリリースしたのですが、iPhoneユーザーから届くのは、期待とは裏腹に保存しづらいという不満の声ばかりでした。

このように、「ダウンロードしますか？」と聞かれ、OKを押しても写真アプリには入らない……そんな壁にぶつかってしまったのです。

1.2. 理想の​保存先と、​実際の​挙動の​違い

iPhone（Safari）でこのボタンを押すと、画像は写真アプリには入りません。代わりに、OSの奥深くにあるファイルアプリ内の、さらにその中のダウンロードフォルダという場所に保存されます。

しかし、普段からファイルアプリを使いこなしているユーザーはそう多くありません。多くの人にとって保存＝カメラロール（写真アプリ）に入ることなので、写真一覧に出てこない以上、保存に失敗したと思われても仕方のない状況でした。

「写真アプリに直接保存できないの？」という切実な声に対し、Webアプリの限界なのかな……と、半ば諦めかけていたその時、一つのサイトに出会いました。

1.3. 転機：​ある​「猫の​サイト」で​見つけた​理想の​挙動

それが、Inspiration Cat（インスピレーション・キャット）というサイトでした。

https://inspiration-cat.pages.dev/

そのサイトで保存ボタンをタップした瞬間、スマホユーザーにはお馴染みの共有メニュー（共有シート）がスッと立ち上がったのです。そこから画像を保存を選ぶだけで、一瞬でカメラロールへ。

これだ！これなら誰も迷わないし、SNSへのシェアも同時にできる！

このスムーズな体験を支えていた正体こそが、今回紹介するWeb Share APIでした。

2. Web Share API に​よる​保存体験の​向上

2.1. スマホの​「共有メニュー」を​Webから​操る

OS標準の共有シートを呼び出し、そこから直接画像を保存できる体験をWebアプリで実現するのが Web Share API です。

2.2. Web Share API とは？

一言で言えば、Webサイトからスマホの共有メニューを直接呼び出せる機能です。

これを使えば、サイト上の画像を保存するだけでなく、そのままLINEで送ったり、Instagramのストーリーズに流したりする操作が、普段使っているアプリと同じ感覚でできるようになります。

非エンジニアの方に向けた例え話をするなら、WebサイトとスマホのOSをつなぐ共通の出口のようなものです。本来、Webサイトはブラウザという箱の中に閉じ込められていますが、この専用の出口があることで、外にいる他のアプリ（LINEや写真など）へデータを直接手渡しできるようになります。

2.3. なぜ Web Share API が​優れているのか？

従来のダウンロードと比べると、その差は烈然です。

• これまでのWebサイト（ダウンロード）: ボタンを押すと、ブラウザのどこかにファイルが保存されるため、「どこに保存されたか分からない」という混乱が起きやすく、写真アプリに入りたいのに入らないという不満に繋がりやすいです。
• Web Share API を使ったサイト: ボタンを押すとスマホ標準の共有シートが下からスッと出てきます。そこから「画像を保存」を選ぶだけで、一発で写真アプリに保存できます。

つまり、Webサイトなのにネイティブアプリと全く同じ操作感になるのが、このAPI最大の強みです。

2.4. 実装の​ヒント

Canvasで生成した画像をFileオブジェクトに変換して渡すだけで、あのスムーズな挙動が実現します。

// Canvasから画像を作成してシェアするイメージ
const blob = await canvas.toBlob();
const file = new File([blob], "image.png", { type: "image/png" });

if (navigator.canShare && navigator.canShare({ files: [file] })) {
  await navigator.share({
    files: [file],
    title: "画像を保存・シェア",
  });
}

なお、利用には以下の2つの条件があります。

1. セキュリティ（HTTPS）が必須: 安全なサイトでしか動かない、信頼性の高い機能です。
2. スマホが主役: PCでも動作しますが、スマホユーザーにこそ真価を発揮する機能です。

3. 状況に​応じた​最適な​保存手法の​選び方

3.1. 保存手法の​比較まとめ

Web Share API は非常に強力ですが、すべての環境で完璧に動作するわけではありません。主要な手法をライフスタイルや操作感で整理してみました。

3.2. ​「こんな​時は​これ！」​おすすめの​組み合わせ

表を踏まえて、実際の開発でどう使い分けるのが良いかをまとめました。

• スマホユーザーがメインなら: Web Share API
  ブラウザから直接カメラロールへ保存してもらうには、これが一番の近道です。保存ボタンの横に保存・シェアといったラベルを添えると、より親切ですね。
• SNS（LINE/Instagram等）から開かれるなら: 長押し + 案内文
  アプリ内ブラウザではWeb Share APIが動かないことが多いです。そんな時は「保存できない場合は画像を長押ししてください」や「Safari/Chromeで開いてください」といった注釈を表示するのが、ユーザーを迷わせないための鉄則です。
• PCでも使われるなら: Download属性との併用
  PCでは共有シートの概念が薄いため、これまで通りのダウンロードボタンも残しておきましょう。User-Agentなどでボタンを出し分けるのが理想的です。

4. まとめ：​最適な​保存UXの​選択

4.1. 実用的な​構成への​落とし込み

検証の結果、私が開発中のアプリでは以下の構成を採用することにしました。

• メイン: Web Share API（保存・シェアボタン）を配置し、スマホユーザーの利便性を高める。
• 補助: 長押し保存を促す注釈を添え、APIが効かない環境をカバー。
• PC対応: PC環境では自動的に通常のダウンロードに切り替わるように処理。

Webアプリの保存は、技術的な正解よりもユーザーがどこに画像があると思うかという認識の一貫性が重要だ、と再認識しました。

4.2. 実践例：観戦記録加工アプリ「フォト録」

本記事で紹介した Web Share API を全面的に採用している実例として、私が運営している「フォト録（野球観戦フォト録）」を紹介します。

このアプリでは、球場で撮影した写真にその日のスコアボードを合成して「自分だけの観戦記録画像」を生成できます。生成した画像を、iPhone や Android のカメラロールへ迷わず保存できるよう、Web Share API による共有シートの呼び出しを実装しています。

野球観戦フォト録「フォト録」

野球観戦の思い出を一生の記録に。撮影した写真にスコアボードを合成できる、プロ野球ファンのための加工・記録アプリです。

lchiki-lab.com/apps/yakyu-photolog

プロ野球観戦記録フォトログ - やきゅーみた

球場で撮ったお気に入りの一枚を、スコアや日付を添えて美しくデザイン。あなたの観戦記録を、もっと特別に。

yakyu-mita.lchiki-lab.com/photo-overlay.html

技術的な可能性を、ぜひ実際のプロダクトを通じて体験してみてください。

あなたのアプリでも、ぜひ Web Share API を検討してみてください。UXが大きく改善されるはずです！

Webアプリでも保存の悩みが解決できるなんて嬉しいね！Web Share APIを使えば、スマホでも快適に画像をカメラロールに残せるようになるよ。みんなのアプリでもぜひ試してみてねっ！