iOSアプリをデザインしよう！

---
title: iOSアプリをデザインしよう！
tags: #swift #Xcode #デザイン
author: sanrio_1122
slide: false
---
#はじめに
皆さんこんにちは。
この記事では、iOSアプリ開発におけるデザインについて紹介します。
基本的なアプリデザインの手順から、プラスアルファのtipsまで幅広く扱うので**必要な箇所**を読んで頂けたら嬉しいです☺️


#目次

&emsp;&emsp;[1.&emsp;デザインの流れ](#デザインの流れ)
&emsp;&emsp;[2.&emsp;色を決める](#色を決める)
&emsp;&emsp;[3.&emsp;ラフ画制作](#ラフ画制作)
&emsp;&emsp;[4.&emsp;Xcodeで実装](#Xcodeで実装)
&emsp;&emsp;[5.&emsp;ロゴ作成](#ロゴ作成)
&emsp;&emsp;[6.&emsp;アイコン作成](#アイコン作成)
&emsp;&emsp;[7.&emsp;【+α】デザインtips](#【+α】デザインtips)<br>




#デザインの流れ
まずは、機能を実装し終わった後からリリースまでに必要な基本的なデザインの流れを掴みましょう。

基本的な流れは以下の通りです。

色を決める
↓
ラフ画でデザインや配色を決める
↓
実装
↓
ロゴ・タイトル制作
↓
アイコン作成

それでは詳しく見ていきましょう。




#色を決める

まず初めに、アプリのテーマカラーを決めましょう。
使用する色は**3色**に絞るのがおすすめです。

この3色を**メインカラー、ベースカラー、アクセントカラー**と言いますが、**「じゃあどうやって決めるの？」**というギモンを解決していきましょう。

https://www.m-hand.co.jp/design/4002/


###i.ユーザーの年代、性別から決める
このアプリのターゲット（ユーザー）はどんな人ですか？**年代**と**性別**を絞るだけでも使用する色が絞られます。いわゆる**「トーン」**が決まっていくイメージです。

例)女子高校生向けアプリ→パステルカラーでかわいい系にしよう！
大学生向け飲み会ゲームアプリ→明るく楽しいイメージの配色にしよう！


https://baigie.me/officialblog/2021/01/27/color_theory/




###ii.アプリのテーマから決める
色には**意味や色が与える印象**があります。アプリのテーマに沿った色を選びましょう。
例)読書アプリ→緑色の持つイメージ「安心」「癒し」

https://junzou-marketing.com/color-meaning


###iii.競合アプリをリサーチする
他の競合アプリはどんな色を使っているのか調べることで、テーマごとの大体の傾向がわかります。その中でも**差別化**を図るために、あまり使われていない色を3色の中に含ませる、グラデーションを使う、など工夫していきましょう。



#ラフ画制作
使用する色が決まったら**ラフ画**を描いてみましょう！
実装する前にざっと画面のデザインを書き起こしてみることで、足りない部分に気づけたり、過剰なデザインを削ぎ落とすことができます。

###・紙にStoryboardを書く
・どの色をどのパーツに配色するか
・ボタンの形や影はどうするか
・全体像を見て、**そのデザインがユーザーやテーマに沿っているか**
などを確認しましょう。


###・デザインツール「Figma」を使う

Figmaとは、ブラウザ上で簡単にデザインができるツールです。無料で使える本格的なデザインツールなので興味がある方は使ってみてください。

ちなみにGeekSalonのUIUXコースではこのFigmaを使ってデザインを学びます。
![スクリーンショット 2021-06-06 11.32.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/898983/4a660d35-1da3-e948-dabe-8286a108e7a1.png)



#Xcodeで実装

ここからはラフ画をXcodeで再現していきます。
以下ではオススメのデザインライブラリや、少し手を加えるだけでアプリらしくなるものを載せました。

###i.ライブラリ「IBAnimatable」を入れる

ボタンを丸くする、パーツに影をつけるなど、本来コードで書かなくてはいけないデザインが、このライブラリを使えばStoryboard上で操作できます。

**Github**

https://github.com/IBAnimatable/IBAnimatable

CocoaPodsの人はPodfileに以下を打ち込んでください。

```
  pod 'IBAnimatable'
```

**使い方**
こちらの記事がわかりやすいです。
ざっくり言うと、**パーツを選択した状態でカスタムクラスを”Animatable〜（パーツ名）”に変える**と、**右側のプロパティの機能が拡張**されます。

https://dev.classmethod.jp/articles/ibanimatable/


###ii.NavigationControllerとTabbarControllerの色を変更する

NavigationControllerとTabbarControllerの色を変えると一気に本格的なアプリに見えます。

NavigationnBarを選択し、**Bar Tint**からカラーを変更することができます。
![スクリーンショット 2021-06-17 18.00.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/898983/fe125f46-dc7a-2c72-7f6b-0164e6940154.png)

TabBarControllerも同様に、パーツ選択から**Bar Tint**でカラー変更を行います。
![スクリーンショット 2021-06-17 18.00.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/898983/90ad1bcf-df0c-9606-3f1b-e67ebecff6c5.png)



#ロゴ作成

ここからはタイトル画面やアイコンで使えるようなロゴを作っていきます。今回はフォントを入れることによりロゴを作ります。


Xcodeにデフォルトで入っているフォントはSystemというものです。
Tのアイコンをクリックするとフォントやスタイル、サイズのメニューが出てきます。
![スクリーンショット 2021-06-06 11.45.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/898983/7f3e3e46-5037-21b9-c3bd-4c790684d5a9.png)

ここをSystemから**Custom**に変更すると、ズラーっとフォントが選べるようになります。
しかし日本語対応のフォントや、凝ったフォントは入っていません。そこで**外部からフォントファイルをダウンロードしてXcodeに入れましょう**。


**1.Mac本体にフォントファイルを保存する**

http://inforati.jp/apple/mac-tips-techniques/system-hints/how-to-use-mac-font-book-app-collection-function.html

**2.xcodeにフォントのファイルを入れる**

https://qiita.com/Simmon/items/4bdd2ebc933e5c12f041

これでデフォルト以外のフォントが使えるようになり、個性的なロゴが作成できます。
オリジナルロゴを使って目を引くタイトル画面にしましょう。



#アイコン作成

最後にアイコンを作っていきましょう。

Macにデフォルトで入っている**「Keynote」**を使います。
こちらの記事がおすすめです。

https://note.com/shogoyamada/n/na551fab49f66

また、アイコンは大きく分けて2パターンあります。
それは**ロゴをアイコンにしているもの**と**トレードマークをアイコンにしているもの**です。

アイコンはアプリの顔とも言えるので、**シンプルかつ印象的**なアイコンを作りましょう。
また、こちらの記事からアイコンデザインの流行が学べます。

https://blog.btrax.com/jp/icon-trends/




#【+α】デザインtips

###・NavigationBarに画像を入れる
NavigationBarのタイトル部分に画像を入れることができます。

```swift
override func viewDidLoad() {
  super.viewDidLoad()
  self.navigationItem.titleView = UIImageView(image: UIImage(named: "画像ファイル名"))
}
```
###・フリー素材DLサイト

著作権の関係から、自作の物やフリー素材を使いましょう。

https://www.photo-ac.com/


###・アニメーションライブラリ「Lottie」

アクションにアニメーションを追加することで楽しいアプリになるかもしれません。

https://qiita.com/ngo275/items/c9e94bad7a7afc85e4f4

#終わりに
いかがでしたか？
みなさんが楽しんでデザインに取り組んで頂けると嬉しいです！