本文へスキップ
自動車×AI

CarPixly:駐車場からショールームまで使える、車のAIフォトスタジオ

CarPixlyは、普通に撮った車の写真をスタジオ品質の画像に変えます。背景はショールーム、ワークショップ、または任意のシーンになり、仕上がった画像はWebスタジオとモバイルアプリで共有するガレージに保存されます。私たちはプロダクトを設計し、Webアプリとマーケティングサイトを開発し、英語・ドイツ語・ロシア語でリリースしました。

CarPixly:駐車場からショールームまで使える、車のAIフォトスタジオ

課題

販売店も個人の売り手も、車はその車がある場所で撮ります。駐車場、路上、整備工場。説明文より先に、写真が車を売ります。スタジオ撮影には丸一日と予約が必要で、スマートフォンの写真は無料ですが、それなりの見た目にしかなりません。CarPixlyは、写真家ではない人のためにこの差を埋める必要がありました。そのためプロダクトは、撮影後だけでなく撮影前にも手助けし、オフィスのノートパソコンでも現場のスマートフォンでも同じように動かなければなりませんでした。

アプローチ

入口が2つある、ひとつのプロダクトとして考えました。Webスタジオはパソコンからのアップロードを受け付け、モバイルアプリにはAIがリアルタイムで構図のヒントを出すカメラを加えています。どちらも同じアカウントでログインし、同じガレージに保存するので、現場で撮った車はすでにデスクトップで待っています。画像の生成にはクレジットを使います。登録とスタジオの試用は無料で、支払いは価値が生まれる瞬間、つまり生成のときに始まります。

スタジオ選び、撮影、生成というひとつの流れ

CarPixlyでの作業はいつも同じ3つのステップで進み、インターフェースは今どのステップにいるかを常に示します。

  • スタジオを選ぶ。 ショールーム、ワークショップ、または任意の背景。各カードは車の7つのアングルでシーンをプレビューするので、空の部屋の写真ではなく、仕上がりの見た目で選べます。
  • 撮影またはアップロード。 スマートフォンではカメラ、WebではJPEG、PNG、WebP(15MBまで)のドラッグ&ドロップ。
  • 画像を受け取る。 写真は処理キューに入り、スタジオ画像になって戻り、その車のフォルダに保存されます。

写真の後ではなく前にシーンを選ぶのは、意図的な判断です。そうすれば撮影のアドバイスをシーンに合わせて具体的にでき、ユーザーはクレジットを使う前に仕上がりを決められます。

ビフォーアフター:駐車場とスタジオの台座に置かれた同じ白いBMW
ファーストビューのビフォーアフタースライダーは、プロダクトが何をするかを説明する代わりに見せます。

約束より先に、結果を見せる

carpixly.deのファーストビューは、イラストではなく実際の生成画像を使ったビフォーアフタースライダーです。訪問者がハンドルをドラッグすると、灰色の壁の前の車という自分の悩みが、欲しかった写真に変わっていきます。見出しの下の3つのラベルが、それを支える機能を示します。リアルタイムの撮影アドバイス、背景の置き換え、ガレージの同期です。

続く全幅の生成画像がページを機能紹介のカードへとつなぎ、各カードには同じ車が別のシーンで登場します。ページ全体で1台の車を使うのは意図的です。変わるのはシーンだけで、それこそがこのプロダクトが変えるものだからです。

直すだけでなく、撮影を導く

背景の置き換えは、カメラが捉えたものしか扱えません。そこでモバイルアプリは画面を見守り、わかりやすい言葉で声をかけます。カメラを車に向けてください、右に移動してください、暗すぎます、もっと明るい場所へ、構図は完璧です、撮影してください。ヒントは短く、一度にひとつだけです。ユーザーは車の横でスマートフォンを腕の長さに構えていて、長い文章を読むことはないからです。

カメラへのアクセスは必要になったその時に、一行の理由を添えて求めます。すでに撮った写真のためのギャラリーは、いつでもワンタップで開けます。

どの端末でも、ひとつのガレージ

「マイカー」は生成画像を保管する場所で、日付ではなく車両ごとにまとめています。実際の仕事の進め方がそうだからです。販売店は撮影の回ではなく車の単位で考えます。掲載文を書くときには、その車の画像一式がワンタップで開けます。

Webとモバイルはひとつのアカウントを共有するので、ガレージは双方向に同期されます。オフィスからのアップロードも現場での撮影も同じ場所に集まります。2つのアプリを用意する理由はまさにそこにあります。

クレジット、決済、カタログを運用する管理画面

