フリー素材はデザイン制作や資料作成、動画制作など様々な場面で活用することができ、気軽に利用できるため非常に重宝する存在です。 今回は、デザインに追加するだけで魅力的な雰囲気を出してくれるようなおしゃれ... 投稿 おしゃれなフリー素材サイトのジャンル別まとめ！登録不要で商用利用もOK は Web Design Trends に最初に表示されました。

本Tech TIPSは2024年9月1日の状況、情報を元に執筆されています。ChatGPTは、頻繁に更新されるため、記事の内容と実際の状況が異なってしまう可能性があります。その場合は、適宜、記事を更新する予定です。 プレゼンテーションにちょっとしたイラストや写真を入れて、分かりやすくしたいといったこともあるだろう。そのような場合、著作権フリーのイラストや写真を探すことが多いのではないだろうか。ただ、探すのに時間がかかるわりに、イメージに合ったものが見つからないことも多い。 そのような場合、生成AI（人工知能）を使って画像を生成させるという手がある。「ChatGPT」では、同じOpenAIが開発した画像生成AI「DALL-E3」による画像生成に対応しており、ChatGPTに「猫の絵を描いて」と依頼すれば、猫の画像が生成されるようになった。 ただし、ChatGPTで画像生成を実行するには、前提

キャラクターを生成する 最後に紹介するのは「Consistent Character GPT👉🏼 Fast & High Quality⚡️」という長い名前のGPT。 説明文には「Your creative partner for generating characters in different poses, expressions, styles, and scenes. No prompt needed, just start with 'CLICK HERE' and follow the steps.」と書かれている。 「CLICK HERE」と入力して指示に従うだけで「異なるポーズ」「異なる表情」のキャラクターを作成できる、とある。 画像生成AIを触っている人なら納得してもらえると思うが、AIによる画像生成でもっとも難しい事のひとつがキャラの一貫性だ。プロンプトの工夫であ

「無料で使えるフリー画像を見つけたい」という話は、ホームページやグラフィックなどクリエイティブな業種では、よく耳にします。 しかし同時に、「目的の一枚が見つからず時間だけが過ぎてしまった」なんて経験がある人も多いのが事実です。 フリー画像を効率的に探しコツは、目的や用途にあったサイトで素材を見つけること。 この記事では、商用利用できるフリー画像サイトを国内・海外に分けて一挙にご紹介します。 利用者の多い定番サイトから、あまり知られていないレアなサイトまで集めています。 ８年前の2016年12月7日に公開した記事を、最新版にアップグレードしてお届けです。 国内フリー写真素材サイト ここでは、商用利用できてクレジット表記も必要ない「フリー画像」を無料ダウンロードできるサイトをご紹介。 ここでの選定ポイントは、以下の通り。 日本人や日本の伝統、和柄など国内向けの画像素材が豊富 日本語によるキーワ

10月1日頃、OpenAIの新しい画像生成AI「DALL·E 3（ダリ３）」が徐々に使えるようになり、その性能の高さから話題になっています。まずサプライズで使えるようになったのがマイクロソフトのBingチャット。日本語で「猫の画像を作ってください」などと入れるだけでかわいい猫の画像が出てくると。これが無料で使えるのは衝撃的です。マイクロソフトが巨大資本で他の会社をつぶしに来たなという感じですね。どう考えても、今のところはサーバーコストが果てしなくかかる赤字サービスなのは間違いないので……。 「ラーメンを食べる女の子」が描ける！ なにより衝撃的だったのは、「アニメ風の少女と猫が遊んでいる姿を作ってください」というリクエストに対し、一発で完璧な正解を出してきたことです。Stable Diffusionだと苦手とされていた指も適切に描写されています。もうひとつの着目点はオブジェクト間の関係性です

以前の記事 で、「Notion APIが画像に対応してない」と書いたんですが、2021/8/15ぐらい？ にimageに実は対応していることが発見されました。 僕の個人ブログでも対応しようと思ってたんですが、８月、9月は手がつけられず、今月に入ってようやく着手しました。 前提 notion-sdk-js: 0.4.4 ※ これより前でもimageブロックを取ることはできると思います。たぶん…… あと個人ブログの記事ページはSSGで生成してます。 まだ変更があるのであまり大々的に発表してない？ そもそもimageブロックに対応した、という情報を得たのがTwitter経由で、公式のChangelogを漁ってもそれについての発表が見つけられませんでした。 記憶だと公式でも発表してたような気がしたんですが、気のせいだったかもしれません。 リリースは控えめですが、ドキュメントは↓のように更新されてい

