ウェブサービスの
「保存」ボタンの違い
（ブックマーク型とファイル保存型）

by
ウェブサービスの「保存」ボタンの違い ブックマーク型 投稿への「道しるべ」を保存 ・Instagram、Twitter、YouTube ・ログインが必要 ・元投稿が削除されると見れない ユーザー識別のためログイン必須 サーバーに記録を保存 ファイル保存型 ファイル全体をコピー ・写真、PDF、動画など ・ログイン不要 ・オフラインでも見れる あなたのデバイスに直接保存 端末容量を使用 なぜログイン画面が出る？ → 「誰が保存したか」をサーバーが記録するため

関連記事

1. はじめに

動画配信サイトを閲覧していて「保存」ボタンを押したところ、「ログイン」画面が出てきました。
保存ボタンを押してログイン画面が出てきたということは、ログインしないと保存は出来ないですよね。
つまり、ログインしていなければ、操作は無効と考えてよろしいでしょうか？

当たり前だとは思うのですが、保存ボタンを押したからといって何か直接 SNSに投稿されたりすることはないですよね？

保存ボタンとログイン画面の例
1. はじめに
保存ボタンとログイン画面の例

ウェブサービスを使っているとよく見かける「保存」ボタン。クリックした瞬間、ログイン画面が表示された経験はありませんか。同じ「保存」という言葉なのに、なぜスマートフォンで写真を保存するときとは違う動作をするのでしょうか。

この疑問の答えは、ウェブサービスの「保存」には大きく2つの種類があることにあります。

1.1. 「保存」ボタンで投稿されない理由

あるウェブサイトの「保存」ボタンを押したときに意図しない動作をして、自分のSNSアカウントから投稿するようなことがあるのでしょうか。

そのような動作は紛らわしい悪質なデザインというだけでなく、仕組みとしても考えられません。外部サービスのリンクからできるのは投稿の「下書き」を作るまで。

もし、投稿するには、SNSサービスのAPIを使うために、事前にそのサイトに対して「アカウント連携」の許可が必要だからです。

ウェブサイトに「ツイートする」を許可する確認画面
ウェブサイトに「ツイートする」を許可する確認画面

このような心配が必要なのは、「Twitter診断」などSNSアカウントと連携してデータ分析させるタイプのウェブサイトです。

1.2. なぜログイン画面が表示されるのか

でもは、このログイン画面が「アカウント連携」を意味しているかというと、そうではありません。
このログイン画面が表示される理由は、ウェブサービス内に「ブックマーク」を保存する仕組みだからです。

「ブックマーク」とは、ウェブサービス内の気に入った投稿・コンテンツへの「道しるべ」のことです。ウェブサービスは、どのユーザーがどの投稿を保存したかをサーバーのデータベースに記録しています。

そのため、ユーザーを識別するために、ログインが必要なのです。

逆に言えば、ログインしていない状態でブックマーク型の保存ボタンを押しても、操作は無効になります。保存されることはありません。

2. ウェブサービスの「保存」は2種類ある

2.1. ファイル保存型の保存

ウェブ上の画像の保存やPDFの「ダウンロード」、LINEアプリの「写真や保存」やなどの場合は、ファイル全体があなたのデバイスにコピーされます。インターネットに接続していなくても、いつでも見ることができます。

図書館で例えるなら、本をコピー機で全ページ複写して持ち帰るようなものです。この場合、元の本が図書館からなくなっても、手元にはコピーが残ります。

2.2. ブックマーク型の保存

一方、Instagram1やYouTube2、X3でよく見る「保存」ボタンは、投稿そのものをコピーしているわけではありません。気に入った投稿への「道しるべ」を記録しているだけなのです。これが「ブックマーク型」。

SNSサービスの「保存・ブックマーク」機能
2.2. ブックマーク型の保存
2.2. ブックマーク型の保存
SNSサービスの「保存・ブックマーク」機能

図書館の例で続けるなら、本自体は図書館に置いたまま、「この本のこのページが大切」というメモだけをつけているのです。後で読み返すときは、そのメモを頼りに図書館の本棚まで取りに行きます。

この仕組みには重要な特徴があります。元の投稿が削除されると、保存リストから見ることができなくなります。メモを頼りに図書館に行っても、その本が廃棄されていたりすると読めないのと同じです。

たとえば、Instagram保存した投稿は、プロフィール画面にある「保存済み」タブに保存されますが、閲覧できるのは本人のみ4で、他の利用者に表示されることはありません。

2.3. 見分け方のポイント

実際にサービスを使用する際、どちらのタイプかを見分ける方法があります。

ボタンの文言が重要な手がかりです。「保存」「ブックマーク」「お気に入り」という表現はブックマーク型、「ダウンロード」「端末に保存」「カメラロールに保存」という表現はファイル保存型であることが多いです。

機能の場所も参考になります。サービス内の機能として提供されているものはブックマーク型、ブラウザやOSの機能として提供されているものはファイル保存型です。

デバイスのストレージ容量も確認指標の一つです。保存後に容量が減らない場合はブックマーク型、明らかに容量が減る場合はファイル保存型です。

3. なぜウェブサービスでブックマーク型を選ばれるの？

