ウェブデザインの思考法
動機:デザインをかじっておきたい
デザイナと会話できるようになりたい
なるべくセンスじゃなくてロジックで理解したい
資料作成等コミュニケーションの参考にもなるはず
⇛下記3冊読んで、ウェブデザインの思考法をメインにしてまとめた
https://gyazo.com/b1801acd55a90e155a76db3a2abcc494
『ウェブデザインの思考法』はじめに
「時に作業者が”センス”によって語り、承認者が”フィーリング”によって評価する、不幸で不毛なウェブデザイン。本書がそんな状況を改善し、ウェブデザインについて誰もが平等にロジカルに語ることのできる”共通言語”の一端を担えるようになれば幸いです。」
目次
本のまとめ
ウェブデザインの定義
機能性
情緒性
実際のデザイン作業
デザイン時事ニュース
ダークパターン
まとめ
ウェブデザインの定義
ウェブデザイン = 機能性と情緒性の設計
(ウェブデザイン=機能✕印象)
https://gyazo.com/3f0fb8f6828f75a46fd28637a063343e
8つのデザイン要素
配色:色相、色数、彩度、明度、コントラスト
タイポグラフィ:出力方法、サイズ、行間、文字間、ウェイト、書体の種類
写真・イラスト:静止画/動画、写真/イラスト、サイズ、形式、比率、被写体、トリミング、アングル
アイコン:出力方法、モチーフ、デフォルメ、配置箇所
シェイプ(ボタン、フォームなど):出力方法、サイズ、形状、ボーダ、角丸の大きさ
デコレーション:シャドウ、テクスチャ、光彩、ベベル・エンボス(立体加工)、グラデーション
インタラクション・アニメーション:アクションに対するリアクション
レイアウト:種類(固定・リキッド)、サイズ、余白・距離、反復、整列、位置、アングル
変化によって引き起こされる反応
機能性 = 「使いやすい」「早い」など
情緒性 = 「かっこいい」「かわいい」など
⇒いかに8つのデザイン要素をコントロールして、望ましい機能性/情緒性を引き出すか
機能性
https://gyazo.com/787b43f268803de700258f05ad2d2e6b
近接:関連する項目をまとめてグループ化する
基本目的:組織化
https://docodoor.co.jp/2017/wp-content/uploads/2019/03/sisen2.jpg
整列:全てのものを意識的に配置する
基本目的:一体化と組織化
https://docodoor.co.jp/2017/wp-content/uploads/2019/03/sisen3.jpg
反復:何らかの特徴を作品全体を通して繰り返す
基本目的:一体化と視覚的なおもしろさ
https://docodoor.co.jp/2017/wp-content/uploads/2019/03/sisen4.jpg
コントラスト:読者の目をページに引き込むため、作品のさまざまな要素にコントラストをつける
基本目的:ページにおもしろみを作り出す、組織化の支援
https://docodoor.co.jp/2017/wp-content/uploads/2019/03/sisen6.jpg
基本的に全て意識すべき
ただ、各項目をどの程度考慮するかはプロジェクトの性質次第
高齢者向けなら視認性を重視する、など
情緒性(印象)
https://gyazo.com/0a2c8382a7b57f2c2dbb80c19efafc54
実際のデザイン作業
https://gyazo.com/1f9d5fac2d2b94082d31405b26b151ce
①調査・分析
対象クライアントとその特徴
対象の業界
サイトの種類(ECサイト、コーポレートサイトなど)
対象のユーザ
デバイス
デザインの目的・背景・課題
その他(担当者の希望、バリエーションの数など)
②基本方針立案
機能性:何をどの程度考慮するか
情緒性:軸のどちらにどの程度設定すべきか
③詳細方針立案
8つのデザイン要素に落とし込む
④可視化
ビジュアルサンプルを作る
= ユーザーが無意識に、自身に不利な行動を取るように誘導するデザイン
https://gyazo.com/4e3af5a8e796200d862f7e0971be20fc
ダークパターンの例
「現在◯人がこのサイトを見ています!」「割引実施中!残り9:50」のような煽り
登録は簡単なのに退会が非常に面倒である
往復便や追加購入のボタンが正常ボタンとして表示されている
最近ちょくちょく新聞で見る、デザイン関連時事ニュース 「ユーザーを騙し、操ることで、オンラインサービスにとってメリットのある行動をとらせようとしている。一般的に、ユーザーにとって望ましくない結果をもたらすことが多い」
日本ではまだ認知度/顧客の意識が低く、対応圧力があまりない
しかし、今後意識が高まってくる可能性も高い
知っていればある程度抵抗はできる
まとめ
「印象や機能をもって実用的に使われる”デザイン”と、自己表現をメインとする”アート”は別物です」
ある程度のデザインへのロジカルな理解をもって、いいものをたくさん見て知っておきたい
悪いものも知って、避けたい