Crop Hints

WordPress Plugin powered by Google Cloud Vision AI

視覚ビジョンがめざめる

Cloud Vision AIの確かな目が、被写体をとらえて離しません。

Crop Hints プラグインはメディアライブラリにアップロードされた画像を Google Cloud Vision AI のパワーで自動解析。

写真のもっとも大切な被写体をとらえクロップヒントとして保存します。まるであなたの WordPress に鋭い視覚が宿ったかのような体験です。

(0, 0)
(2560, 0)
(0, 1706)
(2560, 1706)

クロップヒントでかしこい画像レイアウトを。

パソコン、スマートフォン、そしてタブレット。ウェブサイトはデバイスの画面サイズにあわせ、レイアウトや要素のサイズを柔軟に変化させるレスポンシブ構造が一般的となりました。

画像ごとのクロップヒントのデータを CSS に反映すれば、さまざまなアスペクト比をとりうる領域へ写真本来の印象を損なわない効果的な画像配置が可能になることでしょう。

審美眼をお持ちのあなたのご注文にもお応えします。

抽出されたクロップヒントが気に入りませんか?Cloud Vision AI は優秀な頭脳を持っていますが、まだまだあなたの審美眼には敵わないこともあります。

ひと手間おかけしてしまいますが、あなた自身の手でマニュアル操作でクロップヒントを指定することも可能です。直感的なインターフェースでいとも簡単に。

Crop Hints
Manual Crop Hint
Auto Crop Hint
by Google Cloud Vision AI
A
M

使い途は、アイデアしだい。

Ken Burns Effect

Ken Burns Effect

Photo by Guy Kawasaki
Photo by Shane Stagner
Photo by Jeremy Bishop

中央に向かってズームするスライドショウに、飽きてはいませんか。クロップヒントのデータを応用すれば、被写体に向かってズームする印象的な Ken Burns Effect に活かすことも。

レスポンシブ・イメージ

Crop Hint × object-position Crop Hint の ‘center’ または ‘focus’ の値を反映

aspect ratio 1.5

object-position 未指定 object-position: 50% 50% に相当

aspect ratio 1.5
Photo by Anton Darius

クロップヒントと CSS 3 の object-fit • object-position プロパティを利用すれば画像を配置したエレメントが形状(アスペクト比)を変えたとしてても、被写体をとらえ続ける賢い画像配置が可能です。

こちらのページ に詳しい実装方法を掲載しています。

Smart Cropped Images Pro

Smart Cropped Images は Cloud Vision AI が抽出した
クロップヒントを考慮し × 任意のアスペクト比で × オリジナルの画像から最大限に
画像をスマートに切り出します
2.35