こんにちは。株式会社アンドパッドでプロダクトデザイナーをしている @zouzei8to10 です。
私は、今年の6月入社のため、アドベントカレンダーもテックブログも初めてとなります。どうぞよろしくお願いします！
これはアンドパッドの2023年のアドベントカレンダーの13日目の記事です。
他の方の記事については下記のページからぜひご覧ください！
今回の記事ではANDPADで構築・運用しているデザインシステムの「Tsukuri（ツクリ）」にテキストフィールド（＝入力フォームなどで利用する1行のテキストの編集を可能にするテキスト・コンポーネント）のコンポーネントを追加するために行ったことを書きたいと思います。
ANDPADのデザインシステム「Tsukuri」
株式会社アンドパッドでは現在、デザインシステム「Tsukuri」の構築・運用に鋭意取り組んでおります。
Tsukuriは、デザインと開発を効率化し、業界の課題解決に集中できるようにすることを目的に開発されています。
（Tsukuriの立ち上げから現在までの詳細については先週公開された@sizuccaさんの下記記事をご覧ください。） tech.andpad.co.jp
はじめは限られたメンバーで始まったデザインシステムの構築ですが、現在ではデザイナー全員がデザインシステムの拡張に参加する体制になってます。 担当するパーツがそれぞれのメンバーに割り当てられ、私もさっそく新規のコンポーネント設計としてテキストフィールドに挑戦させてもらえることになりました！
テキストフィールドを設計する
今回のテキストフィールドのコンポーネント設計は大まかに下記の3つの流れで進めていきました。
- テキストフィールドを理解する。
- ANDPADのテキストフィールドはどんなユースケースで使われるかを調査する。
- Tsukuriにおけるテキストフィールドのガイドラインとコンポーネントを定義する。
テキストフィールドを理解する
まず、テキストフィールドという要素がどのように定義され、ブラウザではどのように実装されるのかを理解するために実際にコードを書いて理解する勉強会を実施しました。
ちなみに1行のテキストフィールドは最もシンプルな書き方だと
<input type="text">
で書くことができます。
このtype="text"の"text"のところが入力の型を定義しているのですが、勉強会ではここを"radio"や"checkbox"などに変更することで入力するインターフェイスの見た目が変わったり、ラベルを付与することでクリックに反応する範囲が変わったりすることなどを手を動かしながら学んでいきました。
ANDPADのテキストフィールドはどんなユースケースで使われるかを調査する
次に、ANDPADのプロダクトを横断して既存の入力フォームを調査し、そのユースケースについて考えました。
プロダクトを横断して調査するとはいえ、ANDPADは建築・建設業界の経営から現場管理まで利用できる幅広いプラットフォームを提供しているため、ひとりで全てのケースを網羅することはできません。
そのあたりは、毎週行っている定例でメンバーに相談したり、すでに公開されている他社のデザインシステムの先行事例などを参考にしたりしつつも「考慮できなかった点は後から修正する！」という方針で取り組みました。
（気負いすぎないのはとても大事です。）
共通化の視点を持って改めてプロダクトを触ってみると、いつもの利用フローでは見落としがちな細かいUIや挙動の差異などが見つかります。
（気になる点はChromeのデベロッパーツールでHTML・CSSの構造なども参照しつつ、メモしながら確認していきました。）
それらを抽象化しつつ理想の振る舞いとして再定義していく過程は、想像以上に地道な作業になるのですが、調査にともなって、ユースケースやデータの実例などに触れることでドメインの理解も深まっていきました。
Tsukuriにおけるテキストフィールドのガイドラインとコンポーネントを定義する
テキストフィールドに関する調査が進んだらガイドラインとコンポーネントを定義していきます。
ありがたいことに、Tsukuri にはすでに WCAG が規定するアクセシビリティ原則に配慮した Color Token や Typography のパターンが定義されているので「ゼロから新しいコンポーネントを考える」ということはありません。
私が担当したテキストフィールドも、すでに定義されている Textarea を参考にして拡張するような手順で作成できました。
テキストフィールドでは受発注機能などで「金額」を扱うフォームが多く存在するANDPADプロダクトの特徴から、「文字列のインプット」と「数値のインプット」を明確にカテゴリー分けする方向で考えることにしました。 *1
そうした上で、それぞれの入力タイプでオプションとして呼び出せる検証機能や入力データの補完機能などを定義しドキュメント化し、 併せて Figma のコンポーネントも作成しチームメンバーが使えるような形で展開していきました。
今回のコンポーネント設計を通して、先輩方が整備されてきたこれまでのデザインシステムの歴史を垣間見ることができ、そこに参加できた喜びと感謝の気持ちを強く感じました。
デザイナー・エンジニアを募集中です！
株式会社アンドパッドは
「幸せを築く人を、幸せに。」
をミッションとしています。
デザインシステムへの興味はもちろん、BtoB SaaSを通じて建築・建設業界のDXに携わりたい方、 社会の課題を解決するプロダクト開発にITやデジタルの力で貢献し、成長したい方、などなど広く募っております。
最後に、採用情報とデザイナーの紹介記事を掲載しておきます。 カジュアル面談も実施しておりますので、ぜひお気軽にご連絡ください。 andpad.co.jp
*1:※ただし、これはあくまで現状の定義でこれらは絶えず修正・更新される前提です。
