🖼️
【備忘録】デザイン勉強会に参加してみてのメモと感想
はじめに
先日、社内でデザイナ方主催でデザイン勉強会が開催されていたので参加しました。
普段はフロントエンドのエンジニアとして仕事しているため、どちらかといえばロジック実装が主なのですが、知っておくべき内容だったので備忘録としてまとめます。
学習した内容と個人的感想がごっちゃになっていますが、ご了承ください。
1.デザインとは
- 情報を整理して、適した表現で伝えること
- ざっくりわけると「グラフィックデザイン」と「UIデザイン」と「UXデザイン」の3つがある
- グラフィックデザインとUIデザインは一部被る。それらをUXデザインは包括している
- グラフィックデザインは売るための手段
- UIデザインは使いやすくするための手段
- UXデザインは良い体験を生むための手段
- いずれも基本的にはロジック > センス
グラフィックデザイン
- 視覚のロジックを考える
- 芸術色が強い
- センスの部分もあるにはあるが、リサーチによるところも大きい
UIデザイン
- 対話(インタラクティブ)のロジックを考える
- 使い勝手を考える
- 心理学なども関わる
- 標準から逸脱しないことが好まれる
- 「なんか変なデザインだなぁ」という違和感がある場合は、何か標準を逸脱している？
UXデザイン
- 工程(プロセス)のロジックを考える
- 利用者がどんな使い方をして、どんな結果を得るのか
2.デザインができるまで
- まずは情報整理
- いつ
- どこで
- 誰が
- 何を
- なぜ
- どのように
- 次にトーン&マナー(トンマナ)
- デザインにおいて一貫性を持たせる
- ステークホルダーと認識合わせができる
- イメージを明確化
- 同じゴールを目指す
- トンマナの決め方
- ターゲット(商品・サービスの利用者)がトンマナを決める
- eg. ターゲットが主婦層だとして、その層はどんな物に接しているかを足がかりにする
- 競合を見る
- ターゲット(商品・サービスの利用者)がトンマナを決める
- 具体的なデザイン設定
- 配色
- ベースカラー70%、メインカラー25%、アクセントカラー5%
- 文章
- 文末の統一(です。ます。)
- 文章表記の統一(子供→こども)
- 英数字・記号は揃える(半角で統一等)
- フォント
- 力強い、無機質、などデザインに合うようなフォントを選ぶ
- 2,3種類に絞るといい
- 素材
- ロゴ、アイコンなど
- 余白
- 余白が小さいほど元気なイメージ
- 余白が大きいほど高級感
- 画像
- はっきり、鮮やか、ふんわり等
- インタラクション
- 世界観を表現する(軽やか、重厚感)
- 配色
3.いい感じの見た目を作るテクニック
- 4つの基本原則
- 過去に自分でまとめていた
- 近接、整列、コントラスト、反復
4.注目のWebデザイン(私見)
- シングルページ
- 手軽に情報が多く入る時代→情報を絞って1ページで分かるデザインの需要アップ
- 強い没入感を生むWebサイト
- インクルーシブデザイン
- デザインシステム
5.デザイナがよく見るサイト(私見)
SE⇄デザイナ間で仕事をする場合に、こんな情報を貰えるとありがたい
- 指示だけでなく理由、目的
- 作る上で必要な情報
- 守るべき項目と自由にアレンジしていい項目
まとめ
個人的には「デザインってセンス」と考えて諦めてしまいがちだったので、ロジカルな要素が多いことが目から鱗でした。
実務はもちろん、個人開発でサービスを考える上でも役立つ内容だったのでたいへん満足です。
今回の内容が役立ちましたら幸いです。
Discussion