設計力をつけるには
仕組みを作るデザインとはすなわち設計と同義であり、デザインが上手 = 設計力があると考えても差し支えないとわたしは考えています。
本稿では「設計力が高い」とはどういう事かをまとめて、それを養うのには何をしたらいいかを考察していきます。
設計力が高い人は問題が起きる前提で試行錯誤と仕様理解を怠らない
私が感じた限りの「上手な設計」が出来る人のとはこういうトコロにあらわれている気がします。
1. 一度にすべてを作らない
2. 他者がルールを見たときに意図を予測できるようにする
3. 原因究明のしやすい設計を優先する
4. 「バカ」が作っても壊れない汎用性を持たせる
5. 依存するプラットフォームの仕様理解を怠らない
6. 計画はその通りには絶対いかないと知っている
7. 何回もやり直すことを受け入れている
ここで言う「バカ」とは私のことです。
自分で設計して自分で生み出すバグを減らすために上記の6個を意識する
自分で作った設計を運用してみると「想定していた動きをしてくれない」しかも「その原因が分からない」事が多々あります。
そして原因究明のために設計フェーズに戻ってもう一度作り直すのですが、また同じような理由で「バグ」が発生し、繰り返すのです。
このような自家発電バグを避けるためにも上記6個の項目を意識して「少しずつ設計する」ことが大切になります。
最小でしっかり動くものを積み上げて組み合わせる
モジュール化、コンポーネント化はその最たるものです「一度にすべてを作らない」とは例えばAtomic Designでの原子レベル、デザイントークンから始めると良いでしょう。
色、タイポグラフィ、パディング、シャドウなど、OSに関係なく全てのプロダクトで利用するものをまずは定義していきます。
それらを定義するのは「小さく始める」「原因究明がしやすい」「バカが作っても壊れない汎用性を持たせるられる」「他者がルールを見たときに意図を予測できる」の4つを見たせるからです。
小さく始めて、原因究明がしやすい
これらは今後作るコンポーネントのすべての始祖になるもので、これ以前の継承は存在しません。影響範囲が少ない多くの箇所で使えることからもまっさきに定義しておきたいものです。
これが定義できたのち、この始祖たちを継承したコンポーネントを作ります。ボタンやテキストリンクを定義しましょう。これらは文字サイズや色を始祖から継承するだけなので影響範囲も小さく「原因究明のしやすい設計」が実践できます。
ボタンやテキストリンクで「汎用性を持たせる設計」と「意図を予測できるルール」づくりを養う
追加するものと言えば余白とアイコン程度ですので難しくもありません。ここは自身でやる必要はなく、多くの人に任せてしまいましょう。「バカ」が作っても壊れない汎用性を持たせられているかどうかを判別するのには自分を含めて他の人が設計を行うことも書かせません。
ここでVariantでアイコンの有無を加えたりしていくと良いでしょう。アイコンは行頭 / 行末につくものなのでそこも加味して作れるとより「汎用的」かもしれません。
わたしが設計するときは余白だけでなくスクリーン全体における定数と変数を明示するようにしています。
Layout Gridはこのような時にも便利なのでどんどん活用しましょう。余白に関する数値を明示できるので「この中にコンテンツ入れてね」が可能です。
仕様理解を怠らずブラウザやデバイスに依存するオブジェクトに向きあって設計する
Text filedやselect menuなどは依存するプラットフォームがどこであるかによりますので、ヒエラルキーとしてはもう少し下部になります。
OSに沿って用意されているコントローラーたちは仕様が決まっていますので高さや余白、可変時の挙動や文字数がoverflowしたときにどうなるかなどを数人で動かしながら作っていくと良いでしょう。
依存するプラットフォームの仕様理解を怠らないことで、設計時に抜けがちなものを防ぎます。ここがしっかりされている方は尊敬します…！わたしはけっこう抜けがちなので、エンジニアさんや他の方と一緒に話しながら設計のヌケモレを抑えるようにしています。
あとはメンタルの話なので割愛します。これらはどれもデザイナーがFigmaでコンポーネント設計をするシーンとして書きましたが、実際のプロダクトデザインでも同様なことが行われていますよね。
✂️ -----
手放せないプロダクトをリバースデモリングすることで自分にとっての「上手な設計」を知る
設計力を鍛えるのには、まずは上手な設計を知らねばなりません。
わたし達が手放せないほどに活用しているプロダクトには幸いにも上手な設計があふれています。
自分が使っているものに対して、ああ、ここはこういう思想で設計しているんだな。とリバースモデリングを行ってみましょう。
よく聞くケースは「このソフトウェアは●●●の操作が複雑。あのソフトは簡単なのに」という声です。これはとても良い観点です。なぜこのソフトウェアはその操作が煩雑なのかを考えてみることはリバースモデリングのひとつと言えます。そこから「何故、このような設計にしたんだろう。自分だったらどうするかな？」と考えてみるのは良いプラクティスになります。
設計がうまいデザイナーは思考が深い
まわりで設計を中心に担っているデザイナーはおしなべてこの力がすごいです。なぜこうなっているのかな。こういうケースが社内に存在しているのは？と、思考を一段深く考えるのが元来の性質から行われていたり、習慣づけされている方も多いです。
アナタが思考力、言語化が苦手でもチームでなら思考は深められる
苦手とされている方も残念がる必要はありません。思考を深めるのには対話が活用できます。チームで議論することで思考は深められますのでご自身ができなくとも対話の機会を増やしていろんな視点からの考えを拾い集めましょう。チームでは思考を誰が深めるかは重要ではなく、多くの人が入れ交わわりながら思考を深めていくことの方が大切です。
リバースモデリングを楽しもう
わたしは常々「ソフトウェアの設計思想を知ろう」とトレーニーさんに言うのですが、そうした方が効率的に設計が行えるからです。
それが苦手な場合はご自身の好きな事柄にてその設計思想を考えてみると良いでしょう。
わたしの場合はゲームです。
✂️ ----- 読まなくていいところ
設計力が養えるゲーム
パソコンゲームをSteamやEpicで購入してよく遊びますが以下のゲームはガチで一生遊べます。ゲームというと学生の頃はクリアしたら遊ばなくなる。たまに懐しくなってもう一回プレイする。という程度のスタイルでしたが下記のゲームはそれらとは一線を画します。
ストーリーもなければ、クリアも重要ではありません。純粋に設計や効率をひたすら楽しみゲームというのが「シミュレーションゲーム」の中で「基地建設」「自動化」「コロニー運営シミュレーション」というタグで探すことができます。
1. Minecraft 工業化Mod
2. Factorio
3. Oxygen not included
Minecraft 工業化Mod
工業化ModプレイといえばDireworlfさん。YOUTUBEで彼が遊んでいる環境で自分も遊べる。
最近は数が増えているのでtechnology系のModパックをチョイスして遊ぶと良いでしょう。とにかくアイテム作成をインフレさせていく快感はクッキークリッカーと似てます。そのドラッグ染みた快感の中でモジュルー思考を学ぶことができます。
https://www.curseforge.com/minecraft/modpacks
農業を工業化したい！とかそういうコンセプトで遊べるPackがいろいろある。
あるアイテムを多く得るのには、1tickあたりにどのくらいの数を処理する必要があり、そのために鉱石洗浄器は何台必要？あ、でもアイテムが詰まってしまってフル稼動できないパイプのスループットも考慮しなきゃ…。と電卓を叩き、プレイせずに計算している時間と検証している時間が長くなります。仕事だな？
Factorio
上記の工業化Modの楽しさをコンセプトにタワーディフェンスも含めたゲームがFactorioです。トレーラーは多くのアイテム生産ジャンキーを虜にしました。
ノルマ達成 (Factorio実況者は必ずこのトレーラーを流すしきたりがある)
モジュール化した部品作成工場と、それをありとあらゆる第2次、3次と続く生産工場に適切に送るための配管に悩まされます。大正義メインバス。逆にメインバスを伸ばす基礎生産工場さえ確立させられればロケット発射まで2hくらいでいけるそうな。マジかよバケモンだな。
わたしはまだプレイ時間100hいってないくらいのニワカなので老後に取り返すほどプレイしたいと思ってます。
Oxygen not included
https://www.youtube.com/watch?v=wcLayGm_pM4
Klei Entertainment社は美しいコロニーをゆっくり作らせる気がないな？ Don't Starveといい、こう次から次へと問題がきてとにかく忙しい！
「導線が美しく効率的なコロニーをじっくり作りたい」という思いをあざ笑うかのような「問題」を表出させる設計がクッソうまい神ゲーです。悪魔かな？
通常のゲームだと問題が起きたとしてもリカバリーが簡単だったりしますし、まず問題が起きないような設計を攻略方として知ってしまえば回避できるものだったりします。
Minecraftでのゾンビ対処は松明と囲いでOK、Rimworldでもキルゾーン作ればけっこうのんびり内政できる。
しかしこのゲームは攻略法を知っても解決できないのです。本当に問題に対する根本の設計と、短期的な対処を変更で行わないと真綿で首を絞めるようにコロニー入植者が死んでいきます…。ごめんな…。緑藻…。もうないんだよ…。
これらに対処するのには、自分たちが設置する設備のl/Oの数値を把握し、何を入力したら何が返ってくるのか、そして今からそれを実行するサイクルで、その収支が合うのかまで考えないといけません。
初期の手順はけっこうテンプレ化できるのですが、酸素が足りなくてやっとの思いで100サイクルかけてHydra Electrolyzer作ったのに問題が解決せず、みなが呼吸困難で死んでいくケースは涙なしには画面に向かえないものです。
✂️ -----
と、まあとにかく熱く語りましたが、設計力はいろんなことで鍛えることが可能です。UXデザインをする場がない、デザインシステムを作ってみたいという方はまずゲームで上手な設計を意識してみるのも面白い余暇になるかもしれませんね。
面白かったらいいね&フォローよろしくお願いいたします。
いいねが多いものは集中的に関連する記事を書いていこうと思います。
また、ゲームや設計の話したいな！と思ったら気軽にこちらからカジュアル面談しましょう〜。
よろしければサポートお願いいたします。記事を書くモチベーションと頻度が上がります。