目次
初心者がウェブデザインの基本手順を間違うと?
初心者向けウェブデザインの超基本的な手順
- 制作物の目的・内容を決める
- ターゲット・場面を決める
- 伝え方を決める
- スケッチする
- デザインする
1.制作物の目的・内容を決める
最初にこれらを考えないとミスマッチが起こる可能性があります。目的を考えずに伝え方を決めると手段が目的化して本来の目的を達成できない可能性があります。クライアントワークの場合はきちんとヒアリングをして認識を合わせましょう。
目的を決める
サイト制作の目的を決めます。
例：コーポレートサイトを構築して会社としての信用度を上げたい。ランディングページを作ってネットからの商品の購入を促進したい。
内容を決める
サイトに入れる内容を決めます。
例：コーポレートサイトの場合は、会社概要と商品・サービス説明など、会社を世間から信頼できる内容を入れたい。ランディングページの場合は、商品のメリットや他社と比較した時の優位性、価格や購入方法など。
2.ターゲット・伝える場面を決める
制作物の目的と内容が決まったら、伝え方を決めましょう。具体的には、誰に、どんな場面で伝えるか考えましょう。
ターゲットを決める
ターゲットを特定しましょう。実際にいそうな人をペルソナとして決めると良いです。例えば、20代女性の会社員、コスパ重視、都心在住で趣味は韓国旅行などです。決めすぎても後でデザインに関わらないことがあるので、デザインに関わる範囲で詳細に決めればOKです。
伝える場面を決める
いつどのような場所で読まれるかを考えましょう。例えば、会社帰りの電車の中でスマホで読まれる、などです。
PCで読まれるか、スマホで読まれるかで文字の大きさが全く変わってきたり、画面デザインや余白が変わってきます。また、歩いて読まれる場合はさらに大きな文字の表示が必要です。
3.伝え方を決める
配色
・色は3色程度に絞る
多く色を使いすぎるとごちゃごちゃしたイメージになってしまいます。
・メインカラー、サブカラー、アクセントカラーを決め、60-30-10ルールを守る
・60％ベースカラー(背景)：脇役的な色です。メイン・アクセントカラーの妨げにならないよう、薄い色（淡い色）を使いましょう。
・30％メインカラー(ロゴ/バナー/メインコンテンツ)：サイトの印象を決定づける主役の色。可読性の問題から、濃い色が使用しやすいです。
・10％アクセントカラー(申込みボタン等、強調箇所) ：全体の5％と少ない使用量ながら一番目立つ色です。目を引く色を選びましょう。
・対称的な配色を選びコントラスト活用する
メインカラーやアクセントカラーを濃い色、ベースカラーを薄い色にすることで、コントラストを活用し、重要な部分を目立たせましょう。
・設定したターゲットや場面に合う色、目的に沿ったを設定する
ユーザーが女性だからといって安易にピンクを選ぶのはやめましょう。
赤：目を引く色。エネルギーを表す商品、バーゲンセールの広告に使われることが多い。
青：爽やかさ誠実なイメージを与える。日本人が最も好きな色
緑：衛生的なイメージを与える。病院や薬局の色に使われることが多い
灰色：どの色にも馴染む、上品で落ち着いたイメージがある。教育系や士業系の企業に使われることが多い
・色にルールを与える
「消去（DELETE）ボタン」は赤、「キャンセルボタン」は黒など、色のルールを統一しましょう。ユーザーが見慣れている色で統一するとわかりやすいです。
フォント
伝えたい印象でフォントを選ぶ
フォーマルなイメージ、カジュアルなイメージなど、フォントでサイトイメージが変化します。Googlefontから多種多様なフォントを使うことができます。
字間/行間
字間や行間を変えるだけでイメージが変わります。
・字間/行間を空ける：ゆったりレガントなイメージ
・字間を詰める：フォーマルで実務的
コンテンツに優先順位をつける
情報を詰め込みすぎないために、コンテンツに優先順位をつけましょう。情報を詰め込みすぎるとユーザーが、結局何が重要なポイントがわからず、サイトから離脱してしまう可能性があります。
同一用途のものを統一する
4.スケッチする
5.デザインする
figmaは、無料でオンライン上で直感的にウェブデザインができるツールです。イメージはパワポ上でデザインを作成している感じです。オンラインツールなので複数人で一緒に同じアートボードを確認、デザインもできます。
簡潔に方法をまとめると以下３ステップです。
1.figmaのページで新規登録する
2. アートボードを作成し、長方形を配置→テキストや、中身を入れていく。
ほとんどパワポと同じ要領で行います。左上からテキストや図形などを選ぶことができます。テキストの日本語フォントは以下４つのみを使うことができます。下2つは装飾フォントなので、基本的には上2つのみを使っています。英語フォントはGoogleフォントなら大体使えます。
– Noto Sans JP
– Noto Serif JP
– Nico moji
– Nikukyu
テキストのフォントをfontawesomeに変えて、fontawesomeのCheet Seatからアイコンをコピペすればアイコンも使うことができます。
3.デザインを見てもらいたい人に共有する
右上の「Share」をクリックすると、リンク取得画面があらわれます。リンクをシェアしたい人に送りましょう。
まとめ
初心者がウェブデザインの基本手順を間違うとミスマッチが起こる可能性があります。初心者が行うべきウェブデザインの超基本的な手順は、制作物の目的・内容を決める→伝える対象・場面を決める→伝え方を決める→スケッチする→デザインするです。
もっとデザインについて学びたいならデザイナーがこぞって勧める以下の本を読んで勉強しましょう。
実質無料でデザイン本を読みたい人はKindle Unlimitedがおすすめです
AmazonでKindle Unlimitedというという月額980円で本読み放題プランに入ると、「30日間無料体験」もやってるのでデザイン関連の本が実質無料で読めますよ〜
微妙だったら解約もワンクリックで行うことができ、解約料無料です。
上で紹介している本はないことも多いですが、様々なデザイン本や、そのほか好きな本をまずは30日間無料で読み放題なのでぜひ試してみることをオススメします。よくデザイナーにおすすめされている「＋DESIGNING」という良いデザイン、悪いデザインをわかりやすく紹介していたり、photoshopなどのツールの基本操作を紹介するデザイナー向け雑誌などがあります。
