WordPress仲間との勉強会での内容をこちらに記録しています。
今回はグラフィックデザイナーさんによるお話です。
デザインの4大原則
近接…仲間をぎゅっと寄せてグルーピングする 人は本能的に仲間探しをする生きもの
整列…ズレてるとそこに気が行って大事な情報が入ってこなくなる
反復…並んでいるものが急に変化することで逆に強弱をつけることもできる
対比…やるならジャンプ率をがっつりと WCAG基準も意識して
WCAG基準とは？
Web Content Accessibility Guidelines
… できるだけ多くの人がWebサイトを使いやすくするための国際ルール
高齢者・障がいのある人・一時的に使いづらい人（片手操作・明るい屋外など）でも，ちゃんと使えるWebにしようという指針のことです。
WCAGの4つの大原則
①知覚可能（Perceivable）
見たり聞いたりして内容が分かる→ 文字と背景のコントラストが十分・画像に代替テキストがある など
②操作可能（Operable）
操作できる→ マウスだけじゃなくキーボードでも操作できる
③理解可能（Understandable）
分かりやすい→ 難しすぎない言葉・予測できる動き
④堅牢（Robust）
いろんな環境で使える→ スクリーンリーダーや将来の技術でも正しく動く
デザイン・Web制作目線でよく関係するところ
- 文字と背景のコントラスト比
- フォントサイズが小さすぎない
- ボタンが色だけで判別されていない（色がついていなくてもボタンと分かる）
- 画像に代替テキストがある
- アニメーションが激しすぎない
余白
意識して空けるもの
内から外にかけて広くすると◎・あらかじめ数値を固定しておく
視線誘導の基本
ZとF 写真を使うときはZパターン
人の目は横長なので横向きに読む方がラク・速く読める
音読するようなもの(国語の教科書・子ども向けの教材・小説・物語)はじっくり精読してほしいもの…縦書き
気軽に・たくさん読んでほしいもの…横書き
※人の経験によって横縦の読みやすさは変わる
情報整理の原則
デザインは設計とも言われる
ここまで言ったらあとは想像できる というところで止める・捨てる勇気も必要
色の基本理論
色相環…類似色と補色
ベース・メイン・アクセントからのバランス
デザインができたらいったんグレースケールにしてみると見やすいデザインになっているか確認できる
目立っているところ・目立たせたいのに目立ってないところが分かる
フォントの選び方
役割・どうすれば読みやすいかで決める
ロゴはハイブランドであってもゴシックが主流になっている
ロゴ制作の流れ
①ヒアリング(なんで作るの・どこで使うの・これからどうなりたい・なんでこの仕事…を深掘り)
②調査(競合分析…そこが成功しているかどうか・どこで使っているのか)
③方向性定義 ここができていないと迷子になる
④検証 スケッチ・ベクター化
⑤最終化
まずは連想ゲームでキーワードとなる言葉を広げる→これいいじゃんを見つける→白黒でも成立するように
覚えやすい・印象に残る が大事
デザインが完成したら３日間寝かせる
その上で改善ポイントが出てきたらパターン出しをしてお客様に選んでもらう
学びになったフレーズ
＊「人は本能的に仲間探しをする生きもの」
→ ものを見るときに働く本能がどんなものか知ることで，見やすいデザインを作ることができる！
＊「じっくり精読してほしいものは縦書き・気軽に読んでほしいものは横書き」
→ 縦書き横書きでそんな差があるのは知らなかった！
＊「ここまで言ったらあとは想像できる というところで止める」
→ 伝えたいことが多くてついつい情報を盛り込みがち。でもこれを意識することで情報を精査できる！
＊「デザインが完成したら３日間寝かせる」
→ ３日経つと見えないものが見えてきたりする。これからやってみようと思いました！
デザインの基本のお話が中心でしたが，新たに知ることも多く，とても勉強になりました。
先生・Shokoさんありがとうございました！