鈴木慎吾 / TSUMIKI INC.

(株)つみき のデザイン責任者。UIを考えたりコードを書いたりします。 https:/…

鈴木慎吾 / TSUMIKI INC.

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

マガジン

最近の記事

TikTokのUIとインタラクションの観察

今までちゃんと使ったことがなかったTikTokを最近がっつり触ったところ、UIやインタラクションの細かな作り込みに気づくことが多く、発見の連続でした。今後の機能開発やUIデザインの参考にもできそうなので記事にまとめます。 1. アクションなしの没入体験TikTokで最も特徴的なのは動画フィードでのレコメンドの仕組みです。フルスクリーンで表示されるショート動画が上下のスワイプで切り替わり、視聴行動(視聴時間やスキップなど)に応じて次の動画がレコメンドされ続けます。そのため利用

    • Feedly + ChatGPTで、毎朝 自分専用のポッドキャストを自動生成する仕組みを作った

      昨年こんな記事を書きました。 毎朝、デザイン系の英語記事を10件ほどおすすめしてくれるSlackボットです。このボットは現在も問題なく稼働し続けていますが、毎朝のニュースは文字で読むよりも音声として聞いたほうが負担が少なく続けられそうです。 そこで、このSlackボットを拡張して、毎朝デザインニュースのポッドキャストを自動生成する仕組みを作ることにしました。 成果物はじめに成果物について。完成したポッドキャストは毎朝SpotifyとApple Podcastで配信してい

      • Kindle + DeepLでデザインの名著を自動翻訳して読む

        以前から気になっていたこの本、 インタラクションデザインの名著と言われていますが、長らく絶版となっていて中古価格は年々高騰する一方です。なかなか手を出しづらい値段ですが、原著の最新版である以下なら普通の価格で購入できます。 この原著を自動翻訳し日本語で読めないかと試してみました。その手順を説明します。 注意事項今回説明する手順は、著作物の複製にあたります。著作権法では「私的使用のための複製」のみ認められており、これを超える目的での複製は著作権法に違反する可能性があります

        • Chat GPTを使ってFigmaの面倒な作業を自動化する

          この記事は、Figma Advent Calendar 2023の11日目の記事です。 最近Figmaで面倒な作業が発生し、自動化のためのFigmaプラグインのコードをChat GPTに書いてもらったところ大変はかどりました。その手順を説明します。 きっかけエンジニアとの振り返りMTGで、こんな相談を受けました。 解決策はいくつか考えられます。 目視でカウントする Figmaのデザインシステムアナリティクス機能を使う 既存のプラグインを使ってカウントする プラグ

        TikTokのUIとインタラクションの観察

        マガジン

        • UI考察
          鈴木慎吾 / TSUMIKI INC.
        • リデザイン
          鈴木慎吾 / TSUMIKI INC.
        • マイクロインタラクションの観察
          鈴木慎吾 / TSUMIKI INC. 他
        • UI改善の基本
          鈴木慎吾 / TSUMIKI INC.
        • UIまとめ
          鈴木慎吾 / TSUMIKI INC.
        • 組織デザイン
          鈴木慎吾 / TSUMIKI INC.

        記事

          実務のためのマイクロインタラクション入門 @ Friends of Figma Shonan

          2023.11.29にFriends of Figma Shonanで発表した内容を紹介します。当日使用したスライドは以下から確認いただけます。 はじめに今回のテーマは「実務のためのマイクロインタラクション」です。 オライリーから出版されている『マイクロインタラクション』では以下のように説明されています。 最小単位のインタラクション 「愛される製品」と「許容範囲の製品」の違いを生む トリガー、ルール、フィードバック、ループとモードの構造を持つ マイクロインタラクシ

          実務のためのマイクロインタラクション入門 @ Friends of Figma Shonan

          Spotifyのプロダクト戦略をUIの変化から読み解く

          2018年にSpotifyのiOSアプリでは5つあったタブが3つに変更されました。 長く使われ続けているサービスでは、新しい機能がどんどん追加されていきます。新しいユーザーを増やしたり、現在のユーザーを引きつけ続けることが主な理由で、Spotifyにも様々な機能が追加されています。それにも関わらず主要なナビゲーションのタブを減らすのは勇気のいる選択だと思いました。プロダクト開発に関わっていると実感しますが、何かを付け加えることよりも何かを削ることのほうがずっと難しいのです。

          Spotifyのプロダクト戦略をUIの変化から読み解く

          ペアUIモデリング:オブジェクト指向UIデザインを業務に取り入れる

          アプリやWebサービスをデザインする際、大きく分けて2種類の設計方法があります。タスク指向とオブジェクト指向です。 多くの場合においてオブジェクト指向のUIデザインを取り入れることで、操作しやすく拡張性のあるアプリケーションを実現することができます。 2020年に「オブジェクト指向UIデザイン」が出版されて以降、多くのUIデザイナーにこの考えが浸透しました。 オブジェクト指向UIデザインを業務に取り入れるにあたって、この書籍で説明されているオブジェクト指向UIデザインの手順

          ペアUIモデリング:オブジェクト指向UIデザインを業務に取り入れる

          UIモーション 02:理解のための動き

          UIモーションについての記事第二弾です。 前回の記事ではUIになぜ動きが必要かを説明しました。 この記事で取り上げたように、UIに動きを取り入れる際は大きく2つの目的があります。 1つ目は「理解のための動き」です。利用者は動きを通じてシステムの状態や変化、情報の構造や関係性、操作方法についての理解を得ることができます。2つ目は「演出としての動き」です。グラフィック要素と共に使用されることが多く、モチベーションや達成感や愛着など利用者の感情に働きかけます。 今回の記事では1

          UIモーション 02:理解のための動き

          FigmaからSF Symbols 5のカスタムシンボルをエクスポートするプラグインを作った

          先日、AppleのSF Symbolsのカスタムシンボルを作成するFigmaプラグインを個人開発しました。 開発の経緯と利用方法について説明します。 SF Symbolsとは何か?SF Symbolsは、Appleが公式に提供しているアイコンライブラリで、5,000種類以上のシンボルが収録されています。現在正式リリースされているバージョンはSF Symbols 4で、次期バージョとしてSF Symbols 5がベータ提供されています。 Appleのシステムフォントである

          FigmaからSF Symbols 5のカスタムシンボルをエクスポートするプラグインを作った

          FigmaのVariablesを使用してダミーコンテンツを管理する

          Figmaの新機能としてVariables(変数)が追加されました。Variablesにカラー、数値、テキストを定義しておき、アートボード上のレイヤーの各種プロパティに適用して利用することができます。 公式のPlaygroundを見ると、ダークモードとライトモードなど、複数のモードを持つデザイントークンを管理するような使い方が想定されているようですが、これをデザイン内で使用するダミーコンテンツの管理に使用してみたいと思います。 ダミーコンテンツとは?ダミーコンテンツとは実

          FigmaのVariablesを使用してダミーコンテンツを管理する

          LlamaIndexで独自データを元にChatGPTに回答させるSlackボットをGoogle Cloud Functionsで動かす

          LlamaIndexを使うと、独自のデータを使ってChatGPTに質問に答えさせることができます。 このライブラリを使用して、Google Colabの環境でオリジナルなチャットボットを作成しました。これをSlackボットとして利用するためGoogle Cloud Functionを利用しました。その際の手順を記事にします。 Google ColabでのLlamaIndexの使用Google ColabでのLlamaIndexの使用方法はnpakaさんのこちらの記事を参考

          LlamaIndexで独自データを元にChatGPTに回答させるSlackボットをGoogle Cloud Functionsで動かす

          Feedly API + ChatGPTでデザインの英語記事を毎朝日本語でおすすめしてくれるSlackボットを作った

          ⚠ 2024.1.22追記: この手順で使用しているFeedlyのMixes APIやAccessTokenの取得方法は現在公式ドキュメントから削除されています。現状問題なく動作していますが予告なく停止する可能性がります。ご注意ください。  ⚠ 2023.10.29追記:無料アカウントでのFeedly APIの提供は終了し、利用にはFeedly Pro(月額$8)の登録が必要になりました。 こんな感じのSlackボットを作りました。 毎朝8時ごろに、デザイン系の英語記事

          Feedly API + ChatGPTでデザインの英語記事を毎朝日本語でおすすめしてくれるSlackボットを作った

          UIモーション01: UIになぜ動きが必要か?

          スマホアプリやWebサービスなど、スクリーン上のUIには様々な形でモーション(動き)が使われています。
こうしたUIモーションは利用者として毎日何気なく目にしているものですが、そこには作り手がいて目的があるはずです。この記事ではUIモーションの目的と効果的な使用方法について考察します。 UIモーションとUIアニメーション「モーション」と「アニメーション」はどちらも動きを表す言葉として、同じ意味で使われることもありますが、元々の言葉の意味を踏まえると以下のような違いがあると言

          UIモーション01: UIになぜ動きが必要か?

          AWS Lambdaと連携してリンク先をシンプルに表示するFigmaウィジェットを作った

          この記事は、Figma 開発 Advent Calendar 2022 の12日目の記事です。 先日、Simple BookmarkというFigma・FigJamウィジェットを作成しました。URLを入力すると、ファビコンとタイトルを表示するシンプルなウィジェットをFigma、FigJamのキャンバスに配置することができます。 公開から2週間ほど経ちますが1,000人以上のの方に試していただきました。 実際に色んな人に使ってもらうのも嬉しいですし、何より自分が日常的に使う道

          AWS Lambdaと連携してリンク先をシンプルに表示するFigmaウィジェットを作った

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

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

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

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

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

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