フリーランスとセルフマネジメントby アキユキ社長

フリーランスのお役立ちブログ+モチベーションを高く維持するためのセルフマネジメント術

Webデザイナーになる人向け、Webデザインの流れと手順

初心者のWebデザイナーは、Webデザインの流れまで考えたことがない人も少なくはないかもしれません。

ただ、WebデザイナーにとってWebデザインの流れは大切で、ここを間違うと後工程で重要なことに気付いて最初に戻ったり、非効率なWebデザイン開発になります。

Webデザイナーによってやり方が異なる部分はありますが、この記事では僕が意識しているWebデザインをする時の流れと手順について解説します。

Webデザインの大きな流れ

まずWebデザインの流れを大きく5つに分けると次のようになります。

  1. 案件概要の整理 / 競合調査
  2. デザイン方向性定義
  3. ワイヤーフレーム作成 /ラフデザイン
  4. デザイン詳細作成
  5. デザインブラッシュアップ

「さぁデザインをやるぞ」と言っても何の情報もないところから良いデザインは生まれません。Webデザインはあくまでも商業デザインですので、ロジカルに考えることが必要です。

そのために案件概要をしっかり整理した上で、デザインの方向性まで予め定義してからようやくワイヤーフレーム作成に入ります。

そしてワイヤーフレーム、ラフデザイン作成を経て、デザインの詳細を詰めていきます。

それでは実際のデザイン手順の詳細をご紹介していきます。

Webデザインの詳細の流れと手順

ここでご紹介する流れは、意外とステップが長いように感じるかもしれませんが、実際の流れです。逆に言うとこのような細かい手順があるからこそ、単なるデザインセンスだけではない戦略的なデザインを作ることができるわけで、結構成果を出せるかどうかのポイントになります。

1.案件概要の整理

1−1.ターゲットの整理

商業デザインですので当然ターゲットはいますよね。

誰に何を伝え、そのターゲットにどうしてもらいたいのか?

これを定義しなければデザインをどういう方向性にしていくべきかも定まりません。まずはここをかっちり決めていきましょう。

1−2.要件整理

Webの要件としてどのようなコンテンツや機能が必要なのか、要件を整理していきます。要件整理の仕方は端折りますが、これができていないと「デザインの中に必要なコンテンツや機能が入っていなかった」となり、出戻りが発生します。

1−3.競合調査

競合調査は比較的早い段階で実施します。

競合調査をするとアイデアが色々出てくるので、デザインの方向性を決める前に必ずやります。この段階で実施することで、

最初から必要なコンテンツや機能を十分に検討した上でデザインに盛り込むことができます。

2.デザイン方向性定義

デザインコンセプト策定

ターゲットに対してどういう印象を与えるデザインにするのか、コンセプトをまとめます。そしてコンセプトにあったキービジュアルや他サイトの類似イメージを集めるなどして、コンセプトを視覚的に明確にしていきます。

メインカラーやサブカラーなどもこのフェーズで決めます。

3.ワイヤーフレーム作成 / ラフデザイン

3−1.構造作成

全体のサイト構造を検討します。いわゆるサイトマップの作成と、各ページの中身にどのようなコンテンツを入れていくのか整理しておきます。

3−2.ワイヤーフレーム作成

作成した構造を元にワイヤーフレームを作ります。ワイヤーフレームは僕の場合は手書きでざっくりしか作りませんが、その程度でいいと思います。

目的としては次の2つなので、そこを押さえておけば問題ありません。

  • ワイヤーフレームを作ることでユーザー導線を先に検討しておく
  • コンテンツやパーツの配置を具体的なデザインを決める前にある程度決めておくことで、効率的にデザインを進める

特にユーザー導線を検討することは重要な要素なので、ここはしっかり確認しておきましょう。

3−3.ラフデザイン

これ以降はさらにWebデザイナーによってやり方が大きく変わると思いますが、僕の場合は、トップページをヘッダーからフッターまで一旦ざっくり作った上で、デザインの方向性に間違いがないかを確認します。

ざっくりといってもレイアウトの細かいところからサイズ感もしっかり作ります。細かい装飾はざっとしか作らない感じです。

僕の場合、ヘッダーから丁寧に1つ1つ作り上げていくより、一旦ざっと作ってしまって全体感を確認した方がインスピレーションも湧きやすいのでそうしています。

4.デザイン詳細作成

ラフデザインの時点で、レイアウトの細かいところやサイズ感もほぼ決まっているので、あとは細かい装飾をやっていきます。逆にラフデザインで作っていた装飾をレスしていってシンプルになる場合もあります。

また、全体を見渡して統一感、メリハリ感などが問題ないかをチェックしていきます。

このやり方のいいところは、一気にヘッダーからフッターまで細部含めて作り込んでしまうと、途中で方針転換する場合にかなり面倒ですがそれを回避できることです。細部は全体感ができてからやった方が効率的だと思います。

5.デザインブラッシュアップ

デザインの詳細も終わったら、

できるだけ1日余裕を空けて翌日改めてデザインの確認をします。

自分でデザインをしてすぐの時は「これが最高だ」となりがちなんですが、1日空けると結構冷静に判断できるので、意外とNGポイントが見つけやすかったりします

ここで気付いたことをブラッシュアップしていってトップページのデザイン完了です。トップページが終わったら「3−3」から同じ流れで他のページも作っていきます。

Webデザインの流れと手順を考える時に大切なことまとめ

デザインの手順で大切なことをいくつかポイントを絞って振り返ります。

  1. デザインの方向性を決める前にしっかりターゲット選定や競合調査をやり込む
  2. ワイヤーフレームは簡単で良いが、ユーザー導線を検証する目的があることを忘れない
  3. 全体チェックではデザインの統一感やメリハリ感にも注意しながら確認する
  4. 最終ブラッシュアップはデザイン作成後1日空けてからゼロベースでチェックする

手間がかかるようですが、実際に何本かクライアントワークをこなせばすぐに慣れますし、自分のスタイルも出来上がってくると思いますので安心してください。

参考にしてみてください(´ε` )



プロフィール

田中亮行
アキユキ社長

フリーランスWebデザイナー・エンジニア歴6年。主に企業のホームページの企画・デザイン・開発をしています。

ここでは自分の経験から感じたフリーランスにとって役立つ情報を発信しています。また、「やりたいことをやれる自分になりたい」そのために必要な“セルフマネジメント”についても執筆しています。フリーランスとしての生き方にも関係してくることが多いので参考にしてもらえたら嬉しすです(´ε` )

おすすめ書籍紹介