# デザイン理論を身に付けたい！
(例：20210901_LT会を開催しました)
###### tags: `ブログ記事`

- [ ] 公開（ブログ公開担当者がいじるやつ）

太字斜体で書いてある内容を埋めて行ってください．
文章，画像は太字斜体の下の行に入れてください．
最初に書く時はREADMEを読んだら読むといいと思います．

<br>

## 表示されない情報
***書いた人の名前(自己紹介文と同じ名前)***
{ふくみつ

}

***記事の簡単な説明(検索した時にタイトルの下に出てくる文章)***
{タイトルにあるデザイン理論という単語。これはデザインチームで立てた、目標の一つ、
「〜魅惑な世界〜デザイン理論へようこそ。」から取ってきたものです。なんともインパクト大なスローガンですねえ。目標にしたのはいいものの、デザイン理論ってなんや？と思い、調べ、自分なりにまとめてみることにしました。
一応、共有も兼ね、目標を決めた背景から他の目標も書いておきます。

}

<br>

## 表示される部分
***サムネイル画像***
{

}

***カテゴリ***
以下の中から該当しそうなカテゴリを選択してください
※一つだけ選択してください
- [ ] 対外活動
- [ ] 活動の様子
- [ ] メンバーの趣味
- [x] NUTMEG Advent Calendar 2023

***タグ***
以下の中から該当しそうなカテゴリを選択してください．当てはまる物がない場合は適宜追加してください.
言語
- [ ] HTML
- [ ] CSS
- [ ] Python
- [ ] Go
- [ ] Ruby
- [ ] JavaScript
- [ ] TypeScript
- [ ] Dart
- [ ] Rust
- [ ] Kotlin
- [ ] Swift

フレームワーク・ライブラリ
- [ ] Ruby on rails
- [ ] Vue.js
- [ ] Nuxt.js
- [ ] React.js
- [ ] Next.js
- [ ] Gin
- [ ] Flluter

ツール
- [ ] GitHub
- [ ] ターミナル
- [ ] WSL
- [ ] Ubuntu
- [ ] Docker
- [ ] Raspberry Pi
- [ ] Figma

分野
- [ ] チームづくり
- [ ] フロントエンド
- [ ] バックエンド
- [ ] インフラ
- [x] Web-design
- [ ] API関係

---

***以下に本文を記載してください***
# 雑談から
こんにちは。こんばんは。お疲れ様です。

実務訓練は、瓶で日本酒を作る実験をしていて、麹や酵母の働きに毎日感動しております。
ちゃんとぷくぷく発酵しているんですよ。

雪も降りだし、最近寒いですね。風邪ひかないようにしなくちゃ。

# はじめに
タイトルにあるデザイン理論という単語。これはデザインチームで立てた、目標の一つ、
「〜魅惑な世界〜デザイン理論へようこそ。」から取ってきたものです。なんともインパクト大なスローガンですねえ。目標にしたのはいいものの、デザイン理論ってなんや？と思い、調べ、自分なりにまとめてみることにしました。
一応、共有も兼ねて、目標を決めた背景から他の目標も書いておきます。

# デザインチームで目標を決めた背景について
- 今までデザインチームとして目標・方針などを決めたことがなかった。→新しいことを始めようにもやることがバラバラだったり、悩むことが多かった。
- デザインチーム内での目標を決めて、その目標を達成するために各プロダクトでも活動したら、迷うことも減らせるし、団体として混乱しなくて済むのでは？？？？？
- デザインチームとしてアバウトな目標を立ててしまおう！！！！

以上の背景より、小林さんを中心として、みんなで話し合いながら決めていきました。

# 目標決定課程
情報局の目標を踏まえて決めたく、デザインチームに特に関わりのある部分を抜き出したのが↓これです。
- 情報局の目標 →学祭を円滑にする
- Vision 理想像 →他局の期待に応えるものを作る
- Value 理想像になるための行動指針 →他局の意見を取り入れられる機会を増やす
↑この辺りをベースに↓のような粒度の目標を考えるやり方でみんなで意見を出し合いました。
- UI/UX設計の知識をエンジニア・PMの人にも把握してもらう
- 期待に応えるために必要なヒアリングに注力する
- デザイン作成にかかる速度を減らして、ブラッシュアップに割ける時間を増やす
- 勉強会で学んだことをエンジニアの人たちにも広めて、巻き込む。
- デザイン面からプロダクトの使いやすさを向上する。

結果、以下４つの端的でテンポのよい目標に決まりました！

**１.巻き込む、巻き込まれる**
- デザインチーム以外の人にもデザインに興味を持ってもらう
- デザインの重要性を全局員に伝える
- 情報局員をデザイン改善に巻き込んでいく

**2.将来のための土台づくり**
- これからの後輩のためにも、デザインシステムを作る→今後の基盤を作る
- デザインの継承、システム化をもっとちゃんと行いたいねんなぁ→今後に続けられる、土台づくり的要素

