フリーランスが会社員収入を継続して得られないパターン7つ

【5分】ウェブデザインの基本手順を初心者向けに解説

ウェブデザインの基本手順を初心者向けに解説してみました。5分で読めます!

初心者がウェブデザインの基本手順を間違うと?

初心者がウェブデザインの手順にこだわるべき理由は、ウェブデザインを手順通りに踏まずに行うと、ミスマッチなデザインになりうるからです。
正しい手順を踏まずに一旦デザインを完成してから修正を行うと、大きな手戻りが発生する可能性があります。
効率的に終わらせ、効果的なデザインにするために、考える手順を守りましょう

初心者向けウェブデザインの超基本的な手順

  1. 制作物の目的・内容を決める
  2. ターゲット・場面を決める
  3. 伝え方を決める
  4. スケッチする
  5. デザインする

1.制作物の目的・内容を決める

最初にこれらを考えないとミスマッチが起こる可能性があります。目的を考えずに伝え方を決めると手段が目的化して本来の目的を達成できない可能性があります。クライアントワークの場合はきちんとヒアリングをして認識を合わせましょう。

目的を決める

サイト制作の目的を決めます。

例:コーポレートサイトを構築して会社としての信用度を上げたい。ランディングページを作ってネットからの商品の購入を促進したい。

内容を決める

サイトに入れる内容を決めます。

例:コーポレートサイトの場合は、会社概要と商品・サービス説明など、会社を世間から信頼できる内容を入れたい。ランディングページの場合は、商品のメリットや他社と比較した時の優位性、価格や購入方法など。

 

2.ターゲット・伝える場面を決める

制作物の目的と内容が決まったら、伝え方を決めましょう。具体的には、誰に、どんな場面で伝えるか考えましょう。

ターゲットを決める

ターゲットを特定しましょう。実際にいそうな人をペルソナとして決めると良いです。例えば、20代女性の会社員、コスパ重視、都心在住で趣味は韓国旅行などです。決めすぎても後でデザインに関わらないことがあるので、デザインに関わる範囲で詳細に決めればOKです。

伝える場面を決める

いつどのような場所で読まれるかを考えましょう。例えば、会社帰りの電車の中でスマホで読まれる、などです。

PCで読まれるか、スマホで読まれるかで文字の大きさが全く変わってきたり、画面デザインや余白が変わってきます。また、歩いて読まれる場合はさらに大きな文字の表示が必要です。

 

3.伝え方を決める

制作物の目的、内容、ターゲット、伝える場面を特定することで、初めてデザインをどうするか考えることができます。
配色
・色は3色程度に絞る

多く色を使いすぎるとごちゃごちゃしたイメージになってしまいます。

・メインカラー、サブカラー、アクセントカラーを決め、60-30-10ルールを守る

60%ベースカラー(背景):脇役的な色です。メイン・アクセントカラーの妨げにならないよう、薄い色(淡い色)を使いましょう。
30%メインカラー(ロゴ/バナー/メインコンテンツ):サイトの印象を決定づける主役の色。可読性の問題から、濃い色が使用しやすいです。
10%アクセントカラー(申込みボタン等、強調箇所) :全体の5%と少ない使用量ながら一番目立つ色です。目を引く色を選びましょう。

・対称的な配色を選びコントラスト活用する

メインカラーやアクセントカラーを濃い色、ベースカラーを薄い色にすることで、コントラストを活用し、重要な部分を目立たせましょう。

・設定したターゲットや場面に合う色、目的に沿ったを設定する

ユーザーが女性だからといって安易にピンクを選ぶのはやめましょう。

赤:目を引く色。エネルギーを表す商品、バーゲンセールの広告に使われることが多い。
青:爽やかさ誠実なイメージを与える。日本人が最も好きな色
緑:衛生的なイメージを与える。病院や薬局の色に使われることが多い
灰色:どの色にも馴染む、上品で落ち着いたイメージがある。教育系や士業系の企業に使われることが多い

・色にルールを与える

「消去(DELETE)ボタン」は赤、「キャンセルボタン」は黒など、色のルールを統一しましょう。ユーザーが見慣れている色で統一するとわかりやすいです。

フォント
伝えたい印象でフォントを選ぶ

フォーマルなイメージ、カジュアルなイメージなど、フォントでサイトイメージが変化します。Googlefontから多種多様なフォントを使うことができます。

字間/行間

字間や行間を変えるだけでイメージが変わります。

・字間/行間を空ける:ゆったりレガントなイメージ
・字間を詰める:フォーマルで実務的

 

コンテンツに優先順位をつける

情報を詰め込みすぎないために、コンテンツに優先順位をつけましょう。情報を詰め込みすぎるとユーザーが、結局何が重要なポイントがわからず、サイトから離脱してしまう可能性があります

 

同一用途のものを統一する
サイト内の同じ用途のものは、同一フォント、同色、同じ大きさ、同じ装飾、同じ寄せ、同じ位置に統一しましょう。
ページを跨ぐような要素、例えばボタンに関しては、遷移に関するボタンを共通化、戻るボタンを同じ位置に配置するなどして統一ができます。

4.スケッチする

ここまで決まったら紙にスケッチをしていきましょう。
紙にスケッチをした方が、ツールを使うよりも手軽に消したり付け加えることが可能なため、手戻りを防ぐことができます。
ここで、デザインをほとんど確定させるのが理想です。
疑問点をなるべく洗い出して、次のステップに入る前にクライアントに相談すべきところは相談しましょう。

5.デザインする

デザインをほとんど確定させたらツールを使い実際のイメージが伝わるようデザインをしていきましょう。
ツール指定がない場合、初心者向けのススメのツールはfigmaです。

figmaは、無料でオンライン上で直感的にウェブデザインができるツールです。イメージはパワポ上でデザインを作成している感じです。オンラインツールなので複数人で一緒に同じアートボードを確認、デザインもできます。

 

簡潔に方法をまとめると以下3ステップです。

1.figmaのページで新規登録する

 

2. アートボードを作成し、長方形を配置→テキストや、中身を入れていく。

ほとんどパワポと同じ要領で行います。左上からテキストや図形などを選ぶことができます。テキストの日本語フォントは以下4つのみを使うことができます。下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などのツールの基本操作を紹介するデザイナー向け雑誌などがあります。