データ・デザインの移行更新日
#Studioの画像を一括でダウンロードできますか？
制作会社に作ってもらい、元の写真を受け取っていない人ほど、Studioの管理画面から画像をまとめて落とせないかと探しがちです。しかし、Studioはデザイン、ページ情報、ソースコード、CMSのデータをエクスポートする機能を提供していません。データをまとめて書き出せるのはフォームの回答だけで、こちらはCSVで出力できます。
管理画面の中で画像を扱う場所として、エディタとCMSダッシュボードの双方から共通して開けるアセットパネルがあります。ただ、ここに一覧で並んでいても、そのまま一括で手元に落とせるわけではありません。
2025年5月の更新以降、Studio側では画像の原本が元の画質とサイズのまま残ります。ただし、これはクラウド側で元データをそのまま保管しているという意味であり、利用者がいつでも原本を取り出せるように機能を解放したわけではありません。一方で、サイトを見る人には画面の大きさに合わせた画像が自動で出し分けられています。原本はStudioの中にあっても、外から取り出せるのは表示用の画像だけ、と考えたほうが現実に近いでしょう。
そのため、最初にやることは社内のパソコンや共有フォルダ、制作会社とのやり取りのメールに元データが残っていないかを探すことです。見つかれば、公開ページから画像を拾い集める作業はほとんど要りません。見つからなければ、記事やページを1つずつ開いて画像を保存していきます。
#Studioからダウンロードした画像は元ファイルの画質のままですか？
サーバー内部で元データの画質が保持されていると聞くと、「公開ページから保存した画像も、アップロード時と同じ画質だろう」と考えがちですが、実際には元ファイルと保存したファイルの間で寸法や品質に開きが生じます。2025年5月のアップデートで、アップロード画像の原本に対する自動圧縮とリサイズは廃止され、原本は元の画質のまま保持されるようになりました。ただし、表示するときは画面サイズに合った画像が自動で選ばれます。公開ページで右クリックして保存できるのは、この表示用の画像です。
幅の狭い画面でページを開いて画像を保存した場合、画面に合わせて縮小された小さめの画像ファイルが保存されるわけです。保存するならパソコンの広い画面で開いたほうがよいでしょう。
保存した画像の寸法を確かめたいときは、MacであればFinderでファイルを選んでCommandキーとIキーを押し、情報画面でピクセル数を確認できます。この寸法と、移行先で表示したい大きさを見比べてください。写真のようなラスター画像は、元のサイズより大きく表示すると粗く見えます。メインビジュアルのように大きく出す画像で寸法が足りなければ、元データを探し直すか、撮り直しや差し替えを考えることになりますね。
#StudioのCMS記事に入っている画像もダウンロードできますか？
「ブログやお知らせなど、CMSの記事本文に埋め込んだ大量の画像はどうやって取り出せばいいのか」と途方に暮れる担当者は少なくありません。基本的な保存操作としては、ブラウザ上で公開記事を開き、画像の上で右クリックして保存メニューを選んでいく形になります。Firefoxなら画像を右クリックし、画像を保存するメニューから保存先を選ぶだけで、ほかのブラウザでもやり方はほぼ同じです。
ただ、記事が数十本から数百本ある場合、どのURLにどの画像があるかを把握するだけでも大変ですね。Studioのサイトマップには静的ページと動的ページが入り、CMSで公開した記事も自動で反映されます。設定の一般にあるサイトマップファイルをオンにすると、サイトのドメインの後ろに/sitemap.xmlを付けたURLで一覧を開けます。ただし、モーダルやnoindex設定のページはサイトマップに含まれない点に気をつけてください。非公開のサイトでオンにした場合は、公開したときにこのURLが有効になります。
なお、下書きの記事は公開サイトに出ません。対応する記事ページが作ってあれば、下書きでもライブプレビューで表示を確認できます。
もうひとつ気をつけたいのが、WordPressから取り込んだ記事や、他サイトからコピーして配置した画像です。これらはStudioに保存されず、外部サーバーの画像を参照していることがあります。参照元のサーバーで画像が消えると、Studioの記事からも見えなくなります。古いWordPressを解約する予定があるなら、その前に保存を済ませてください。
#ダウンロードした画像のファイル名がランダムな場合、どう整理しますか？
公開ページから保存した画像は、英数字が並んだだけのファイル名になりがちで、あとから見てもどの記事の写真なのかわかりません。そのままのファイル名で新しいサイトへアップロードしてしまうと、管理画面の中でどの写真かを見分けるのが難しくなります。保存したそばから名前を付け直すのが、いちばん手戻りが少ないやり方です。
Google検索セントラルの画像ガイドでも、画像にはできる限り簡潔で内容が伝わるファイル名を付けることが推奨されており、一般的な文字列は避けたほうが検索エンジンにも親切です。たとえば、記事のURLの末尾と連番を組み合わせ、「office-move-01.jpg」のようにすると、どの記事の何枚目かが名前だけで追えます。
保存した画像は、記事のスラッグや掲載ページごとにフォルダを作成して分類しましょう。Studioのアセットパネルでも、使用ページや用途でフォルダを作って画像を整理できます。
ところで、ファイル名とあわせて整理したいのが代替テキスト（alt属性）です。alt属性は、画像が表示されないときやスクリーンリーダーでの読み上げを助け、検索エンジンが画像のテーマを理解する手がかりにもなりますね。ただし、すべての画像に説明文を付ける必要はありません。背景の飾りや境界線といった装飾目的の画像には、空のalt属性（alt=""）を指定するのが適切な作法です。altの属性そのものを消すのとは別の扱いなので、そこは混同しないでください。
#StudioのサイトをHTMLとしてダウンロードできますか？
「せめてHTMLだけでも持ち出せれば、移行先でそのまま使えるのでは」と考える人は多いと思います。ただ、StudioにはHTMLを外部へ書き出す機能がありません。
もちろん、一般のWebページと同じように、ブラウザの標準機能を使って表示中のHTMLを手元に保存すること自体は可能です。たとえばMacのSafariであれば、対象ページを開いてメニューバーの「ファイル」から「別名で保存」を選び、フォーマットを「ページのソース」に指定することで、HTMLのソースコードのみを保存できます。ページによっては、表示されている項目を保存できないこともあります。
さらに一歩進めて、HTTrackのようなオフライン閲覧用の巡回ツールを使ってサイト全体を一括保存しようと試みるケースもありますね。しかし、JavaScriptを多く使うサイトでは保存結果が欠けることがあると、公式のFAQに書かれています。
仮にブラウザやツールでHTMLを保存できたとしても、それはStudioの編集データではなく、あくまで公開用に変換された後のコードです。保存したページは、作り直すときの見本や、記事の文章と画像を拾う控えとして使うのが現実的ですね。
こんな聞き方も
- Studioにアップした画像はダウンロードできますか？
- Studio 画像 ダウンロード
- Studioの画像を一括でダウンロードできますか？
- studio 画像 一括 ダウンロード
- Studioからダウンロードした画像は元ファイルの画質のままですか？
- StudioのCMS記事に入っている画像もダウンロードできますか？
- 一括ダウンロードできない場合、どうやって画像を集めますか？
- ダウンロードした画像のファイル名がランダムな場合、どう整理しますか？
- download images from studio.design site
- Studioの画像の元ファイルは一括でダウンロードできますか？
- StudioのサイトをHTMLとしてダウンロードできますか？
- StudioのサイトのHTMLやソースコードはダウンロードできますか？
あわせて知りたい（関連する疑問）
Q画像の一括ダウンロード方法は英語で調べると見つかりますか？
「日本語で調べて解決策が見当たらないなら、英語で検索すればStudioの画像を一括ダウンロードできる便利な裏技が見つかるのではないか」と疑問に思いませんか。実際に英語で「download images from website」や「bulk image downloader」といった言葉を調べてみると、Webページ上の画像を一括で保存するための汎用ツールやブラウザ拡張機能がいくつも見つかります。代表的なツールのひとつが「Imageye」です。Imageyeはウェブページ内の画像を一括ダウンロードできる機能を備えており、海外のWeb制作サポート記事などでも画像保存の手順として紹介されています。具体的な使い方としては、ブラウザにImageyeの拡張機能を追加し、アドレスバー付近のアイコンをクリックして対象ページを開くと、ページ上で読み込まれている画像が一覧表示され、必要なものを選んで保存できる仕組みになっています。
ただし、こうした海外の拡張機能を使ったとしても、Studio側の根本的な仕様が変わるわけではありません。何より気をつけておきたいのは、Imageyeなどのブラウザ拡張機能が集められるのは「公開ページに表示されている画像」に限られる点です。StudioのエディタやCMSで共有されているアセットパネルにアップロードしてあっても、公開ページで使われていない未使用の画像はブラウザに読み込まれないため検出できません。サイト全体を自動で巡回するわけではないため、記事が多ければページごとに開いて操作を繰り返すことになります。ページ内の画像を集める手間を減らす補助にはなりますが、完全なバックアップ手段ではないと把握しておきましょう。
QStudioの画像を勝手にダウンロードしても著作権は大丈夫ですか？
「自社サイトで公開している画像なのだから、すべて手元に保存して新しいサイトへそのまま引っ越しても法的な問題はないはずだ」と考えがちですが、個人の手元に保存することと新しいサイトで再公開することでは法的な扱いが大きく異なります。問題になりやすいのは後者で、他人の画像をネットに載せるには、原則として権利者の許可が要ります。
見落としやすいのが、プロのカメラマンに撮影を依頼した写真です。外部のカメラマンに撮影を頼んで料金を払っても、依頼した側が当然に写真の著作権を持つわけではないからです。権利関係を確認しないまま新しいサイトへ画像を移植してしまうと、契約上のトラブルに発展しかねませんね。撮影を頼んだときの契約書や発注書に、別のサイトでの利用まで認める内容があるかを見直してください。
素材サイトの画像なら、公開されている利用ルールを読み、許された用途と条件の範囲で使いましょう。Studioでは、Unsplashの無料写真と、Studio.StockのAI生成画像を画像ボックスから使えます。Unsplash Licenseの画像は商用・非商用を問わず無料でダウンロードして使えますが、大きく手を加えずに販売することや、似たサービスや競合するサービスを作るために画像を集めることは禁止されています。Studio.Stockの画像を、Studioの外のサイトでどう扱えるかは、Studioの利用条件で確かめる必要がありますね。
Q背景画像やアイコンも保存できますか？
ページ上の写真を右クリックしたとき、「名前を付けて画像を保存」という項目が表示されずに戸惑った経験はありませんか。Studioの画像には2つの置き方があります。Boxモードでは画像がボックスの背景として扱われ、Imgモードでは独立した画像の要素として扱われます。背景画像は独立した画像要素ではないため、通常の右クリック操作では保存メニューが出てきません。
背景画像として使われている写真を取り出したい場合は、ブラウザの開発者ツールを使うのが確かな手段です。たとえばGoogle Chromeであれば、ページ上で右クリックして「検証」を選び、DevToolsのNetworkパネルを開いた状態でページを再読み込みします。通信一覧の中から「Img」のリソース種別に絞り込むと、背景として読み込まれた画像ファイルのURLを特定して保存できます。
一方で、矢印やメニュー記号などのアイコン類はさらに仕組みが異なります。Studioのアイコンボックスで使えるのは、Font AwesomeとMaterial Symbolsの2種類です。どちらも移行先で同じアイコンを選び直せることが多いので、1つずつ保存するより、使っているアイコンの名前を控えておくほうが手早いでしょう。
ちなみに、SVGをHTMLの中に直接書き込む方法では、SVGのための通信が発生しません。Networkパネルの一覧にすべてのアイコンや図形が出てくるとは限らない点には注意してください。
Q画像が多いと移行費用は上がりますか？
画像や記事の点数が多いサイトほど、他社システムへの移行費用は高くなります。StudioにはCMSのデータを書き出す機能がないため、移行サービスでは公開中のページから記事を回収し、移行先に入力し直す方法が取られています。記事の文章と一緒に、記事内の画像も1枚ずつ保存して入れ直すことになり、作業時間は画像の数に応じて増えていきますね。
見積もりで基準になるのは、主に記事数とページ数です。Studioからの移行にかかる費用は、Studio移行センターの料金ページ（/ryokin/）の計算例と、無料サイト診断（/shindan/）で確かめられます。1記事に何十枚も写真がある場合は、見積もりを頼むときに画像の多さも伝えておくと、あとで金額が変わる心配が減ります。
すべてのデータをそのまま移そうとすると費用が最も高くなりますね。費用を抑える方法は2つあります。ひとつは、制作会社や社内に残っている元データを集めて渡すことです。公開ページから拾う手間が省け、画質の心配もなくなります。もうひとつは、アクセスのない古い記事や、今は使っていないページを移行の対象から外すことで、作業量そのものが減ります。
この内容をChatGPTで相談