なぜサービス提供者はブックマーク型を選ぶのでしょうか。主な理由は3つあります。

  • まず、複製と著作権の問題です。
    ファイルをユーザーのデバイスに複製することは、著作権法上の問題を引き起こす可能性があります。ブックマーク型なら複製ではなく参照なので、この問題を回避できます。
  • 次に、通信とストレージのコストです。
    全ユーザーがすべてのコンテンツをダウンロードすると、サーバーの通信費用が膨大になります。ブックマーク型なら、必要なときだけデータを送信すれば済みます。
  • 最後に、データの最新性です。
    ブックマーク型なら、元の投稿が更新されたときに自動的に最新版が表示されます。ファイル保存型だと、古いバージョンが手元に残り続けます。

4. ファイル保存型とブックマーク型の技術的な違い

4.1. ファイル保存型の内部処理

ファイル保存型では、HTTPリクエスト（ウェブページの取得要求）を通じてサーバーからファイル全体を取得します。画像なら数メガバイト、動画なら数十メガバイトのデータがネットワークを通じて転送されます。

ファイル保存型では、GET リクエスト5または専用のダウンロードAPIが使用されます。既存のファイルを取得する操作だからです。ブラウザやオペレーティングシステム（OS）は、このデータをローカルストレージ（あなたのデバイスの記憶装置）に書き込みます。一般的には「Downloads」フォルダや「写真」アプリ内に保存されます。

保存されたファイルは完全に独立しています。元のサーバーに何が起きても影響を受けません。

4.2. ブックマーク型の内部処理

ブックマーク型の保存では、データベースに非常に小さなデータが記録されます。

具体的には、ユーザーID（識別番号）と投稿ID（投稿の識別番号）の組み合わせです。例えば、ユーザーID「12345」が投稿ID「67890」を保存した場合、データベースには以下のような記録が作られます。

保存テーブル
user_id: 12345
post_id: 67890
saved_at: 2024-12-15 14:30:22
Code language: CSS (css)

この記録のサイズはわずか数十バイト程度です。画像や動画のファイル本体は一切コピーされません。ブックマーク型の保存では、通常POST リクエスト6が使用されます。サーバーに新しいデータ（保存記録）を作成する操作だからです。

ブックマーク型は軽量です。記録するデータが小さいため、サーバーの負荷も通信量も最小限です。一方、ファイル保存型は大量のデータ転送が発生するため、サーバーとネットワークに大きな負荷がかかります。

4.3. データベースの参照

保存リストを表示するときは、まずデータベースから保存した投稿のIDリストを取得します。次に、それぞれのIDに対応する実際の投稿データを参照して画面に表示します。

この参照処理があるため、元の投稿が削除されていると「投稿が見つかりません」というエラーが表示されるのです。

ブックマーク型では、多対多の関係を表現するデータベース設計が必要です。一人のユーザーが複数の投稿を保存でき、一つの投稿が複数のユーザーに保存される可能性があるためです。

一般的には「中間テーブル」と呼ばれる仕組みを使用します。ユーザーテーブルと投稿テーブルの間に保存テーブルを作り、両者のIDを関連付けます。

ユーザーテーブル ← 保存テーブル → 投稿テーブル

5. まとめ

ウェブサービスの「保存」ボタンは、ブックマーク型とファイル保存型の2種類に分類されます。ブックマーク型は投稿IDの記録のみを行い、ファイル保存型は実際のファイルをデバイスに複製します。

技術的には、データベース設計、HTTPリクエストの種類、パフォーマンス特性がそれぞれ異なります。ブックマーク型はuser_idとpost_idの関連付けをデータベースに記録し、POSTリクエストで実装されます7。ファイル保存型はGETリクエストでファイル全体を転送し、ローカルストレージに保存します。

  1. Instagramは2016年12月14日（米国時間）に、フィードに表示される写真や動画の中から、もう一度見たい、覚えておきたいコンテンツを保存できる機能を発表しました。 – インスタグラム、保存機能を発表、お気に入りの写真や動画の保存が可能に | Metaについて
  2. YouTubeの動画再生画面にある「保存」ボタンは、動画を端末にダウンロードするのではなく、「後で見る」というリストに追加する機能です。 – YouTubeで「保存」した動画を見るには？ 【動画の保存先と再生リスト】
  3. Twitterのモバイルアプリに新機能「ブックマーク」が追加されて話題になっています。2018年2月19日時点では一部のユーザー／環境だけで利用できる状態でした。 – Twitter新機能「ブックマーク」の使い方。フォロワーに見られずツイートを保存できる！ | できるネット
  4. インスタのコレクションに保存した写真や動画は、本人のみが閲覧可能で、ほかの利用者に表示されることはありません。 – インスタの写真や動画を保存する方法は？バレる場合や注意点も解説
  5. GETはサーバ上のファイルなどのデータをダウンロードを要求するメソッドです。htmlファイルだけでなくtxtでもpdfでも取得可能です。 – 【図解/初心者向け】httpフォーマットとメソッド/ステータスコード一覧 | SEの道標
  6. POSTはデータをアップロードするためのメソッドです。主に掲示板への投稿などを行うことができます。サーバーに新しいデータ（保存記録）を作成する操作だからです。 – 【図解/初心者向け】httpフォーマットとメソッド/ステータスコード一覧 | SEの道標
  7. 実際のソーシャルメディアサイトでは、ユーザーID（user_id）と投稿ID（post_id）を関連付ける中間テーブル（例：favoritesテーブル）を使用してブックマーク機能を実装しています。これは多対多の関係を表現する標準的なデータベース設計パターンです。 – 人気記事（ランキング）表示に関するDB設計や方法 – OKWAVE