figmaでオリジナルアイコンを作ってiphoneをおしゃれにしたい！
今日は周りと差のつくおしゃれなアイコンの作り方を紹介するよ！
皆さんはiphoneのショートカットという機能を使うとアプリアイコンを自由に変えることができるのをご存じでしょうか？
本日はfigmaでオリジナルのアイコンを作成し、ホーム画面をオシャレにカスタマイズする方法を詳しく解説していきます。
▼この記事のポイント
▼記事を書いたひと
都内でシステムエンジニアをしているkentos(@kento_jpn)と申します。Web制作やプログラミングの情報発信を幅広く行っています。
1. 完成形
まずは完成系をご覧ください。
白を基調として各アイコンがぷくっとふくれたり、凹んでいたりするデザインです。
また、アプリ名も非表示になっていて全体としてすっきりとした印象です。
構成
さて、ではざっくりとどんな作りになっているか解説しますとポイントは２つです。
- 丸いアイコンを作るために、アイコンと背景色を同じ色にする。
- 凹凸をつけるために、アイコンに影をつける。
まず１つ目ですが、丸いアイコン実は丸ではなく背景と同じ色をした四角に丸を重ねただけなんです。
こうすることで背景とアイコンの境目がなくなり、丸いアイコンが実現できるというわけです。
そして２つ目ですが、こちらはニューモフィズムというデザイン手法で、図形に陰影をつけることで完成形のように立体的に見せることができます。
今回はこのニューモフィズムを簡単に実現するプラグインも併せてご紹介します！
つくりかた
ではいよいよオリジナルiphoneホーム画面の作り方を解説していきます。
筆者の機種iphone13 proを例に挙げてご説明しますが、アプリアイコンは正方形ですので他の機種でも差はございません。
Step1 アイコンのベースを作る
まずはアイコンを作りましょう。
figmaの画面で正方形と円を同じ色で重ねましょう。
画像にも記載していますが、大きさは下記で作成しています。
なお、わかりやすいように円に枠線をつけていますが、実際には不要です。
大きさ
正方形：540ピクセル
円：470ピクセル
また、色について、ホーム画面に配置するものは自分で好きな色を選ぶことができますが、
Dock部分は本体の設定で色が決まっているため、下記のようにホーム画面用とDock用で分けています。
※Dock部分の色に合わせるのもいいかと思います。
色
ホーム画面：EAEAEA
Dock部分 ：F1F1F1
次に影をつけて凹凸をつけていきます。
自身で陰影をつけて作ってもいいですが、少し面倒なのでFigmaプラグインを使います。
こちら
使い方は簡単
プラグインを起動して凹凸のつけたい図形（今回の場合アイコンの円）を選択。
Neumorph it！をクリックします。
そうすると、影の向きや凹凸の程度を選択できますので好みの数値にします。
筆者の場合下記の設定値を使っています。
iPhoneで見ると少し凹凸が少なく見えるため少し大げさにつけるのがコツ！
これでアイコンのベースができました！
Step2 アイコンを作る
アイコンで使う画像は下記のサイトで探しました。
英語ですが企業名で検索すると結構な確率でヒットします。
さらに、SVG形式で提供されているため拡大縮小しても荒くならず、
自分の好きな色に変更できるというメリットがあります。
またWebで、企業名＋ロゴ などで検索していただくと公式の会社がダウンロードできるようにしていることが多いです。
ほかにも下記のような無料ロゴサイトもおすすめです。
自分の好きなロゴが見つかったらダウンロードしてStep1で作ったアイコンのベースに乗せるだけです。
この時、ロゴサイズは300×300にしています。
サイズをそろえることで全体として統一感が出ます。
Step3 作成したアイコンを画像として書き出す
最後にアイコンを画像として書き出します。
アイコンのベースとStep2で配置したロゴをグループ化します。（選択してCntrl+G)
右のサイドバーのDesign＞Exportを選択
2xのPNGで「Export 〇〇」を押して画像を出力します。
※2xは２倍サイズで書き出すという意味で、そうすることでアイコンに設定した際に画像が荒くなりません。
Step4 オリジナルアイコンをiphoneに設定
エクスポートした画像をiphoneに送ったら、オリジナルアイコンをショートカットに設定します。
下記記事がわかりやすいかと思います。
説明し忘れましたが、背景の壁紙はFigmaなどでアイコンと同じ色の四角形で作成してください。
まとめ
いかがでしたでしょうか？
今回はfigmaでオリジナルアイコンを作成する方法をご紹介しました。
ご不明な点がありましたらコメントいただけると幸いです。
