最近時間もあるし何か勉強になることでもするかいうことで、アプリ開発を始めました。
どんなアプリをどういう構成で作ろうとしたかは別述するとして、
開発にあたり、まずは、
- どんなアプリを作るかを考える
- 必要な機能を洗い出す
- Figmaでワイヤーフレームを作る
までを行いました。
ここまでで必要な画面のラフなイメージが出揃ったので、
「さて、画面のデザインでも詰めていくか」
というところで手が止まりました。
アプリのデザインなんかやったことないからです。
美術的センスに自信もなければ進め方のノウハウもないので、せっかくだから今話題のChatGPT先生にでも聞いてみようということで、アプリのデザイン詳細設計を手伝ってもらいました。
ChatGPTにデザイン設計を手伝ってもらったやりとり
まず、以下のようなプロンプトを送ってみました。
プロンプト
あなたは新規のアプリ開発を任されました。
アプリのデザインを決める手順について教えてください。すると、以下のような回答が返ってきました。
ChatGPTによる回答
アプリのデザインを決める手順は以下のようになります。
1. 目的を明確にする：アプリの目的やターゲットユーザー、提供するサービスを明確にすることが必要です。それによって、アプリの使い勝手やデザインの方向性が決まります。
2. ユーザー調査を行う：ターゲットユーザーについて調査を行い、ユーザーが求める機能やデザインの傾向を分析します。アンケートやインタビュー、フィードバックの収集などが有効な手段です。
3. 競合調査を行う：同様のアプリやサービスがある場合は、競合アプリの調査を行います。競合アプリのデザインの傾向や特徴を分析し、自社アプリの差別化を図ります。
4. ワイヤーフレームを作成する：アプリの画面や機能をざっくりとした形で描いたものを「ワイヤーフレーム」と呼びます。ワイヤーフレームを作成し、画面遷移や機能の配置を検討します。
5. UIデザインを行う：ワイヤーフレームをもとに、具体的なUIデザインを行います。カラーやフォント、アイコンの選定や、ボタンの配置などを決めます。
6. プロトタイプを作成する：UIデザインをもとに、動くプロトタイプを作成します。プロトタイプを実際に使い、使い勝手や改善点を洗い出します。
7. テストを行う：プロトタイプをもとに、ユーザーテストを実施します。ユーザーの反応やフィードバックをもとに、アプリの改善点を洗い出し、修正します。
以上が一般的なアプリのデザイン決定手順です。ただし、実際のアプリ開発には、多くのステップがあり、細かなディテールにも注意が必要です。なるほど、アプリの企画段階からの手順を教えてくれました。
ユーザー調査や競合調査はやっていなかったので良い観点を得ました。（もっとも、まずはユーザーは自分だけの想定ですが）
しかし、私が知りたかったことは、回答にある手順５「UIデザインを行う」の詳細なので、ここを深掘ってみます。
プロンプト
手順５にある内容をもとに具体的に聞いてみます。
UIデザインを行う際、どのような手順でカラーやフォント、アイコンの選定や、ボタンの配置などを決めたら良いですか？すると以下のような回答が返ってきました。
ChatGPTによる回答
UIデザインを行う際には、以下の手順を参考にすると良いでしょう。
1. ブランディング要件を確認する：企業や製品によっては、ブランディングの観点からカラーの指定や、フォントの使用を制限している場合があります。まずは、そのような要件を確認しましょう。
2. カラーの選定：ブランディング要件がない場合は、アプリのイメージやコンセプトに合ったカラーを選定します。カラーは、ユーザーに印象を与える重要な要素なので、適切な色を選ぶことが重要です。
3. フォントの選定：アプリに使用するフォントは、読みやすさや美しさ、ブランディングの観点から選ぶ必要があります。フォントは、タイトルや本文など、使用する箇所に応じて適切なものを選択します。
4. アイコンの選定：アプリに使用するアイコンは、ユーザーにわかりやすく、印象的なものを選ぶ必要があります。また、アプリのコンセプトや機能に合わせたアイコンを選ぶことで、ユーザーが直感的に操作できるようになります。
5. ボタンの配置：ボタンは、ユーザーがアプリを操作する上で重要な要素です。ボタンの配置は、ユーザーの利便性を高めるために慎重に決める必要があります。また、ボタンの大きさや色、位置なども考慮して配置することが重要です。
以上の手順を踏んで、UIデザインを行うことで、使いやすく、美しいアプリを実現することができます。欲しかった進め方の情報が手に入りました！
企業案件ではないので、まずはカラーを指定する必要があるようです。
ですが、ここでまた問題が生じます。
カラーの選び方がわからないのです。
カラーの組み合わせには相性の良い悪いがあると聞いたことはありますが、そこらへんの知識が皆無なので判断がつきません。
追加で先生に聞いてみます。
プロンプト
カラーの選定において、アプリのメインカラー、サブカラー、アクセントの3色を決めたいと思っています。
3色の組み合わせとしてオススメのパターンを、10案出してください。すると以下のような回答が返ってきました。
ChatGPTによる回答
ここでは、カラーの選定において、メインカラー、サブカラー、アクセントの3色を決めた上で、その3色を組み合わせたオススメのパターンを10案提示します。
メインカラー：青 / サブカラー：グレー / アクセント：オレンジ
メインカラー：赤 / サブカラー：黒 / アクセント：金
メインカラー：緑 / サブカラー：茶 / アクセント：黄
メインカラー：紫 / サブカラー：白 / アクセント：ピンク
メインカラー：オレンジ / サブカラー：茶 / アクセント：青
メインカラー：黄 / サブカラー：白 / アクセント：紫
メインカラー：ピンク / サブカラー：グレー / アクセント：赤
メインカラー：白 / サブカラー：黒 / アクセント：青
メインカラー：茶 / サブカラー：青 / アクセント：赤
メインカラー：黒 / サブカラー：赤 / アクセント：白
以上が、3色の組み合わせとしてオススメのパターン10案です。ただし、アプリのコンセプトやターゲット層、用途に応じて、適切なカラーを選ぶ必要があります。すごい、メインカラーが全て異なる10案を提案してくれました。
確かになんか合いそうなカラーの組み合わせな感じがします。。（ほんとか）
ただ、紫ピンクなど想像してみると明らかに派手でなかなか使わなさそうなカラーの組み合わせがあります。
回答の最後に教えてくれた通り、アプリのコンセプトやターゲット層、用途を考えて、それに沿ったカラーパターンを提案してもらいます。
プロンプト
・コンセプト：手軽、エレガント
・ターゲット層：ビジネスマン
・用途：タスクの予実管理、時間管理
以上に書いた、アプリのコンセプト、ターゲット層、用途を考慮に入れて、
おすすめのメインカラー、サブカラー、アクセントの3色を組み合わせたオススメのパターンを5案提示してください。すると以下のような回答が返ってきました。
ChatGPTによる回答
以下は、手軽でエレガントな雰囲気を持つビジネスマン向けのタスク管理アプリに適した、メインカラー、サブカラー、アクセントの3色を組み合わせた10のカラーパターンです。
1. メインカラー：ライトグレー、サブカラー：ネイビー、アクセント：ゴールド
2. メインカラー：ホワイト、サブカラー：ダークグレー、アクセント：レッド
3. メインカラー：ミントグリーン、サブカラー：ライトグレー、アクセント：ブラック
4. メインカラー：ネイビー、サブカラー：ライトグレー、アクセント：イエロー
5. メインカラー：ダークグレー、サブカラー：ホワイト、アクセント：オレンジちゃんとエレガントなカラーの組み合わせになっています！
せっかくなので、提案してもらった案１「メインカラー：ライトグレー、サブカラー：ネイビー、アクセント：イエロー」（ゴールドはできないのでイエローで）でデザインを考えてみることにしました！
また困ったときは頼みます！
コメント