やぎ星人です。こんにちは。
今回は強敵、UI設計に挑みます。
正直なところ、あまり自信がありません..
もうね、センスがないのですよ。
「デザイン」というワードを聞くと、自分からは遠い存在に感じちゃうのです。
アプリ開発においては非常に重要な要素になるので、克服したいところ。
苦手意識を抱えたまま取り組んでも楽しめないので、出来栄えはあまり意識せずに前向きな気持ちでチャレンジしたいと思います。
使用したツール
GIMPは少しだけ使用したことがありますが、Figmaは初めてです。
ネットでいろいろと情報収集しなが進めていきます。
カーテンイメージ画像の作成
アプリの中でカーテンが作動しているイメージをパラパラ漫画風に表示したいので、そのための素材画像を作成します。
１．素材準備
ネットで拾ってきたこちらのgifアニメーションを分解します。
gif画像の分解はこちらのWebサービスを利用させていただきました。
無料画像加工サイト：もじまる
分解後
その後、分解した画像をGIMPで編集します。
２．背景透過（GIMP）
画像背景（黒色部分）を透過させます。
- レイヤー -> 透明部分 -> アルファチャネルの追加
- ファジー選択
等を使用し、透過したい部分を選択
ご覧の通り、簡単に背景を透過させることができました。
３．色合いの変更
カーテンの素材画像の色合いを変更します。
なんとなく赤色だと刺激が強い気がするのです。興奮したポニ丸が突進してきそうなので、少し落ち着いた色合いに変更します。
- 画像 -> モード -> RGBに設定
- 色 -> 色相-彩度
- 色相-彩度ウィンドウが表示されるため、各パラメータ値を変更して色合いを調整
これで、カーテンの作動イメージ画像は作成完了です。
UI設計開幕
さて、ここからが勝負！
右も左もわかりませんが、使用するツールについて検討したいと思います。
とりあえずネットで情報収集しました。
結果として、Figma / XD / Sketchというデザインツールが候補にあがりました。
参考にしたページ：
2020年版：おすすめの人気UIデザインツールを徹底比較！【Figma / XD / Sketch】
Sketchは有料とのことで候補から除外。XD / Figmaのどちらを使用するか悩みましたが、まずは直感でFigmaを使用してみることにしました。
公式サイトにアクセスし、「Try Figma for free」ボタンよりユーザ登録を行います。
必要なのはメールアドレスのみでした。
ブラウザ上で使用できるとのことですが、こちらのページよりデスクトップアプリ版のダウンロードが可能です。
環境設定については、こちらのページを参考にさせていただきました。
UI/UXデザインツール『Figma』入門 1-2. 初期設定とインストール
これで環境準備は完了。
次回、UIデザインツール「Figma」を使用しUI設計を行います。
ヤギ星人の戦いが今始まる。（←？）
コメント