osanai / ui designer

株式会社カンムでデザイナーをやっております。

30 フォロー 1,381 フォロワー

デザイナーやエンジニアの作業効率が向上するFigmaの運用方法を考える

カンムでプロダクトデザインをしている osanai です。こんにちは。前回ご紹介したコンポーネント品評会により、デザインシステムにおけるコンポーネントの課題について議…

1年前

352

エンジニアとデザイナーのコンポーネント品評会

カンムでデザイナーをしている osanai です。バンドルカードやPoolのデザインを担当しております。アプリの改善を長年やっていると、デザインにおける一貫性の欠如が発生…

osanai / ui designer

1年前

デザインの言語化：客観的事実を根拠にデザインを伝える

12月です。年末です。カンムアドベントカレンダー10日目の記事です 📆 カンムのデザイナーosanaiです。今年、自分の中で最も盛り上がった漫画の1つは、アオアシです。「…

osanai / ui designer

2年前

何も意識せずにできるデザインレビュー

カンムでデザインをしているosanaiです。あるときデザインレビューの方法について調べていたんです。「デザインレビューで意識する○つのこと」や「デザインレビューする…

osanai / ui designer

2年前

177

新しいプロダクトをゼロからデザインする ─ Poolのブランド構築

弊社カンムは投資と決済を掛け合わせた新プロダクト「Pool」をリリースする予定です。「心理的unbankedをソフトウェアで解決する」というミッションのもと、投資に対する…

osanai / ui designer

2年前

IllustratorとCSVで大量の名刺データを素早く編集する！

デザイナーのみなさん、自社の名刺の入稿データってどう管理してますか？ぼくはデザインデータ（.ai）とテキストデータ（.csv）に分けて管理しています。最初はデザイン…

osanai / ui designer

3年前

オブジェクト指向UIデザインのトレーニング ─ バンドルカード篇

2020年6月に書籍「オブジェクト指向UIデザイン」がソシオメディアさんから出版されました。UIデザイン界隈で「OOUI（object-oriented user interface）」って言葉やその手…

osanai / ui designer

3年前

フォームデザインのベストプラクティスを探求する

フォームはユーザビリティの問題を引き寄せる1万ボルトの電磁石である ── ヘイドン・ピカリング使いづらさの問題の多くはフォームにある、とインターフェース・デザイ…

osanai / ui designer

3年前

UIデザインの計測と学習〜登録率の改善〜

「推測するな、計測せよ」ソフトウェア工学者のロブ・パイク氏による、パフォーマンス最適化についての格言だそうです。これはUIデザイン改善にもあてはまる言葉だと思っ…

osanai / ui designer

4年前

Apple ヒューマンインターフェースガイドライン輪読のすゝめ

カンムでデザイナーやってます、小山内です。 iOSアプリ開発に携わる人のほとんどが読んでいるであろう Human Interface Guidelines、ひとりで黙読しただけで済ませていま…

osanai / ui designer

4年前

139

UIデザインで参考にするブックマーク集

Chrome のブックマークバーが散らかってきました。Kanmu のデザイナー、小山内です。年末だし、ここらでブックマークを整理してみようと思いまして。アプリデザインのと…

osanai / ui designer

4年前

SketchとGoogleスプレッドシートを連携させてアプリの文言を管理する

アプリのボタンの文言を決めるとき、「体言止めにする？動詞にする？あれ、既存画面の文言はどうしてたっけ？」ってなるときがあります。Kanmu のデザイナー小山内です。…

osanai / ui designer

4年前

バンドルカードのロゴをリファインしたデザイナーの頭の中

スマホから1分でVisaプリペイドがつくれるバンドルカード。プロダクトがリリースされて2年半、ロゴが新しくなりました。従来のロゴにどんな課題があって、改善するまで…

osanai / ui designer

5年前

134

デザイナーやエンジニアの作業効率が向上するFigmaの運用方法を考える

カンムでプロダクトデザインをしている osanai です。こんにちは。前回ご紹介したコンポーネント品評会により、デザインシステムにおけるコンポーネントの課題について議論が進み、不必要なコンポーネントが生まれにくくなり、デザインの意図が汲み取りやすくなりました。品評会をしていると、しばしばデザイナーとエンジニアで「Figma でもっと効率よくできないかな」という話題が出てきます。例えば「コンポーネントの Variants のパターンをパット見で把握したい」「目的のページ