はじめに この記事は『Picture perfect images with the modern img element』という記事を参考に画像最適化に関しての重要な観点をまとめたものです。 画像はWEBにおいても重要な役割を担っており、2021年時点で1つ以上の画像を含むWEBサイトは95.9%、faviconなども含めて1回でも画像取得のリクエストを送信するWEBサイトは99.9%であるという調査もあります。 さらには、LCP要素の約70%が画像であるという調査が出ています。 Largest Contentful Paint（LCP）は、Googleが提唱するCore Web Vitalsの1つで、ウェブページのパフォーマンスを測る指標です。詳しくは次の章で解説します。 つまり、WEBのパフォーマンスにおいて画像の最適化は重要な観点でありユーザ体験に直結することがわかります。 画像最

[レベル: 中級] Google は、画像検索 SEO のベストプラクティスのドキュメントを更新しました。 <img> タグでマークアップされた画像ファイルは、<picture> タグなどほかの要素の中に入っていてもインデックスの対象になります。 より明確にドキュメントに文書化 ページの読み込み速度を向上させるために、より軽量なフォーマットで画像を配信するサイトも増えてきていることでしょう。 <picture> タグを使うことで、ブラウザがサポートする画像フォーマットを読み込ませることができます。 <picture> <source type="image/avif" srcset="cute-puppy.avif"> <source type="image/webp" srcset="cute-puppy.webp"> <img src="cute-puppy.jpg" alt="かわい

ウェブサイトの表示スピードはサイトの健全性における重要な観点の一つです。Googleが提唱するCore Web Vitalsコア・ウェブ・バイタルズと呼ばれる指標の中にもサイト表示スピードに関する項目があり、表示されるまでの時間が単なるユーザー体験だけでなく、SEOでも無視できない存在です。表示スピード低下の要因はネットワークやサーバーサイド、そしてフロントエンドまで広範囲におよびます。本記事ではその中でも画像の読み込みについて改善できるテクニックを改善前と改善後を比べながら紹介します。 改善前サンプルを別ウインドウで開く 改善後サンプルを別ウインドウで開く 画像読み込みBefore / Afeter 上図はLighthouseによるチェックの結果です。Lighthouseはウェブサイト検査ツールで、ウェブページのパフォーマンス、アクセシビリティ、SEOなどの状態を計測できます。Googl

Image Converterは任意の画像の切り取り、圧縮、変換、サイズ変更を一括で行えるWebアプリです。 URL或いはアップロードした画像を範囲を指定して切り取り、自動でサイズ圧縮、pngやgif、webp、avif、tiff、heifなどに変換、指定したサイズに変更など画像の最適化を一括で行ってくれる、というもの。 利用の際にユーザー登録などは不要みたいです。同じ機能のツールを探したけど見つからないので作ったそうです。Webアプリなので用途は限定的になるかもしれませんが使った感じ便利でした。 Image Converter

検索結果の第1位は、PageSpeed Insightsの点数が12点（10サイト中9位）、実機での体感速度も最も遅い7秒でした。 点数が81点と最もよく、体感速度も2秒と非常に速いサイトは第7位。 この結果から、少なくとも現時点では、ページ表示速度は検索順位に大きな影響を与えるということではなさそうです。 50点未満は改善した方が良い PageSpeed Insightsの点数は、ランキングに強い影響を与えていませんでしたが、2021年5月からはGoogleのSEO評価項目の一つにCore Web Vitals（ページの表示速度を表す指標）が追加されるようになります。 点数とSEOとの関係についてGoogleは明言していませんが、PageSpeed Insightsの点数が低い場合に、マイナス評価になるといわれているので、50点未満の場合は何らかの対策をした方が良いでしょう。 また、表示

WebP（ウェッピー）とは？ Googleが開発している画像フォーマットのことです。ファイルの拡張子は「.webp」になります。 一般的にWebで広く扱われているJPEGやPNGよりも容量を小さくできます。具体的にはJPEG・PNGと比較して25 〜 35%小さくできます。小さくなるからといって画質が悪くなることはありません。また、PNGと同じく透明部分も画像として反映されます。 PageSpeed InsightsやChrome DevToolsなんかで「Lighthouse」による診断をしてみると、「Serve images in next-gen formats（次世代フォーマットで画像を提供してください）」といった診断が出ることがありますが、WebPがその次世代フォーマットに当たります。 少し前までは「サイトの表示高速化」については今ほど注目されていませんでしたが、最近は「サイトの

