web デザイナーになるには
この4大原則は基本中の基本です。
- 関連する情報を近くに
- 余白、高さ、幅は全て均等に整列
- 重要な部分は強く、他は弱く
- 反復する必要がある場同じリズムで整列
これらの基本は経験を積めば「とりあえずきれいには見える」基準として自然に身につくかと思います。
本記事では、技術的な基礎より、仕事で役に立つ考え方を記述します。
ux とは
WEBデザインをやっていくとよく耳にするUX。
良くわからず使ってる方も多くいます。
UXとは体験そのものを指します。
なので、正直デザインが入らなくてもいいモノだと思っています。
例えば、極端な例ですが、好きなアーティストのブログを読んでいたユーザが、このアーティストの声聞きたいな、と思っていたら急に画面が真っ暗になって音声が再生される。その後アーティストがあなたの名前をささやいて商品を紹介する。。。。。とか。。。
デザインによってこの「体験」そのものを作り出すことを総称して「ＵＸ」と呼びます。
ui とは
ＵＩとはそのままユーザーインターフェースの事で、例えばパソコンならキーボード、テレビならリモコンの様にユーザー体験を実現するためのタッチポイント、ユーザと媒体を繋ぐものがＵＩです。
web デザインの流れ
ではこのＵＸ、ＵＩをどの様に実現したらいいのか。流れを説明します。
事業戦略と価値定義
まずは事業戦略の理解が必要です。
価値あるデザインを行う為には重要です。
使えるデザインとは、そのデザインによってユーザに体験を与えなくてはいけません。
その為に、デザインするものの立ち位置、市場動向や、顧客動向、業界動向、技術動向、競合分析、勝筋分析、ニーズ分析、差別化が必要です。
どういう市場で、そのデザインを目にする人はどう考えるか。
競合が多い中で勝ち残るためにはどのようにデザインしないといけないのか、考え方の元になります。
又なぜ作るのか、何を顧客に提供したいのかの「価値」基準も必要です。
appleの様に「Think Different」だけでも良くて
「こんな世界を体感してほしい」が大事です。
例えば、ビールのサイトを作ろうと思った時
- 市場：飽和状態。ノンカロリー系が流行ってる
- 顧客動向：ノンカロリー系は飽きてきた
- 業界動向：新種のビールを模索してる
- 競合動向：リバイバル商品が多い
- 勝ち筋：新技術による新フレーバー
- ターゲット特徴：ビールに飽きてきた30代後半
- ニーズ：特別な日に味を楽しみたい
- 提供価値：いくら疲れてても持てる幸せな時間
の様な状態の場合、UIとしては
- 今までの一線を画す（よくあるデザインじゃないもの。4大原則すら崩した方がいいかも）
- 明るい系
- 線はシャープな方が特別感、高級感が出る
- リバイバル感も多少感じさせる
- 何か面白い要素や安心感も必要そう。犬の写真とか
- カラフル系もいいけど特別な日を演出するカラーパターンも必要
UXとしては
- 温めてもおいしい
- 自分の好きなフレーバーを作れる
- 瓶の真ん中に何かはめられるようになってる
- 自販で商品を買うとLINEでメッセージが来る
- オリジナル商品をボタン一個でOEM出来る
と、上記の戦略、UI、UX例で5分位で適当に考えたものです。いまいちな点ありますが。ご了承ください。
とくかく言いたいのはこんなことを兎に角根詰めて考え続けないと価値のある資産になるデザインとは言えません。
ユーザストーリー
UX、UIとも密接に関係しますが、ユーザがどういう経路でその商品を手にし、どういう動機でサイトに訪れて、どういう人が買うのか、ストーリーを考える事も大事です。
望むストーリーでもいいです。
なるべく創造するターゲットが本当に行いそうな行動を想像します。
例えば、今回の例で行くと。
①お酒に飽きてきたし最近あんまり酔わなくなってきた
↓
②近くのスーパーで何か新しそうなお酒が無いか探す
↓
③特になさそうなので、お酒 新しいで検索する
↓
④販促サイトを目にして面白そうだと思って記憶する
↓
⑤スーパーで目にして思い出して買う
この時デザイン的には下記の事が分かります
②で目立つ商品パッケージが必要
③「お酒 新しい」の答えが出せるサイトが必要
④「なんか面白そう」なサイトの作り
UI設計
戦略やターゲット、ストーリーが見えてきたら次は実際にUIを作っていきます。
最初にサイトマップ、次にワイヤーから作ります。
作り方は
- 情報の順番、優先度、表示形式は何か
- 使いやすい、わかりやすいサイト構成は何か
- 必要な情報・不要な情報の取捨選択
- ナビ・階層化検討
- その画面で一番とってほしい行動は何か
を意識しながらまずは□と見出しだけの簡単な骨組みでOKです。
ＯＯＵＩを用いる？
業務システム系の、機能がいくつかあるサービスのデザインをするときはOOUIは向いてますが、
単純なLPを作る場合はあまり向いてないと思います。
ＯＯＵＩはまずオブジェクト（酒、つまみ）みたいなものがあって、それに対して何をするかのアクション群（食べる、焼く、投げる）が紐づく形で、ユーザの操作感を交通整理するための物です。
デザイン
骨組みが出来てきたら
- メインカラー、サブカラー
- フォントの種類
- 写真
- レイアウト
- モーション
- 文言・ラベル
- ジャンプ率
- 表現のルール検討と統一
- トレンドデザイン調査
を一個一個今までの作業（戦略、UX、UI検討）を元にして詰めていきます。
詰めた内容をひとまとめにルール化したものがデザインガイドラインです。
デザインの評価
デザインを評価する基準も必要です。
今ではヒューリスティック評価の様な指標もあります。
また、簡単にプロトタイプ（XDのプレビューでも十分だと思います）を作って何人かに見てもらうこともできたらしたいです。
その後、アクセスログ等計測するためのタグ等を設置したら
後は実装して公開。ログを追って成果を確認していきます。
ここまでが大まかにですが1人前のデザイナーになる為の考え方の流れです。
プロのwebデザイナーであればこれも当たり前の知識で
これらを更に深堀した経験や実績、知識が必要になってくると思います。
とはいえこれらを知ってる、知らないではデザイナーとしての価値は全く変わると思います。
BLOG
ブログ記事
