よつくら

株式会社アンドパッド [ANDPAD] のUIデザイナー https://twitter.com/_yotsukura

よつくら

株式会社アンドパッド [ANDPAD] のUIデザイナー https://twitter.com/_yotsukura

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

    • 9本

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

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

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

よつくら

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

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

      よつくら

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

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

        よつくら

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

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

          よつくら

        マガジン

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

        記事

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

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

          よつくら

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

          よつくら

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

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

          よつくら

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

          よつくら

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

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

          よつくら

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

          よつくら