今回の仕上がりは、こんな感じ
黒地に白い流れ星を置き、右に短い説明を添えました。アイコンは公式で保存した実際のSVGで、形と色は変えていません。カードの文字・背景・配置は編集部が別途制作したものです。
Falling star by Delapouite ／ Game-icons.net ／ CC BY 3.0。形・色の変更なし。表示サイズと周囲のレイアウトを調整。
星の一覧から、流れ星を保存する
- Star & Sunの公式一覧を開き、「Falling star」を選びます。名前が似ているアイコンもあるため、個別ページで形を確認します。
- 見出し下の「by Delapouite under CC BY 3.0」を確認します。サイトには複数の作者が参加しており、すべてを同じ作者の作品として扱わないでください。
- 右の「Download」にある「SVG」を押します。今回の実ファイルは黒い背景・白い星の
falling-star.svgでした。ページの読み込み前後で保存ボタンの表示が変わることがあります。 - 保存したSVGをブラウザーで開き、星が表示されることを確認します。今回はPCで保存とカードへの配置を確認しました。
- 素材と一緒に作者名・作品名・出典・ライセンスを控えます。配布ZIPには、その情報を
ATTRIBUTION.txtとして同梱しています。
サイドブラウザーでは今回のダウンロードを取得できず、別のPCブラウザーで実ファイルを保存しました。PNG出力、背景の透明化、色の変更は今回試していません。
商用利用できる？ 何を表記する？
CC BY 3.0の公式案内では、条件を守れば商用を含めた共有・改変が認められています。作者名、提供されている作品名、出典とライセンスへのリンクなど、適切なクレジットを付けます。改変した場合はその内容も記し、作者が自分の作品を推薦しているような書き方は避けてください。
Falling star by Delapouite
Source: https://game-icons.net/1x1/delapouite/falling-star.html
License: CC BY 3.0
https://creativecommons.org/licenses/by/3.0/
Shape and colors unchanged.ゲームに使うなら、読者やプレイヤーが確認できるクレジット画面や説明ページに残します。SVGを保存したフォルダーにだけメモを置いても、公開した作品で作者表記を見られるとは限りません。編集部のカードも、下に表記を置きました。
アイコンだけで「押す場所」は伝わる？
流れ星の形は雰囲気を出せますが、「保存」「開始」「お気に入り」のどれなのかは絵だけでは決まりません。操作に使うときは文字のラベルを併記するのがおすすめです。今回のカードでは装飾として置き、画像の代替テキストは空にして、読む内容を本文の文字で伝えています。
細かい線を小さくすると読みにくくなるため、使う画面の大きさで確認しましょう。今回の使用例と紹介ページはPC・スマホの表示を確認対象にしていますが、公式エディタのスマホ操作、全アイコン、外部ゲームエンジンへの導入は未検証です。最近のSNSの流行も確認していません。
自分でドット絵を描くならPiskelで作ったGIF、細い線のUIアイコンならFeatherも参考になります。どちらも、素材の条件と実際に試した範囲を分けて紹介しています。