Webサイトを運営するうえで、画像や動画などのコンテンツの最適化は不可欠です。
最適化されていない状態だと表示速度が遅延し、UXの低下を招きます。
コンテンツの最適化を図るなら、Cloudinaryは非常に有用なサービスです。
画像や動画の加工や変換、配信の最適化などができるCloudinaryは、Webサイトのパフォーマンスを向上させます。
本記事では、Cloudinaryの特徴や仕組みに加え、導入するメリットなどについて解説します。
使い方や料金プランといった、Cloudinaryを実際に導入する際に知っておくべき知識もお伝えしますので、ぜひ参考にしてください。
また、Webサイトの表示速度でお悩みの方は弊社の画像最適化サービス「Imgix」もご検討ください。日本経済新聞や一休.comといったサイトのスピード改善に活用いただいています。
Cloudinaryの特徴
Cloudinaryとは、世界で約90万人の開発者が利用しているダイナミックマルチメディアプラットフォームです。
Cloudinaryは画像・動画・音声・PDFなどを変換・加工・保存できるストレージサービスに加え、高速でコンテンツを配信できるCDNサービスも備えている点が特徴です。
Cloudinaryは2012年にサービスが開始されて以降、その優れたパフォーマンスが高く評価され、世界中に利用者を広げています。
adidasやHiltonなど、世界的に有名な企業もCloudinaryを利用しています。
昨今はあらゆる企業がWebサイトを所有し、マーケティングなどでデジタルコンテンツを積極的に配信する時代です。
サイトスピードやSEO評価を常に改善し続けなければ、ユーザーはWebサイトに定着しません。
Cloudinaryは画像や動画のようなデジタルコンテンツの管理を効率化し、最適な状態でユーザーに配信することを可能とします。
そのため、Cloudinaryの導入はWebサイトを改善し、より多くのユーザーのUXを向上するうえで有効的な施策です。
Cloudinaryの仕組み
Cloudinaryによる画像の表示は、以下のような仕組みによるものです。
- 1回目のユーザーからの画像のリクエストに対し、Cloudinaryはストレージに保管されているオリジナルの画像から変換処理を実施します。
- 処理によって生成した派生画像はCloudinaryのクラウドストレージに追加されます。
- そのまま派生画像はCDNを経由後、CDNキャッシュとして生成され、ユーザーの元に変換画像として配信されます。
- 同様のリクエストが2回目以降もあった際は、ブラウザキャッシュでの配信に変わった後、そのまま派生画像、あるいはCDNキャッシュとして配信されます。
Cloudinaryはこの仕組みを採用することにより、スピーディーかつ最適なWebコンテンツの配信を可能としています。
Cloudinaryの主な活用事例
Cloudinaryは世界中の企業で活用されているサービスです。
本章では、代表的な活用事例として、adidasの事例を紹介します。
世界的なスポーツブランドであるadidasが有するデジタルチャネルは、キャンペーンやイベントが開催されれば、5,000万件以上のリクエストが発生することも珍しくありません。
そのため、adidasは常にデジタルチャネルが最適なパフォーマンスを発揮できる状態にしておく必要がありました。
Cloudinaryはadidasの依頼に対し、個々のユーザーの状況やリクエスト数を考慮し、デジタルチャネルを最適化するサポートを実践しました。
さらに膨大な数の画像や動画をコストや労力をかけずに効率的に管理できるようになったため、adidasはデジタルチャネルの規模の拡大にも成功しています。
参照：アディダスがCloudinaryで「メガモーメント」を提供｜Cloudinary
Cloudinaryを導入する6つのメリット
Cloudinaryを導入すると、以下のようなメリットが期待できます。
- 複数環境・デバイス間での一貫したアセット管理
- ブラウザごとに最適な画像フォーマットを自動判別
- デバイスやブラウザに応じた適応型配信
- 画像加工が簡単にできる
- サイトスピードを改善できる
- エッジサーバーを活用した低遅延配信
それぞれのメリットについて、順番に解説します。
複数環境・デバイス間での一貫したアセット管理
Cloudinaryは複数環境・デバイスでも、一貫したアセット管理が可能です。
Cloudinaryは、画像や動画が同じストレージに保存できるうえに、異なる環境やデバイスからのアクセスもできます。
そのため、一元管理による画像や動画の効率的な運用が可能です。
ECサイトのように膨大な数の画像や動画を掲載するWebサイトにとって、Cloudinaryは特に効果を発揮します。
ブラウザごとに最適な画像フォーマットを自動判別
ブラウザごとに最適な画像フォーマットを自動で判別できる点も、Cloudinaryの魅力です。
Webサイトに掲載する画像や動画を各ブラウザに合わせて最適化することは、UXを向上するうえで欠かせません。
しかし、各ブラウザによって最適なフォーマットが異なるため、手動での対応は困難です。
Cloudinaryはブラウザに合わせて画像フォーマットを自動的に最適化できます。
ブラウザごとに調整する必要がないため、管理業務の大幅な効率化につながります。
デバイスやブラウザに応じた適応型配信
Cloudinaryは、さまざまなデバイスやブラウザに応じた配信が可能です。
Cloudinaryはリアルタイムで画像や動画を変換し、最適化したうえで配信するAPIを搭載しています。
ブラウザ別に最適な圧縮率を適用するため、表示速度の向上も期待できます。
さらにCloudinaryはアセットのURLのパラメータを操作するだけで、画像や動画の変換が可能です。
調整や変換がしたいときにも、スムーズに対応できます。
画像加工が簡単にできる
Cloudinaryは画像加工が簡単にできる点もメリットです。
Cloudinaryにはトリミング・リサイズ・エフェクトの付加など、加工に役立つさまざまな機能が揃ったSDKがあります。
CloudinaryのSDKは多数のプログラミング言語に対応しているため、汎用性が高い点が特徴です。
また、Cloudinary上で画像加工が完結するため、CSSの適用などのプロセスが発生せず、Webサイトのパフォーマンスを維持したまま画像を表示できます。
加えて、CloudinaryはAIによる画像加工が可能です。
画像の欠けている箇所を補正したり、無駄なオブジェクトを削除したりと、CloudinaryのAIは高度な加工にも対応しています。
もちろん、動画の修正でも、CloudinaryのAIを利用できます。
サイトスピードを改善できる
Cloudinaryを導入すれば、サイトスピードの改善も可能です。
先述したように、CloudinaryはWebサイトに掲載している画像や動画を圧縮し、各ブラウザに合わせて最適化できます。
その結果、サイトスピードが改善され、ユーザーはWebサイトを快適に閲覧できます。
サイトスピードはユーザーの離脱率だけでなく、SEO評価を左右する重要な要素です。
画像や動画の読み込みが遅延し、閲覧に支障が出るようになれば、SEO評価が低下し、PV数が落ち込むリスクが高まります。
SEO評価を高めるうえでも、Cloudinaryによるサイトスピードの改善は効果的です。
エッジサーバーを活用した低遅延配信
画像や動画の最適化だけでなく、Cloudinaryはエッジサーバーを活用することで低遅延配信ができる点も魅力です。
CloudinaryはエッジサーバーによるCDN機能も提供しており、効率的かつスピーディーにWebコンテンツを配信できます。
そのため、Webサイトを閲覧するユーザーに最適な速度でのWebコンテンツの配信が可能です。
もちろん、エッジサーバーによる低遅延配信はサイトスピードやSEO評価の改善にもつながります。
Cloudinaryの使い方
Cloudinaryの使い方は以下の手順で実施します。
- アカウントの作成
- スタートツアー
- 画像や動画の格納
- 画像や動画の配信
- WordPressに導入する方法
使い方をあらかじめ把握しておけば、Cloudinaryのスムーズな導入が可能です。
それぞれの手順について、順番に解説します。
アカウントの作成
まずはCloudinaryの公式サイトでアカウントを作成します。
Cloudinaryのアカウントは登録フォームに必要事項を記入するだけで作成が可能です。
記入が完了すると、メールアドレスの確認をされるので、認証を完了しておきましょう。
なお、Cloudinaryのアカウントを作成する際、Cloudnameと呼ばれるものを編集できます。
Cloudnameはアカウント名のようなものであり、URLに表記されます。
Cloudnameはアカウント作成後にも編集できますが、希望の名前がある際はあらかじめ編集しておくことがおすすめです。
スタートツアー
アカウント作成が完了すると、スタートツアーが始まります。
スタートツアーは言うなればチュートリアルです。
Cloudinaryのスタートツアーでは、以下の内容が解説されます。
Cloudinaryのスタートツアーは機能や設定の説明を受けるだけのものなので、必須ではありません。
不要だと判断すればスキップできますし、設定の変更なども後から実施できます。
なお、スタートツアーはスキップしても、最後まで閲覧するまでいつでも確認ができます。
後から内容を確認したいときは、ヘッダーの「Welcome」からやり直しが可能です。
画像や動画の格納
設定などが完了したら、画像や動画を格納しましょう。
Cloudinaryはメディアライブラリーにドラッグ&ドロップをしたり、オレンジ色の「Upload」のボタンを押したりするだけで、画像や動画をアップロードできます。
変換や最適化も、この時点で調整が可能です。
なお、Cloudinaryのメディアライブラリーはフォルダを作成できるうえに、階層化もできます。
画像や動画の数が多くてもわかりやすく整理できるので、積極的に活用しましょう。
画像や動画の配信
画像や動画を格納すると、配信が可能になります。
変更や加工などを終えたら、「Copy URL」をクリックすると配信用のURLを取得できます。
Cloudinaryで取得したURLは、アプリケーションやWebサイトにそのまま埋めこんで利用できるので、スムーズな配信が可能です。
WordPressに導入する方法
WordPressとCloudinaryを組み合わせる場合、より簡単な方法があります。
Cloudinaryは公式サイトでWordPress用の「Cloudinary プラグイン」を配布しています。
このプラグインをインストールし、API Environment variableの数値をCloudinaryの「Connect」に入力したらWordPressでのCloudinaryの利用が可能です。
Cloudinaryの料金設定
Cloudinaryの料金設定は、以下4つのプランに分かれています。
- Freeプラン
- Plusプラン
- Adovancedプラン
- Enterpriseプラン
それぞれのプランの内容について、順番に解説します。
Freeプラン
Freeプランは無料で利用できる料金プランです。
個人でWebサイトを運営している方や、Cloudinaryの使用感を確かめたい方に適しています。
Freeプランの具体的な内容は以下のとおりです。
Plusプラン
Plusプランは、Freeプランの機能に加え、いくつかの追加機能を利用できる料金設定です。
Plusプランの具体的な内容は以下のとおりです。
Advancedプラン
Advancedプランは中小企業のWebサイトに適した料金設定です。
Advancedプランの具体的な内容は以下のとおりです。
Enterpriseプラン
Enterpriseプランは大規模なWebサイト向けの料金設定です。
具体的な料金はCloudinaryに問い合わせる必要があります。
Enterpriseプランの具体的な内容は以下のとおりです。
よく比較されるCDNサービス
本章では、Cloudflareとよく比較されるCDNサービスを紹介します。
CloudFlare
出典：Cloudflare
Cloudflareは、世界335以上の大規模なネットワークを活用し、静的・動的コンテンツの高速配信を実現するCDNサービスです。
無料プランでもDDoS攻撃対策やWAF、SSL証明書などのセキュリティ機能が充実しており、中小企業のコーポレートサイトやECサイトでの導入に適しています。
Amazon CloudFront
Amazon CloudFrontは、AWSが提供するCDNサービスです。
600以上の配信拠点に対して、自動化されたネットワークマッピングと高度なルーティング機能を適用することで、通信遅延を最小化します。
またセキュリティ面では、AWS Shield Standardを活用すると、追加費用無しでDDoS対策を強化できます。
関連するAWSサービスと容易に連携できるため、AWS環境で構築されたWebサイトにおすすめです。
Akamai
出典：Akamai
Akamaiは、世界130カ国以上に4,200以上の拠点を展開する業界最大級のCDNプロバイダーです。
大規模なトラフィックにも対応可能なインフラと24時間対応のサポートを提供し、DDoS・DNS攻撃対策や不正利用対策など、企業向けの高度なセキュリティを実現しています。
Akamaiは、大規模なWebサイトやエンタープライズ向けのサービスに適したCDNです。
Imgix
出典：Imgix
Imgixは、画像に特化したCDNサービスで、リアルタイムの画像処理と最適化機能を備えています。
世界中に分散されたCDNネットワークを活用し、画像の高速配信だけでなく、リサイズやクロップ、フォーマット変換などの処理をURL上のパラメータ指定のみで実現できる点が特徴です。
開発者の実装負荷を軽減しながら、サイト全体のパフォーマンスを向上させたいWeb開発チームに最適です。
またImgixは、Cloudinaryと併用されるケースもあります。jsやcssの配信をCloudinaryで行い、画像や動画の配信はImgixで行うというような実装です。詳細はぜひお問い合わせください。
まとめ Cloudinaryを活用すればデジタルコンテンツを最適化できる
Cloudinaryは、ユーザーが利用するブラウザやデバイスに合わせて画像や動画を最適化してくれるサービスです。
画像や動画を変換するだけでなく、エッジサーバーを活用しているため、Webサイトの表示速度の向上を実現できます。
適切に活用すれば、エンゲージメントの向上及び、コンバージョン率の改善が期待できます。
また、運用するエンジニアにとっても、Cloudinaryは有用なサービスです。
URLパラメータだけで画像や動画の加工や最適化ができるうえに、管理を一元化できるため、開発効率を向上できます。
より良いWebサイトの運営を実現するうえで、Cloudinaryは高い効果が期待できます。
サイトスピードやWebサイトの管理に課題を抱えている際は、ぜひ導入をご検討ください。
また、Webサイトの表示速度でお悩みの方は弊社の画像最適化サービス「Imgix」もご検討ください。日本経済新聞や一休.comといったサイトのスピード改善に活用いただいています。
