2018-11-15
WEBデザインの考察とトレンド
最近はめっきりデザインをすることが少なくなりました元デザイナーです。
たまにやるときは、やっぱ楽しいし、色々なサイトを見ていると作りたくなってきます。
自分は約9年くらいWEBデザインをメインにやらせて頂いていました。
この9年でもトレンドは変わり、ユーザーの環境も変わってきたと思います。
昔はスマホなんてなかったので、スマホサイトのデザインなんか気にする必要がなかったですし、モニターの解像度も低く4：3のモニターが主流だったので、ワイドなリキッドデザインを意識することなく作成していました。
今はレスポンシブで、フラットデザイン、ミニマルデザイン、グリッドデザイン、デザイナーにしか分からない表現方法がたくさん出てきたと思います。
僕がWEBデザインに携わったときはテーブルレイアウトでデザインを作るのが主流でしたが、もうそんなサイトは無くなりましたね。
テーブルレイアウト?、何それ？という人もいると思いますが、10年と今では作り方が全然違うという事です。
これはSEOにも関係し、Googleが推奨している新しい技術で作ってあげる事が重要です。
そんなWEBサイトのデザインについてお話を少しさせて頂ければと思ます。
デザイン検討のプロセス
デザインを形にする前にやることは沢山あります。
①ターゲットの心理や感性を明確にする。
企業やデザイナーではなく、ターゲットの感性に合わせるためターゲット像を明確にします。
②ブランドイメージからトーン＆マナーを決定する。
ブランドキーワードを抽出し、イメージスケール上でのポジションを決定します。
③参考サイトから共通パターンを掴む。
ターゲットとトーン&マナーが共通する参考サイトから基本パターンを導き出します。
④技術トレンドと普遍的セオリーをおさえる。
技術的な時代背景とユーザビリティの基本をおさえ、今の時代に使いやすいUIを実現します。
最近ではターゲットをペルソナと同じように使う方もいますが、そもそもターゲットとペルソナは違います。
“ターゲット
ターゲット（標的）とは、サービスを利用するであろうユーザーを指し、
年代、男女、既婚未婚、職業、年収などのスペックでユーザーをセグメンテーション（似たようなグループに分類）し、狙いたい見込み顧客を絞り込むことをターゲティングといいます。
ペルソナ
市場が成熟し、生活者のニーズも多様になった今では、より詳細な顧客像を基にしたマーケティングが求められるようになりました。
そこでユーザーの理解を深めるために、サービスを使う、もしくは使って欲しい最も重要なユーザーモデルとして設定します。
それによって、趣味や価値観、パーソナリティーを持った架空の人物像が「ペルソナ」となります。”
また、ペルソナについては同僚が記事を書いてくれているので参考にしてみてください。
デザインイメージ例
ポップ
シンプル
和
グリッド
デザインにすべてを求めない
知り合いのデザイナーさんからの受け売りですが、デザインには大きく分けて二つの役割があります。
○デザインの役割
1.情緒的役割 良い印象を与える
想定しているターゲットに対してブランドに近い印象を与える
2.機能的役割 使いやすくする
技術的な背景と定石を押さえ 使いやすく読みやすいUIを提供する
×デザインの役割でないこと
具体的なメッセージを伝える → キャッチコピーなどの役割
サービスの魅力を伝える → コンテンツの役割
利用イメージを伝える → 写真や図などの役割
いくらデザインが良くても内容がない、写真が汚いなどでは効果は低くなります。ちゃんと役割を理解し、制作会社に丸投げするのではなく二人三脚でつくっていく事が重要です。
トレンドセオリー
制作依頼時点でのトレンドとセオリーを知っておく事はとても重要です。
情報の密度はできるだけ低く
高密度なレイアウトは、情報を見つけにくくします。
また、タブレットやスマートフォンでの閲覧を想定した時に、押しにくく、誤操作しやすいWebサイトになりがちです。
ページの長さにこだわらず、スクロールを多用
密度を低くしたゆったりレイアウトは、ページが長くなる傾向があります。
コンテンツ量と見やすさが求められるのであれば、ページを短くすることを最重要と考える必要はありません。
大きなボタン、クリック要素
ボタンや、クリックをさせるための要素は、大きくする傾向があります。
マウスで操作しやすくするだけでなく、前述のようにタブレットやスマホなどのタッチデバイスでの閲覧も想定されるためです。
装飾は控え目に、シンプルに
ごてごてとした装飾は、一世代前の印象を与えます。UIの装飾は機能的な必然性にもとづき最小限の利用とし、
コンテンツや写真にできるだけ注目させるというのが現在のトレンドです。
デザインのトレンドについては下記のサイトでも細かく説明してくれています。
来年はどんなデザインが流行るんでしょうね。
“1. ブロークングリッドレイアウト
2. フラットデザイン2.0
3. 鮮やかなグラデーション
4. ミニマルデザインr
5. 余白を活かしたデザイン
6. 非同期遷移
7. スプリットスクリーンレイアウト
8. 大胆な配色
9. タイポグラフィ
10. 左右に配置されたナビゲーションメニュー
11. 美しいローディングアニメーション
12. モバイルファーストデザイン
13. マイクロインタラクションと高いユーザビリティ”
デザイン検討時にやってはいけないこと
企業や責任者の主観的な好みで決める
企業側の主観的な好みだけで判断すると、ターゲットに本来与えるべきイメージから離れていく可能性があります。
企業内の多数決でデザインを決める
多数決が、最善案とは限りません。ターゲットを一番理解している人が責任を持って決断しましょう。
紙に印刷したデザインで確認する
紙に印刷すると、色もレイアウトも、実際と変わってしまいます。必ずPCで見て確認しましょう。
デザインにすべての役割を求める
デザインにすべての印象を負わせるのは無理があります。文章や画像の活用も想定し役割を決めましょう。
Webメディアの特性を考慮せず見た目で決める
OSやブラウザ、SEOなど、見た目だけでない制約も含めて判断しましょう。
最後に
僕の友人であり、尊敬するWEBデザイナーがいるんですが、デザイナーの仕事は軽視されがちだと言っていました。
本当はもっと評価されてもいいはずなのに、「どこに頼んでも似たようなもんでしょ？」とか、「自分でデザインはやるよ」とか言われ事も多々あるそうです。
そのデザイナーさんは、昔は大手のデザイン事務所で学び、今は独立してデザイン事務所を運営しています。
皆さんが絶対見たことあるような大手のサイト制作なども請け負っており、見事に成功しております。
その人と呑んだときに話したのですが、デザインとは実はとても身近なところにあり、個々の生活に密接しているものだと思います。
一本の線、小さな余白にいたるまで、ちゃんと意図が込められています。
一見何もデザインされていないようなシンプルなものであっても、実は細部までちゃんと考えられているものなのです。
WEBサイト制作をご依頼される際は、そんな事を頭の片隅にいれておきながら、打ち合わせをすると、とても素晴らしいWEBサイトが出来上がるのではないでしょうか。