ガイド
Illustrator・Photoshopでフレームを作る
いつものデザインツールで作りたい方向けのページです。規格どおりのテンプレートに描いて、PNGで書き出してアプリに登録するだけです。
デザインツールがなくても大丈夫。Webメーカーならテンプレートを選んで文字を変えるだけで規格が自動で合います。
目次
規格まとめ
配置は2 × 2の4コマ1種類です。撮影・保存・印刷のすべてが下の座標で写真を合成するため、写真枠の位置とサイズは固定です。
アプリ用フレーム
必須- キャンバス
- 1080 × 1920 px
- 比率
- 9 : 16
- 写真枠
- 4つ・各466 × 690
- 下部テキスト領域
- y 1479 ~ 1920
- 安全線
- なし(そのまま表示)
- パン
- 20個(登録時)
プリンター用フレーム
任意・印刷する場合- キャンバス
- 1080 × 1620 px
- 比率
- 2 : 3(4×6印画紙)
- 写真枠
- アプリ用と同じ位置に4つ
- 下部テキスト領域
- y 1479 ~ 1583
- 安全線
- 上46・左右27・下37の内側
- パン
- +5個
サムネイル
任意- キャンバス
- 480 × 480 px
- 比率
- 1 : 1
- 写真枠
- なし
- 下部テキスト領域
- —
- 安全線
- 円の内側のみ表示
- パン
- 無料
写真枠の座標(アプリ用・プリンター用共通、px)
| 枠 | X | Y | 幅 × 高さ |
|---|---|---|---|
| 1 | 63 | 77 | 466 × 690 |
| 2 | 552 | 77 | 466 × 690 |
| 3 | 63 | 789 | 466 × 690 |
| 4 | 552 | 789 | 466 × 690 |
写真は各枠いっぱいに配置され、枠の外はフレームが覆います。プリンター用の安全線は(27, 46)から(1053, 1583)までです。
写真枠の形を変える・飾る
写真枠は四角でなくても大丈夫。ステッカーやキャラクターが枠の端にかかってもOKです。守るのはひとつだけ:抜いた部分が元の写真枠(466 × 690)の外に出ないこと。
アプリは白い下地の決まった枠に写真を置き、その上にフレームを重ねます。抜いた部分からは下が見え、枠の内側なら写真、外側なら写真のない白い下地が見えます。全テンプレートの紫の「最大写真枠」線がその境界です。
OK枠の内側なら自由に
NG枠の外を抜くと白い下地が見えます
赤い斜線 = 写真がなく白い下地が見える部分
形の作り方
- 形は紫の「最大写真枠」線より1〜2px内側に描きます。線ぴったりだと縁のにじみが枠の外に出ることがあります。
- Illustrator:枠内に形を描き「Base」と一緒に選択 → パスファインダー「前面オブジェクトで型抜き」。
- Photoshop:楕円形選択ツールやシェイプで枠内を選択 → 背景・デザインレイヤーでDelete(またはレイヤーマスクを黒に)。
- 枠の85%以上を塞ぐとアプリが「塞がった枠」と判定します。ステッカーは端に少しだけ、顔が来る中央は空けてください。
- 形を変えたらアプリの「PNGを読み込む」で登録してください。Webメーカーは選んだ形で枠を抜き直します。
テンプレートのダウンロード
全テンプレート(ZIP)SVG・PSD・ガイドPNGの15ファイル+規格メモ・1.6MBアプリ用フレーム 1080 × 1920
必須
アプリ用・枠の形の例 1080 × 1920
円・角丸・波・ハート
プリンター用フレーム 1080 × 1620
任意・印刷する場合
プリンター用・枠の形の例 1080 × 1620
円・角丸・波・ハート
サムネイル 480 × 480
任意
ガイドPNGは透明背景に写真枠と安全線だけを描いたファイルです。Procreate・Figma・Canvaなど他のツールで一番上のレイヤーに置き、書き出し前に非表示にしてください。
Illustratorで作る
- 1
ZIPを解凍し、my4cut-frame-app-1080x1920.svgをIllustratorで開きます。アートボードは1080 × 1920 pxです(単位がmmなら環境設定 > 単位でピクセルに)。
- 2
レイヤーパネルで「Guides - hide before export」グループ(写真枠・下部テキスト領域)をロックします。位置の目安なので削除・移動しないでください。
- 3
「Base - photo holes cut」は写真枠4つがすでに抜かれた板です。色を変えたり、その上にイラストや文字を置いて飾ります。
- 4
写真枠まで覆う画像・パターンを使う場合は、「Base - photo holes cut」をコピーして前面にペーストし、両方を選択して オブジェクト > クリッピングマスク > 作成。写真枠部分がきれいに抜けます。
- 5
完成したら「Guides」を非表示にし、ファイル > 書き出し > スクリーン書き出し > PNG・1x・背景「透明」で保存。1080 × 1920ちょうどか確認します。
Photoshopで作る
- 1
my4cut-frame-app-1080x1920.psdを開き、イメージ > 画像解像度で1080 × 1920ピクセルか確認します(解像度の値は関係ありません)。
- 2
レイヤー構成:一番下「Base - photo holes cut」、その上に空の「Design」、一番上にロック済みの「Guides」グループ。「Design」または新規レイヤーに描きます。
- 3
写真枠を抜く一番簡単な方法:「Photo slots - keep」レイヤーのサムネイルをCmd(Ctrl)+クリックで選択 → 各デザインレイヤーでDelete。またはデザイングループにレイヤーマスクを作り、選択範囲を黒で塗ります。
- 4
完成したら「Guides」を非表示にし、ファイル > 書き出し > 書き出し形式 > PNG、「透明部分」と「sRGBに変換」にチェックして保存します。
- 5
プリンター用・サムネイルもそれぞれのPSDで同じように作ります。プリンター用は文字・ロゴを赤い安全線の内側に。
書き出しルール
こう保存
- PNG(透明対応)・色はsRGB
- ピクセルサイズは正確に:アプリ用1080 × 1920、プリンター用1080 × 1620
- 抜く部分は完全に透明(アルファ0)・紫の「最大写真枠」(466 × 690)の内側だけ
- 1ファイル10MB以下・DPI値は関係なし
- 書き出し前に「Guides」(写真枠・安全線)を非表示
NG
- 枠の移動・枠より大きく抜く・枠同士をつなげる — 写真のない白い下地が見えます
- 写真の大部分を覆うステッカー・文字・半透明の色 — 顔が隠れます(端に少しかかるのはOK)
- プリンター用で安全線の外に文字・ロゴ — 印刷時に切れることがあります
- JPGで保存 — 透明が消えて写真枠が白く塞がります
- キャンバスサイズの変更・余白のトリミング
- 他人のキャラクター・ロゴ・写真の無断使用
アプリに登録する
完成したPNGはアプリとWebメーカーのどちらから登録しても同じ「マイフレーム」に入ります。自分で抜いた写真枠の形をそのまま使うならアプリがおすすめです。
アプリから
PNGの透明部分をそのまま写真枠に
- 1PNGをiPhone・iPadの「ファイル」アプリに保存します(AirDrop・iCloud Drive)。写真アプリより透明がきちんと保たれます。
- 2my4cutアプリ下部の[作成]タブ → [PNGを読み込む] → [ファイルから選択(PNG)]。(以前のバージョン:[ストア] → [マイフレームを作成] → [ウェブで作る] → [完成したPNGをアップロード])
- 3アプリがサイズ(1080 × 1920)と写真枠の透明をすぐにチェックします。問題なければ[編集せずにすぐ作成]を押します。
- 4登録画面でサムネイル(任意)と印刷専用フレーム1080 × 1620 PNG(任意・パン5個追加)を選び、[20個のパンで作成]を押すとマイフレームに入ります。
Webメーカーから
PCからそのまま・写真枠は選んだ形で自動で抜かれます
- 1my4cut-official.com/create-frameで[New frame]を押します。
- 2[Background] → [Upload background image]でPNGを読み込みます。1080 × 1920ならキャンバスにぴったり入ります。必要なら写真枠の形を選びます。
- 3印刷用もあれば[Add print frame]を押し、プリンター用キャンバスで1080 × 1620のPNGを同じように読み込みます。
- 4[Add straight to the app]でアプリのアカウントにログインすると、パン20個(プリンター用+5個)でマイフレームに入ります。サムネイルは自動で作られます。
よくある質問
写真枠の位置がずれます
まずPNGが1080 × 1920(プリンター用1080 × 1620)ちょうどか確認してください。2x・3xで書き出したり、アートボードで切り抜かないとサイズが変わります。写真枠レイヤーを動かしていないかも確認を。座標は(63, 77)(552, 77)(63, 789)(552, 789)、各466 × 690です。
写真の周りに白い線が出ます
抜いた部分が最大写真枠(466 × 690)より大きいか、位置がずれています。写真は決まった枠にだけ置かれるので、枠の外に1pxでも抜くと写真のない白い下地が見えます。テンプレートの「Base - photo holes cut」や写真枠の選択範囲を使い、自分で描いた形は紫の線より1〜2px内側に。
プリントすると端が切れます
フォトプリンターは紙の端を少し切り落とします。プリンター用(1080 × 1620)を別に作り、文字・ロゴは赤い安全線(上46・左右27・下37px)の内側に。背景色や柄はキャンバスの端まで塗ると白い帯が出ません。プリンター用がない場合はアプリ用から自動で作られます。
「写真枠が塞がっています」と出ます
写真枠の中がほとんど透明ではありません(枠の85%以上が不透明だと塞がった枠と判定)。JPG保存、「Guides」を表示したままの書き出し、背景やステッカーが枠の大部分を覆っている、形が小さすぎる、を確認してください。
丸・ハート・波の写真枠もできますか?
はい。紫の最大写真枠の内側ならどんな形でもOKです。「枠の形の例」テンプレート(円・角丸・波・ハート)から始めると簡単です。形を変えたらアプリの「PNGを読み込む」で登録してください(PNGの透明部分をそのまま使います)。Webメーカーは選んだ形で枠を抜き直すため、描いた形が変わることがあります。
1×4の縦長など別の配置はできますか?
現在は2 × 2(466 × 690の写真枠4つ)の配置のみです。撮影・保存・印刷がすべてこの座標で合成されるため、枠の位置やサイズは変えられません。枠の形とその外側のデザインは自由です。
サムネイルは必須ですか?
いいえ。省略するとアプリ用フレームから自動で作られます。作る場合は480 × 480の正方形で、一覧では中央の円だけが表示されます。