Cntlog > スキルアップ・ノウハウ > デザイン > 失敗しにくいWebデザインの制作フロー

失敗しにくいWebデザインの制作フロー

WEbデザイナーに限らずですが、Web業界は流行り廃りや進歩が早いのでスキルアップが重要ですよね。

割と私はコーディングが得意なので、それしかできないと誤解されがちですが、全然デザインもやってます。
※グラフィックデザインは苦手なので避けてますが…。

自分のデザインに自信がないって人は多いと思います。
昔私も「Web/アプリのデザインは何が正解なんだろう…」って悩んでいました。

ときにはディレクタに「これじゃない」とか、クライアントに「ださい」とか言われる事もありました。

そういった否定を避けて、プロジェクト関係者を納得させるデザインの仕方/プロジェクトの進め方を紹介します。

最初に「良いデザイン」とはなにか、「ゴール」を定義する。

デザイナーなので、デザインは全部自分で決めたいという気持ちがあると思いますが、それは失敗しやすいです。

クライアントやディレクタとの短いヒアリングで「本当に必要なもの」を作るのは難しいです。
なぜかというと、「本当に必要なもの」が誰もわかっていないからです。

例えばターゲット、「男女向け」と聞いていたけど、実際は女性9割、男性1割のコンテンツなんてよくあることです。

これを確認しないと「男女比/1:1」と誤解してデザインをしてしまします。
誰が利用するか想像できていないと、説得力のあるデザインはできないものです。

そして、もしあなたのリサーチ能力が高くて、「これは女性9割、男性1割のコンテンツ」と気がついても、そのデザインを評価する人が「男女比/1:1」と誤解していては良い評価なんてもらえません。

作り直しと言われて悔しい思いをする原因は概ねこういったコミュニケーションの不足/認識の違いからくるものです。

ですので、「クライアント」も含めて「こういう人が使うものを作る!」というゴールが見えていればそこに対しての品質を上げることがしやすくなります

ゴールを定義するためにやること

じゃあ、実際にゴールを定義するってどんな事をするかというと、まずは、関係者全員で打ち合わせです。

私の場合は
「誰がこのサービスを使って」「どんな悩みを解決させるのか」「それをどうやって知ってもらうか」というのを決めます。

間違っても「ダイエットを成功させたい20代~40代の女性に口コミで知ってもらう」とかダメです。

なんで?と思うかもしれませんが、例えば「ダイエットを成功させたい20代~40代の女性」と聞いてその人はなぜ痩せたいか想像できますか?多分年齢別に複数の理由がでてきたりしたんじゃないでしょうか?

ユーザーは「痩せたい」んじゃなくて、痩せた先に何を得るのかを想像できないと人に刺さるデザインはできません。

この辺がふわっとしてると、みんなのイメージもふわっとしてしまうので当たり障りないコンテンツのデザインを当たり障りなく作ってしまって、誰の1番にもならないって事になります。

こんな経験ありませんか?

そして「口コミ」でとありますが、口コミで広がるということはその「モノ・体験」が良かったからだと思いますが、果たして「ダイエット」が口コミで広がるのは簡単でしょうか?
まず口コミで広がる以上、商品が良かったではなく、「ちゃんと痩せれた人」しかいないわけでそれがいったい何%くらいいるのかを想像してみてください。
難なく苦労しずに痩せれる人は、他の製品でもきっと痩せれてるはずです。

実際に使ったユーザーの事を考えると、安易に「口コミ」で決めて考えるとその難易度が見えてくるので間違ったマーケティングなのが想像できると思います。
※既製の製品であれば、すでにある程度ゴールが見えているとと思うので、今回のこの商品は新商品のイメージでお話してます。

クライアントが「こう売りたい」の目線ありきで考えてたら失敗します。
ユーザーが「このサービスを使ってなぜ幸せになるか」を考えるのが重要です。

こうやってどんどん現実的な面を洗い出してくると「本当に必要なもの(良いもの)」が見えてきます。

商品を理解する

こういった打ち合わせをガッツリやっていくと、そのサービスの良いところが見えてきます。

そうなってきたら、ようやく本当の競合が見えてきます

よくある競合というと同業他社で考えてしまいますが、本当にそれが競合になるか一度考えて見てください。

またダイエットの例になりますが、「痩せる商品」だけじゃなくても痩せるためには、「ダイエットメニュー(食べ物)」だったり「運動」もありますよね。

実際にあなたが「痩せたい」と思ったときにはこういった同業以外の解決方法は思いつくはずです。
では、なぜ最終的にそのサービスが選ばれるのか考えていくと強みがはっきりと見えてきます。

もっと言うとなぜ「痩せたい」かも考えると別の競合も見えてきますが、ここでは割愛します。

商品やサービスを売るということは「1番に選ばれる」ということです

なんとなくの訴求ではユーザーにも選んでもらえなかったり、売る側目線のひとりよがりな売り方では共感されませんので、「選ばれる」のが難しくなります。

