目次
こんにちは。
最近、未経験からWebデザイナーになった自分が、実際に業務で学んだことを今回記事にさせていただきました。
自分用の備忘録も兼ねて書かせていただいているので、初歩的な内容となっておりますが、温かい目で見守っていただければ幸いです。
また、誤りがございましたらご指摘いただけると有難いです。
それでは早速本題に入ります。
今回は「アプリデザイン」の中でも「カラーの選び方」「フォーム作成のポイント」に絞って記事を書いていきます。
最近、未経験からWebデザイナーになった自分が、実際に業務で学んだことを今回記事にさせていただきました。
自分用の備忘録も兼ねて書かせていただいているので、初歩的な内容となっておりますが、温かい目で見守っていただければ幸いです。
また、誤りがございましたらご指摘いただけると有難いです。
それでは早速本題に入ります。
今回は「アプリデザイン」の中でも「カラーの選び方」「フォーム作成のポイント」に絞って記事を書いていきます。
①カラーの選び方
アプリデザインをする上で必要なカラーは主に以下の3点です。・primary color
・Gray scale color
・Functional color
primary colorは、アプリ画面上のキーカラー的な存在です。Twitterなら水色、LINEなら緑がこれにあたります。
Gray scale colorは、白黒グレーなど無彩色のことで、主にテキストに使います。テキスト以外にも、背景や境界線などにも使えます。
Function colorは、「警告色、アテンション、エラーなど」と「サクセス時のsafe colorなど」にあたり、これらも考える必要があります。前者は赤系統、後者は緑系統が一般的です。
また、１色だけ選ぶのではなく、同じ色でも明るさの違うパターンを作ることで、装飾に使うボタンや線などの色を選ぶ際にもスムーズに配色が行えます。さらにクライアントさんにアプリデザインのデータを渡す際にも有効です。
一例として今回作ったカラーパレット をお見せすると、、、
・Gray scale color
・Functional color
primary colorは、アプリ画面上のキーカラー的な存在です。Twitterなら水色、LINEなら緑がこれにあたります。
Gray scale colorは、白黒グレーなど無彩色のことで、主にテキストに使います。テキスト以外にも、背景や境界線などにも使えます。
Function colorは、「警告色、アテンション、エラーなど」と「サクセス時のsafe colorなど」にあたり、これらも考える必要があります。前者は赤系統、後者は緑系統が一般的です。
また、１色だけ選ぶのではなく、同じ色でも明るさの違うパターンを作ることで、装飾に使うボタンや線などの色を選ぶ際にもスムーズに配色が行えます。さらにクライアントさんにアプリデザインのデータを渡す際にも有効です。
一例として今回作ったカラーパレット をお見せすると、、、
Primary colorに関しては、下記を作っておくと便利です。
・原色（primary colorとして決めた色）
・明るいベースカラー
・さらに明るいカラー
・少し暗いカラー
・彩度の違うダークカラー
今回デザインで使用した箇所は、アプリのナビゲーションバー（タブバー）にprimary colorの「明るいベースカラー」を使い、ナビゲーションの選択されていないアイコンボタンには「少し暗いカラー」を使用。
「さらに明るいカラー」は、会員登録するフォーム画面の入力が完了していない状態（クリックできない状態）の登録ボタンのカラーとして使用しました。
Gray scale colorに関しても、テキストや入力フォームの背景色、ニュース記事一覧のディスクリプション文字や、記事と記事の境界線などに利用しています。
Function colorも複数作っておくと、ボタンやテキスト、背景、線など様々なパーツで利用できるので、もう少しパターンを出した方が良かったかもしれません。今回は、アテンションのみの使用し、フォーム画面のエラー時や、通知がある時に❶とアイコンの右上などに表示されるカラーに使用しています。
余談ですが、今回Primary colorには黄色を使用しています。ですが、白背景に対してアイコンやテキストボタンが黄色だと視認性が悪くなってしまうため、それらはオレンジで代用しました。色によっての注意も必要です。
このカラーの選び方は、Webサイトを作る際にも活用できるので、ぜひ今後も活用していこうと思います。
②フォーム作成のポイント
フォーム画面をデザインする際には以下の4つの作成が必要です。
・未入力
・入力中
・入力済み
・入力して、エラーが出ている状態
未入力は、入力前の状態であるとわかることが大切なので、文字がグレーアウトしていたりメリハリをつけます。
入力中は、デザインによるところもありますが、青い枠がついていたり、フォームの濃淡を濃くするなどで表現されることが多いです。
入力済みは、入力が済んでいる状態とわかるように、入力前のテキストカラーがグレーなのに対し、黒を使うのが一般的です。他にもチェックのアイコンがグレーアウトからカラーになるデザインなども見かけますね。
入力して、エラーが出ている状態は、赤枠、薄い赤背景で、エラーメッセージをフォームの近くに出すのが良いとされています。
フォームデザインの基本についてはこちらの記事を参考にしました。
https://esaura.jp/ux-blog/how-to-create-entry-form
https://material.io/components/text-fields#filled-text-field
アプリデザインと言っても、様々なルールがあるため勉強が必要になります。
一つ一つルールを知っていき、ユーザーにとってわかりやすいデザインが出来るよう、日々学んでいくことが大切だなと思います。
ではでは〜
・未入力
・入力中
・入力済み
・入力して、エラーが出ている状態
未入力は、入力前の状態であるとわかることが大切なので、文字がグレーアウトしていたりメリハリをつけます。
入力中は、デザインによるところもありますが、青い枠がついていたり、フォームの濃淡を濃くするなどで表現されることが多いです。
入力済みは、入力が済んでいる状態とわかるように、入力前のテキストカラーがグレーなのに対し、黒を使うのが一般的です。他にもチェックのアイコンがグレーアウトからカラーになるデザインなども見かけますね。
入力して、エラーが出ている状態は、赤枠、薄い赤背景で、エラーメッセージをフォームの近くに出すのが良いとされています。
フォームデザインの基本についてはこちらの記事を参考にしました。
https://esaura.jp/ux-blog/how-to-create-entry-form
https://material.io/components/text-fields#filled-text-field
アプリデザインと言っても、様々なルールがあるため勉強が必要になります。
一つ一つルールを知っていき、ユーザーにとってわかりやすいデザインが出来るよう、日々学んでいくことが大切だなと思います。
ではでは〜
