Online Tools for Creating Website

Adobe Color

カラーホイールや画像からの色の抽出など色に関する Adobe 公式ツール

Atlas Icons

サイズやストローク幅を変更できるオープンソースの無料アイコンライブラリ

BEM Naming Cheat Sheet by 9elements

CSS のクラスの命名規則に BEM を用いる際のチートシート

Canva

誰もが簡単に優れたビジュアルコンテンツを作成できるグラフィックデザインツール

Clipdrop

背景削除・不要物削除・拡大と画像に関する 3 つの機能を使えるツール

CyrilEx Regex Tester

Python・PHP・Ruby・JS・Java・MySQL の正規表現のテスターとビジュアライザー

DrawKit

SVG 形式などでイラストやアイコンをダウンロードできるサイト

Eva Design System Color Generator

ディープラーニングによるカラーパレット生成ツール

Eva Icons

優しく可愛らしいアイコンを SVG や PNG 形式でダウンロードできるサイト

Fancy Border Radius Generator

ユニークな形になる CSS の border-radius を生成するツール

Feather

シンプルで美しいアイコンを SVG 形式でダウンロードできるサイト

Figma

ブラウザ上でワイヤーフレームやプロトタイプなどを作成できるデザインツール

Fluid-responsive font-size calculator

ビューポートに応じて変化する可変フォントサイズの CSS を生成するツール

Free Profile Picture Maker

Web サイトや SNS で使用するプロフィール画像を作るツール

Free to Use Clip Art Images & Vector Illustrations

ロイヤリティフリーの SVG・PNG イラストをダウンロードできるサイト

Glassmorphism CSS Generator

すりガラス表現グラスモーフィズムの CSS ジェネレーター

Google Font to Svg Path

Google Fonts を使ったテキストから SVG を生成するツール

Google Fonts

オープンソースのフォントとアイコンを提供する Google のサービス

google webfonts helper

Google Fonts のフォントファイルを WOFF2 などでダウンロードできるサイト

Heroicons

Tailwind Labs 製の SVG 形式のアイコンをダウンロードできるサイト

HTML5 入れ子チートシート

HTML の入れ子ルールを視覚的に確認できるツール

HTML5Nest

HTML タグの入れ子ルールを視覚的に確認できる HTML Living Standard に準拠したツール

Icons by Craftwork

ミニマルなアイコンを SVG 形式でダウンロードできるサイト

icons.download

1 つで 16 種類のスタイルがあるアイコンをダウンロードできるサイト

ICONSVG

丸みのあるシンプルな SVG 形式のアイコンをダウンロードできるサイト

IRA Design

グラデーションや輪郭線を用いたイラストを SVG と PNG でダウンロードできるサイト

Material Theme Builder

マテリアルデザイン 3 のカラースキームを生成するツール

MingCute Icon

豊富なアイコンを SVG・PNG 形式でダウンロードできるサイト

Mixkit

高品質な動画・音楽・効果音を無料でダウンロードできるサイト

Mozilla Observatory

Mozilla が開発したセキュリティのチェックツール

Nice Illustrations

商用利用が可能なイラストを SVG・PNG 形式でダウンロードできるサイト

Open Doodles

商用利用が可能なイラストを SVG・PNG 形式でダウンロードできるサイト

Open Peeps

人物の手描きイラストを SVG・PNG 形式でダウンロードできるサイト

Phosphor Icons

線の太さを 6 種類から選べるアイコンを SVG・PNG 形式でダウンロードできるサイト

regex101

正規表現のテストとコード生成、デバッグが行えるツール

Sharing Debugger

Facebook や Messenger でシェア時の情報を検証するツール

Simple Icons

2300 以上のブランドのアイコンを SVG 形式でダウンロードできるサイト

Smooth Shadow

滑らかで自然な影になる CSS の box-shadow を生成するツール

SVG Doodles!

サイトにアクセントを加えるいたずら書きを SVG 形式でダウンロードできるサイト

Tabler Icons

ストローク幅を変更できる SVG 形式のアイコンをダウンロードできるサイト

unDraw

高品質な SVG と PNG のイラストを無料でダウンロードできるサイト

WebPageTest

表示速度などサイトのパフォーマンスと最適化の計測ツール

スキーママークアップ検証ツール

Schema.org を使った構造化データの検証ツール

ソコスト

日本人好みのイラストを SVG・PNG・EPS 形式でダウンロードできるサイト

リッチリザルトテスト

構造化データで生成される Google 検索のリッチリザルトを確認するツール