Chapter 07

デザイン

ほげさん
ほげさん
2021.12.19に更新

デザイン

正直ここはほとんど実体験が伴わない ( 全部そうだけど ) ので、本当にかいつまんで整理する

この Book にある単語くらいは楽に扱えるようになったら、次のステップとして取り組もうと思う

デザインシステム

🤔 さっぱりなんのことかイメージがわかない

  • プロダクトのために首尾一貫したルールで編成されたパターンと方法
  • UI ライブラリでパーツのレイアウトが統一できるだけでは、プロダクトは仕上げられない
    • e.g. .btn-blue で青くできることはわかるが、このボタンが青いべきかわからない
    • e.g. Submit ボタンと Cancel ボタンどっちを左にしたらいいかわからない
  • そのためにプロダクトの方針を共有するもので、顧客ではなく開発者のためにあるもの

😗 ツールか何かと思ったけど、もっと対極的なガイドラインのように捉えた方が良さそう

Atomic Design

🤔 なんか部品にわけるやつ

  • 小さな素材を組み合わせることでページを作成するデザイン手法
  • 原子を意味する Atom に由来しており、少しずつ大きな構成を作る思想
    • Atoms ( 原子 )
    • Molecules ( 分子 )
    • Organisms ( 有機体 )
    • Templates
    • Pages

😗 単純な再利用というよりは、組み上げることで統一感を得るためのものだと感じた

Material Design

🤔 Material っぽい (?) 見た目にしようぜみたいなこと...??

  • Google が自社サービスのために提唱しているデザイン体系および手法などの総称
  • いくつかの特徴がある
    • 現実世界の Material ( 物質 ) の法則を取り入れる
      • e.g. 影や重さなどを感じさせる
    • 色の数を少なくする
      • e.g. メインカラー x 1、サブカラー x 2、アクセントカラー x 1 に絞る
  • Material Design に従った UI ライブラリの総称を Material Components と言う
    • これを使うと UI 1 つ 1 つに適用しなくても容易かつ系統的に全 UI へ適用できる

😗 Atomic Design と同じく、全体の統一感を出すための手法とガイドラインのことっぽい

ちょっとまとめ

Atomic Design とかは「HTML / CSS とかを小さくしておくと開発しやすいぞ」くらいのイメージだったけど、「ボタンについて」「ボタンの並びについて」「入力フォームについて」「ページについて」を順に統一していくデザインの手法ってことなのかな

だから Atomic Design や Material Design はデザインシステムを作るための方法論で、それ[1] があるとプロダクトの全体方針が開発者で共有できるので、ただパーツが同じだけの無秩序なプロダクトに芯を持たせることができる

ということだと理解した

デザインツール

デザインするCSS を当てる から ユーザの課題解決方法を設計する みたいに改める必要がありそう

その上で、それを円滑に行うためのツールがこいつら、ということだと思う

Figma

🤔 聞いたことない、察するにあどびてきなやつ?

  • Web ベースのプロトタイピングツール
  • ワイヤーフレームにとどまらず、ページ遷移なども確認できる
  • CSS が確認できる
  • 基本的に無料で、課金するとファイル数や人数の上限が撤廃されたりするみたい

😗 僕が書くことはないだろうが、確認したり会話を把握したりするくらいにはわかった

Adobe XD

🤔 あどびてきなやつ

  • Adobe のプロトタイピングツール

😗 今僕の周りにはないので、Figma と近しいツールとだけわかればいいかな

Storybook

🤔デザインシステム ( という概念は知らないがなんとなく近しい何か ) みたいなものか...??

  • React や Vue.js で設計するコンポーネントをカタログ化して閲覧ができるソフトウェア
  • UI コンポーネントをアプリケーションに組み込まずに独立して開発できるようになる

😗 ツールの名前だとは驚いた ( 僕が想像していたものはデザインシステムのことだった )

ちょっとまとめ

何をするためのツールか大まかに分かれば今は十分

戦略

手を広げきれなかったので仕方なくここに分類、絶対もっと難しいけど今はこれだけ

SEO

🤔 なんか検索に関係する大事なやつ

  • 検索エンジン最適化 ( Search Engine Optimization )
  • 検索結果で Web サイトが上位に表示されるように調整すること、その手法
  • ホワイトハット SEO は、ユーザに重点を置いてサイトを改善する最適化手法
    • e.g. 検索エンジンが利用できるメタデータを提供する
    • e.g. コンテンツを構造化して意味を明確にする
    • e.g. ユーザが検索するワードとサイト内のワードの一致度を上げる
    • e.g. ほかの Web サイトからのリンクを多くする
  • ブラックハット SEO は、検索エンジンを騙すようにサイトを調整する最適化手法
    • e.g. 透明な文字でいろいろなキーワードを仕込む
    • e.g. Web サイトに直接関係ない単語の羅列をする
    • e.g. 不適切な、ユーザの目には見えないリンクを大量に貼る
  • クローラは HTML を解釈しているので、SPA だと正しく評価されない可能性がある
    • e.g. Google クローラ
    • 大抵のクローラは JavaScript も実行できるので大体大丈夫らしいが、保証はないみたい

😗 検索結果に含まれるようにすること、クローラの評価方法と観点がちょっとわかればまず一歩

OGP

🤔 聞いたことない、オーストラリアの何かですか違いますか

  • Open Graph Protocol は Web ページの内容を表示させる仕組み
  • SNS や LINE などでシェアしたときに表示されるタイトルや概要や画像などを制御する
  • HTML の Meta タグを用いて設定する

😗 SEO と違い、たまたま見かけたときに開かれやすくすることと理解した

ちょっとまとめ

image

まとめ

デザインという単語の認識を根本的に改める必要がありそう

センスでやるやつだと思って避けていたけど、いろいろ読んでたら結構楽しかった
もう少し経験を積んで腹落ちすることが増えたら、また向き合って整理したい

image

脚注
  1. デザインシステムのこと、NOT Atomic Design ↩︎