オリジナルボタンアイコンを作成したいと思ったことはありませんか？
「ボタンアイコンに自作アイコンを使用してみた」の記事で紹介しましたが、今回は実際の作成手順とコツをお教えします。
無料版では使える機能の制約があるため、Canva Proプランの手順で紹介させてもらいます。
このページでは以下のことがわかります！
- オリジナルボタンアイコンの作成方法
- オリジナルボタンアイコンの作成時のコツ
このページの想定読者
- オリジナルボタンアイコンを作成したい方
- ボタンアイコンでアプリの印象を変えてみたい方
オリジナルボタンアイコン作成手順（Canva）
- 使用するデザイン：ロゴ
- 使用するイラスト
ボタンアイコンに使用するイラストは、Canva素材を使用します。
※作成したボタンアイコンの使用可能範囲については、Canva素材の商用利用のルールに従ってください。
使用するイラストは、1色（黒がおススメ）で各パーツが細かすぎないものを使用する。
素材検索でボタンの処理をイメージできるキーワードを入力して検索し、イラストに絞り込む。
使いたいイラストをクリックすると、クリックしたイラストが反映されます。
- イラストの加工
そのままでは小さいので、枠より少し手前ぐらいの大きさまで拡大する。
イラストをクリックして、右上・右下を斜めに引っ張ることで均等に拡大することができます。
- 作成したアイコンのダウンロード
画面右上の「共有」ボタンをクリックします。
下（↓）矢印をクリックする。
ファイルの種類で「SVG」を選択する。（※1）
また、背景透過も必ずONにしてください。（※1）
ページを選択で「このページ（括弧内はページ）」を選択することで、表示されているアイコンのイラストがSVGファイルでダウンロードされます。
「ダウンロード」ボタンをクリックして保存先、保存ファイル名を指定するとSVGファイルが作成されます。
（※1）この機能が使用できるのは、Canva Proプラン（有料プラン）のみになります。
ここで注意点です。
冠（👑）マークがついたイラストのみを使用した場合にはファイルのダウンロードに失敗します。その際には、ページを追加し、追加したページに何かイラストを追加してください。
ファイルの種類で「PNG」を選択する
作成したSVGファイルのアイコンへの適用方法については、以前の記事「ボタンアイコンに自作アイコンを使用してみた」の手順をご確認ください。
まとめ
今回の手順は、Canva Proプランがなければできませんが、基本的な考え方は画像加工ツールで背景透過したPNGファイルが作成できれば、SVGファイルへの無料変換サイトを使用することでアイコン用のSVGファイルを作成することも可能です。
アイコンの作成が難しくないことを知ってもらえれば、それで十分かと思っています。
この記事はいかがでしたか？内容を楽しんでいただけましたか？少しでもワクワクしたり、新しい発見があれば嬉しいです！わくわくした方は、ぜひわくわくボタンをクリックしてください。
関連記事
【著者】
Jun
I’m Forguncy lover!
2019年にForguncyに出会い、今では、（自称）日本一のForguncyファンです。アップデート毎に増える機能にいつもワクワクしています。もっと、開発者にForguncyの魅力を知ってもらい、使いこなし、私たちと同じようワクワクする体験をして欲しいと思い、有志とともに2025年6月30日にForguncy Users Communityを立ち上げさせてもらいました。当サイトにアクセスした開発者がワクワクする情報を発信していきたいと思います。
