後で整理できたら整理する
個人的に参考になったデザインシステム 4選 (UI/UX)
(4選って少なっ)
エンジニアであっても、ある程度のレイアウト能力が求められていることを最近実感しています。
(というか、前からレイアウトとかはできる限り意識して、プロジェクトに関わっていたんだけど)
良い機会なので、Web 開発者から見て参考になったデザインシステム 4 種を紹介します。
デザインシステムを紹介しているところは度々見かけるのですが、デザインシステムはスマホや、デスクトップアプリケーションも対象に含まれているケースもあるため、自分用に
「Web システムに特化した形で、各コンポーネントの意思統一ができそうなもの」
に絞ることにしました。
サイトを貼ったところで、結局「どう見ればいいんだ？」となりがちなので、きちんと辿り方や参考になった点も個人的なメモとして残していきます。
デザインシステムとは？
上記サイトからの引用です。
デザインの基準やドキュメント、原則に加えて、基準を達成するためのUIパターンやコンポーネントなどのツールキットをすべて備えたもの。 https://uxmilk.jp/72387
ここでは UI パターンやコンポーネントのツールキットを見て「お、これ使おう」と安直に飛びついてしまいそうです。分かりやすいしね。
スマートだったり使いやすいレイアウトを追求していく場合、実は用途に合わせたコンポーネントの選定の方が大切なのだと最近気づきました。
ですので、各デザインシステムの原則が掲載されいる個所を重点的に見ていくことにしましょう
Material Design (Google)
もう超有名ですね。デザインシステムといえば、Material Design と言っても過言ではないくらい有名かもしれません。(当社調べ)
私も名前は聞いたことあります(そしてブックマークしてサイトの内容を読まなかった)
トップページから Material Design guidelines を辿ると原則が記載されていて、基本方針が示されています。
個人的には Components に記載されている各コンポーネント毎の使い方(Usage)や原則(Principles) が非常に有用だなと思いました。
https://material.io/components/cards#usage
Fluent Design System (Microsoft)
いわずとしれた Microsoft が公開しているサイトです。
こちらは、Web/Windows/iOS/macOS/Android/Cross-platform と様々なプラットフォーム向けに提供されていますが、 Web に特化するので、Get started with web が対象です。
こちらの「Styles」はカラーやアイコン、タイポグラフィに関する記載がありますが、恐らく Web 開発者として参考になるのは「Controls」の方だと思います。
「Best practices」の個所で用途に応じて「Do」と「Don't」に分かれていて、Control の用途の理解を深めることができます。
Lightning Design System (salesforce)
業務システムに携わる身としては一番身近に感じられたサイトでした。
いかんせんデザインシステムを眺めていて、「こんなシンプルなサイトに仕立て上げるのがそもそも無理ゲー」ってなっていたところに、 Lightning Design System を見つけて、「ほしかったやつだ！」と思わず両手を挙げてしまいました。
Design Guidelines の Layout を見てみると、情報の並べ方のパターンが記されています。
情報が多くなりがちな Web アプリを作る際に役立ちそうです。
Atlassian Design (Atlassian)
こちらは Confluence や Jira で有名な Atlassian のサイトです。
Atlassian の製品自体は結構余白が多い印章ですが、「文章を読みやすくするための工夫」は一番努力されているように想像できます。
Benefits modal - Atlassian Design を例にすると、一番最初に「何のために使うのか」が定義されており、画像に番号が記されて、それぞれに補足が入っている形式を取っています。
コンポーネント内の部品にもきちんと意味を定義していて、とても参考になります。
最後に
いかんせんあまり意識せずに様々なコンポーネントを使ってきた身としては、「あー確かにそういう使い方してたわ〜」「全然用途と違う使い方をしてた(´・ω:;.:...」 と思い馳せることが多かったです。
曖昧になりがちな UI の実装において、各社がこうやって方針を示してくれると、道標となって自信を持ってレイアウトやコンポーネント選びができるようになる気がします。
おじさんになって気をつけていること
(健康増進的な話ではないです)
自分がある程度の年齢になってきて、年下の方だったり、同じ職場の人に対して「あ〜、なんか好きに話してたときと違うな」と思った点を書いておく。
自分の話を聞かれない限り極力しない
- それなりに語れることが増えるのでとにかく自分の身の上話とか、たしかに聞かれればそれなりのボリュームで話すことはできる
- けど、そんなに「自分が、自分が」となるより、人の話を聞く側に徹底したほうが圧倒的に新発見が多い
- 結局自分の身の上話をしているときには「過去」の話なので、未来に目を向けたほうがよほどいい
「で？」となる話は控える
- 自分がまだ幼いときには自分の考えていることを伝えるためにとにかく「こんなことがあって、あんなことがあって」と経緯から話しがちだったが、これを今の年齢でやっても何にもならない
- それに加えて、要約して伝えられる方がよほど時間の使い方としては有意義だし、幼い時にもそういう考え方で話せればよかったな〜と思う
- 例えば、相手から質問されてすぐに答えを返したりするのではなく、相手に対して「それはなんで疑問として思ったの？」とか一呼吸置いたり、脊髄反射で物事を言わず、一呼吸置いて提案をすることで次にどんな話の流れが展開できるかを想像する、とか。
年齢を言い訳にはしない
- 「おじさんだから」というコメントは受け取り手に対して困惑以外何ら生まない (困惑すらないかも)
- 職場だったら基本的には対等な立場なのだから、フラットに接する
- 玄人感を出したところで暗黙的なプレッシャーになったり、単なる「痛い人」になるかもしれない
と列挙してみたけど、大した話じゃなくていわゆる「傾聴」という話なのかもしれない。
色々と経験して話したいこととかもあれど、そういうのは同年代でキャッキャしてる程度がちょうどいいのかも。
本谷 有希子さんの「ぬるい毒」を読んだ感想
読んだ人前提での感想を書くので、まだ読んでない人は原作を読んでからのほうがよいです。
作品紹介や、どんな登場人物がいるか、などは他の記事にお任せ。
ただ単にこの作品を通して、私の感想を書いていきます。
続きを読む個人的なテクノロジー関係 2019 年振り返りと 2020 年でやりたいこと
年始に自分が「こんなこと思っていたんだ〜」と後で見返すための楽しみを作っておこうかなと思って書きました。
2019 年振り返り
できたこと
Re:Backlogs のリリース github.com
TD4 をブレッドボードで作った (こ、これ今年だったのか) www.saino.me
Vue.js の体系的な知識の取得 (個人ブログ) www.saino.me
SPA に関して思うことの執筆 (個人ブログ) www.saino.me
最近の WordPress 周辺事情の技術習得と結局はてなブログに移行した (Google AdSense 周りもこれでなんとなく分かった) www.saino.me
Qiita 記事執筆 3本 (ちょっと少なめ)
- VS Code Remote Development の方法が分かったのが一番よさげ
OSS プロジェクトの commit
- 軽微な bugfix が結構ある
- diff2html への commit が割と印象的
kubernetes 関連は引き続きキャッチアップ中
- Istio を試してみるところまではやった
- CRD までは手が伸びきっていない気がしないでもない
Storybook 関連の調査
- 調査だけ。体系立ててプロジェクトに適用ってところまでは至っていない
できなかったこと
- 個人プロジェクト vscode-erd + erd-go + graphviz-dot.js のメンテ qiita.com
- ot-es.js のメンテ github.com
- React 関連のキャッチアップ
- 結局 Hook までの理解が至っていない
- TypeScript 関連のキャッチアップ
- これもなんとなく使っている感が否めないので、どこかで一気にやるかな〜
- ネットワーク関係の記事執筆
- ネットワーク関係の技術に特化した記事は書いてなかったかも。↓は書いたけど、さすがにハードウェア方面に寄り過ぎというか ...
- なぜ現代の通信方式はパラレルではなく、シリアルが主流なのか調べてみた - saino.me
2020 年でやりたいこと
何か作るやつ
- (優先度高) Re:Backlogs の機能追加、改善
- 主要機能として SAML、LDAP 認証対応と Multi Drag & Drop に対応する
- rails-erd と Github Actions 使って ER 図も出せるようにしよう
- MiniDiff (仮) の実装と公開
- MiniDiff (仮) gem を作ることを考える - saino.me
- 記事は書いたので、あとは書きまくるだけか
- (優先度低) 個人プロジェクトのメンテ
- とりあえず、現状に合わせた Issue 潰しを時間が見つけられたらやる
- 需要に合わせて柔軟に
- WSL 2 リリースされたら Windows 環境上での開発環境構築方法を体系立てる
- とりあえず JS と Ruby 周りかな。Go も救えるようにしてみたいけど
- ネットワーク関係のユーティリティプロジェクトを 1 つ何か考えてみる
- シンプルでいろいろな機器に対応可能なもの
- ログインしてコマンド実行するだけ、とか
- Prometheus の exporter との関係性を考えながらバランスを取れるようなもので
- もしくは Draw 2D Touch と MRTG を組み合わせて、それっぽいトラフィック画面が閲覧できるアプリとか
- 個人の技術レベルをアピールするようなページを作る
- 自分は何ができて何ができないのか、ひと目で分かりづらい気がするので、とりあえず自己紹介がてらページを作ってみる
- 記事執筆 or 個人的な発信をもう少し増やす
- テクノロジーとは若干それることがあっても、個人的なことを日々書いておく
お勉強 & 趣味
- Go 周辺事情の再キャッチアップ
- パッケージ管理周りが変わったので、そこらへんの知識をアップデート
- CHIP-8 エミュレータ作ってみる
- 個人的に楽しそう
- React エコシステムキャッチアップ
- そろそろ固まってくる頃だし、覚えておいてもよさそう
- 複雑な Web UI の技術習得
- JavaScript + SVG or Canvas でゴニョゴニョする
- インタラクティブな UI 作れるのは素敵だよなぁ〜と
- Git の内部構造の理解
- 自分で作ってみる
- Adobe Illustrator で何かイラスト描く
- やろうやろうと思って勇気がでない :;(∩´﹏`∩);:
