SVGとPNG完備のおしゃれなイラスト素材！ あらゆるメディアで完全無料で利用できる太っ腹ライセンス -Transhumans

2023/09/12 321 users ベクター 太っ腹ライセンス プレゼン 商用 ポスター

商用でも完全に無料で利用できる、SVGとPNG完備のおしゃれなイラスト素材を紹介します。Webやアプリ、プレゼン、提案書、ポスター、同人誌など、あらゆるメディアで無料で利用できます。 イラストはすべて手描きのベクターで、80年代のSF映画や日本のイラストにインスパイアされて描かれています。 Transhumans さっそく... 続きを読む

ChatGPTにSVGでお絵描きさせる｜temoki / Tomoki Kobayashi｜note

2023/05/07 137 users chatgpt テキストフォーマット GPT Note ひよこ

ChatGPTはテキストを生成するGenerative AIであるが、SVGのようなテキストフォーマットの画像であれば描くことができるのではないか？と思い、試してみることにした。モデルにはGPT-4を使用し、GPTにひよこ🐤を描かせることをゴールとして始める。 svgのフォーマットを知っていますか？はいかいいえで答えてください。 ... 続きを読む

最近のWeb制作に役立つ、CSSの便利ツール総まとめ

2023/01/19 165 users CSS Flexbox フォントサイズ Web制作 可変

最近のWeb制作に役立つ、CSSの便利ツールをまとめました。 CSS Grid, Flexboxで実装するときに役立つレイアウトのツール、CSSやSVGでさまざまな背景・区切り線を生成するツール、美しいシャドウやグラデーションを生成するツール、色選びや配色に役立つツール、コピペで利用できるボタン、可変のフォントサイズ、CSSアニ... 続きを読む

ブックマークしておくと便利！ 背景、テクスチャ、パターン、シェイプ、グラデーションなどを生成するSVGツールのまとめ

2022/08/10 412 users テクスチャ シェイプ グラデーション アイソメトリック 背景

WebサイトやスマホアプリのUIデザイン、イラストなどにもぴったりな背景、テクスチャ、パターン、シェイプ、グラデーション、装飾グラフィック、カラーパレットなどのSVGを生成するオンラインツールを紹介します。 ネオンカラーや美しいグラデーションをはじめ、アイソメトリックやスパイラルなどの幾何学形状、波線や等... 続きを読む

商用利用無料、UIデザイン用のSVGアイコンが1000種類以上！ 改変・再配布も可の太っ腹ライセンス- MingCute Icon

2022/07/27 473 users SVGアイコン 太っ腹ライセンス 改変 再配布 UIデザイン用

WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 アイコンは小さいサイズでもくっきり見えるようにデザインされており、SVGだけでなく、Webフォントも揃っています。 MingCute Icon MingCute Icon -GitHub MingCute Iconの... 続きを読む

便利なツールが登場！ 画像をWebPとAVIFに変換・最適化、SVG, PNG, JPG, GIF画像の軽量化・最適化ができるオンラインツール -Optimize Images

2022/05/16 204 users WebP AVIF jpg PNG gif

次世代の画像フォーマットとして注目されているWebPとAVIF、Webサイトやアプリでよく使用されるSVG, PNG, JPG, GIFの変換・軽量化・最適化ができるオンラインツールを紹介します。 IEのサポートがなくなると、WebPが画像フォーマットの主流になりそうですね。 Optimize Images Optimize Imagesは、画像（SVG, PNG, JPG, ... 続きを読む

全部、完全に商用利用無料！ UIデザインに適した400種類以上のSVG・Figma用も揃ったシンプルでかわいいアイコン素材 -Doodle Icons

2022/03/14 277 users UIデザイン かわいいアイコン素材 全部 fig 商用利用無料

アイコン用のグリッドを使用して手描きされた、ちょっとラフなかわいい感じにデザインされたアイコン素材を紹介します。 15のカテゴリに、400種類以上のアイコンがセットになっており、個人でも商用プロジェクトでも完全に無料で使用できます。フォーマットは.png, .svg, .figが揃っているのも便利ですね。 Doodle Icons... 続きを読む

2022年のファビコン設置方法、さまざまなブラウザやデバイスに対応させる最小限のセットは6種類のファイルが必要

2022/03/10 370 users デバイス 最小限 ブラウザ ファイル セット

最近のブラウザやデバイスに対応させる最小限のファビコンセットには、6種類のファイルで対応できます。ブラウザはもちろん、スマホやタブレットにも対応し、さらにSVGも含めて6種類だけです。 ファビコンに必要な6種類のファイル、ファビコンの設定方法、ファビコン画像を用意する手順について紹介します。 How to Favi... 続きを読む

Deno のこれまでとこれから JSConf JP 2021

2021/11/27 92 users deno middle assets align center

class: middle, center <img src="./assets/logo.svg" align="center" width="200" /> Deno の これまで と これから --- アジェンダ - Deno とは - Deno のこれまでのロードマップ - Deno のこれからのロードマップ --- # 話す人 <img src="./assets/hinosawa.jpg" align="right" width="300" /> 日野澤歓也 twitter @k... 続きを読む

こいつ、動くぞ！ 商用利用無料、シンプルにデザインされたSVGもフォントも揃った高品質なアイコン -Boxicons

2021/11/10 346 users アニメーシ フォント こいつ アイコン SVGアイコン

1,500種類以上のアイコンが揃った、Webサイトやスマホアプリにぴったりなシンプルにデザインされた無料アイコンを紹介します。 オープンソースで個人でも商用でも無料で利用できます。また、SVGアイコンとアイコンフォントで利用できるので、サイズやカラーの変更はCSSでできます。アイコンはリスト、固定幅、アニメーシ... 続きを読む

もうこれでUI用のアイコンには困らない！商用でも完全無料で利用できる、SVG完備のアイコン素材 -iconsax

2021/10/27 308 users figma SVG完備 SVGアイコン フォーマット 商用

WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが完全無料で利用できるiconsaxを紹介します。 ホーム・サーチ・アロー・カート・メールなど、Webページやスマホアプリでよく使用されるアイコンが揃っています。スタイルは6種類、フォーマットはSVGをはじめ、Adobe XD、Figma... 続きを読む

最近見かける、粒子の粗いグラデーション！ほんの少しのCSSとSVGで実装できるの知ってた？ | コリス

2021/09/22 307 users コリス ホログラム シャドウ ノイズ グラデーション

CSSとSVGでグラデーションにノイズを与え、粒子の粗いグラデーションを実装する方法を紹介します。 背景など通常のグラデーションに使用するだけでなく、暗くしてシャドウに使用したり、輝度とコントラストを上げてホログラムのような虹色のグラデーションとして使用することもできます。 Grainy Gradients by Jimmy Chi... 続きを読む

Figma to React – Convert Figma designs to React code

2021/03/27 84 users React react-native stylesheet