エンジニアとデザイナーのコンポーネント品評会

カンムでデザイナーをしている osanai です。バンドルカードやPoolのデザインを担当しております。アプリの改善を長年やっていると、デザインにおける一貫性の欠如が発生しがちです。意味合いは同じなのに画面ごとに色やサイズや異なっていたり、用途は同じなのに類似したデザインパターンが複数存在していたり、古いUIが一部の画面で残されたままになっていたり。このような一貫性の欠如はデザイン負債とも呼ばれ、蓄積するとさまざまな運用コストが発生します。デザインパターンを適用すると

デザインの言語化：客観的事実を根拠にデザインを伝える

12月です。年末です。カンムアドベントカレンダー10日目の記事です 📆 カンムのデザイナーosanaiです。今年、自分の中で最も盛り上がった漫画の1つは、アオアシです。「つつつつつ、つつつ、掴っ…掴っっつかっつかっ掴っ掴…、つかんだ」ってやつです。掴んだって言っても手を使えないサッカーの話なんですが、主人公のアシトが試合を通じてどんどんサッカーのコツを掴んでいくんですね。コツを掴む前のアシトが言った、印象に残ったセリフがこれ。「何かをつかみかけているあの

何も意識せずにできるデザインレビュー

カンムでデザインをしているosanaiです。あるときデザインレビューの方法について調べていたんです。「デザインレビューで意識する○つのこと」や「デザインレビューするときに心がけていること」といった記事はとても参考になります。一方で、デザイナー以外の方々にもアプリやLP（ウェブサイト）のデザインをレビューしてもらうことがあり、「意識すること」を事前にお伝えしなくても済むように「何も意識せずに」レビューできるとより良さそうと思いました。そこで今回は「デザインレビューシ

新しいプロダクトをゼロからデザインする ─ Poolのブランド構築

弊社カンムは投資と決済を掛け合わせた新プロダクト「Pool」をリリースする予定です。「心理的unbankedをソフトウェアで解決する」というミッションのもと、投資に対する面倒・難しい・怖い・不安といった心理的ハードルを下げたいと考えています。Poolは投資が今よりも資産形成に活用しやすくなることを目指したサービスです。この記事ではPoolのデザイン過程を紹介しつつ、カンムの新たなチャレンジについてデザイナーの立場からお話します。（開発中のため、機能に関する具体的な情報

IllustratorとCSVで大量の名刺データを素早く編集する！

デザイナーのみなさん、自社の名刺の入稿データってどう管理してますか？ぼくはデザインデータ（.ai）とテキストデータ（.csv）に分けて管理しています。最初はデザインデータだけで管理していたんです。というのも2018年にぼくがカンムに入社したときの社員数は十数名で、名刺のデザイン修正時には十数個のデータを修正するだけで済んでいたので、少し手間だったけど数年に1回の頻度だったら「まあいっか」と。ところが2020年は社員数が30人以上になりまして、ここまで増えると全員分の

オブジェクト指向UIデザインのトレーニング ─ バンドルカード篇

2020年6月に書籍「オブジェクト指向UIデザイン」がソシオメディアさんから出版されました。UIデザイン界隈で「OOUI（object-oriented user interface）」って言葉やその手法に関する考察が note や SNS を通じて盛んに飛び交いましたね。けど、海外の開発者の間では OOUI の概念が1980年代からすでに広まっていたってご存知でしたか 👀 。 30年以上前から OOUI に関する英語の書籍はあったのに、日本語の書籍がなかなかなかったんで

フォームデザインのベストプラクティスを探求する

フォームはユーザビリティの問題を引き寄せる1万ボルトの電磁石である ── ヘイドン・ピカリング使いづらさの問題の多くはフォームにある、とインターフェース・デザイナーのヘイドン・ピカリングさんは主張します。アプリケーションはフォームによってユーザーと情報のやりとりができますが、体が不自由な方や高齢者など、ユーザーのあらゆる状況が考慮されていないと、一部のユーザーにとってコミュニケーション不能になってしまうことがあります。だれにとっても使いやすいフォームをデザインす

UIデザインの計測と学習〜登録率の改善〜

