クレイモックアップ：好きな色で使えるミニマルなデバイスフレーム

2026年10月30日更新

クレイモックアップは、スクリーンショットを単色でマットな、やわらかいデバイスの形に収めたものです。カメラもガラスの映り込みも金属の縁もありません。特定の機種ではなく、「スマートフォン」や「タブレット」として伝わります。クレイフレームならアプリに注目を集めたまま、フレームをブランドカラーに合わせることもできます。

モックアップが「クレイ」である理由

この名前は、3Dモデリングのクレイレンダーに由来します。物体を飾り気のないマットな1つの素材で表示し、表面の細部ではなく形だけを見せる手法です。クレイのデバイスモックアップも同じ考え方です。

単色でマット。フレーム全体が1色で、光によるやわらかな陰影があり、つやや映り込みはありません。
シンプルな形。角の丸み、画面より少し大きな本体、わずかな厚みなど、スマートフォンやタブレットのプロポーションを持っています。カメラの切り欠きのような細かい部分は省いています。
機種に縛られない。特定のiPhoneやiPadのふりをしないので、去年のデバイスだと思われることもありません。

リアルなフレームよりクレイフレームが合う場面

ブランドに合わせたいとき

実際のデバイスの仕上げは数種類に限られます。クレイフレームは何色にでもできるので、ブランドカラーにも、アプリのアクセントカラーの濃淡にも、背景に溶け込むニュートラルな色にもできます。App Storeのスクリーンショットのセットや一連のSNS投稿では、すべての画像で1つのクレイカラーを使うと、寄せ集めではなくデザインされたセットに見えます。

ミニマルな投稿やスライド

SNSのフィードでは、映り込みやボタンまで見える精細なスマートフォンが、インターフェイスと注目を奪い合います。やわらかな色のマットなフレームは控えめなので、見る人の視線は画面に向かいます。デバイスが「これはスマートフォンの画面です」と伝えるためだけにあるスライドやドキュメントでも同じです。

古く見えない

リアルなフレームは古くなります。去年の機種に収めたスクリーンショットはアプリを実際より古く見せてしまい、新しいスマートフォンが出るたびに画像を作り直したくなります。クレイのスマートフォンはどの年のものでもないので、今作った画像は来年もそのまま使えます。

どんな画面サイズにも合う

スクリーンショットが今のデバイスに合わないこともあります。シミュレータのキャプチャ、古いデバイス、まだ発表されていないスマートフォンなどです。リアルなフレームでは、機種が違ってしまうか、まだ存在しません。クレイフレームはスクリーンショットから形を決めるので、特定のハードウェアを連想させることなく、手元のどんな画面にも合います。

リアルなフレームを使うべきとき

クレイがいつも正解とは限りません。最新のiPhone向けの機能やiPad専用のレイアウトなど、アプリが特定のデバイスに依存しているなら、リアルなフレームのほうがひと目で伝わります。製品の発表やプレス用の画像も、本物のハードウェアのほうが映えることが多いです。ローンチ画像にはリアルなフレーム、ふだんの投稿にはクレイと、両方を使い分ける人もたくさんいます。

クレイカラーの選び方

背景から決める。フレームと背景は、画像の中で色の面積がいちばん大きい2つです。先に背景を選び、同じ系統で一段明るいか暗いフレームの色を選びましょう。白に淡いグレー、ネイビーに深いブルー、クリーム色にピーチなどがうまくいきます。
画面をいちばん明るくする。アプリのインターフェイスが明るいなら、少し暗いフレームで画面が引き立ちます。暗いインターフェイスなら、明るいフレームが同じ役割を果たします。
ブランドカラーは慎重に使う。フレームにブランドカラーをそのまま使うと、画面が負けてしまうことがあります。白やグレーを混ぜてやわらげた色のほうがたいてい見栄えがよく、それでもあなたらしさは伝わります。
統一する。一連の画像では1つのフレームカラーを使い、変化は背景やレイアウトで付けましょう。
コントラストを確認する。背景とほとんど同じ色のフレームでは、デバイスが見えなくなることがあります。やわらかな影を付けると区別しやすくなります。

FeatureFrameでクレイモックアップを作る方法

FeatureFrameには2つのクレイデバイスがあります。最近のiPhoneに似た形のクレイスマホと、iPad miniに似た形のクレイタブレットです。どちらもDynamic Islandやカメラは描かれていません。それぞれスクリーンショットから形を決めるので、どんな画面サイズにも合います。

スクリーンショットを追加する。ウインドウにドラッグするか、ペーストします。スマートフォンの形のスクリーンショットはクレイスマホに、タブレットの形のものはクレイタブレットに収まります。
デバイスのメニューでクレイを選ぶ。スクリーンショットが本物のデバイスフレームに収まっている場合に選びます。
カラーを選ぶ。ホワイト、ブラック、クラウド、ストーン、サンド、テラコッタ、グラファイト、ブラッシュ、ピーチ、バター、ミント、スカイ、ラベンダー、セージの14色のプリセットがあります。ブランドカラーなどほかの色を使うには、16進数の値を入力するか、カラーピッカーを使います。
傾ける。クレイフレームも本物のデバイスと同じ3Dなので、角度のプリセットや傾きの操作も同じように使えます。少し傾けると、縁に沿ったやわらかな陰影が見えます。
シーンを整える。背景（単色、グラデーション、macOSの壁紙、または自分の画像）、影、キャンバスのサイズを選びます。2枚目や3枚目のスクリーンショットを追加してレイアウトを組むこともできます。
コピーまたは書き出す。画像をコピーして投稿にペーストするか、ドラッグするか、PNGかJPEGで書き出します。

ホワイトとブラックのクレイスマホとクレイタブレットは無料です。そのほかのカラー、カスタムカラー、本物のデバイスフレーム、PNG書き出し、自分のウォーターマークは、FeatureFrame Pro（買い切り$19.99または年額$9.99）で使えます。

まず試したいシンプルな組み合わせ

すっきりしたApp Storeのスクリーンショットのセットや、SNSの投稿には次の組み合わせがおすすめです。

クラウドかスカイのフレームを、同じ系統のごく明るい背景の上に置く。
少しだけ傾け、やわらかな影を付ける。
セットのすべての画像で同じカラーと角度を使う。
フィードには4:5、ローンチページやスライドには16:9のキャンバスを使う。

App Storeのスクリーンショットを作るなら、Appleが求めるサイズをApp Storeスクリーンショットのサイズガイドで確認しましょう。