「高品質なビジュアル体験」と「高速なWeb体験」の2軸でユーザー体験を高める
―― まず、金本さんがImgixにジョインされるまでのキャリアについて教えてください。
金本：これまでのキャリアでは、クラウドサービスやデータ活用、Webサービスに携わってきました。キャリアの途中でサンフランシスコに拠点を移しましたが、日本にいたときはMicrosoft 365のようなSaaS環境へのデータ移行支援やバックアップなど、データを管理するツールの営業や新入社員の指導・育成に携わっていました。
サンフランシスコに移ってからは、AI／コンピュータビジョン系スタートアップ企業で、市場開拓やアカウント管理を担当しました。建物にセンサーを取り付けて、人や車の動線データをリテールや不動産のお客さまに提供するサービスです。単にデータを渡すだけではなく、そのデータをどう活用すればオペレーション改善や意思決定につなげられるかをご支援していました。
―― なぜ、サンフランシスコへ移住されたのでしょうか？
金本：学生時代に大学のダブルディグリープログラムに参加したことがきっかけです。サンフランシスコへ留学し、国内企業のサンフランシスコ拠点でインターンシップを経験したことで、海外で働く楽しさや多様な人と接することへの関心が高まりました。あくまでインターンシップだったため、当時は3ヵ月ほどの就業を経て日本に戻り、そのまま日本の会社に就職しました。しかし公私ともに様々なきっかけがあり、最終的にサンフランシスコに戻る形で移住を決めました。
―― 前職のAI／コンピュータビジョン系スタートアップ企業では市場開拓とアカウント管理を担当されていたとのことですが、日本市場も担当されていたのですか？
金本：はい。もともとはグローバルアカウントマネージャーとして、カスタマーサクセスに近い立場で入社しました。CEOとコミュニケーションを重ねる中で「日本市場を広げてみよう」となり、大手国内インフラ企業のスタートアップ企画に参加したり、別の日系企業の米現地法人とパートナーになって日本のお客さまを開拓したりなど、マーケティングや市場開拓の動きも担当しました。現在のImgixでも、基本的には同じようにAPAC（Asia-Pacific：アジア太平洋地域）市場を広げる役割を担っています。
―― 「データ活用領域」に興味を持った理由も教えてください。
金本：データをもっと良く、価値ある形にして提供することが非常に大事だと感じていたからです。データ移行やバックアップは、単にデータを保管するのではなく、ユーザーが安全に、かつ効率良く使える状態を作る仕事です。前職でも人や車の動線データをどのようにして業務に活かし、生産性向上やオペレーション最適化につなげるかを考えていました。営業という職種ではありますが、単に製品を売るというよりは、お客さまがそのデータや技術を使って何を実現できるかを一緒に考えることに面白さを感じていました。
―― サンフランシスコには様々な企業がある中で、Imgixを選んだ理由を教えてください。
金本：Imgixが解決している課題は、技術的にもビジネス的にも、多くのWebサービスにとって根本的なものだと感じたからです。一般的にWebサービスで大切なことは、デザインや動線設計、利益を増やす仕組みであって、画像は単なる装飾の一部だと思われることが多いと思います。ですがユーザーが最初に見るのはテキストではなく、画像です。画像は第一印象の窓口です。
もし画像の容量が重ければ、ページの読み込みが遅くなり、ユーザーは他のページへと移ってしまいます。また画像が粗かったり、ぼやけていたり、人物の顔や商品が見切れていたりしても、同じくユーザーはすぐに離脱してしまいます。一方で画像を最適化すれば、「高品質なビジュアル体験」と「高速なWeb体験」という2つの軸でユーザー体験を高めることができます。
―― せっかく内容が良くても、画像が粗かったり、スマートフォンで見た時に崩れていたりすると、非常にもったいないですね。
金本：Googleが定義するCore Web Vitalsの指標であるLCP（Largest Contentful Paint：主要コンテンツの表示速度）などにおいても、画像は重要な要素になります。Webサービスを主な接点にしている企業であれば、ユーザーがどのデバイスで見てもきちんと動作し、きれいに表示されることは大切です。ユーザーの体験を損なっている主な要因の一つが画像であれば、改善の余地は大いにあると思います。
1枚のオリジナル画像をリアルタイム変換して配信
―― ここで改めて、Imgixが提供するソリューションの概要を教えてください。
金本：Imgixでは、画像・動画の自動圧縮や、AIによる高度な変換、それから圧倒的に高速な配信を実現するためのビジュアルメディアプラットフォームを提供しています。いずれもAPIのラインナップで提供しており、具体的には画像を扱う「レンダリングAPI」、動画を扱う「動画API」、画像に対するAIを活用した操作を扱う「生成API」、そして外部ストレージや自社システムをプログラムから連携するための「マネージメントAPI」があります。
各APIドキュメントの内容は「Imgix docs」で確認できる
金本：まず画像について、従来は用途ごとに派生画像を作る必要がありました。ECサイトであれば、商品画像、サムネイル、OGP画像、詳細ページ画像、ヒーローイメージなど、様々な種類があります。さらにPC、スマートフォン、タブレットなどデバイスごとにサイズが違いますし、Chrome、Safari、Firefoxなどブラウザごとに適したフォーマットもあります。WebPやAVIFまで考えると、1枚の画像に対して20〜30枚程度の派生画像を作るケースも出てきます。
Imgixでは、そのような派生画像を一つひとつ作って保存するのではなく、URLにパラメータを付与することで、1枚のオリジナル画像からデバイスやブラウザに適した画像へリアルタイムに変換して配信するプラットフォームを提供しています。フォーマット変換、リサイズ、クロップ、圧縮、明るさ調整などをURLベースで柔軟に指定できます
例えば画像のフォーマットについては、AVIFの場合は「fm=avif」、WebPの場合は「fm=webp」といったパラメータをURLに付けることで指定できる
―― リアルタイム変換は、具体的にはどのような仕組みになっているのでしょうか？
金本：従来からある一般的なWebサイトでは、あらかじめ作成した画像をストレージに保存し、ユーザーがアクセスしたタイミングで、その画像をオリジンストレージから取り出して返す形で運用されているかと思います。
これに対して、Imgixでは独自にCDN（Content Delivery Network）を持っており、その上に最適化ツールを構築しています。そのためオリジナルの画像を一度アップロードするだけで、リサイズや切り抜き、フォーマット変換などをその場で実行し、複製の手間なくWebサイトへ配信できるのです。また、一度アクセスした画像はキャッシュされるため、毎回オリジンストレージから取り出す必要がありません。
なおImgixの導入自体は非常にシンプルです。Amazon S3やGoogle Cloud Storageなど、今お使いのストレージをそのままimgixに接続して、既存の画像URLのドメイン部分を差し替えるだけで使いはじめられます。わざわざ大量の画像を移行したり、面倒なインフラを作り替える作業は発生しません。
Imgixのキャッシュアーキテクチャ。同社ではマルチレイヤーのキャッシング戦略（オリジンキャッシュ、シールドキャッシュ、エッジキャッシュ）を採用しており、各キャッシュレイヤーにおいて、レイテンシの最小化、外部帯域幅の削減、レンダリング効率の管理という特定の役割を担っている（画像出典：CDN ガイドライン）
―― 画像を高画質にしようとするとサイズが重くなり、逆にサイズを軽くしようとすると画質が落ちるという、昔からある一般的なトレードオフに対しての課題解決になりそうですね。
金本：そうですね。そもそも、すべてのユーザーに同じ重たい高画質ファイルを届ける必要はありません。例えば、PC向けの大きな画像をスマートフォンに送るのは非効率的ですよね。スマートフォンは画面サイズが小さいですし、Retinaディスプレイの場合にはDPRを考慮すれば良いわけです。
このような最適化を行うことで、効果もはっきり数字に表れます。例えばJPEGをAVIFに変換した場合、品質をほとんど落とさずにファイルサイズを平均で約60%削減できます。モダンフォーマットでの配信に切り替えたお客さまでは、画像のファイルサイズがおおむね半分になるケースが一般的です。画像がページ容量の大半を占めるサイトであれば、この差はそのままLCPの改善に直結します。このように、デバイスのサイズやブラウザに合わせて、最も見栄えの良い画像を届けることが重要です。
つまり高品質か高速かの二択ではなく、ユーザーごとに適切なサイズ、適切なフォーマット、適切な品質の画像を届けることで両立できると考えています。一人ひとりの閲覧環境に合わせて最適化することが、最も現実的な解決策だと言えます。
160以上のパラメータを自由に組み合わせる
―― 動画も同様にリアルタイム変換しているのでしょうか？
金本：はい、基本的には画像と同じ仕組みです。動画は画像よりも容量が大きくローディングタイムに影響します。Imgixでは、動画に対しても最適化や圧縮ができる他、サムネイル生成やビットレートの調整、アスペクト比の変更、字幕やウォーターマークの付与などに対応しています。
特に分かりやすいのがクロップです。スマートフォンで縦長や横長の動画を撮ったとき、そのまま別のデバイスに配信すると人物や商品が端に寄って見えたり、余計な背景が目立ったりすることがあります。そこで、人物や対象物を中心に置くように自動でクロップさせます。レストランサイトなら料理、ECサイトなら商品やモデルをしっかりフォーカスした見せ方にしたいときに活用いただけます。これもURLパラメータで指定できます。
AIによる注目領域（ROI）検出を使用して、各サンプリングフレームをサムネイルサイズにクロップする前に最も視覚的に重要な領域を特定するビデオスプライトシートスマートクロップ（video-spritesheet-smart-crop）。上記は、スマートクロップを無効にした場合（左側）と有効にした場合（右側）のスプライトシートサムネイルを比較している（画像出典：ビデオスプライトシートスマートクロップ）
―― 画像・動画を問わず、多様なパラメータが用意されていますね！
金本：現在は、全部で160以上のパラメータをご用意しています。
提供パラメータ一覧は公式サイトの「API Reference Guide」で確認できる
金本：例えば画像では、画像カタログ全体にわたるベースラインレベルの最適化を自動化する「auto」パラメータがよく使われています。「auto=compress」を設定すると圧縮を最適化しますし、「auto=enhance」を設定すると明るさを自動調整します。また、「auto=format」を設定すると、自動コンテンツネゴシエーションと呼ばれるプロセスによってブラウザごとのフォーマットを自動的に出し分けます。「auto=redeye」では、検出された顔に赤目除去が適用されます。このように、運用で必要なパラメータを組み合わせて設定いただけます。
実務では、まず「auto=format,compress&w=800」のように組み合わせて付けるだけで、ブラウザごとのフォーマット出し分け、圧縮、リサイズまでが1行で完結します。それを起点に、必要なパラメータを少しずつ足していく使い方をされるお客さまが多いですね。
APIドキュメントで提供されているサンドボックス環境では、用意されたパラメータを操作して画像の表示内容をチェックできるようになっている
―― ちなみに、料金体系はどのようになっていますか？
金本：現在はクレジットモデルです。主にキャッシュの容量、帯域幅、それからレンダリング回数の3つの要素をもとに算出する形にしています。品質を保ちながら圧縮できれば、配信容量を抑えられ、帯域に関わるコストメリットを最大化できると考えています。
AIで、画像・動画制作と運用のあり方が変わる
―― 画像・動画の他に、最近ではAI機能も強化されていると伺いました。
金本：はい。背景削除や背景変更のような機能に加えて、画像を動画に自動変換する機能も提供しています。動画はユーザーの心に刺さりやすいメディアですが、制作には時間がかかります。そこで、画像から動画を生成したり、商品画像の見た目をAIで整えたりすることによって、クリエイティブ制作や運用の大幅な負担軽減につなげられます。
これらのAI機能も、同じくURLパラメータで使えます。例えば背景の削除は「bg-remove」、低解像度画像の高解像度化は「upscale」のように、URLに付けるだけで実行できます。
画像出典：AIトランスフォーメーション
金本：例えば小売の現場では、工場や店舗で撮影した商品画像をそのままアップロードするケースがあります。しかしパッケージにシワが入っていたり、明るさがバラバラだったりすると、EC上での見え方に影響してしまいます。従来はPhotoshopなどで個別に修正していた作業をAIで補助できれば、デザイナーや運用担当者の工数を大きく削減できます。
―― AIを使う場合、生成結果の品質やハルシネーションへの懸念もあるかと思います。そのあたりはいかがでしょうか？
金本：そこは非常に重要ですね。私たちもAIに100%任せれば良いとは考えていません。生成結果が望ましくない場合に再生成するためのパラメータを使うこともできますし、人が確認したうえで採用する運用も必要です。
例えば、AIが処理すべき画像かどうかを見極めたうえで編集をかけたり、生成結果が良くなければ同じプロンプトでもパラメータを変えて再生成したり、最終的には人が見て判断したりという、柔軟な運用が現実的だと思います。AIは人の仕事を置き換えるというよりも、単純作業を減らし、デザイナーがより新しいデザインや表現に取り組めるようにするものだと考えています。
―― そのような運用を前提に考えると、AI時代のEC画像はかなり変わっていきそうですね。
金本：そうですね。仮に家具を扱うお客さまであれば、ソファの色を赤や白に変えたり、ソファ、テーブル、カーペットといった素材を組み合わせて、ライフスタイル画像を生成したりできます。素材となる画像があれば、パラメータで組み合わせを変え、まるで実際に撮影したかのような画像を作ることも可能です。
これにより、毎回スタジオで撮影したり、デザイナーが一つひとつ画像を作ったりする工数を減らせます。さらに、季節やキャンペーン、ユーザーの文脈に合わせてビジュアルを変えるような使い方も考えられます。AIを活用することで、画像や動画の運用はさらに柔軟になっていくと思います。
日本では「最後にやる作業」になりがちな画像最適化
―― サンフランシスコ在住の金本さんから見て、日本と海外でビジュアル素材の最適化に対する捉え方の違いを感じることはありますか？
金本：かなりあります。アメリカでは、新規プロダクトやリニューアルのプロジェクトにおいて、画像最適化が「成長するための要因の一つ」として最初から組み込まれていることが多いです。画像がユーザーの意思決定に影響すること、SEOやCore Web Vitalsに影響することは、かなり認知されています。
一方で日本では、画像最適化は地味な分野、ニッチな分野として扱われがちです。プロジェクトの初期段階ではデザインやCSS、動線設計が優先され、画像最適化は最後の作業になるケースが多いと感じます。
―― その価値観を変えるのは難しそうですが、実際にお客さまとコミュニケーションされる際はどのように伝えているのでしょうか？
金本：まず前提として画像が売上やユーザー体験に影響することはお伝えします。その上で、売上を上げるための施策というよりは、時間やコスト削減の観点でお話しすることも多いです。
一般的に、サイトのビジュアル素材周りについてはマーケター、デザイナー、エンジニアなどの間で細かなやり取りが多く発生するので、本来やるべき業務に使える時間が減ってしまいます。Imgixを使えば、そのような処理をURLベースで指定できるので、ストレージコストやインフラコストの削減だけでなく、コミュニケーションコストや作業時間の削減にもつながります。日本では、このような「時間を削減できる」という価値が非常に重視されると感じています。
―― たしかに、売上向上という攻めの文脈よりも、コスト削減や効率化の文脈の方が伝わりやすい場面が多そうです。
金本：ただし、ECやメディア、旅行サイトのように画像が意思決定に直結するような領域では、また違った伝わり方になることも多いです。というのも、これらの企業では画像の見た目がクリック率や購買、予約の意思決定に影響するためです。
SpotifyやBugattiなどのグローバル企業をはじめ、国内においても、日本経済新聞社や一休、テレビ東京、Qiitaなどが導入している。導入企業一覧はこちら
金本：ホテルや旅館の写真がきれいかどうかは、予約したいと思うかどうかに直結しますし、商品画像の見え方は購買にも関わります。そのような場合には、単なる圧縮ではなく、高品質・高画質な状態で、各ブラウザ、各デバイス、各ユーザーに適した画像を届けられることの価値が伝わりやすいですね。画像や動画は、ユーザーの心を動かすコンテンツです。軽量化だけでなく、魅力を最大限に引き出しながら速く届けることが大切だと考えています。
シリコンバレーの技術を日本へ。国をまたぐ仕事の面白さ
―― 動画といえば、日本ではYouTubeやVimeoを使うケースが多い印象なのですが、動画へのニーズは国内でも高まっているのでしょうか？
金本：日本市場では、まだ画像から入るお客さまが多いです。動画を積極的に使っている企業は、海外と比べると多くありません。一方、海外ではECサイトでも動画を使うケースがかなり多いです。商品を静止画だけでなく、動きのあるコンテンツとして見せることが当たり前になりつつあります。
もちろん海外でもYouTubeのようなプラットフォームを使って動画広告や動画配信を行う企業は多いです。ただ、自社の商品動画や広告アセットを自社の価値として保有し、管理したいというニーズは着実に高まっています。S3など自社のストレージにある動画をコントロールしながら配信したい場合、Imgixのような仕組みが選ばれることが多いといえます。
―― Imgixで働くことの面白さややりがいを教えてください。
金本：日本にいるときから、アメリカと日本の架け橋になりたいという想いがありました。「人と人をつなげたい」「アメリカのテクノロジーを日本市場に展開したい」と、漠然とですが考えていました。
今はシリコンバレーにいて、最先端の技術を日本やAPACの市場に広げる仕事ができています。国をまたいで仕事をして、様々な国のお客さまとお話しすることで、学びが多いですね。アメリカならではのスピード感、意思決定の早さの中で動けることにワクワクしています。
―― 日本のエンジニアや企業に対して、伝えたいことはありますか？
金本：アメリカでは、一人のエンジニアが声を上げ、それがボトムアップで広がっていくケースが多いです。サービスベンダーから聞いた話を自分たちの言葉に解釈し、社内で議論を起こしていくという動きです。一方で先ほどもお伝えしたとおり、日本ではROIやコスト削減を重視する文化が強いと感じます。それ自体はもちろん大切ですが、「この業務を改善するために何をするか」という議論が中心になると、新しい技術や新しい表現を試す話が後回しになることがあると感じます。
だからこそ、日本のエンジニアの方々には、もっと自信を持って、自分がやってみたいこと、新しい技術で試してみたいことを実際に声に出してほしいと思います。もちろん、そういう方も少なくないと思いますが、そのような姿勢がもっと広がると、日本のWebサービスがさらに面白くなるはずです。
―― ありがとうございます。それでは最後に、Qiita読者の皆さまにメッセージをお願いします。
金本：画像や動画は、ユーザーの心を動かすコンテンツであると考えています。画像が変わればWebサイトの見た目が変わり、見た目が変わればユーザー体験が変わり、結果として売上やSEOに影響します。だからこそ、画像は最後に調整するものではなく、プロジェクトの初期段階から考えるべきテーマだと思います。
日本ではコスト削減や効率化という「守り」の入口から始まることが多いですが、画像最適化は最終的にユーザー体験と売上という「攻め」につながっていきます。そこがこの領域の面白いところだと思っています。
さらに、AI時代になって、画像や動画で実現できることはますます広がっています。背景を変える、商品をより魅力的に見せる、画像から動画を作る、ユーザーや季節に合わせてビジュアルを変える。そのようなニーズがあれば、ぜひ聞かせていただきたいです。
画像を軽くするだけではなく、魅力を最大限に引き出しながら速く届ける。画像・動画の最適化を通じて、高品質なビジュアル体験と高速なWeb体験の価値を、もっと多くのWebサービスに届けていきたいと思っています。まずは、このPageWeight測定ツールに自社サービスURLを入れて、デスクトップとモバイル上でどれだけ最適化を改善できそうか見てみてください。