写真に白枠をつけるアプリ『WhiteFrame』を全面リニューアルしました

以前からコアなユーザー様には使っていただいていたアプリ WhiteFrameをこのたび全面リニューアルしました。

写真に白枠をつけるアプリ WhiteFrameの全面リニューアル後のスクリーンショット


写真が少し怖い感じがするのは、レトロ加工(ビネット効果 + 色褪せ効果)をしているからです。

アプリをリニューアルした直後は「俺のスクショめちゃくちゃかっこいいな!!」と自画自賛していたのですが、日にちが経って冷静になると、あまりウケないかもしれないと思いはじました。

ま、まあ、ある程度、思い通りのアプリを作れるのが自主アプリ開発の唯一の楽しみですので..。


さて、使い方ですが、おそらく需要が高そうなインスタグラムに最適な比率の写真を作成する方法を書いていきます。

まずはインスタグラムの投稿の最適なサイズを表で示します。

2026年版 Instagramで最適な投稿サイズ

投稿タイプ 比率 推奨サイズ(px)
フィード(縦長) 4:5 1080 × 1350
フィード(正方形) 1:1 1080 × 1080
フィード(横長) 1.91:1 1080 × 566
リール 9:16 1080 × 1920
ストーリーズ 9:16 1080 × 1920
ハイライトカバー 1:1 1080 × 1080
プロフィール画像 1:1 320 × 320以上


ここで、じゃあその投稿サイズに合わせて、スマートフォンカメラの撮影比率を変えればいいのではないか。

そういった疑問が出てくる人もいると思います。

これはある意味正解で、インスタグラムに最適化するのであればそれもアリだと思います。

ただ、スマートフォンカメラのセンサーサイズは4:3が主流で、デジタルカメラなどは3:2が主流です。

ここで撮影比率を設定した場合、内部的にはトリミングされて出力されます。

こういった情報落ちが発生するので、撮影にこだわる方ほどセンサーサイズ最大の比率で撮って、編集で比率調整するようです。


では、スマートフォンでセンサーサイズ最大比率(4:3)で縦撮りした画像をそのままInstagramにアップロードするケースを考えてみましょう。

その写真(3:4)は、フィードの4:5ないし1:1の比率に合わせて、上下をトリミングする必要が出てきます。

撮影時に計算された、もしくは無意識に作る写真の構図がずれてしまいます。

インスタグラム投稿時の自動トリミング



ここで、余白を入れるアプリの登場です。

左右に余白を入れて、拡張することで写真全体の構図を維持します。


① レイアウト基準を決める

Image ・・ イメージの比率をベースに周囲に白枠をつける

Frame ・・ 全体のフレーム比率を決めて、その中に画像を入れる

② フレーム比率を決める

最終出力するフレームの比率を設定する。

Instagram投稿であれば、4:5 , 1:1 など。

③ 余白タイプを決める

Symmetry・・ 上下左右同じ比率を試みる。

Basic・・上の余白と下の余白が1:2で構成される。チェキ風のデザインになる。

④ 余白比率を決める

0に設定した場合、なるべく余白が少なくなるように画像が中央揃えで配置される。

⑤ 画像最大サイズを決める

枠をつけた出力画像の長辺の最大サイズを決める。254 – 4096(ピクセル)まで設定できる。

⑥ 保存

JPEGフォーマットで若干の圧縮をして保存されます。(今後、他のフォーマットも追加していく予定)



完成した画像はこちら。▼

画像に白枠をつけるアプリ WhiteFrameでインスタ加工した写真

余白はそのままでもいいのですが、今回はExif情報もつけています。

Exifのフォントはこういった数字が綺麗に見えるものをセレクトしましたが、今後ご要望があれば追加していこうかと思います。

ExifのレイアウトもWeb上でかっこいいものが多々あったのですが、個人的にタイムスタンプが見えやすいほうが良いなという気持ちで簡単なものになっています。

ここら辺も何かご要望あれば頑張ります。

ぜひ、使ってみてください。


iOSアプリリンク

https://apps.apple.com/jp/app/id6624301750


読んでいただき、ありがとうございました。では、また 👋✨✨



シェアする:

類似投稿

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です