はじめまして。GIRLS UPでデザイナーをしています、アビン(GUPDesinger)です。
今回はGIRLS UPのデザインを元に、かわいい女性向けアプリのデザインの要素と作り方をお勉強しましょう！センスに自信が無い人でも、「かわいい」のロジックさえわかっていれば、簡単にかわいいアプリを作ることができると思います。そのロジックをぜひ参考にしてみてください！
よく「かわいいデザイン」って聞きますが、「かわいい」という言葉を聞いてイメージするものが、全ての人にとって全く同じとは限りません。
まずは、「20代の美を追求する人たちが使うアプリ」というテーマから連想する、〇〇に入りそうな言葉をたくさん並べてみました。
ガーリー、キュート、ラブリー、シック、クール、スタイリッシュ、ポップ、暖かいなど…
有名なフォントとロゴに関しては、こちらが参考になります。
出した言葉から２つの軸を作りました。
軸1は「スタイリッシュ・力強さ・シック」←→「ポップ・キュート」、
軸2は「クール」←→「暖かい」です。
その後、色々なフォントからGIRLS UPと書いて、それを直感でグラフの上に並べました。GIRLS UPではポップでキュート、暖かい感じのCalibriというフォントのBoldを選びました。
もしここでスタイリッシュでクールな方向性になったら、
スタイリッシュすぎて却下になりそうなデザインです。コミュニティサービスというよりはファッション誌的な印象を受けるこのフォントはDidotです。
こういう時に、他の人にデザインのイメージを伝える方法でよく使われるのが「ムードボード」という方法です。
キーワードだけだとどうしてもズレが発生してしまいます。このズレを最小限にするため、既存の写真、ブランド、雑誌などがもっているイメージを借りてきてお互いが思ってる「カワイイ」を合わせる作業です。
花柄、ドット、レザーテクスチャー、ハートや小物などでできています。なんとなくすごくピンクなアプリになる予感ですね。わたしはこういうデザインをするんだよと、あらかじめみんなに言っておくことで、ムダなやりとり・修正がなくなります。
わたしは、このサイトを配色の参考にしました。Web配色のセンスがあふれる人は直感でやっても良いんですが、世の中の優れた人たちが良い配色の例をすでにたくさん出しているので、そちらを参考にすることもいいと思います。
この３色がGIRLS UPが考える一番かわいい色です！
ここで設定するメインカラーは２つ～３つくらいが適切です。
これを元にアプリ全体の画面を構成します。
メインの色、フォント、デザインの方向性が決まってから、ワイヤーフレームに沿ってアプリアイコンと画面をデザインしていきます。これがGIRLS UPのアプリアイコンと主な画面です。
女性のユーザに大切に使ってもらいたいという気持ちを込めた、かわいいピンクの革製の手帳をモチーフにして作っています。かわいくてさわりたくなります！！
そして、アプリの中身は、クレヨンで塗ったような、手描き感をイメージして作っています。
スタイリッシュで直感的なUIをしているかっこいいアプリもたくさんありますが、GIRLS UPでは「わかりやすい」「簡単にできる」を目指してデザインしています。初めて来た人がいかに使いやすいかを考えたデザインです。初めて来た人に簡単にツイートを促して、初投稿には目立つようにアイコンをつけて、「ほめてあげよう」という文言でたくさんほめられる一連の流れになっています。見た目だけではなくて、使う人を考えるかわいいUIです。
ここまで読んでいただき、ありがとうございました。
最後に、GIRLS UPの宣伝をさせてください。
GIRLS UPってなに？
まだまだ改善していくので、楽しみにしてください＾０＾
【GIRLS UPの制作ブログ】
http://gupdesign.tumblr.com/
【GIRLS UPのスタッフブログ】
http://ameblo.jp/girlsup-staff/
Author : @abibibibi
今回はGIRLS UPのデザインを元に、かわいい女性向けアプリのデザインの要素と作り方をお勉強しましょう！センスに自信が無い人でも、「かわいい」のロジックさえわかっていれば、簡単にかわいいアプリを作ることができると思います。そのロジックをぜひ参考にしてみてください！
まずはたくさんのキーワードを用意する。
よく「かわいいデザイン」って聞きますが、「かわいい」という言葉を聞いてイメージするものが、全ての人にとって全く同じとは限りません。
「かわいくて〇〇」をキーワードで表現する
自分が持っている「かわいい」というイメージを表現するには、たくさんのキーワードで表現するとわかりやすくなります。まずは、「20代の美を追求する人たちが使うアプリ」というテーマから連想する、〇〇に入りそうな言葉をたくさん並べてみました。
ガーリー、キュート、ラブリー、シック、クール、スタイリッシュ、ポップ、暖かいなど…
キーワードからロゴタイプをイメージする
フォントが持っているイメージはとても強いので、キーワードに合った適切なフォントを使ってロゴタイプをデザインしましょう。有名なフォントとロゴに関しては、こちらが参考になります。
軸1は「スタイリッシュ・力強さ・シック」←→「ポップ・キュート」、
軸2は「クール」←→「暖かい」です。
その後、色々なフォントからGIRLS UPと書いて、それを直感でグラフの上に並べました。GIRLS UPではポップでキュート、暖かい感じのCalibriというフォントのBoldを選びました。
もしここでスタイリッシュでクールな方向性になったら、
デザインムードボード
ロゴタイプを決めたので、チームの人にどういうデザインにするか共有しましょう。しかし、デザインの方向性は決まったものの、アプリの画面はまだ１つもありません。こういう時に、他の人にデザインのイメージを伝える方法でよく使われるのが「ムードボード」という方法です。
キーワードだけだとどうしてもズレが発生してしまいます。このズレを最小限にするため、既存の写真、ブランド、雑誌などがもっているイメージを借りてきてお互いが思ってる「カワイイ」を合わせる作業です。
GIRLS UPのムードボード
カワイイ色味
その次は、実際アプリで使うメイン色を決めることです。ムードボードに使われている色からメイン1色を持ってくると便利です。わたしは、このサイトを配色の参考にしました。Web配色のセンスがあふれる人は直感でやっても良いんですが、世の中の優れた人たちが良い配色の例をすでにたくさん出しているので、そちらを参考にすることもいいと思います。
ここで設定するメインカラーは２つ～３つくらいが適切です。
これを元にアプリ全体の画面を構成します。
アプリ構成
かわいい要素
①テクスチャー
GIRLS UPのアプリアイコンです。
アプリのヘッダーです。
アプリ内で使われる見出しです。
女性のユーザに大切に使ってもらいたいという気持ちを込めた、かわいいピンクの革製の手帳をモチーフにして作っています。かわいくてさわりたくなります！！
そして、アプリの中身は、クレヨンで塗ったような、手描き感をイメージして作っています。
②装飾と説明
スタイリッシュで直感的なUIをしているかっこいいアプリもたくさんありますが、GIRLS UPでは「わかりやすい」「簡単にできる」を目指してデザインしています。初めて来た人がいかに使いやすいかを考えたデザインです。初めて来た人に簡単にツイートを促して、初投稿には目立つようにアイコンをつけて、「ほめてあげよう」という文言でたくさんほめられる一連の流れになっています。見た目だけではなくて、使う人を考えるかわいいUIです。
まとめ
GIRLS UPを参考に、かわいいアプリの制作過程について書きました。ぜひかわいいアプリ作りに挑戦してみてください！ここまで読んでいただき、ありがとうございました。
最後に、GIRLS UPの宣伝をさせてください。
GIRLS UPってなに？
まだまだ改善していくので、楽しみにしてください＾０＾
【GIRLS UPの制作ブログ】
http://gupdesign.tumblr.com/
【GIRLS UPのスタッフブログ】
http://ameblo.jp/girlsup-staff/