デジタルデバイスにおける画像は、それぞれファイル形式を備えています。WebサイトやSNSに使われている画像、あなたのスマートフォンに入っている画像も同様です。 形式によってその性質は異なり、目に見えない違いが使い勝手に大きな影響を与えることもしばしば。もしかすると、知らないうちに損しているかもしれません。 この記事では、画像ファイル形式ごとの特徴を解説したうえで、その確認方法や変換方法についても紹… ファイルサイズはWebPが最も軽い WebPの開発元であるGoogleによると、同等の画質でJPEGより約25～34％、PNGより約26％も軽くできると発表しています。 有名な拡張子の中では、WebPのファイルサイズが最も軽いということです。 WebPは背景透過も可能 WebPは背景透過も可能です。今までは、背景透過するか否かでJPEGとPNGを使い分ける必要がありましたが、すべて1本化できま

表示できないOS・ブラウザを把握する WebP（ウェッピー）は新しい技術なので、まだ対応できていないOS・ブラウザが多数あります。 今日時点でWebP（ウェッピー）に対応しているOS・ブラウザは以下の通り。リンク先の情報は常にアップデートされますので、実際にご自身で確認してみてください。 iOSは13まではダメで、14からOK。MacのSafariは、BigSurではすでに対応しているのですが、それより前のOSは表示できません。また、IEは共通して対象外となります。 今後リリースされるデバイスやOSは大丈夫でしょうが、もし古いOSやデバイスをサポートしなければならないようであれば、設計には注意が必要です。 非対応ブラウザで表示するための記述をする 上記のようにWebP（ウェッピー）を表示できないものがありますので、そういったデバイスのために、代わりにJPGやPNGを表示するための記述をしな

どうもですよ、はやちですよ(´ʘ‿ʘ )✌ 今回はGoogleが作った新しい画像フォーマットWebPの導入方法、そしてWebPが使えない他ブラウザへの対応方法をご紹介いたします。 WebPとは？ WebP（ウェッピー）は、米Googleが開発しているオープンな静止画フォーマット。ファイルの拡張子は「.webp」。 ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格である。JPEGとは異なり、非可逆圧縮でもアルファチャンネルを扱える。 参考:WebP – Wikipedia さっそく使ってみた img要素に.webpを設定するだけ！ <img src="http://hayachi.github.io/images/hayachi.webp" alt="はやちwe

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 資料でグラフを使うことで数値の羅列から視覚に訴えられるようになります。多くの場合、表計算ソフトウェアを使ってグラフを作りますが、アップデートする度に作成し直したり画像化するのが面倒です。 そこで使ってみたいのがgraph-cliです。CLIでCSVデータをグラフ化します。 graph-cliの使い方 Sinの値をCSV化し、それをグラフにしたものです。 Cosのグラフと合わせた例。 棒グラフも作れます。 メモリを細かくした例。 基本はSVGですが、画像へ変換もできます。 graph-cliは元データとしてCSVを使うので、データが作成しやすいのがポイントです。システムからCVSデータを作るのもさほど難しくないでしょう。CSVファイルさえ生成してしまえば、後はgraph-cliで画像

Webサイトやスマホアプリの背景にぴったりなSVG画像を簡単に生成できる無料オンラインツールを紹介します。 ドットで構成された地図、流線型のブロッブ、回路基板、ウェーブ、シャイニーオーバーレイなど、カスタマイズにも対応したツールです。 BGJar BGJarの特徴 BGJarの使い方 BGJarの特徴 BGJarは、SVGの背景画像を簡単に生成できるツールです。サイズやカラーの変更をはじめ、各エフェクトのカスタマイズにも対応しています。 ライセンスはCC BY 4.0で、商用でも無料で利用できます。

SVGはベクターデータで扱えるため、Webサイト上ではデザインパーツやアニメーション用のパーツとして使われることが多いかと思いますが、今回はそのSVGを使って背景を綺麗に見せるためのサービスを紹介したいと思います。 関連記事 SVGとは？使う前に知っておきたいことまとめ SVG Backgroundsとは SVG Backgroundsは、予め用意された様々なデザインパターンのオブジェクトの中から好きなものを選択し、色などをカスタマイズしてそれをCSSコードでコピーして使ったり、SVGそのもののデータをダウンロードしてをWebサイトの背景として利用できるサービスです。 オブジェクトによっては、色の他にデザインパターンの大きさ、透明度、ブレンドモードなどを自由にカスタマイズして利用することができます。 データ自体は5KB程度と軽量なので、美麗なSVGの背景を利用できる機会があるなら検討するの