制作の途中で人に見せると良いよ

デザインをしていると、「これで良いかなー?」とか悩んだりされますよね。
でも悩んだ結果良いものが出来上がるとは限りません。

中途半端な状態で相談するのは、「恥ずかしい」といった気持ちもあるかもしれませんが人の意見を取り入れたほうが良いものが出来上がります。

人に否定されたり、批判されるんじゃないかと不安に思うのは理解できますが、それってチームの人を信用していないとも取れる気持ちなんじゃないでしょうか。

私は一人で作ることもあれば、チームで作る事もあります。

チーム作る場合は、全員を信用してるからこそチームで開発していますので、どんどん聞くようにします。
少ないヒアリングで自分がメンバー全員が考えてる事を吸収したものでデザインしてアウトプットできるなんて傲慢な考えはもっていないので、色々な目線を取り入れてより良いデザインにしていきます。

人に聞くと良いところをもう一つ上げると、早い段階で褒められる事もあります。
ざっくりイメージなものでもいいじゃんとか言われるとやっぱり嬉しいですし、テンションも上がるので進捗がよくなったりもします。

否定・批判は制作物であってあなたのことではないので、誤解をしちゃダメですよ。

一人で悩むデメリット

人に相談するようになってから、わかってきたのですが実は人に相談しないことでデメリットはあります。

例えば以下のようなものです。

  • 悩みすぎてしんどい・作業が遅くなってしまう
  • 認識違いのものを作ってしまう
  • 想定外の修正によるスケジュールの圧迫

など一人で抱え込むほうが、みんなに迷惑をかける結果になりやすいです。

誰かに相談する事のメリット

逆に相談するようになると以下のようなメリットがあります。

  • 悩んでる無駄な時間を節約できる
  • 進捗を見せれるので安心してもらえる
  • 認識違いを早期に気がつける
  • 自分だけじゃ思いつかないアイデアや課題が見えてくる
  • 客観的な意見から同じゴールを見据えたものができる(品質が上がる)

人に相談し始めることで、コミュニケーションを活性化させることでデザインの質は上げられる事が体感できます。

目的を整理する

サービス/Webサイトをデザインする際、なぜこのサイトは必要とされてるかを考えます。

目的がぶれてるとアウトプットしたものもブレてします。

よくあるのが「問い合わせ」を増やす、「商品を売る」などがWebサイトだと多くなりますがではどう「なったら」ユーザーが満足してくれるのか。ユーザーに伝わっていない情報はなんなのか考えると必要なコンテンツとその強弱が見えてきます。

誰のためのデザインなのか

ペルソナを考えろという話ではないのですが、このデザインは誰が見るのかも考えます。
目的が見えてくると、それを解決したいユーザー像が見えてきますので、何にどれだけ困っているか。

どんな気持ちでこのデザインを見るのかを考えて、文章を考えたりしています。

自分が納得することに価値はない

目的やユーザー像を作って、デザインがしやすくなったと思います。
しかし残念ながらこれは仮設であって、あなたが「こう思う」といった内容が正しいとは限りません。

これをベースにチームの人とヒアリングをして意識を共有、議論することでチーム全体での仮設に仕上がっていきます。

デザインの進め方は細かく確認

実際に私がデザインをしていくフローは下記のような感じです。(コーディングとかは別です)

  • 情報整理
  • イメージ収集
  • ユーザー像の整理
  • ラフ案・プロトタイプの作成
  • デザイン
  • ブラッシュアップ

上記のフェーズ毎にチームの人に相談をして進めていくと、着実に進めれるので戻りが少ないのでオススメです。

情報整理

情報整理では下記のような事をしています。

  • 市場の調査
  • サービス内容の整理
  • セールスストーリー案の作成
  • マーケティング戦略
  • カスタマージャーニーの作成
  • 同業のサイトを探す
  • サイトマップの作成

イメージ収集

サイトのデザインイメージを探します。

最近はテンプレートを買ったりしてそれベースでデザインをすることもありますが、私はデザインギャラリーで探すよりは、Pinterestを使って探したりします。

Pintarestはピンでまとめたものを人にshareしやすいので情報共有に便利なのと、今風のデザインがたくさん上がっているので刺激になるからです。

ラフ案・プロトタイプの作成

サイトマップをベースにセールスストーリーとカスタマージャーニーで考えたものをベースにどんどん当てはめて行きます。

最初は細かく作るよりは3割くらいの完成度で、人にこんな感じでどうでしょう?みたいな意見交換できるような状態にしています。

あまり作り込みすぎると、人から意見が出にくくなるので簡単に作るのが重要です。

デザイン

ラフ案で固まってきたものを、イメージ収集したデザインの内容に当てはめて行きます。

余白や文字サイズ、ボタンのパターンなどがこのあたりから決まっていきます。

ブラッシュアップ

細かい文言の見直しや、写真素材の最終版を入れたりします。

