目次
初心者がwebデザインの基本手順と流れを間違うと?
webデザインの基本手順と流れ
- 制作物の目的・内容を決める
- ターゲット・場面を決める
- 伝え方を決める
- スケッチする
- デザインする
1.制作物の目的・内容を決める
最初にこれらを考えないとミスマッチが起こる可能性があります。目的を考えずに伝え方を決めると手段が目的化して本来の目的を達成できない可能性があります。クライアントワークの場合はきちんとヒアリングをして認識を合わせましょう。
目的を決める
サイト制作の目的を決めます。
例：コーポレートサイトを構築して会社としての信用度を上げたい。ランディングページを作ってネットからの商品の購入を促進したい。
内容を決める
サイトに入れる内容を決めます。
例：コーポレートサイトの場合は、会社概要と商品・サービス説明など、会社を世間から信頼できる内容を入れたい。ランディングページの場合は、商品のメリットや他社と比較した時の優位性、価格や購入方法など。
2.ターゲット・伝える場面を決める
制作物の目的と内容が決まったら、伝え方を決めましょう。具体的には、誰に、どんな場面で伝えるか考えましょう。
ターゲットを決める
ターゲットを特定しましょう。実際にいそうな人をペルソナとして決めると良いです。例えば、20代女性の会社員、コスパ重視、都心在住で趣味は韓国旅行などです。決めすぎても後でデザインに関わらないことがあるので、デザインに関わる範囲で詳細に決めればOKです。
伝える場面を決める
いつどのような場所で読まれるかを考えましょう。例えば、会社帰りの電車の中でスマホで読まれる、などです。
PCで読まれるか、スマホで読まれるかで文字の大きさが全く変わってきたり、画面デザインや余白が変わってきます。また、歩いて読まれる場合はさらに大きな文字の表示が必要です。
3.伝え方を決める
配色
色は3色程度に絞る
多く色を使いすぎるとごちゃごちゃしたイメージになってしまいます。
メインカラー、サブカラー、アクセントカラーを決め、60-30-10ルールを守る
・60％ベースカラー(背景)：脇役的な色です。メイン・アクセントカラーの妨げにならないよう、薄い色（淡い色）を使いましょう。
・30％メインカラー(ロゴ/バナー/メインコンテンツ)：サイトの印象を決定づける主役の色。可読性の問題から、濃い色が使用しやすいです。
・10％アクセントカラー(申込みボタン等、強調箇所) ：全体の5％と少ない使用量ながら一番目立つ色です。目を引く色を選びましょう。
対称的な配色を選びコントラスト活用する
メインカラーやアクセントカラーを濃い色、ベースカラーを薄い色にすることで、コントラストを活用し、重要な部分を目立たせましょう。
設定したターゲットや場面に合う色、目的に沿ったを設定する
ユーザーが女性だからといって安易にピンクを選ぶのはやめましょう。
赤：目を引く色。エネルギーを表す商品、バーゲンセールの広告に使われることが多い。
青：爽やかさ誠実なイメージを与える。日本人が最も好きな色
緑：衛生的なイメージを与える。病院や薬局の色に使われることが多い
灰色：どの色にも馴染む、上品で落ち着いたイメージがある。教育系や士業系の企業に使われることが多い
色にルールを与える
「消去（DELETE）ボタン」は赤、「キャンセルボタン」は黒など、色のルールを統一しましょう。ユーザーが見慣れている色で統一するとわかりやすいです。
フォント
伝えたい印象でフォントを選ぶ
フォーマルなイメージ、カジュアルなイメージなど、フォントでサイトイメージが変化します。Googlefontから多種多様なフォントを使うことができます。
字間/行間
字間や行間を変えるだけでイメージが変わります。
・字間/行間を空ける：ゆったりレガントなイメージ
・字間を詰める：フォーマルで実務的
コンテンツに優先順位をつける
情報を詰め込みすぎないために、コンテンツに優先順位をつけましょう。情報を詰め込みすぎるとユーザーが、結局何が重要なポイントがわからず、サイトから離脱してしまう可能性があります。
同一用途のものを統一する
4.スケッチする
5.デザインする
これらは無料で簡単にwebデザインができるツールです。イメージはパワポ上でデザインを作成している感じです。
webデザインの基本手順と流れまとめとオススメツール
初心者がwebデザインの基本手順を間違うとミスマッチが起こる可能性があります。初心者が行うべきwebデザインの超基本的な手順は、制作物の目的・内容を決める→伝える対象・場面を決める→伝え方を決める→スケッチする→デザインするです。
ニャンニャン
