ANDPADのプロダクトデザイナーが書いたnote

本

建築・建設プロジェクト管理サービス「ANDPAD」のプロダクトデザイナー（UI/UXデザイナー）が書いたnoteを勝手に集めました。

運営しているクリエイター

カラーパレットのコントラスト比を揃えるのにOKLCHカラースペースが便利だった

株式会社アンドパッドでUIデザイナーをしている、よつくらです。 2024年の7月、おそらく3年ぶりにアンドパッドで運用しているデザインシステムの、網羅的なカラーパレットを作成しなおしました。今回、カラーパレットのコントラスト比を揃えるのにOKLCHカラースペースが便利だったので紹介します。網羅的なカラーパレットのコントラスト比を揃える前回カラーパレットを作成したとき、1段階目の網羅的なカラーパレットと、2段階目の意味を持ったカラーパレットを作成しました。そのときの学び

Figmaのライブラリー機能を使う

株式会社アンドパッドでUIデザイナーをしている、よつくらです。デザインシステムの構築などにあたって、Figmaのライブラリー機能をすでに活用されている組織も多いとは思います。しかし実はライブラリー機能のヘルプページはまだ日本語に翻訳されておらず、完全に理解せずなんとなく利用しているメンバーも多いのではないでしょうか。ライブラリーの作成は有識者が行っている場合も多いのではないかと思い、今回は「すでにあるライブラリを利用する」方法について焦点をあてて記事を執筆してみました。

UIデザイナーとアジャイル開発

アジャイル開発は、経験がないUIデザイナーも多い前職が受託開発/受託デザインだったり、大規模な会社で日々のタスクの順序に悩むことがなかったデザイナーが、ベンチャー企業のアジャイル開発（スクラムなど）に入ると、日々やらなければいけないことが多すぎて何から手をつけてよいかわからなくなって、混乱してしまうことがあります。私も何社か転職をして、たくさんのプロダクト開発をするまでいまいちリズムが掴めなかった、という実感があります。わたしなりの結論この問題を解決していくにはどうした

カラーパレット作成の参考にした記事、他社のデザインシステム

株式会社アンドパッドでUIデザイナーをしている、よつくらです。アンドパッドのデザインシステムでカラーパレットの作成を担当しています。カラーパレットの作成・更新を何度も行ううちに「これもっと早く知っておきたかった….」と思うようなことがいくつかあったので記事にまとめました。この記事で触れている内容UIデザインに必要なカラーパレット（アンドパッドのデザインシステムではリファレンスカラーと呼ばれる）の作成・更新に必要な知識、他社事例この記事で触れていない内容ブランドカラー

「プロダクトとユーザーをつなぐ」BtoB SaaSデザインの面白さ（SaaS Design Conference 2022）

この記事は、2022年11月26日（土）に初開催された「SaaS Design Conference 2022 〜BtoBビジネスとデザイナーをつなぐカンファレンス〜」に登壇した際のスライド内容の書き起こし（記録用）です。 10:00から18:30まで、BtoB SaaSデザインについてのコンテンツが詰まったカンファレンスで、いち参加者としても非常に勉強になりました。主催・運営者の皆様、登壇者の皆様、視聴してくださった皆様、本当にありがとうございました。今回はアーカイブ

アンドパッドのデザインシステムの 今までとこれから（Frontend Talk 〜デザインシステム構築のリアルな裏側〜）

この記事は、2022年3月10日（木）に開催された「Frontend Talk 〜デザインシステム構築のリアルな裏側〜」のイベントに登壇した内容の記録用です。転職してから初のイベント登壇でしたが、他社の方々の現場のお話を伺うことができたり、完全オフラインイベントだったため、イベント後にTwitterで参加者による2次会が開催されたり、と想像以上に楽しい1日を過ごすことができました。登壇者の皆様、視聴してくださった皆様、本当にありがとうございました。以下、各種アーカイ

UIデザイナーに必要なiOSのTypographyの知識

iOSのタイポグラフィー、フォントについてANDPADのデザインシステムに定義するにあたり、エンジニアメンバーに色々教えてもらえたので、デザイナー側からみて分かりやすいようにまとめます。 iOSのSystem FontはSF Pro+ヒラギノ角ゴiOSを実装するときにヒラギノ角ゴフォントを指定すると、ベースラインの問題でヒラギノ角ゴの英字の下部が切れることがあるので、基本的にはSystem Fontを指定します。 iOSのSystem Fontは、英文はSF Pro、和文

[UIデザイン] モーダルの範囲外をタップしたら閉じるべきか

モーダルダイアログ、どこで閉じるか問題特にPCのモーダルダイアログのUIデザインを検討しているとき、モーダルの範囲外をタップ/クリックしたときに、モーダルは閉じるべきかどうかという議論があります。 UIデザイナーがどちら（閉じるor閉じない）の方向性を選択するにせよ、ユーザーを混乱させないように、サービス内で振る舞いを統一しておくというのは非常に重要です。 PCアプリケーション（Web）の振る舞いの調査今回はたまたま業務ツールのUI設計を検討していたため、Atlassi

Android端末で実装されたデザインを確認する

概要一例として、手元にPixel5があるときAndroidエンジニアに「Figma通り実装したからデザイン確認してね！」って言われたら、UIデザイナーの皆さんはどうしますか？とりあえずスクリーンショットは撮ったとして、そのPixel5のスクリーンショットをwidth=360dpのアートボードで確認すると、エンジニアが意図したサイズでデザインの確認ができないよっていうことを伝える記事です。 Android実機でデザインを確認するときのありがちなミス例えばPixel5を例に