あると便利なツール

時間管理関係

asana

asanaはプロジェクト管理ツールです。
気に入ってる点はいくつかあるのですが、一番の特徴はプロジェクトを跨いで「今日やること」が見えるのでタスクの管理漏れが減るところにあります。

asana

GoogleHome

GoogleHomeは音声デバイスです。

集中しすぎると、すぐ時間を忘れてしますのでいつも30分区切りでGoogleHomeにアラームを鳴らしてもらっています。

ちょっと5分だけ休憩したり、まだいけそうと思ったら続けたりメールやチャットの確認など一旦そのときの作業から離れるようなタイミングを作れます。

音声デバイスですと口頭で言うだけですむので、けっこう便利です。

GoogleHome

イメージ共有

pintarest

先程も紹介しましたが、今風のデザインがサクッと探しやすいので重宝しています。

Pinterest

Sketch

私のメインのデザインツールです。

めちゃくちゃ軽くて、UIコンポーネントの設計がしやすかったり、修正もしやすいなどいたれりつくせりなツールです。

私のSketch愛については下記記事から確認してください。

現役WebデザイナーがデザインツールをSketch一択にした理由

レビュー/コミュニケーション系

slack

チャットツールです。
製作途中画面のキャプチャやURLを送ってチームメンバーに共有したりします。

slack

invision

メインで使っているプロトタイプツールです。
Sketchと連携して使っています。

各画面にピンを立ててコメントが残せるので、リモートワークなど、顔合わせせずにする場合は特に重宝しています。

invisionの内容は以下の記事で確認できます。

プロトタイプ入門!初めてInvisionを使う人向けの機能と使い方の紹介

github/gitlab

githubというとコードの管理のイメージもありますがisuueを使うと課題を立てられるのでそこで画面毎のコミュニケーションを測ることができます。

特に実装面でのコミュニケーションはgithub/gitlabなどで行うとスムーズに行えます。

github/gitlab

最後に

この方法はクライアントを含めたチーム全員が双方に信頼関係が無いとできない方法です。

人によってはこのやり方のほうが辛いという人もいるでしょう。

私はデザイナ一人が頑張っても良いものが出来るとは考えていません。

私は一人で悩まず、チームで進めるやり方に切り替えてから格段に作ったサイトが成功することが増えました。(クライアントにも褒められるようになりました)

デザインが良いもの人気があるわけではありませんが、人気のあるものはデザインが良い事が多いです。
この関係がよく見るデザインの成功例かと私は考えています。

私は自分なりのベストなやり方を見つけました。
このやり方があなたのベストにもなると嬉しいです(ゝω・)

関連記事

ユーザーの思考を見落としたデザインから見えてきたもの... ふとECサイトを見ていたら、ユーザーを誤解させるページを見つけました。 悪意があったり、ダサいからダメという類のデザインではなく、初心者が陥りやすい例かなと思いました。 また、小馴れたデザイナでも陥りやすい失敗だと思い、少し自分の中で考察してみました。 ユーザーが先入観を持ってしま...
色選び苦手な人に勧めたい、マテリアルデザインのカラーパレットの活用方法(初心者向け)... Google のマテリアルデザイン良いですよね。 特にカラーパレットがいいなと思っています。 サイトを作る際に「何色を使おう」、として色を決めても「じゃあこの色の濃いバージョン、薄いバージョン」などより複数の色が必要になってきてある程度組み合わせの検証の時間が...
ワイヤーフレーム作成用のUIパーツを作りました(DL可能)... WEBサイトを作る際に使用するワイヤーフレームのパーツ集を作りました。 Fireworksに特化して使えるようにしています。 個人・商用の利用は自由なのでディレクタさん達に利用いただけると嬉しいです。 ダウンロードする...
Sketchでワイヤー/デザインテンプレートを作る時に便利なUIキット... SketchはUIデザインのツールですが、ワイヤーやモックを作ときも便利です。 簡単すぎて打ち合わせの中で画面を作りながら話をすることもあります。 やはりクライアントさんと話を進めるときは対面しながら同じものを見てやれると話が進めやすいです。 本記事では、ワイヤーを作るときに私が使って...
Webデザイナーにオススメしたい雑誌からの情報収集... 私は日々情報収集には結構力を入れていいる方だと思いますが、最近他の人がやっていないような情報収集で結構お気に入りのものがあるのでご紹介します。 雑誌からの情報収集 みなさん、情報収集というとやはり、ネットが多くないですか? 私もネットが今でも中心です。 webデザインなど普段から...
ロゴの価格と価値についての私の考え方... ロゴはいくらなのかというアンケートがtwitterに流れてきて、普段から自分でも思ってる疑問だったので、興味があって自分の中で深掘りしてみました。 考えだしたきっかけ こちらのツイートがきっかけです。 ロゴデザインをデザイナーにお願いしようと思った時、いくらぐらいかかるとい...