🖥tty×Dev個人開発のゆるーいアウトプット

【個人開発向け】ロゴ/アイコンのデザインを作る個人的な方法

2022/10/28
2020/01/23

はじめに

昨年、個人開発でサービスを公開しました！

簡単に説明すると、ひとり旅、もしくは友達や恋人との思い出を記録するサービスです。

本記事では、このようなサービスを作る際に必要なロゴやアイコン等のデザインを決める個人的な方法を紹介します。

↑ この子を作った時の方法です

前置き

今回は、個人的に 手軽かつクオリティ高く作成できた方法を紹介します。

なので、あくまで参考程度にしていただいて、この方法のメリット/デメリットを自身で判断していただければと思います。

なお、Illustratorを使う知識もなく、デザインを0から考えるイメージが湧かなかった筆者がたどり着いた方法です。笑

使用したサービス

それでは実際にこのアイコンを作成した方法を順に説明していきます。

使用したのは、FLATICON というサービスと、PowerPoint です。（デザインに関する知識がないのでツールも大したことないです。笑）

FLATICONとは

FLATICONは、フラットデザインのアイコン素材をダウンロードできるサイトです。

こちらは無料でも使用することができ、ライセンスによっては商用利用が可能なアイコンもあります。

FLATICONのライセンス

FLATICONでは、アイコンそれぞれに作者が設定したライセンスが定められています。

今回使用したのは無料で利用可能な Flaticon Basic License というライセンスです。

Flaticon Basic Licenseの使い方

公式には以下のように書いてあります。

If you are a Free user you must always attribute the author when using our resources.The attribution line would follow the same rules:

“Icon made by Freepik from www.flaticon.com”

Websites:Insert the attribution on the page where the icon is shown. This can be placed next to the image or on the footer of the website.

Apps/games:Place the attribution on the credits/description page of the application.

Attribution: How, when and where? – FLATICON より抜粋

無料ユーザーの場合は、作成者を明示してクレジット表記する必要があります。

ウェブサイトの場合は、アイコンの表示している画像の横、もしくはサイトのフッターに表記し、アプリやゲームで使用する場合はクレジットページ等を用意して表記する必要があるようです。

FLATICONについての説明は、以下のサイトに詳しく載っていました。

FLATICONの使い方・ライセンスなどをご紹介!無料でも利用できるフリーアイコン素材サイト

1. デザイン アイデア出し

まずは、アイコンを探す前にデザインのアイデアを出していきます。

私の場合は、紙にひたすらいろんなアイデアを書きました。だいぶ雑で恥ずかしいですが笑

当時は 「カップル全国の思い出を記録」 というテーマでデザインを考えていたため、カメラや写真や地球がアイコンのベースになっています。

完成形の元になったデザインが下書きの右下にひっそりと書かれています。笑

のちに、このアイデアをベースにして必要なアイコンを集めていきます。

2. 素材を集める

アイデア出しの結果、Tripholdersでは 「地球」「スニーカー」「カバン」「ピン」 のアイコンを集めることにしました。

少しでもオリジナリティを出すために、 複数のアイコンを組み合わせる方法 にしました。

FLATICONで自分のイメージに合ったアイコンをひたすら探します。（検索は英語で）

検索結果をいろいろ眺める間にどんどんアイコンのイメージが湧いてくるので、色んなワードで検索してみることをお勧めします。

気になったものは Add to collection を選択することで、FLATICONのクラウド上に保存することができます。

Collection上のアイコンはまとめてダウンロードすることができます。

アイコン集めの時に注意した点

私は、候補にするアイコンの作成者は Freepik で統一しました。

理由は以下の2点です。

3. デザインを考える

FLATICONを利用して集まったアイコンを元にデザインを考えていきます。

私の場合は、PowerPointを使っていくつか候補を作成しました。

こうして完成したアイコンが冒頭にも載せたこの子です。

アイコンの色は自分のサービスに合わせて変えています。

なんとFLATICONにログインすると、無料ユーザーでもアイコンのカラーリングをブラウザ上で変更することができます。

Add to collection の横にあるボタンをクリックするとパーツごとにカラーの編集や反転/回転などが可能です！

赤いバナナを作ることも簡単…！

4. クレジットを記載する

完成したロゴ/アイコンを使用するには、FLATICONのライセンスに従ってクレジットを掲載しましょう。

今回作成したアイコンは、自分が作ったサービスのロゴに使用したので、サイトのサイドメニューに記載しています。

なお、FLATICONの 有料ユーザーになるとクレジットの記載は不要 です。

自身の使い方によってクレジット表記が難しい場合は、そちらも検討してみてください。

まあアイコンを掲載した人が有料ユーザーかどうかは実際わかりませんが、私は作成者に敬意を込めて記載します。

まとめ

本記事では、0からロゴ/アイコン作成をするのが難しい方向けに、FLATICONを用いて簡単にアイコンを作る方法を紹介しました。

もし自分のサービスのアイコン作成にお悩みの方は、参考にしてください。

個人開発 の記事