アカイです。
ホームページを作成しているときに
・そもそもホームページの配色を決める流れがわからない。
と困ったことはありませんか？
この記事では、
がわかります！
過去に8年以上、システム開発プロジェクトを行った私が、カラースキームのコツ・紹介していきます！
カラースキーム作成前の要件とりまとめについては以下の記事で紹介していますので、お先にご覧ください。
https://www.kuroyukiblog.com/webdesign-101requirement-roadmap/
１．ベースカラー、メインカラー、アクセントカラーの要望を確認する
まず要件確認時に、ユーザーとホームページカラーの希望を確認します。
ベースカラー、メインカラー、アクセントカラーについては以下記事にまとめていますのでご参考ください。
https://www.kuroyukiblog.com/webdesign-203color/
・スムーズに要望確認するコツ１：色の見本を見せてあげる
ユーザに色見本を見せてあげましょう。
色見本は資料を見せたり、以下のサイトを見せてあげることで「この色の組み合わせががいい！」とイメージがつきやすく決定しやすくなります。
・スムーズに要望確認するコツ２：色の組み合わせを複数パターン確認する。
ホームページの色を複数候補決めておくようにします。大体3パターン決めておきます。
1パターンのみ確認ですと、後工程で「やっぱり別の色がいい」など手戻りが発生する可能性が高いです。
複数候補を確認しておき、上記の手戻りリスクを抑えます。
２．テキストカラーの要望を確認する
ユーザと文字の色を決めていきます。細かい決定事項となりますが、ユーザとの齟齬が発生しないようしっかり決めていきます。
・スムーズに要望確認するコツ３：テキストカラーはシステム担当先導で決定していく
文字の色は、システム担当者側で提案ベースで決めていきます。
ユーザ側からすると「文字の色まで決めるの？」と想定していない箇所になります。
例えばこちらから
- 「白、薄いグレー、濃いグレー、黒と候補がありますけど、濃いグレーが合いそうですね」
- 「ベースカラーがクリーム色なので、文字の色は黒にしておきますか？」
のように、先導して決めてあげるとユーザと齟齬なくスムーズに決まります。
３．参考Webサイトを作成する
色の希望が確認出来ましたら、実際にサイトイメージを持ってもらうためにサンプルサイトを作成します。
・サンプルサイトを作成する
一からサンプルサイトを作ると大変ですので、以下のWebサイトを利用してサクッとサンプルサイトを作ると効率的です。
https://www.color-fortuna.com/color_scheme_genelator2/
要件時に複数候補確認してますので、その分のサンプルサイトを作りましょう。
４．ユーザとカラーイメージすり合わせを行う
サンプルサイトを複数作成出来たら、再度ユーザとホームページの配色に齟齬がないか確認します。
・すり合わせの重要ポイント：大まかな色のパターンで決定させておく。
設計段階でも色の変更の融通は効きます。
「ここの緑色を、もう少し淡めの緑にしてほしい」
と細かい部分については再度サンプルサイトを作ることはせずに、要望を聞き入れて後工程を進めていきます。
５．カラースキームをまとめる
ホームページの色について合意が取れたら、カラースキームをまとめていきます。
・カラースキームをまとめるポイント：後工程で作成するツールでまとめる。
今後の後工程としまして、
- ワイヤーフレーム作成
- デザインカンプ作成
があります。
この作成で使うツールで、カラースキームをまとめていきます。
理由としまして、EXCELでカラースキームをまとめ、AdobeXDでデザインカンプを作成すると、別アプリ間で色情報を切り貼りすることが手間になるためです。
今後AdobeXDでデザインを作成するため、以下のようにAdobeXDでカラースキームを作っていきます。
６．まとめ：複数パターンから1つの配色パターンに絞り込んでいく
・カラースキーム資料は後工程で使うデザインツールで作成する
[word_balloon id=”unset” src=”https://www.kuroyukiblog.com/wp-content/uploads/2021/04/Logo02.png” size=”M” position=”L” name_position=”under_avatar” radius=”true” name=”アカイ” avatar_flip=”h” balloon=”talk” balloon_shadow=”true”]次回は未決定事項の管理について解説するよ！ [/word_balloon]
コメント