「推測するな、計測せよ」ソフトウェア工学者のロブ・パイク氏による、パフォーマンス最適化についての格言だそうです。これはUIデザイン改善にもあてはまる言葉だと思っています。たとえば、様々なフォームUIで採用されているフローティングラベルも一部ではアクセシビリティ上の欠点が指摘されています。流行のUIもユーザビリティが高いとは限りません。実際の効果は計測によって学習することができます。ここではバンドルカードの登録率を改善したときのチームの取り組みについてご紹介します。

Apple ヒューマンインターフェースガイドライン輪読のすゝめ

カンムでデザイナーやってます、小山内です。 iOSアプリ開発に携わる人のほとんどが読んでいるであろう Human Interface Guidelines、ひとりで黙読しただけで済ませていませんか？ガイドラインを読んでプラットフォームの標準UIを把握することは、ユーザーの慣習を学ぶことでもあり、UI設計の拠り所を掴むことにつながります。しかしチーム内でガイドラインの理解度や解釈が異なると、標準と異なっているデザインに気づけなかったり、スムーズに意思決定できなくなる

UIデザインで参考にするブックマーク集

Chrome のブックマークバーが散らかってきました。Kanmu のデザイナー、小山内です。年末だし、ここらでブックマークを整理してみようと思いまして。アプリデザインのときに参考にしているサイトをまとめてみました。これはカンム Advent Calendar 2019 の3日目の記事です。必要なリソースが見つかるサイトインスピレーションが得られるサイトをお探しですか？トレンドに関する新情報をお探しですか？それとも UI Kit？デザインツール？フリー素材

SketchとGoogleスプレッドシートを連携させてアプリの文言を管理する

アプリのボタンの文言を決めるとき、「体言止めにする？動詞にする？あれ、既存画面の文言はどうしてたっけ？」ってなるときがあります。Kanmu のデザイナー小山内です。アプリ内文言の一覧があれば、表記ゆれに気づきやすいかなって。あわよくば、それを Sketch にシームレスに取り込めたらラクかなって。そう思っていたら、Kanmu Tech Day がやってまいりました。 Kanmu Tech Day とはテクノロジーを使って業務の効率化や、何かおもしろそうな試みをやっ

バンドルカードのロゴをリファインしたデザイナーの頭の中

スマホから1分でVisaプリペイドがつくれるバンドルカード。プロダクトがリリースされて2年半、ロゴが新しくなりました。従来のロゴにどんな課題があって、改善するまでにどんな思考を経たのか、いちデザイナーの頭の中を記録として残しておきます。機運2018年11月、ありがたいことに、とある出版社さんにムック本でバンドルカードを紹介していただきました。内容は同年9月にリリースしたセブン銀行ATMチャージ機能について。バンドルカードとセブン銀行ATMさんのロゴが並ぶ

マガジン

ここはカンム

記事一覧

デザイナーやエンジニアの作業効率が向上するFigmaの運用方法を考える

エンジニアとデザイナーのコンポーネント品評会

デザインの言語化：客観的事実を根拠にデザインを伝える

何も意識せずにできるデザインレビュー

新しいプロダクトをゼロからデザインする ─ Poolのブランド構築

IllustratorとCSVで大量の名刺データを素早く編集する！

オブジェクト指向UIデザインのトレーニング ─ バンドルカード篇

フォームデザインのベストプラクティスを探求する

UIデザインの計測と学習 〜登録率の改善〜

Apple ヒューマンインターフェースガイドライン輪読のすゝめ

UIデザインで参考にするブックマーク集

SketchとGoogleスプレッドシートを連携させてアプリの文言を管理する

バンドルカードのロゴをリファインしたデザイナーの頭の中

デザイナーやエンジニアの作業効率が向上するFigmaの運用方法を考える

エンジニアとデザイナーのコンポーネント品評会

デザインの言語化：客観的事実を根拠にデザインを伝える

何も意識せずにできるデザインレビュー

新しいプロダクトをゼロからデザインする ─ Poolのブランド構築

IllustratorとCSVで大量の名刺データを素早く編集する！

オブジェクト指向UIデザインのトレーニング ─ バンドルカード篇

フォームデザインのベストプラクティスを探求する

UIデザインの計測と学習 〜登録率の改善〜

Apple ヒューマンインターフェースガイドライン輪読のすゝめ

UIデザインで参考にするブックマーク集

SketchとGoogleスプレッドシートを連携させてアプリの文言を管理する

バンドルカードのロゴをリファインしたデザイナーの頭の中

UIデザインの計測と学習〜登録率の改善〜

UIデザインの計測と学習〜登録率の改善〜