**3.ユーザー第一**
- ユーザーが使う時、パッと見て分かるデザインを意識する
- ユーザーが使いやすいデザインにすることを心掛ける
- ユーザーのことをよく理解して、ユーザーにとって使いやすいプロダクトを追求する

**4.〜魅惑な世界〜デザイン理論へようこそ。**
- 論理的な説明ができるようになる
（背景からここまで、デザインチームMTの資料より）

ここで私、冒頭でもお話ししたように、時間差でデザイン理論ってなんや？ってなったんですねえ。論理的な説明ができるようになるためには、どうゆうところに着眼点を置くとかそうゆう力がいるんじゃないの？どうやって身に付けるの？と、私は思ったのです。

# デザイン理論の身に付け方について
「Webデザイン 論理的思考」とかそういう系を検索し、辿り着いたのがyukaさんのnoteでした。
[noteリンク](https://note.com/yukango/n/ne92e7e4d72da)

読み進めていくと、日常的に行っている習慣＋日々の勉強で大事にしていることが記載されており、そこにデザイン理論のヒントが隠されていました。

特に効果がありそうだなと思った習慣はサイトレビューです。デザインや実装について、サイトを隅から隅まで観察し、考察・分析、気づいたことや感じたことを写真の項目に従って記録しているそうです。


色んなサイトを見て、目を鍛えようとは思っていたのですが、どういうポイントをどういう視点で見たらいいのかなあと思っていました。yukaさんのレビューテンプレートから、サイト上の着目すべき項目を知ることができました。

じゃあ、この項目に対して、どういう着眼点を持ちサイトレビューという言語化までに落とし込んでいるのか。いくつかポイントがあるようなので、ひっぱり出してきました。

**1．自分の良いと思った感性を大事にして、なぜそう思ったのかを考える**
自分が「なんか良い、かっこいい、イケてる」と思ったデザインに出会った時は、きっとその感覚は決して間違っていないと思うのでそれを信じるようにしています。そして、「じゃあ私はなんでそれが良いと思ったのか？」を考え、分析しています。考察や仮説で良いので、この考え方を軸にレビューしていきます。
- 確かに、なんかこれいい感じだなと思うことある。全体的な色味が好きとか、フォントがいい味だしてるとか、そうゆうのが関係してそうだなと思いました。

**２. 当事者意識を持ってデザインを見る**
デザインを見る時、デザイナーさんはこの部分をどういった意図でつくったのか？仮説を立てながらみていきます。そして「自分ならどうやってつくるか？」を想像して比較することで、自分に足りなかったアイデアを知ることができます。

- 仮説の立て方が分からないということで、ムラマツヒデキさんを参考。↓
＜仮説の立て方＞
〇〇という感情を抱かせたいから■■という表現にしているのではないか？という仮説を立てる。このとき重要なのは立てた仮説を「なるほどね」と思わせる。

[ムラマツヒデキさんのリンク](https://twitter.com/muuuuu_chang/status/1551232161918771201?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1551232161918771201%7Ctwgr%5E3ca40b7995c713690344ff93003b00ef63f001aa%7Ctwcon%5Es1_c10&ref_url=https%3A%2F%2Fnote.com%2Fyukango%2Fn%2Fne92e7e4d72da)

**3.言語化にするのが難しい時は、「逆にこれが違うデザインだったらどう思うか」を考える**
実際、考えても言葉に困る時が多々あります。そういう時は、これがもしこんなデザインだったらどう思うかを想像するとグッとわかりやすくなる気がします。例えば「この半透明のあしらいがベタ塗りだったら…」と想像してみて、きっと野暮ったくなるなと感じたら、「半透明にしていることで抜け感が出て垢抜けている」という言葉に変換できると思います。(ゆえに抜け感と言う言葉を多用しがち)

# 感想や気づき
- 訓練あるのみ

- なんとなく、着眼点や考え方が分かったかなと思います。デザイン理論は奥が深いと思いました。

- なんで？どうして？を深掘りし、それを言語化し、落とし込むことで自分のものにできるのではないかと思いました。

- 全てのデザイン(例えば、クリックボタンやその配置、サイト全体の色味など)にちゃんと意味があって、デザインされているのだと感じました。

- yukaさんの項目に従って、実際にサイトレビューしてみましたが、難しかったです。訓練し、自分が作成するときに、こういう意図があるからこのデザインなのだよと言えるようになりたいです。

# 最後に
こういうところも意識しているよとかあったら教えて頂きたいです。

ここまで読んでくださりありがとうございました。

今年ももうすぐ終わっちゃいますね。今年楽しかったなぁ。（まだまだ楽しむけど！）
少し早いですが、メリークリスマス and よいお年を〜。

おしまい。

****