画像の生成にはクレジットを使い、クレジットは外部のチェックアウトでチャージします。決済画面は短く、パッケージ、残高、操作がひとつだけ。エラーは何が起きたか、次に何をすればよいかを伝えます。たとえば「チャージは一時的にご利用いただけません」のように、コードだけを表示することはありません。

その裏側では、管理画面で背景のカタログを管理し、カスタム背景の価格を推奨値と上限・下限つきで設定します。リリースなしで価格を変更できます。

このようなプロダクトの予算を検討中であれば、SaaSのMVP開発にかかる費用の記事で、費用の内訳を解説しています。

プロダクトが管理するダウンロードページ

Androidは現在サイトからAPKとして配布しており、iOS版も準備中です。そのためダウンロードページは、それ自体がプロダクトデザインの一部になりました。訪問者のプラットフォームを判別し、番号付きの4つのインストール手順を示し、リリースの変更点を一覧にし、アプリはこのページか公式ストアからのみインストールするようはっきり伝えます。

初日から3言語に対応

CarPixlyは英語、ドイツ語、ロシア語に対応し、どのページでもヘッダーから切り替えられます。ドイツ語は後回しにしませんでした。中心となる市場はドイツで、「Studioqualität — in Ihren Händen」は英語の訳文ではなく、ドイツ語で書かれたコピーとして読める必要がありました。インターフェースの文言、エラー、インストール手順、よくある質問のすべてをローカライズし、ボタンやラベルは長いドイツ語の表記に合わせてサイズを決めました。

見つけてもらうための設計

公開ページには、人々が検索に使う言葉を盛り込んでいます。AIによる車の撮影、車の背景の置き換え、自動車用スタジオ。各ページには個別に書いたメタディスクリプション、実際の生成画像をプレビューに使ったOpen Graphタグ、サイトマップがあり、robots.txtでアプリとAPIのルートをインデックスから除外しています。

トップページのよくある質問は、登録前に聞かれる疑問に答えます。無料か、Webとモバイルでアカウントは共通か、どの形式に対応しているか、APKは公式か。これらは、検索ボックスに入力される疑問でもあります。

AIプロダクトを最も早く説明する方法は、見覚えのある写真に何をしたかを見せることです。

私たちの仕事の中での位置づけ

CarPixlyでは、プロダクトデザイン、Web・モバイルアプリ開発、AI・業務自動化を組み合わせ、マーケティングページには最初からSEOを組み込みました。ひとつのビジュアルで説明を担う必要があった別のプロダクトとしては、Vexel AIもご覧ください。このようなプロダクトをお考えですか。お聞かせください。

納品内容

  • Webスタジオ:7つのアングルでプレビューできるシーン選択、ドラッグ&ドロップでのアップロード、処理キュー、生成
  • AIがリアルタイムで構図のヒントを出すモバイル撮影と、ギャラリーからの選択
  • 車両ごとにまとめた「マイカー」のガレージ。ひとつのアカウントでWebとアプリを同期
  • チェックアウトで購入できるクレジット残高と、背景と価格を管理する管理画面
  • 英語・ドイツ語・ロシア語のマーケティングサイト、よくある質問、ダウンロードページ

よくある質問

車の写真の背景をスタジオのシーン(ショールーム、ワークショップ、または任意の背景)に置き換え、生成した画像をWebスタジオとモバイルアプリで共有するガレージに保存します。

自動車販売店、個人の売り手、そして車をオンラインに掲載し、スタジオを予約せずに統一感のあるスタジオ風の写真が必要なすべての方です。

Webはすでにパソコンにある写真のため、アプリはAIのリアルタイムのガイドを受けながら現場で撮影するためのものです。ひとつのアカウントでつながっているので、ガレージはどちらでも同じです。

クレジットを使います。登録とスタジオの試用は無料です。生成ごとに残高からクレジットを使い、残高はチェックアウトでチャージします。

英語、ドイツ語、ロシア語です。マーケティングサイト、アプリのインターフェース、ダウンロードページのすべてが対応しています。

サイトの詳細

CarPixly:デスクトップ画面1.1
CarPixly:デスクトップ画面1.2
お客様の声

「販売店には5秒で伝わる必要があり、ファーストビューのビフォーアフターがまさにそれを実現しています。Sakuraはカメラのヒントからガレージに届く完成写真まで、流れ全体を考え抜いてくれました。Webでもスマートフォンでも、ひとつのプロダクトとして感じられます。」

LukasCarPixly

似たプロジェクトを相談する

sakura