グーグルの新たな画像生成AIツール「ImageFX」の使い方
印刷する メールで送る テキスト HTML 電子書籍 PDF ダウンロード テキスト 電子書籍 PDF クリップした記事をMyページから読むことができます Googleが人工知能（AI）に多額の投資を行ってきたことを考えれば、同社が先頃、独自の画像生成AIツール「ImageFX」を公開したのは、意外なことではない。ImageFXは、OpenAIの「DALL-E 3」や「Midjourney」「Image Creator from Microsoft Designer」といった多くの画像生成AIツールの強力なライバルになるはずだ。 ImageFXは、テキストから画像を生成するGoogleのテクノロジー「Imagen」の最新世代である「Imagen 2」を利用する。ImageFXで作成されるすべての画像には、DeepMindの「SynthID」が埋め込まれる。SynthIDは、肉眼では見えない
「JAPAN」で画像検索すると出てくるあの場所はいったいどこなのか？
あの富士山はどこからの眺望？ さっきから「あの、あの」としきりに言っているけれども、ピンとこない人も多いかもしれないので、検索した画像を見てほしい。Googleがこちら。 Google画像検索の結果。赤で囲った部分が「あの」風景の写真 ついでにBingの画像検索だとこちら。 Bingの画像検索結果 平等院鳳凰堂や金閣寺、東京タワー、姫路城、歌舞伎町、宮島あたりの、われわれでもどこかわかるような超有名ランドスケープに混じって、いったいどこからの風景かよくわからない「富士山をバックにした五重塔の景色」がかなりの確率で混じっていることがわかる。 富士山が見えているから、山梨か静岡だろうことは想像できるが、どこからの風景なのか、ビシッと答えられる人はあまりいないだろう。 調べると、この景色は山梨県富士吉田市の新倉山浅間（あらくらやませんげん）公園からの眺望らしい。 Googleの画像検索で出てきた
CSSのsubgridがすべてのブラウザにサポートされたので、カード内の見出しやテキストを簡単に揃えることができます
先日の記事（Chrome 117でサポートされたCSSの6つの新しい機能とプロパティ）で触れましたがCCSS Gridのsubgrid値が、grid-template-columnsとgrid-template-rowsの2つで設定できるようになりました。Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できます。 CSSのサブグリッド（subgrid）を使用すると、下記のように子要素（画像・見出し・テキスト）の水平グリッドも簡単に揃えることができます。 CSSのサブグリッド（subgrid）で子要素のグリッドを揃える CSSのサブグリッド（subgrid）のサポートブラウザ デモページの解説 CSSのサブグリッド（subgrid）で子要素のグリッドを揃える 3つのカードがあり、それぞれに画像・見出し・テキストがあります。subgrid以前は、
HTMLはシンプル！ 画像をホバーしたときのさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir
画像をホバーしたときにテキストを重ねたり、ボーダーをアニメーションさせたり、拡大表示させたり、さまざまなエフェクトを簡単に実装できるCSSの超軽量（2Kb）ライブラリを紹介します。 HTMLにclassを与える簡単実装。エフェクトは組み合わせることも可能で、オーバーレイやテキストやボーダーなどを自由に組み合わせて実装することができます。 Izmir Izmir -GitHub Izmirの特徴 Izmirの使い方 Izmirのカスタマイズ Izmirの特徴 Izmirは、画像をホバーしたときのさまざまなエフェクトを簡単に実装できるCSSのライブラリです。エフェクト用のclassはかなりの数が用意されており、HTMLにclassを追加するだけで、完璧なホバーエフェクトを実装できます。 MITライセンスで、商用プロジェクトでも無料で利用できます。 Izmir 主な特徴は、下記の通り。 エフェク
ウェブサイトに透過動画を埋め込む方法 - ICS MEDIA
今ではサイト内に動画やアニメーションを利用することはそこまで特別なことではなくなりました。実はブラウザーや技術の進歩により最近は透明部分のある動画（アルファ付き動画）をサイト内に埋め込むことも可能になってきました。本記事では動画内容に応じた透過動画を、メリット・デメリットなどを交えながら、動画ファイルだけでなくさまざまな実装方法を紹介します。 記事前半では主に動画形式での実装方法を、後半ではアニメーション画像形式での実装方法を解説します。 サンプルを別ウインドウで開く コードを確認する ※デモの再生には通信量が多いため、モバイルデータ通信などを利用の方は注意ください。 コーデックとコンテナー まず、動画ファイルの仕組みである「コンテナー」と「コーデック」について簡単に説明します。 よく動画ファイルの拡張子に「.mp4」や「.mov」などを見たことがあると思います。これらはマルチメディアコン
ついに「CLIP STUDIO PAINT(クリスタ)」で画像生成AI「Stable Diffusion」を動かすプラグインが登場
マンガやイラストをデジタル上で作画する際に使用されるお絵描きソフトウェアの「CLIP STUDIO PAINT(クリスタ)」上で、テキストから画像を自動で生成してしまうAI「Stable Diffusion」を動かすことが可能なプラグイン「NekoDraw」が登場しました。NekoDrawはGitHub上で公開されており、テキストから画像を生成する「text2img」と、画像からより高精細な画像を生成する「img2img」の両方に対応しています。 GitHub - mika-f/nekodraw: NekoDraw: CLIP STUDIO PAINT plugin for executing Stable Diffusion txt2img and img2img processor. https://github.com/mika-f/nekodraw 「Stable Diffusio
imgタグのwidthとheightを省略したらダメ！ 画像によるレイアウトシフトを回避する最近登場した2つの優れた解決方法
レイアウトシフトとは、Webページがロードされる時に画像のスペースが確保されず、画像が表示された時にその分レイアウトがずれてしまうことです。 このレイアウトシフトを回避するために10年以上もの間、アスペクト比を手動で適用する必要がありました。しかし、現在ではそんな馬鹿げたハックは必要ありません。最近登場した2つの優れた解決方法を紹介します。 Avoiding <img> layout shifts by Jake Archibald (@jaffathecake) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レイアウトシフトとは aspect-ratioプロパティによるレイアウトシフトの回避方法 widthとheightによるレイアウトシフトの回避方法 どちらの方法を使用すべきか レイアウトシフトとは デフォルトでは、<im
ウソみたいに簡単！ Tailwind CSSのみを使用してMasonryレイアウトを実装する方法
Masonryレイアウトとは、画像やカード型コンテンツをレンガ状に敷き詰めて配置するレイアウトです。Pinterestなどで見かける、高さが異なる画像・カードを配置する時によく使用されるテクニックです。 以前はJavaScriptやライブラリを使用したり、トリッキーなCSSで実装していましたが、Tailwind CSSを使用するとウソみたいに簡単に実装できます。 TailwindCSS Masonry Layout by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Tailwind CSSのみを使用してMasonryレイアウトを実装する方法 終わりに はじめに Masonryレイアウトは、以前は画像ギャラリーに使用されていました。しかし最近では、このレイアウトはユーザーにとって非常に魅力
解像度の低い画像をAIが解決！放り込めば倍サイズのWebツール Image Upscaler
「この写真、粗くて使えない。」 そんなときは、日々進化する人工知能、AIのおかげで、解像度の低い画像を最大4倍まで拡大できる Image Upscalerで解決しましょう。 ウェブサイトに写真を放り込んで、数秒待つだけで完成、できた画像はそのままJPEGファイル形式で保存できるので、フォトショップなどのデザインツールも不要です。 Image Upscaler https://clipdrop.co/image-upscaler このツールは、画像のクオリティはそのままにくっきりとしたシャープさと、何百万枚もの画像で訓練されたAIによるリアルな再現によって解像度をアップ。 さらに、ザラザラした写真のノイズ除去も同時に行います。 画質を倍にするのは無料、月5ドル（年間）のProプランは4倍まで対応できます。3日間の無料体験トライアルもあり、キャンセルはいつでも自由となっています。 このProプ
君には今から3時間で機械学習Webアプリを作ってもらうよ
新人: 「本日データサイエンス部に配属になりました森本です！」 先輩: 「お、君が新人の森本さんか。僕が上司の馬庄だ。よろしく！」 新人: 「よろしくお願いします！」 先輩: 「さっそくだけど、練習として簡単なアプリを作ってみようか」 先輩: 「森本くんは Python なら書けるかな？」 新人: 「はい！大学の研究で Python 書いてました！PyTorch でモデル作成もできます！」 先輩: 「ほう、流石だね」 新人: 😊 先輩: 「じゃ、君には今から 3 時間で機械学習 Web アプリを作ってもらうよ」 先輩: 「題材はそうだなぁ、写真に写ってる顔を絵文字で隠すアプリにしよう」 先輩: 「あ、デプロイは不要。ローカルで動けばいいからね。顔認識と画像処理でいけるよね？」 新人: 😐 新人: (えぇぇぇぇぇぇぇ。3 時間？厳しすぎる...) 新人: (まずモデルどうしよう。てかもら
フォトショップで漫画コミック風イラストに一発加工！おすすめ素材10選
フォトショップで漫画コミックのようなイラスト風に加工する方法は、人気エフェクトのひとつです。 画像を差し替えるだけのお手軽エフェクトやベクターイラスト風に仕上げる方法も紹介しましたが、今回はより手軽に漫画イラスト加工ができるデザイン素材をまとめてご紹介。 ワンクリックするだけでプロのような仕上がりを実現できる、他と差のつく便利デザインツールが揃います。 アクション素材の使い方もとてもシンプルなので、はじめての人でも簡単に利用することができます。 フォトショップで写真を水彩イラスト風に一発加工！おすすめ素材25選 まずはAdobe公式サイトより、Photoshopを無料でダウンロードし、7日間のお試しからはじめてみませんか。1087円/月からフォトショップが使える、フォトプランもおすすめです。 フォトショップで漫画コミック風イラストに一発加工！おすすめ素材10選 Urban Sketch –
グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ - ICS MEDIA
グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ 『Squooshスクーシュ』というGoogleが開発した画像圧縮ウェブアプリがあります。ブラウザで変換結果を見ながら圧縮設定ができるので、画像圧縮の難しい知識を持たない方でも使いやすいことが特徴です。圧縮だけでなく、WebPなどの各種フォーマットへの変換・リサイズといったこともできる便利ツールです。 このSquooshをNode.jsで扱える『libSquoosh』が存在します。libSquooshは大量の画像を一括で圧縮、WebPへの変換、リサイズなどの処理をこれ1つで完結できるのがポイントです。昨今のウェブはページの読み込み時間が重視される傾向があります。画像のファイルサイズは読み込み時間に大きく影響するため、画像圧縮は重要なテクニックです。libSquooshをwebpack・Viteと
Squoosh
SmallSmaller images mean faster load times. Squoosh can reduce file size and maintain high quality. SimpleOpen your image, inspect the differences, then save instantly. Feeling adventurous? Adjust the settings for even smaller files. SecureWorried about privacy? Images never leave your device since Squoosh does all the work locally.
「モザイクなどの修正を除去する技術」とはどんなものなのかを専門家が解説
モザイクやぼかしを除去して画像や映像を鮮明化する技術は古くから存在しますが、特に近年はAIなどの発達により急激に進歩しています。悪用されると、プライバシーやセキュリティの保護をやすやすと突破することにもつながるこの技術について、ドイツのセキュリティ企業であるPositive Securityが解説しました。 Recovering redacted information from pixelated videos | Positive Security https://positive.security/blog/video-depixelation 修正技術は大きく分けて、モザイク処理(左上)とガウスぼかし(右下)の2種類に分けられます。このうち、モザイク処理は複数のピクセルを合成し、そのピクセルの色を元となったピクセルの平均値にするもので、ガウスぼかしはガウス関数を用いてピクセル同士の
CSSによるレイアウトの崩れやおかしな挙動を解決するテクニックのまとめ -Defensive CSS
WebページやUIコンポーネントのレイアウトの崩れ、おかしな挙動にあらかじめ対応しておくためのCSSのテクニックを紹介します。 FlexboxやCSS Gridによるレイアウトの崩れ、テキストが長いコンテンツ、固定の幅・固定の高さによるレイアウトの崩れ、子アイテムが増えすぎたり減りすぎたりで崩れたりなど、起こりがちな問題を解決する実践的なテクニックが満載です。 Defensive CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Flexboxでの折り返し スペースの確保 テキストが長いコンテンツ 画像の伸縮を防止する スクロールが連鎖するのを回避 CSS変数のフォールバック 固定の幅・固定の高さによるレイアウトの崩れ 忘れがちな背景の繰り返し 垂直のメディアクエリ justif
モダンCSSでよく使用されるレイアウトを実装するまとめ
ヘッダ・フッタ・コンテンツ・サイドバー、フルページのレイアウト、最下部のフッタ、中央配置、カードなど、一般的なWebサイトやスマホアプリのUIをモダンCSSで実装する方法を紹介します。 CSSの実装はデバイスベースからコンテンツベースに移行しているのが現状です。これからのプロジェクトに役立つCSSのテクニックを解説します。 Layout patterns 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 モダンCSSで実装するレイアウト アスペクト比が維持される画像カード 最大値と最小値を決め、伸縮するカード コンテナに合わせて最適化されるカード スペースに合わせて伸縮するパンケーキ 聖杯レイアウト ラインナップ 積み重なるパンケーキ RAM (Repeat, Auto, Minmax) メディアクエリなしのサイドバー これからの
Web制作あるある「画像ない問題」を解決！ダミー画像の生成サービス15選
「準備はまだできていないけど、仮のダミー画像を入れておきたい」ウェブ制作中にそんな場面に遭遇することもあるでしょう。 この記事では、ダミー画像を手軽に生成できるジェネレーター、オンラインツールをまとめてご紹介します。 そもそもダミー画像とは？ ウェブ制作中に、「画像の準備はできていないけど、とりあえずレイアウトの確認だけでもしたい」、というときに利用する仮の画像、これが「ダミー画像」です。 画像のサイズはもちろん、スタイルなどもimgタグに直接記述するだけで、ダミー画像を表示できます。 試しに以下のようにimgタグを記述してみると、 <img src="https://placehold.jp/272343/ffd803/640x400.png"> ほんの少しの指定を行うだけで、サイトの雰囲気にあった色合いのダミー画像を用意することができます。サイズ指定も手軽なので、お気に入りのダミー画像
「ヤバすぎ」「神ツール」──Photoshop新機能が話題に “マウスを合わせるだけで物体選択”
ホバー選択は以前からあった「オブジェクト選択」ツールの内の新機能として実装。これまでも、オブジェクト選択では選びたい物体を長方形の選択ツールなどで囲めば物体を自動認識できたが、ホバー選択ではそうした範囲指定をする必要もなくなった。 さらに、画像内のオブジェクト全てのマスクをワンクリックで作る機能も実装した。 選択の精度について、アドビは「画像内のほとんどのオブジェクトを検出可能だが、一部検出できないカテゴリーもある」としている。検出には同社のAIである「Adobe Sensei」を利用しており、今後も改良を続けるとしている。 この他、機械学習を使って夏の草原を秋のように色付けたり、雪原に変えたりと、任意の2つの風景画像を組み合わせて風変わりなシーンを作る「風景ミキサー（ベータ版）」や、別々に用意した人物写真と風景写真を合わせた際に違和感がないように色を合わせる「色調和（ベータ版）」、写真の
CSSのaspect-ratioプロパティがすべてのブラウザにサポートされました、画像をアスペクト比で実装する今までとこれからの実装方法
先日アップデートされたSafari 15とSamsung Internet 15により、すべてのエバーグリーンブラウザでaspect-ratioプロパティがサポートされました。 ※エバーグリーンとは、最新版に自動アップデートされるブラウザのことです。 aspect-ratioプロパティを使用することで、レスポンシブ対応の画像をアスペクト比を維持したまま簡単に実装できます。 CSSでアスペクト比を実装する今までとこれからの実装方法を紹介します。 CSS ways to Create Fixed Aspect Ratio aspect-ratioプロパティとは 1. Padding Hack 2. Viewport width solution 3. aspect-ratioプロパティ デモ aspect-ratioプロパティとは aspect-ratioプロパティは名前の通り、アスペクト比を
加工なし CSS のみで画像にグリッチと RGB ずらし効果をかける
はじめに 以下のツイートが500いいねを超えましたので解説記事を書きます。 デモ＆ソースコード CodePen に完成品のデモとソースコードを置いてあります。 グリッチとは 元々は「一過性の障害」という意味ですが、映像の世界ではしばしば「映像の乱れ」という意味で用いられます。ホラーやサイバーなどでよく見られる演出の一つ。 https://www.google.com/search?q=glitch&tbm=isch RGB ずらしとは 色収差、RGB シフト、RGB split (RGB 分割) など、さまざまな言い方がありますが、要するに本来光の三原色である Red、Green、Blue がズレることなく重なって映像を映し出すところ、それがズレた状態で表示されることです。 グリッチエフェクトと一緒に用いたり、場合によっては色ズレも含めてグリッチと言ったりしますので、今回も合わせて実装する
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
