鈴木慎吾 / TSUMIKI INC.

(株)つみき のデザイン責任者。UIを考えたりコードを書いたりします。 https://twitter.com/shingo2000https://www.behance.net/shingo2000https://uid.tsumikiinc.com/

鈴木慎吾 / TSUMIKI INC.

(株)つみき のデザイン責任者。UIを考えたりコードを書いたりします。 https://twitter.com/shingo2000https://www.behance.net/shingo2000https://uid.tsumikiinc.com/

    マガジン

    • TSUMIKI UIデザイン

      • 119本

      つみきのUIデザインに関する記事をまとめています。 UIデザイン、インタラクションデザインなどお気軽にご相談ください。 https://uid.tsumikiinc.com/

    • マイクロインタラクションの観察

      • 31本

      マイクロインタラクションをデザインする際のインプットとして色々なアプリの挙動を観察し、それらが及ぼす効果を考察します。

    • UI改善の基本

    最近の記事

    Figmaで再利用しやすいアイコンライブラリを作成する方法

    ここ最近、Figmaファイルのリファクタリングに取り組む機会が何度かあり、再利用しやすいデザインづくりを試行錯誤してきました。 その中で得られた知見を記事にまとめいきたいと思います。 今回は再利用しやすいアイコンライブラリの作成方法について説明します。 ライブラリとは何か?そもそもライブラリとはなんでしょうか? Wikipediaで「ライブラリ」を調べると以下のように説明されます。 元々はプログラミングの文脈で使われることの多い言葉ですが、UIデザインにおいても再利用可能

      • デザイナーとエンジニアを巻き込んだワークフローの改善

        「エンジニアリングに興味があるデザイナー、デザインに興味があるエンジニア Advent Calendar」20日目の記事です。 今年の5月から、社内でクライアントワークのチームから自社事業のチームに異動し、映画・ドラマ・アニメのレビューサービスのFilmarksで有料会員機能のPMを担当しています。 以前はUIデザインやアプリ開発、あるいはその中間的な仕事としてプロトタイプ開発やディレクションなどを経験してきました。 PM業の傍ら、社内のデザイナーとエンジニアの受け渡し部分

        • 検索結果の絞り込み・並び替えUIの観察

          先日、検索結果の絞り込みUIの検討をするために事例を調べたところ、意外にもアプリによって様々な違いがありました。面白いテーマなため観点ごとに違いを整理し、メリット・デメリットや設計意図を考察しました。注目した観点は以下の7つの点です。 これらの観点をもとに以下の条件で12のアプリを調査しました。 1. 絞り込み・並び替えボタンの配置 まずは、絞り込み・並び替えボタンの配置場所について。ボタンの配置場所は大別するとこの2種類です。 それぞれの事例をみていきます。 A.

          • 「言葉使いを明瞭に。ボタンには結果をイメージできる言葉を選ぶ」 #UI改善の基本

            前回から3ヶ月以上も空いてしまいましたが、UI改善の基本の2回目です。今回の改善ポイントはこちらです。 新たに加入するサービスの注意事項や、意図せずに遭遇したエラー画面。元に戻せない重要な決定の確認ダイアログなど、アプリやWebサービスを利用していると、システムからのメッセージに頻繁に遭遇します。ユーザーはコンテンツやコミュニケーションに集中したいため、こうしたシステムからのメッセージを注意深く読み、じっくり考えることを好む人はいないでしょう。特にスマホで長い文章を読むのは

          マガジン

          マガジンをすべて見る すべて見る
          • TSUMIKI UIデザイン
            TSUMIKI UIデザイン事業部 他
          • UI考察
            鈴木慎吾 / TSUMIKI INC.
          • マイクロインタラクションの観察
            鈴木慎吾 / TSUMIKI INC. 他
          • UI改善の基本
            鈴木慎吾 / TSUMIKI INC.
          • UIまとめ
            鈴木慎吾 / TSUMIKI INC.
          • 組織デザイン
            鈴木慎吾 / TSUMIKI INC.

          記事

          記事をすべて見る すべて見る
            再生

            つみき UI/UX事業部のWebサイトを公開しました

            つみきのUI/UX事業部のWebサイトを公開しました。 遊びごころとアイディアでユーザーの愛着を生むデザインを得意としています。アプリやWebサービスのUIデザイン・UI改善などご相談ください。 https://uid.tsumikiinc.com/

            「コンテンツが空の場合は行動を促す」 #UI改善の基本

            これまでクライアントワークとして、様々なアプリやWebサービスのUIデザインや改善に関わってきました。使い勝手を考える際に、多くのアプリやサービスで共通する基本となる改善ポイントがあることに気づきました。複数回にわたって、それらの改善ポイントを事例とともに紹介していきます。 今回の改善ポイントはこちらです。 検索画面で目的の情報が見つからなかった場合や、お気に入り登録した写真がまだ1点もない場合など、アプリやWebサービスの一覧画面で表示すべき情報が1件もない場合には、「

            UIモーション、マイクロインタラクション作成ツールの比較 2020年版

            UIモーション、マイクロインタラクションを取り入れる際、様々なツールを使ってプロトタイプを作成することができます。色々ありすぎて選ぶのが大変な状況なので、主なツールの用途や特徴を元に整理してみました。ツール選びの参考にしていただけると嬉しいです。 今回は以下の6つのツールを4象限に分類して解説します。 まずはこの分類方法について説明します。 横軸: インタラクティブ/非インタラクティブ 以下のようなローディングのアニメーションがあったとします。 このアニメーション自体

            2019年に読んだ、おすすめデザイン関連本

            2019年はコンセプトデザインをつくったり、noteやTwitterでの発信を継続的に取り組んだりと、今までとは違う取り組みに力を入れた一年でした。その時々の関心や課題感に沿って本を選んでいましたが、振り返ってみると今後の指針になりそうな言葉を見つけるために読書をしていた感じがします。色々読んだ中でおすすめしたい本を取り上げます。 具体と抽象 ―世界が変わって見える知性のしくみ /  細谷 功 2014年発売。現実を観察し抽象化することで知識として蓄え、複数の知識を組み合わ

            Panel UIを活用したXDプラグインの作り方

            この記事は、Adobe XD プラグイン制作 Advent Calendar 2019 の16日目の記事です。 現在こんな感じのXDプラグインを開発中です。 Powerpoint や Keynote でフロー図をつくる際によく使う、矢印のついたコネクタのオブジェクトを作成するプラグインです。このプラグインにPanel UIというプラグイン用のUIを利用してみたのですが、想像以上に便利で面白いものでした。この記事ではPanel UIを活用したXDプラグインの作り方を解説しま

            マイクロインタラクションを活かしたコンセプトデザインの作成 @Adobe MAX Japan 2019

            この記事ではAdobe MAX Japan 2019で発表した登壇資料とサンプルXDファイルを公開します。 サンプルXDファイルはじめに 今回のテーマは「マイクロインタラクションを活かしたコンセプトデザインの作成」です。 オライリーから出版されているこの本によると、マイクロインタラクションは “最小単位のインタラクション”であり、“「こよなく愛する製品」と「許容範囲の製品」の違いを生む” ものとされています。 コンセプトデザインはコンセプトカーや携帯電話のコンセプトモデ

            ダークモードの観察

            iOSではiOS13から、AndoridではAndroid 10からダークモード(ダークテーマ)が導入されました。Go Andoさんのアンケートによると、ダークモード使用率は約7割…もはや無視できない状況です。 メジャーなアプリのダークモード対応が出揃ってきたところで、各アプリでの対応を確認してみました。複数のアプリの対応を比較することで、色々と気づくところがありました。 調査環境:iOS13 調査日:2019.11.9 - 11.12 1. ブランドカラーを使用してい

            会社名と電話番号を補完入力する問い合わせフォーム

            先日、以下のような問い合わせフォームを試作しました。 https://shin-go.net/contact_test/ この問い合わせフォームは法人からの問い合せを想定したもので、ユーザーがメールアドレスを入力するとドメイン名を元に、会社名と電話番号を補完入力します。 元々は自社サイトでの問い合わせフォームのアイディアの技術検証のために作成したのですが、思いのほか多くの方に反応していただきました。アイディアや技術自体の新しさではなく、多くの方の潜在ニーズとマッチした結果

            確認ダイアログのUI改善

            先日、読書しようとiPhoneのKindleアプリを開いたところ、以下のようなダイアログが表示されました。 iPhone + Kindle Paperwhiteなど、複数端末でKindleを使用している人にはおなじみだと思いますが、前回他端末で読書していた場合に、その端末での続きページまで移動するかを確認するダイアログが表示されます。毎回どちらを選べば良いのか迷うため、ダイアログのUIを考える題材として改善案を検討してみました。 改善案1:タイトルとボタン名のみ変更。本文

            デザインポリシーの検討プロセスと活用

            つみきのデザイナーは、クライアントワークを中心に、アプリやWebサービスなどのUIデザインを専門に取り組んでいます。各々がつみきらしいデザインを深め、実践していくために、以下のようなデザインポリシーをつくりました。その内容と検討プロセス、活用方法について紹介します。 デザインポリシーをつくったきっかけ 昨年、新人デザイナーが入社したことがきっかけとなりました。他のデザイナーと比較してキャリアが浅く成長過程にあるため、今後仕事を任せていくために何から優先して習得していくべきか

            ショッピングカートのマイクロインタラクション試作

            前々回のQRコード決済、前回の登山記録アプリに続き、今回はショッピングカートのプロトタイプをつくりました。この記事では着想のきっかけや制作意図を説明します。 ショッピングの体験価値 私たちは様々なアプリやサービスを通じて日常的に商品を購入しています。 ショッピングの体験として最も重視されるのは、必要な商品を素早く発見しスムーズに購入できる利便性にある思います。しかし他方で私たちはショッピングそのものを娯楽の一部として楽しんでもいます。 最新のロボット掃除機の機能や特性を比

            登山アプリのマイクロインタラクション試作

            先日登山アプリのプロトタイプを作成しました。 数年前に頻繁に山に訪れている時期があり、帰宅後にヤマレコで山行記録を残したり、他人の記録を見ながら週末の計画を考えたりして楽しんでいました。その頃の記憶を頼りに、登山アプリに活かせるマイクロインタラクションのアイディアを形にしてみました。この記事では着想のきっかけやデザインの意図について説明します。 登山アプリの特徴 登山アプリと一言に言っても種類は様々です。山行記録に機能を絞ると、YAMAP、ヤマレコが代表的なサービスだと思