Image frame maker

FrameMaker

FrameMaker は、画像のまわりに余白フレームを追加し、SNSやブログ、サムネイル、ポートフォリオで扱いやすい形に整えるWebアプリです。 画像を切り抜くのではなく、見せたい部分を残したまま余白で比率を調整できるように作っています。

どんな課題を解決するツールか

画像を投稿先の比率に合わせようとすると、端が切れたり、文字やUIの一部が見えなくなったりすることがあります。 FrameMaker は、画像の外側に余白を足すことで、元の内容を保ったまま見た目の比率を整えるためのツールです。

想定しているユーザー

個人開発者、ブロガー、デザイナー、動画制作者、ポートフォリオを整理したい人など、画像を少しだけ整えて公開したい人を想定しています。 大きな画像編集ソフトを開く前の、短い仕上げ作業に向いた道具です。

主な用途

投稿先や掲載先の見え方に合わせて、画像を切り抜かずに余白で整えられます。

SNS投稿画像

縦横比がばらつく写真やスクリーンショットを、タイムラインで見やすい正方形や横長の画像に整えます。

ブログ用画像

記事一覧や本文内で画像サイズをそろえたいとき、余白を加えてサムネイルの印象を統一できます。

YouTubeサムネイル

素材画像の重要部分を残したまま、横長のサムネイル素材として使いやすい見た目に調整できます。

ポートフォリオ画像

制作物のスクリーンショットを同じ余白と背景で並べ、一覧で見たときのまとまりを作れます。

スクリーンショット整理

アプリ画面、UI、エラー画面などを記録するとき、周囲に余白を足して説明用の画像にしやすくします。

画像比率ごとの使い分け

FrameMaker では複数の比率を選べます。目的に合わせて使い分けると、画像の印象を調整しやすくなります。

1:1 正方形

SNS投稿、プロフィール用画像、一覧表示に向いています。複数画像を並べるときも扱いやすい比率です。

4:3

スクリーンショットや説明画像に使いやすい比率です。横長すぎず、本文中にも置きやすい形です。

白銀比

余白を少し広めに取りたいときに使いやすく、落ち着いた印象の見せ方に向いています。

3:2

写真や横長の制作物を自然に見せたいときに使います。ブログのアイキャッチにも合わせやすい比率です。

黄金比

横方向にゆとりを出したい画像や、サムネイル素材として見せたい画像に向いています。

平方根3

さらに横長の印象を作りたいときに使います。比較画像やワイドなスクリーンショットの整理に便利です。

基本的な使い方

画像を選び、見た目を調整し、保存するだけで余白付き画像を作成できます。

  1. FrameMaker を開き、加工したい画像ファイルを選択します。
  2. フレーム比率を選び、必要に応じて背景色や角丸を調整します。
  3. メインカラー帯を使う場合は、画像の雰囲気に合わせて表示を切り替えます。
  4. プレビューで余白や見切れを確認し、問題なければPNG画像として保存します。

プライバシー面の考え方

FrameMaker は、選択した画像をブラウザ上で処理する設計です。通常の利用では、加工対象の画像を Poppoworks のサーバーへ送信せず、 手元のブラウザ内でプレビューと保存を行います。

FrameMaker を作った理由

スクリーンショットや制作物の画像を公開するとき、比率を合わせるためだけに画像編集ソフトを開くのは手間が大きいと感じていました。 元画像を大きく加工せず、余白を足して整える作業に絞った軽い道具として FrameMaker を作りました。

FAQ

FrameMaker の利用前に確認されやすい内容をまとめています。

無料で使えますか?

はい。FrameMaker は無料で利用できます。

画像はサーバーにアップロードされますか?

通常の利用では、画像処理はブラウザ上で完結します。Poppoworks のサーバーへ加工対象の画像を送信する設計ではありません。

保存形式は何ですか?

出力画像はPNG形式で保存できます。投稿前の確認や、別の編集作業に回す素材として使いやすい形式です。

商用利用できますか?

FrameMakerで作成した画像は、ユーザー自身が権利を持つ素材であれば、個人利用・商用利用のどちらにも使用できます。元画像の権利や利用条件は各自で確認してください。

更新履歴

公開中の内容とサイト上の説明を、利用実態に合わせて継続的に見直します。

2026年6月18日

FrameMaker紹介ページを拡充し、用途、比率の使い分け、FAQ、プライバシー説明を追加しました。

2026年6月

Poppoworks 公式サイト上で FrameMaker の紹介ページを公開しました。