[Affinity Designer]iPhoneアプリのUIデザインを作る方法

[Affinity Designer]iPhoneアプリのUIデザインを作る方法

どうもふっさんです。

今回はAffinity DesignerによるiPhoneアプリのUIデザインを作る方法をご紹介したいと思います。

めちゃくちゃ簡単に作ることが可能なので、ぜひ覚えてしまってくださいね!

 

さっそく実践していこう

1. まずはAffinity Designerを開く

開いたらステータスバーにある「ファイル」の「新規」を押して、640×1136(ピクセル)サイズのものを作成してください。

 

2. iPhoneアプリのUIパーツを表示

次に同じくステータスバーにある「表示」押すと、下の画像のように「スタジオ」という欄があると思います。

その中の「アセット」を押してもらうとUIパーツが表示されます。

 

affinity designerの設定画面

 

3. 好きなようにデザインする!

あとはUIパーツを引っ張ってきて、組み合わせていくだけです。

iPhoneアプリを作っている人ならわかると思いますが、UIKitのパーツがほぼ揃っていると思います。

10分もあればUIKitを使った以下のようなデザインが出来てしまいます!

iphone-ui-design

 

思った以上に簡単!

めちゃくちゃUIパーツが揃っているので、思った以上に簡単にできちゃいます。

上の画像もテキストや色を変えてやれば、自分の考えているものが実装できてしまうんじゃないでしょうか。

iPhoneアプリのUIデザインツールといえば「Sketch」が特に有名ですが、案外「Affinity Designer」も悪くないと思われます!

ふっさんは「Sketch」を買うお金の余裕がないので、当分は「Affinity Designer」でUIデザインを行なっていきたい思ってます。

 

新しい発見があればこのブログで発信していきますので、見てやってくださいな!笑

あ、あとおまけでGRADE UI KITについても下に書いてるのでスクロールして読んでね!

 

[おまけ]GRADE UI KIT も使ってみよう!

 

Affinity Designerを立ち上げるとこのような画面が出てくると思います。

affinity designerのライブラリパーツ

 

この画面をスライドしていくと、上の画像のようにGRADE UI KITというものがあると思います。

これはよりUIデザインを作りやすくためのUIパーツ群です。

詳しくは公式サイトで読むとわかりやすいと思います!

 

これを追加することによって、様々なパーツやアイコンが増えます。

SNSのアイコンなんて有名どころはほぼ揃いますよ!

affinity designerで作ったSNSアイコン

 

Affinity DesignerでiPhoneアプリUIデザインを行う際は、ぜひ「GRADE UI KIT」を入れて見てください。

 

まとめ

 

「Affinity Designer」も「Skech」には劣っていないということがわかりましたね。

でも一度は「Sketch」も使ってみたいと思っています。

その時には違いについても記事にするとおもうので、ぜひ読んでみてください。

 

ただデザイン的にAffinity Designerが好きなので、乗り換えることはないですけどね!笑

 

ではでは以上ふっさんでした!

 

Affinity Designerカテゴリの最新記事