SUNABACOおんらいん1st15日目（webデザイン概論）

2020年5月22日 22:18

今日は配色、レイアウトなどの概論でしたー

デザインは技術
「人の心を知り、ユーザにどう思ってほしいか、何をしてほしいかを考えて、それを実際にユーザが（五感+α）で受け取れる形に落とし込む」
色や形を描き見た目をよくするのはその一部でしかない
— HNZgraph🦁おんらいん1st (@hnzgraph) May 22, 2020

「デザインとは機能である」
どんなものであれ、何かの機能を極めたモノには特有の機能美が宿る pic.twitter.com/bXNC5KoCRg
— HNZgraph🦁おんらいん1st (@hnzgraph) May 22, 2020

アフォーダンス
機能の想定が容易なできそう感でユーザの行動を導くデザイン
— HNZgraph🦁おんらいん1st (@hnzgraph) May 22, 2020

デザインにはすべて理由がある、理由を持たせる
目的を達成するために機能とデザインが必要

デザインの目的は「いけてる」物を作ることではない→アーティスト

デザインの目的はユーザに機能（目的）に沿った行動をとってもらうこと→デザイナー、クリエイター
— HNZgraph🦁おんらいん1st (@hnzgraph) May 22, 2020

UserInterface(ユーザーとの接点)を通してどう伝えるか
ユーザが欲しい情報と与える情報、情報量、ユーザ体験、迷う点、できそう感は適切か？
— HNZgraph🦁おんらいん1st (@hnzgraph) May 22, 2020

User eXperience（ユーザ体験）
製品、システム、サービスなど）の利用を通じてユーザーが得る経験
— HNZgraph🦁おんらいん1st (@hnzgraph) May 22, 2020

デザインの知識がなくても参考になる配色パターン見本サイト+アプリ14選https://t.co/tAcai4NCzv
すごくわかりやすい配色講座
— HNZgraph🦁おんらいん1st (@hnzgraph) May 22, 2020

配色デザイン
①使う色は三色ぐらい（比率はベース70：メイン25：アクセント5）
②メインカラーを選ぶ（ブランドイメージに当たる色、明度が低いほうが扱いやすいex緑）
③ベースカラーを選ぶ（白や薄い色、明度が高い色が扱いやすい※メインカラーの明度を上げた色）
— HNZgraph🦁おんらいん1st (@hnzgraph) May 22, 2020

④アクセントカラーを選ぶ（ワンポイント、色相環の反対、補色を選ぶ）

③白、②緑、④紫の例
→ピッコロ大魔王、バズライトイヤー、スーパーのネギ
— HNZgraph🦁おんらいん1st (@hnzgraph) May 22, 2020

4色目を足したいとき

カラーの分割をする
（メイン25→12.5+12.5アクセント5→2.5+2.5）

カラーの分割するときは
「色相」か「トーン」は同じにする

「色彩論」
— HNZgraph🦁おんらいん1st (@hnzgraph) May 22, 2020

色相環の理論
「色相環」とか「トーン」ってどう使うの？配色のコツは「ジャッドの色彩調和論」https://t.co/lPc8hFOwO6
— HNZgraph🦁おんらいん1st (@hnzgraph) May 22, 2020

ジャッドの色相調和論
・「秩序の原理」＝一定の法則によって規則的に選ばれた色は調和する
・「なじみの原理」＝自然界にみられる色の変化や、見慣れている配色は調和する
・「類似性の原理」＝共通性がある色同士は調和する
・「明瞭性の原理」＝明快なコントラストを持つ色の組み合わせは調和する
— HNZgraph🦁おんらいん1st (@hnzgraph) May 22, 2020

レイアウト
伝わるデザインhttps://t.co/iQRk3fL6YW
— HNZgraph🦁おんらいん1st (@hnzgraph) May 22, 2020

ルール1/余白をとる
paddingもマージンも

ルール2/揃える
コンピュータのガイド機能、最後は自分の目、BOX法

ルール3/グループ化
パラレリズムを整える、色を付けてグループ化

ルール4/コントラスト
ジャンプ率（本文の文字サイズに対するタイトルや見出しの文字サイズの比率）を高める
— HNZgraph🦁おんらいん1st (@hnzgraph) May 22, 2020

改めて

デザインは技術
「人の心を知り、ユーザにどう思ってほしいか、何をしてほしいかを考えて、それを実際にユーザが（五感+α）で受け取れる形に落とし込む」
— HNZgraph🦁おんらいん1st (@hnzgraph) May 22, 2020

今日のまとめデザインとは…

何のためにデザイン…
常にお客さん目線です。
世の中のすべての商品はUI/UXを体現している。

UI/UXとはhttps://t.co/dIH13y7NFl
— のすけ@おんらいん1st受講中 (@nosk098) May 22, 2020

「デザインは思いやり。人の心をシリ、ユーザーに何をしてもらいたいのかを考え、形に落とし込む」　
世界の見方がまたひとつ広がったな〜　ふわふわ感じていたことを明確に言葉に落とし込んでもらった感じだ#おんらいん1st #SUNABACO
— メッケン＠SUNABACOおんらいん1st夜D (@mecken2) May 22, 2020

任天堂のデザイン面白い！！
『将棋3席、麻雀5席』
見ている人が楽しめるデザイン。
…そういえばマリカーもスマブラも、見てるだけでも楽しめるかもｗ#おんらいん1st #任天堂デザイン https://t.co/o7HYcq2uaP
— のすけ@おんらいん1st受講中 (@nosk098) May 22, 2020