これでもうロゴのSVGを探さないで済む！ SNSやブラウザ、ライブラリ、ソフトウェアなどのロゴをSVGで簡単に利用できる -svglソーシャルメディアをはじめ、各種ブラウザ、フレームワーク、ライブラリ、言語、ソフトウェア、AI関連などのロゴをSVGで簡単に利用できるsvglを紹介します。 SVGはコードをコピペで利用したり、SVGファイルをダウンロードすることもでき、簡単に利用できます。2024年6月現在、419種類のロゴが揃っており、ブックマークしておくと便利です。 ロゴのデザイン集としてもいいですね。
2024年版最近の実装に合わせた、HTMLでWebページを実装するための必要最小限をまとめたテンプレート一式
Webページを作成する時に役立つ、HTMLをはじめとする必要最小限のファイルをまとめたシンプルな基本テンプレート一式を紹介します。 最新版は、最近の実装に合わせた設計にアップデートされました。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。 実践的な基本のテンプレート 200人を超える貢献者による10年間の分析・研究・実験を元にしています。 ブラウザの見え方を最適化 プログレッシブエンハンスメントを念頭において設計されています。 インクルード 推奨されるmetaタグやその他の利点を備えたH
JavaScriptで要素をドラッグして移動する簡単な方法 - Qiita
要素をドラッグして移動することは、JavaScriptにおいて頻出パターンです。 しかし、それを簡単に実現するコードは意外と知られていません。 <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove = function(event){ if(event.buttons){ this.style.left = this.offsetLeft + event.movementX + 'px' this.style.top = this.offsetTop + event.movementY + 'px' this.style.position = 'absolute' this.draggable = false this.setPointe
UIデザインで、小さいサイズでもはっきりと美しく見えるように設計されたMicroサイズのSVGアイコン -Heroicons Micro
テキストの横にアイコンを配置すると、アイコンが少し大きすぎてバランスが悪いと感じることはありませんか？ アイコンは通常のMiniサイズだと20x20ですが、それより一回り小さく高密度のUI向けに設計されたMicroサイズの16x16のSVGアイコンを紹介します。 Heroicons Micro Heroicons -GitHub Heroicons Microの特徴 Heroicons Microのダウンロード Heroicons Microのアイコン Heroicons Microの特徴 Microサイズのアイコンは、先日v2.1にアップデートされたHeroiconsに新しく加わったサイズです。 タイトで高密度のUI向けに設計されており、UIデザイン用に約300種類のアイコンが揃っています。MITライセンスで、商用プロジェクトでも無料で利用できます。 Heroicons 既存のアイコンを
ゲームパッド・キーボードなどの入力ボタンアイコンが800種以上詰まった『Input Prompts』、Webサイト「Kenney」で無料公開｜ゲームメーカーズ
入力ボタンのアイコンパック『Input Prompts』、Webサイト「Kenney」で無料公開 各種コンシューマー機のゲームパッド、キーボード・マウスといった入力ボタンのアイコンが収録されている SVGファイル、サイズの異なる2種のPNGファイルで用意 ゲーム開発用素材の配布やゲームの公開・販売などを行うWebサイト「Kenney」にて、ゲームパッドなどの入力ボタンのアイコンがセットになったパック『Input Prompts』が公開されました。 Input Prompts are now available! Contains 800+ glyphs for common input types, including overlays and generic controls. Includes PNG (64×, 128×) and SVG, plus an overview of a
CSSの進化がすごすぎる！ 2つの画像を比較するスライダーは数行のコードで実装できるようになりました
2つの画像を重ねて表示し、画像を比較できるスライダーを実装するには、今まではJavaScriptのライブラリなどを使用していたかもしれません。 ほんの少しのJavaScriptと、あとはシンプルなHTMLとCSSで2つの画像を比較するスライダーを実装するテクニックを紹介します。 まずは、実際の動作をデモページでご覧ください。縦線のレンジバーをマウスでドラッグすると、2つの画像を比較できます。 See the Pen Easy comparison slider by coliss (@coliss) on CodePen. HTMLはシンプルです。2つの画像をsectionで内包し、縦線のレンジバーをinput type="range"で実装します。 <div class="compare"> <section class="before"> <img src="Runner.svg" a
これでもうUIデザイン用の高品質なSVGアイコンに困らない！ 商用利用無料、改変も自由な太っ腹ライセンス -blendicons
WebサイトやスマホアプリのさまざまなUIデザインにぴったりな、シンプルなソリッド・ベタ塗りからおしゃれなカラーまで揃ったSVGアイコンが完全無料で利用できるblendiconsを紹介します。 アイコンはなんと、200,000個以上！ ベーシックなUIをはじめ、ショッピングサイト、タッチジャスチャー、日用品や家具、飲食物、スポーツ、ミュージックなど、多種多様なアイコンが揃っています。 blendicons Blendiconsはデザイナーやデベロッパーが容易に必要なアイコンを手に入れられるように、200,000個以上の高品質なアイコンを作成し、ダウンロードできるようにしたサイトです。 アイコンの利用にあたっては個人でも商用でも無料で、Webサイトやスマホアプリをはじめ、プレゼンや印刷物などあらゆる用途に利用できます。アイコンをカスタマイズして利用することもOKです。ただし、アイコン素材をそ
ラスター画像をベクター変換するAIツール「Vectorizer.AI」が便利すぎた
デジタルプロダクション「factory4」でアプリやさまざまなIoTプロジェクトのUIUXデザインを手がける新谷友樹さんが、UIやUXにまつわるトピックについて解説する本連載。今回は「Vectorizer.AI」についてです。 こんにちは！株式会社Cosmowayが組織するデジタルプロダクション「factory4」のUIUXデザイナー新谷です。 今回は以前、AIを活用したロゴ作成に関する記事で少し触れた「Vectorizer.AI」について深掘りしていきたいと思います。 この一年でプロンプトを打ち込むチャット型AIツール「ChatGTP」や、画像生成系のAIツール「Midjourney」「Stable Diffusion」などさまざまなAIサービスが登場しています。そのなかでも「Vectorizer.AI」は、ほかとは少し違う角度のAIサービスではないでしょうか。簡単に言ってしまえば、JP
UIデザインに最適！ シンプルなSVGアイコン素材が7,000種類以上揃っていて、完全に商用利用無料 -Phosphor Icons
WebサイトやスマホアプリのUIデザインをはじめ、プレゼンなどのさまざまな成果物に使用できるSVGアイコンのセットを紹介します。 アイコンのスタイルも豊富で、ソリッド・ベタ塗り・デュオトーンなども揃っており、さまざまなデザインに適用できると思います。 Phosphor Icons Phosphor Icons -GitHub Phosphor Iconsの特徴 Phosphor Iconsのアイコンのダウンロード Phosphor Iconsのアイコン Phosphor Iconsの特徴 Phosphor Iconsは、WebサイトやスマホアプリのUIデザインをはじめ、プレゼンテーションやダイアグラムなどさまざまな成果物に使用できるフレシキブルなアイコンのセットです。 7，000種類以上のSVGアイコンが揃っています。 6つのスタイル（Thin, Light, Regular, Bold,
続くAI大革命…イラストをベクター画像(線画データ)に変換する無料AIツールが高精度で凄い | オタク総研
ここ数ヶ月のAIの進展は凄まじく、毎日のように新たな魅力的なプロダクトが公開され世間をざわつかせているのはもはや言うまでもない。そんな中、最近よく耳にする音声AIやテキストAIとはまた違ったアプローチのAIツールが話題になっている。 それは通常の画像をラスター画像に高精度で変換してくれる「Vectorizer.AI」というもので、現在無料で利用することができる。 ベクター画像とは、フォントと同様に座標や数式で保存されており、それをもとに描画をするため、ラスター形式と呼ばれる通常のPNGやJPEGなどとは異なり「ぼけ」が生じず(理論上)無限に拡大することができることが特徴だ。本サービスはそんなベクター画像をAIを活用することでノイズやボケが含まれる低画質画像からでも生成することができるという。 今回は同じくAIを活用したキャラクターアイコン生成サービス「Waifulab」にて作成した画像（4
これでUIデザイン用のSVGアイコンに困らない！ 1,700種類以上が揃った商用利用無料、改変・再配布可の太っ腹ライセンス- MingCute Icon
WebサイトやスマホアプリのさまざまなUIデザイン用に、シンプルで洗練されたデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 このアイコンの特徴は、小さいサイズでもくっきり見えること。1,700種類以上のアイテムが揃っており、すべてSVGアイコン、そしてWebフォントとして利用できます。 MingCute Icon MingCute Icon -GitHub MingCute Iconの特徴 MingCute Iconのダウンロード MingCute Iconのアイコン MingCute Iconの特徴 MingCute Iconは、Webサイトやスマホアプリ用にシンプルで洗練されたデザインのアイコンです。すべてのアイコンは、24x24のグリッド内に設計されており、アウトラインと塗りつぶしの2スタイル、2pxのストロークとなっています。アイコンのフォー
無料で「.ai」ファイルをPNGなどの画像ファイルに変換しIllustratorなしで開くことができる「ShapeConverter」の使い方
WindowsでAdobe Illustratorの「.ai」ファイルを一発で簡単にPNG・JPEG・BMP・GIF・TIFF・EPS・ICO・SVG・SVGZファイルに変換できるオープンソースのフリーソフトが「ShapeConverter」です。使い方もめちゃくちゃ簡単で、「ダウンロード→起動→AIファイルを開く→変換して保存する」という超絶シンプルさなので激烈に使いやすいため、知っておいて損はありません。 まずは以下からダウンロード。 Releases · gomi42/ShapeConverter · GitHub https://github.com/gomi42/ShapeConverter/releases 最新版の「ShapeConverter.exe」をクリック ダウンロードした「ShapeConverter.exe」を起動 右上の「...」をクリックして変換したい「.ai
SvelteKitが正式リリースされたのでtRPCとPrismaを使ってWebアプリを開発してみた
新年あけましておめでとうございます。 昨年はあっという間に過ぎ去ってしまったので、2023年はたくさん開発していきたいです。 はじめに はじめまして、kosei28という者です。 普段は大学に通いながら個人開発している19歳です。 この度、Chatockという掲示板のようなWebアプリを開発したので、紹介させてください。 つくったもの スレッドを作って、その中に投稿することができます。 スレッドにはタグをつけることができて、タグによってスレッドを検索することができます。 いいねをすることもでき、いいねしたスレッドや投稿は自分のライブラリページから見返すことができます。 背景 さて、皆さんはSvelteKitを知っていますか？ SvelteKitとは、SvelteのWebアプリを開発するためのフレームワークで、ReactにおけるNext.jsのようなものです。 ルーティングやSSRなどができ
ブックマークしておくと便利！ 背景、テクスチャ、パターン、シェイプ、グラデーションなどを生成するSVGツールのまとめ
WebサイトやスマホアプリのUIデザイン、イラストなどにもぴったりな背景、テクスチャ、パターン、シェイプ、グラデーション、装飾グラフィック、カラーパレットなどのSVGを生成するオンラインツールを紹介します。 ネオンカラーや美しいグラデーションをはじめ、アイソメトリックやスパイラルなどの幾何学形状、波線や等高線やねじれ線、ぼかしやノイズなど、いざという時にブックマークしておくと便利です。 fffuel -free SVG makers fffuelでは背景やテクスチャをはじめ、パターン、シェイプ、グラデーション、装飾グラフィックなどを生成するSVGツールがたくさんリリースされています。生成されるフォーマットはすべてSVGで、PNGに変換したい場合は変換ツールをご利用ください。 生成した素材は、個人でも商用プロジェクトでも無料で利用できます。 ツールはかなりたくさんあり、その中からいくつか紹介
商用利用無料、UIデザイン用のSVGアイコンが1000種類以上！ 改変・再配布も可の太っ腹ライセンス- MingCute Icon
WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 アイコンは小さいサイズでもくっきり見えるようにデザインされており、SVGだけでなく、Webフォントも揃っています。 MingCute Icon MingCute Icon -GitHub MingCute Iconの特徴 アイコンのダウンロード MingCute Iconのアイコン MingCute Iconの特徴 MingCute IconはWebサイトやスマホアプリのUI用にシンプルにデザインされた高品質なアイコンです。24x24のグリッドで設計されており、アウトラインと塗りつぶしの2スタイル、2pxのストローク、SVG、PNG、およびWebフォントがサポートされています。 ライセンスはApache License 2.0で、商用
超お手軽モーションパス！SVGアニメーションを簡単に作成できる「SVGator」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、高度なSVGアニメーションを直感的に誰でも作成できるWebサービスをご紹介します。 手持ちのSVGファイルにアニメーションを追加できるのはもちろん、ゼロからイラストを描いてオリジナルのSVGアニメーションを作ることもできます。 記事後半ではモーションパスを活用したダイナミックなアニメーション手法もご紹介していますので、ご興味ある方はぜひ参考にしてください！ 【 SVGator 】 ■「SVGator」の使い方 それでは、「SVGator」をどのように使えばいいのか詳しく見ていきましょう！ まずはサイトにアクセスして、画面上部にある「SIGN UP」ボタンをクリックして無料のユーザー登録を済ませておきます。 ユーザー名、メールアドレス、パスワードを設定するだけなので簡単です。 （※GoogleやFacebookアカウントでもログイン可能）
Webやスマホアプリに最適なSVGアニメーションのスピナー！ 超軽量サイズで、くるくる快適に動くぞ -SVG Spinners
商用プロジェクトでも完全に無料、コピペで簡単に利用できるSVGアニメーションのスピナーを紹介します。よく見かけるものから変わったものまで、さまざまなスピナーが揃っており、スピナーの素材として重宝すると思います。 SVGのスピナーのほとんどは、300-2500バイトの超軽量サイズ。アニメーションも快適で、くるくる気持ちよく動きます。 SVG Spinners -GitHub SVG Spinnersは、SVGで実装された超軽量のスピナーです。24x24dpで設計されていますが、SVGなのでサイズやカラーを簡単に変更できます。MITライセンスで、商用プロジェクトでも無料で利用できます。 スピナーは44種類あり、その中からいくつかコピペしてみました。 まずはよく見かけるドットが回転するスピナー。 <svg width="24" height="24" viewBox="0 0 24 24" xm
全部、完全に商用利用無料！ UIデザインに適した400種類以上のSVG・Figma用も揃ったシンプルでかわいいアイコン素材 -Doodle Icons
アイコン用のグリッドを使用して手描きされた、ちょっとラフなかわいい感じにデザインされたアイコン素材を紹介します。 15のカテゴリに、400種類以上のアイコンがセットになっており、個人でも商用プロジェクトでも完全に無料で使用できます。フォーマットは.png, .svg, .figが揃っているのも便利ですね。 Doodle Icons -Khushmeen Doodle Iconsの特徴 Doodle Iconsのダウンロード Doodle Iconsの特徴 Doodle Iconsは、イラストレーターでアニメーターでもある@khushmeensidhu氏による、手描きのアイコン素材です。 アイコングリッドを使用して、手描きされたアイコン 15のカテゴリに、400種類以上のアイコン 個人でも商用プロジェクトでも無料で利用できます 帰属は必要ありません アイコンのフォーマットは、.png, .s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SVGとPNG完備のおしゃれなイラスト素材！ あらゆるメディアで完全無料で利用できる太っ腹ライセンス -Transhumans
もうこれでSVGアイコンを探すときに困らない！ 無料で利用できるアイコンライブラリを横断検索できる便利サイト -Icônes
