T027 ツール・アプリ
Omatsuri
幅80px・高さ40pxのCSS三角形を設定し、自作ページへ配置。実操作と保存した出力。
- 幅・高さ・色を実操作
- 出力CSSの再表示を確認
- MIT全文入りZIP
ブラウザの画像編集・SVG編集ツール一覧
画像の文字入れ、図解、SVGの編集・軽量化、UIの下書き。実際の出力と操作手順を見て、目的に合うツールを選べます。
T025 ツール・アプリ
GraphvizOnline
4状態の分岐と再挑戦をDOTから図に。正規SVGを保存し、ブラウザで再表示。
- DOTから4状態を実表示
- 正規SVG出力の保存を確認
- BSD-3-Clause全文を同梱
T024 ツール・アプリ
Layoutit Grid
2列を1:2にして余白を設定。出力CSSを自作カードへ適用し、均等な列と比較。
- 列・行・余白を実操作
- 1:2のCSSを自作例へ適用
- MIT・コピー保存は未確認
T023 ツール・アプリ
Fancy Border Radius
8つの値から角の形を調整。ハンドル操作と、出力したCSSの表示を確認。
- ハンドルで角の形を調整
- CSSを自作例で実表示
- MIT・クリップボード保存は未確認
T021 ツール・アプリ
OKLCH Color Picker
HEXを変換し、Lだけを変更。生成されたCSS・HEXと色の実画面を確認。
- HEX→OKLCHを実操作
- 明るさの変更と出力を確認
- コントラスト保証とは別
T019 ツール・アプリ
Mermaid Live Editor
3行から流れ図を作り、SVGを保存。実画面と編集用コード、共有時の注意点を紹介。
- コードから図を生成
- PCで入力・SVG保存を確認
- MIT・共有と通信は別に確認
T018 ツール・アプリ
Squoosh
自作PNGをWebP・JPEGへ変換。保存した画像と容量を、実操作画面で見比べる。
- ブラウザーの画像変換
- 自作画像で保存・寸法を確認
- 小さな図では容量が増加
T016 ツール・アプリ
SVG-Edit
四角を描き、コードで色を変える。ソースから保存したSVGと、実操作画面・保存の注意点を紹介。
- ブラウザで図形とソースを編集
- PCで描画・色変更・ファイル表示を確認
- 直接ダウンロードは未確認
T015 ツール・アプリ
Method Draw
丸と四角を描いてSVGを保存。サイズ入力の操作、実画面、保存した図と確認手順を紹介。
- ブラウザのベクター描画
- PCで図形描画・SVG保存を確認
- ソフトウェアはMIT
T014 ツール・アプリ
JS Paint
図形ツールで家を描いてPNGを保存。実際の出力、保存画面とファイルを残す手順を紹介。
- ブラウザの描画ツール
- PCで図形描画・PNG保存を確認
- ソフトウェアはMIT
T013 ツール・アプリ
draw.io
三段階の図を読み込み、SVGと編集用ファイルを保存。実際の仕上がり、操作画面と保存形式の違いを紹介。
- 無料のブラウザ図解ツール
- PCで図の読み込み・SVG保存を確認
- 作った図の権利は利用者に残る
T012 ツール・アプリ
Piskel
二枚のドット絵から星のGIFを保存。再生・停止できる実物と、PNG・編集用ファイルを添えて紹介。
- 無料のブラウザエディタ
- PCで描画・複製・GIF保存を確認
- 作った絵の権利は制作者に残る
T011 ツール・アプリ
ssstar
星の形と色を選んでSVGを保存。文字に重ねないカードの完成例と、再配布の注意点を紹介。
- 星のSVGを生成
- PCで形・色変更・保存を確認
- プロジェクト利用可・画像の再配布不可
T010 ツール・アプリ
Pattern Monster
プラス模様の色を変えてSVGを保存。文字を読みやすく重ねた背景の実例と操作手順を紹介。
- SVGの繰り返し模様
- PCで色変更・SVG保存を確認
- MIT・著作権表示を残す条件あり
T008 ツール・アプリ
miniPaint
ブラウザで文字を入れ、位置を調整してPNGを保存。実画面とダウンロードした仕上がりを紹介。
- ブラウザの画像編集
- PCで文字入力・PNG保存を確認
- ソフトウェアはMIT
T007 ツール・アプリ
文字画像APNGメーカー
くま。様の動く文字ツール。文字入力からAPNG生成、公開時のクレジットまで実画面で紹介。
- 透過する文字アニメ
- PCでAPNG生成を確認
- 公開時はクレジットが必要
T006 ツール・アプリ
SVG Path Editor
SVGの点と座標を見比べて形を編集。三角形の頂点を動かす手順を実画面で紹介。
- SVGパスの編集
- PCで入力・座標変更を確認
- ソフトウェアはApache 2.0
T005 ツール・アプリ
M3E Canvas
いのり様のUIデザインツール。画面案をAIへの指示にする手順と、出力で見直す点を実画面で紹介。
- 画面案から制作指示
- 無料・MIT（公式）
- PCで編集と出力表示を確認
T004 ツール・アプリ
SVGOMG
SVGを軽くする道具。貼り付け・容量比較・出力コードを、自作SVGの実操作で紹介。
- SVGの軽量化
- 今回の操作は無料・登録不要
- PC操作を確認
T003 ツール・アプリ
Excalidraw
手描き風の図解・画面案を作るホワイトボード。実操作のスクショで最初の一枚を案内。
- 図解・画面の下書き
- 基本描画は無料・登録不要（実操作）
- PCで操作確認
T002 ツール・アプリ
ASCII Motion
Cameron Foxly様の文字アート・アニメ制作ツール。実際の画面と最初の操作を紹介。
- 文字アート・アニメ制作
- 基本編集・出力は無料
- PC操作を確認