import React from 'react' import { View, Text, Image, StyleSheet } from 'react-native' import { Svg } from 'react-native-svg' export default function FigmatoReact () { return ( <View style={FigmatoReactStyles.FigmatoReact}> <Text style={FigmatoReactStyles.FigmatoReact}> Figma to React </Text> <In... 続きを読む

全部、完全に商用利用無料！WebのUIデザインに適した1,130種類のSVGアイコン素材 -Glyphs | コリス

2021/03/03 377 users Glyphs コリス ソリッド SVGアイコン バリエーション

企業サイトやプロダクトページをはじめ、オンラインショップ、アプリなど、WebのUIデザインに適したSVGアイコンが無料で利用できるGlyphsを紹介します。 アイコンの種類はなんと1,130種類！ アイコンのバリエーションも豊富で、ソリッドやベタ塗りだけでなく、フルカラーも揃っています。もちろん、SVGなのでカラーやサ... 続きを読む

システム構成図をテキストで

2020/11/28 517 users テキスト システム構成図 精度 コンセプト ネットワーク図

システム構成図をテキストで drawthe.netとは cidrblock/drawthe.netは複雑なネットワーク図も「テキストで書いてブラウザ上でSVGレンダリングできるようにしよう」というコンセプトのもと開発されたツールです。下図のように複雑な構成図も精度高く描くことができます。 拡大してみると情報量が多いこと、またいかに整... 続きを読む

全部、完全に商用利用無料！さまざまなUIデザインに適した1,064種類のSVGアイコン素材 -Emblemicons | コリス

2020/10/02 642 users コリス PNG SVGアイコン プレゼン SVGアイコン素材

企業サイトやプロダクトをはじめ、オンラインショップ、アプリ、プレゼン、学術プロジェクトなど、さまざまなUIデザインに適したSVGアイコンが無料で利用できるEmblemiconsを紹介します。 先日ローンチしたばかりで、アイコンの種類はなんと1,064種類！ SVGだけでなく、各サイズのPNGも揃っており、すべてオープンソース... 続きを読む

SVG形式のファビコンを設置しよう | Webクリエイターボックス

2020/02/12 137 users ファビコン PNG SVG形式 Webクリエイターボックス

2020年2月13日 SVG, Webサイト制作 つ・い・に！ファビコンもSVG形式が対応されるようになりました！SVGを使えばこれまで使われてきたPNGなどのビットマップ形式とは違い、拡大縮小しても画質が劣化しません。つまり、過去記事「クリエイティブなファビコンを設置しよう」で紹介したように多くのサイズを用意する必要は... 続きを読む

商用利用無料！クリックするだけで、魔法陣を無限に組み合わせて生成できるジェネレーター -daisy bell | コリス

2020/02/07 356 users コリス ジェネレーター PNG 商用 Daisy Bell

Windows, macOS, Linux対応、魔法陣を無限に組み合わせて生成できるジェネレーターを紹介します。生成される魔法陣はSVGとPNGで出力でき、個人でも商用でも無料で利用できます。 以前ルーン文字で紹介したd...記事の続きを読む 続きを読む

CSSで実装した斜めのラインがギザギザになってしまうのを回避し、滑らかなラインで実装するテクニック | コリス

2019/11/26 179 users コリス シャキ CSS CSSグラデーション テクニック

CSSで斜めのラインを実装する時は、ちょっとした工夫が必要です。 画像やSVGでなく、CSSで実装すると角度やカラーを変更できる利点がありますが、斜めのラインがジャギってギザギザになってしまうことがあります。 CSSグラデーションで実装した斜めのラインがギザギザになってしまうのを回避し、すっきりとした滑らかな... 続きを読む

ビジネス系のサイトやアプリのイラストに困った時に！商用無料で使えるイラストのSVG素材 -Isometric | コリス

2019/08/05 130 users コリス クレジ PNG 物体 構図

物体や人物を斜め上から俯瞰したような構図で描かれた、無料のイラスト素材を紹介します。個人でも商用でも無料で、.png, .svgでダウンロードできます。 おしゃれなサイトで見かける感じのイラストが揃っており、しかもクレジ...記事の続きを読む 続きを読む

SVGでワードアート

2019/07/24 92 users ワードアート

<text x="40" y="80">Hello World</text> <path fill="none" stroke="blue" stroke-width="3" d="M 28 152 C 28 152 49 78 100 67 C 151 56 210 164 255 148 C 300 133 295 59 295 59" /> 続きを読む

SVGやCanvasで実装した平らな要素を3Dモデルでレンダリングできる超軽量JavaScriptライブラリ -Zdog | コリス

2019/06/07 57 users コリス canvas ドラッグ デモ 形状

面白そうなJavaScriptがリリースされました！ SVGやCanvasで実装した平らな要素をブラウザ上に3Dモデルでレンダリングすることができる超軽量JavaScriptライブラリを紹介します。レンダリングされた形状は3D空間に存在するかのようにクリックやドラッグなどで操作ができます。 Zdog Zdog -GitHub Zdogの特徴 Zdogのデモ ... 続きを読む

UI用のアイコンが1,400種類以上！商用でも完全無料で利用できる、シンプルなアイコン素材 -Remix Icon | コリス

2019/04/18 231 users コリス デベロッパー UIデザイナー アイコンフォント 商用

商用でもクライアントのプロジェクトでも完全無料で利用できる、UIデザイナーやデベロッパーのためのアイコン素材を紹介します。 アイコンのアイテムはなんと1,441種類！ SVG、アイコンフォント、そしてPowerPoint...記事の続きを読む 続きを読む

書いて覚えるSVG: 基礎編 | Stocker.jp / diary

2019/04/17 102 users Stocker.jp diary 基礎編

【土曜開催】「スマートフォン時代のWebコーディングスクール」開催！PC・タブレット・スマートフォンに対応したHTML・CSSを基礎から学べます！ 「HTML5再入門講座」という「HTML5を学び直す」ための無料講座も開催します。 この記事のターゲットとなる方 この記事は、「HTMLを書いたことがある方」や「Illustratorを使... 続きを読む

もうこれでUI用のアイコンには困らない！商用でも完全無料で利用できる3,000種類のシンプルなアイコン素材 | コリス

2019/03/06 708 users コリス 一度 商用 アイコン UI用

商用でも無料で利用できる1,000種類のアイコンが3つのスタイル、そしてPhotoshoop用・Adobe XD用・Sketch用・Figma用・inVision用、そしてSVGまで完備されたMaterial Icons Libraryを紹介します。 一度にすべてのアイテムがダウンロードできるので、備えておくと便利だと思います。 Material Icons Library ラインセスは... 続きを読む