今回の仕上がりは、こんな感じ
長い先端のある星を、濃い背景の右上へ。文字と重なる部分を減らし、見出しよりも目立ちすぎない位置に置きました。星はssstarから保存した実際のSVGです。背景・文字・配置は編集部が別途作りました。
保存したSVGは393バイト。これは今回の形の実測で、すべての出力が同じ容量になるわけではありません。利用条件に合わせ、SVG単体のダウンロード配布はせず、カードとしての使用例を掲載しています。
星の形と色を選び、SVGを保存する
- 公式のssstarを開きます。設定部分が画面下にある場合はスクロールします。
- 「Presets」の形を選びます。今回は左から2番目を押しました。まずはプレビューが切り替わることを確かめます。
- 塗りを「Solid fill」にし、色の入力欄へ
#43d9ffを入れます。今回は不透明度1、回転0、線の幅0にしました。 - 「Save SVG」を押します。今回の保存名は
ssstar.svgでした。ブラウザのダウンロード一覧で保存できたことを確認します。 - 保存したファイルをブラウザで開き、選んだ星と色が表示されれば成功です。ダウンロードが見つからない場合は、ブラウザの保存先と通知を確認してください。
今回のファイルはviewBox="0 0 2000 2000"のSVGでした。PNGや動画としては保存していません。紙面用のPNGなどが必要なら、別の編集・書き出し操作が必要です。
星を置くだけで、文字が読みにくくならない？
今回は装飾を右側、見出しを左側に分けました。星と文字の両方を大きくすると競合するため、読んでほしい文字の周囲を空けるのがおすすめです。カード作例では、星は意味を伝えるボタンではなく装飾として扱っています。
どこに使いやすい？
新着のお知らせ、作品紹介の見出し、ゲームの結果画面など、短い言葉にアクセントを添える場面が合いそうです。一方、画面中に同じ星を大量に置くと、重要な案内を見つけにくくなることがあります。
細かい線画ならFeatherの文字付き保存リンク、繰り返し模様の背景ならPattern Monsterの作例も参考になります。
商用利用できる？ SVGをそのまま配ってもいい？
2026年10月5日に読んだ公式ライセンスでは、生成画像を個人・商用プロジェクトへ使用できます。ただし、画像の販売・共有・譲渡・再配布は認められていません。「自分の制作物で使う」と「素材として他人に配る」は分けて考えてください。今回も星の元データを公開配布していません。
公式サイトのフッターにはSentry.io / Syntax.fmの表記があります。この確認ではssstarの個人作者まで特定していないため、個人開発とは断定しません。SNSの最近の流行やAI利用も未確認です。
確認したこと・していないこと
PCブラウザで形の選択、色の変更、SVGの保存、保存ファイルの表示、カードへの配置を確認しました。この記事のスマホでの読みやすさは確認対象ですが、ssstar自体のスマホ操作、印刷、ほかのアプリへの読み込み、全プリセットの出力は未検証です。条件は変わる場合があるので、利用前に公式情報を確認してください。