この記事は、Techouse Advent Calendar 2024 18日目です。
昨日は ReLU さんによる メカニカルシンパシーを体感せよ！キャッシュラインが明かす高速化の真髄 でした。
はじめに
こんにちは、株式会社 Techouse でフロントエンドエンジニアをしている平岡と申します。
この記事では自身が携わっているプロダクトであるクラウドハウス採用のデザインや実装をしていく中で、参考にしていた本やサイトの話をさせていただきます。
こんな方に読んでいただけると幸いです。
- デザインに興味はあるものの、何から学べばいいか迷っている
- 作っているプロダクトの使い勝手をもっと良くしたい
プロダクトにおけるデザインとは
「デザイン」というと、色や形、サイズなど表に見えるもののみを指すようなイメージがあるかと思います。
ですが、それらはデザインの中のビジュアルのみを指しており、デザインを構成している要素としては不十分です。
情報アーキテクチャやウェブデザイン分野で著名な Jesse James Garrett 氏は著書「The Elements of User Experience」の中で、 プロダクトが完成に至る工程を５段階に分け、抽象度の低い下の階層から構築することで優れたデザインが提供できると提唱しています。
つまり、プロダクトのデザインは階層構造となっており、それを無視して一部の要素を変更してしまうとユーザーの使い勝手を著しく損ねることとなってしまいます。
クラウドハウス採用におけるデザイン
クラウドハウス採用は、企業向けに自社のサイト制作から応募管理を一括で行うことのできるプロダクトで、 サイト構築に必要なドメインの設定や応募の管理に必要な求人データの作成・編集など、あらゆる作業を管理画面上で行っています。
そのため、複数の画面にて、さまざまなデータを取り扱わなくてはならず、操作に応じた一貫したビジュアルデザインや意図の伝わる情報設計などが求められます。
以下にて、そんなクラウドハウス採用を構築する上で参考にした本やサイトを紹介させていただきます。
デザインの基本を理解する
ノンデザイナーズ・デザインブック
![ノンデザイナーズ・デザインブック [第4版]](https://m.media-amazon.com/images/I/51HKaOqL-RL._SL500_.jpg "ノンデザイナーズ・デザインブック [第4版]")
初学者がまず最初に迷う配置、色、タイポグラフィなどデザインの基本原則を学ぶことができ、 アンチパターン → 改善 を実例をもとに手を動かしながら実践するため非常にわかりやすい構成になっています。
例としては名刺やポスターなどの DTP がメインなのですが、ジャンルに関わらず知っておいて損のない内容になっています。
誰のためのデザイン？ - 認知科学者のデザイン原論
UX と人間中心設計（製品やシステムが人々の使いやすさや自然な行動に基づいて設計されるべきだという考え方）に関する本です。
デザインにおける「誤用の防止」「使い勝手の良さ」「明確なフィードバック」など、優れたデザインに欠かせない要素を具体例とともに解説しており、良いデザインの条件を学習できます。
ユーザーのことを常に考えて設計する癖をつけると、ツボを大きく外さないデザインと実装が作れるようになります。
要点で学ぶ、デザインの法則 150
デザインに関する法則や原則がひたすらにまとまっています。
街中で気になったデザインなどを発見すると「これはあの法則を利用しているな...」と自然と思い浮かぶようになりました。
要点で学ぶ、色と形の法則 150
上記「要点で学ぶ、デザインの法則 150」と同じシリーズで、色と形にフォーカスした法則がまとまっています。
色の選択がスムーズに行えたり、形の視覚効果を学ぶことでコンポーネントの余白を調整して見栄えを整えたり、といったことができるようになります。
UX を理解する
UX デザインの教科書
「そもそも UX ってなんだ？」というレベルから体系立てて学習できる本です。
ケーススタディを通じて、UX デザインの理論をどのように実践に落とし込むかについて学べるため、理論と実践をバランス良く学べる内容になっています。
インタフェースデザインのお約束 - 優れた UX を実現するための 101 のルール
プロダクトのユーザビリティを考慮する上で必須レベルのルールや、操作性や認知スピードをより高めるために押さえなくてはいけない基本要素がコンパクトにまとめられています。
Web プロダクトに関する内容が多いため、初めてサービスを作るエンジニアは必読級の本だと思います。
ルールを作る
Atomic Design ～堅牢で使いやすい UI を効率良く設計する
コンポーネント設計に直接 Atomic Design を当てはめることには賛否両論あるのですが、デザインパターンの設計思想を習得することで、デザイナーや他エンジニアとの協業の際に同じ視座で話ができるため、一読しておくことは大切だと思います。
ちいさくはじめるデザインシステム
「デザインシステム」というと「大規模で緻密な設計がされたシステム」というイメージを持っていたのですが、最小限のガイドラインやライブラリがデザインシステムとなり得る、ということを教えてくれた本です。
ガイドを作るにあたって参考にしたサイト
CSS を理解する
Web 制作者のための CSS 設計の教科書
最近はコンポーネントの中で CSS を扱うことが多いので、あまり設計に関して考える必要がなくなってきましたが、 入れ子になった場合のスタイルの扱いなど CSS の仕組みを知っておくと素早く実装をすすめることができます。
最後に
最後まで読んでいただきありがとうございます！
プロダクトデザインは奥が深く、自身の力不足もあり、クラウドハウス採用もまだまだ改善の余地が大きいと感じています。
本記事を読んでいただいた皆様がプロダクトデザインに興味を持っていただき、より良いプロダクト作成に活かしていただけると幸いです。
明日のTechouse Advent Calendar 2024は imayayoh さんによる AWS X-Ray と Amazon CloudWatch RUM を用いたパフォーマンス監視のベストプラクティス です。
Techouse では、社会課題の解決に一緒に取り組むエンジニアを募集しております。 ご応募お待ちしております。
