鈴木慎吾 / TSUMIKI INC.

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

鈴木慎吾 / TSUMIKI INC.

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

マガジン

記事一覧

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

今までちゃんと使ったことがなかったTikTokを最近がっつり触ったところ、UIやインタラクションの細かな作り込みに気づくことが多く、発見の連続でした。今後の機能開発やUI…

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

昨年こんな記事を書きました。 毎朝、デザイン系の英語記事を10件ほどおすすめしてくれるSlackボットです。このボットは現在も問題なく稼働し続けていますが、毎朝のニュ…

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

以前から気になっていたこの本、 インタラクションデザインの名著と言われていますが、長らく絶版となっていて中古価格は年々高騰する一方です。なかなか手を出しづらい値…

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

この記事は、Figma Advent Calendar 2023の11日目の記事です。 最近Figmaで面倒な作業が発生し、自動化のためのFigmaプラグインのコードをChat GPTに書いてもらったところ…

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

2023.11.29にFriends of Figma Shonanで発表した内容を紹介します。当日使用したスライドは以下から確認いただけます。 はじめに今回のテーマは「実務のためのマイクロイ…

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

2018年にSpotifyのiOSアプリでは5つあったタブが3つに変更されました。 長く使われ続けているサービスでは、新しい機能がどんどん追加されていきます。新しいユーザーを…

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

アプリやWebサービスをデザインする際、大きく分けて2種類の設計方法があります。タスク指向とオブジェクト指向です。 多くの場合においてオブジェクト指向のUIデザインを…

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

UIモーションについての記事第二弾です。 前回の記事ではUIになぜ動きが必要かを説明しました。 この記事で取り上げたように、UIに動きを取り入れる際は大きく2つの目的…

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

先日、AppleのSF Symbolsのカスタムシンボルを作成するFigmaプラグインを個人開発しました。 開発の経緯と利用方法について説明します。 SF Symbolsとは何か?SF Symbols…

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

Figmaの新機能としてVariables(変数)が追加されました。Variablesにカラー、数値、テキストを定義しておき、アートボード上のレイヤーの各種プロパティに適用して利用す…

LlamaIndexで独自データを元にChatGPTに回答させるSlackボットをGoogle Cloud Functi…

LlamaIndexを使うと、独自のデータを使ってChatGPTに質問に答えさせることができます。 このライブラリを使用して、Google Colabの環境でオリジナルなチャットボットを作…

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

⚠ 2024.1.22追記: この手順で使用しているFeedlyのMixes APIやAccessTokenの取得方法は現在公式ドキュメントから削除されています。現状問題なく動作していますが予告な…

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

スマホアプリやWebサービスなど、スクリーン上のUIには様々な形でモーション(動き)が使われています。
こうしたUIモーションは利用者として毎日何気なく目にしているも…

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

この記事は、Figma 開発 Advent Calendar 2022 の12日目の記事です。 先日、Simple BookmarkというFigma・FigJamウィジェットを作成しました。URLを入力すると、ファビコ…

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

ここ最近、Figmaファイルのリファクタリングに取り組む機会が何度かあり、再利用しやすいデザインづくりを試行錯誤してきました。 その中で得られた知見を記事にまとめいき…

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

「エンジニアリングに興味があるデザイナー、デザインに興味があるエンジニア Advent Calendar」20日目の記事です。 今年の5月から、社内でクライアントワークのチームか…

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

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

今までちゃんと使ったことがなかったTikTokを最近がっつり触ったところ、UIやインタラクションの細かな作り込みに気づくことが多く、発見の連続でした。今後の機能開発やUIデザインの参考にもできそうなので記事にまとめます。

1. アクションなしの没入体験TikTokで最も特徴的なのは動画フィードでのレコメンドの仕組みです。フルスクリーンで表示されるショート動画が上下のスワイプで切り替わり、視聴行動

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

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

昨年こんな記事を書きました。

毎朝、デザイン系の英語記事を10件ほどおすすめしてくれるSlackボットです。このボットは現在も問題なく稼働し続けていますが、毎朝のニュースは文字で読むよりも音声として聞いたほうが負担が少なく続けられそうです。

そこで、このSlackボットを拡張して、毎朝デザインニュースのポッドキャストを自動生成する仕組みを作ることにしました。

成果物はじめに成果物について。完

もっとみる
Kindle + DeepLでデザインの名著を自動翻訳して読む

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

以前から気になっていたこの本、

インタラクションデザインの名著と言われていますが、長らく絶版となっていて中古価格は年々高騰する一方です。なかなか手を出しづらい値段ですが、原著の最新版である以下なら普通の価格で購入できます。

この原著を自動翻訳し日本語で読めないかと試してみました。その手順を説明します。

注意事項今回説明する手順は、著作物の複製にあたります。著作権法では「私的使用のための複製」

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

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

この記事は、Figma Advent Calendar 2023の11日目の記事です。

最近Figmaで面倒な作業が発生し、自動化のためのFigmaプラグインのコードをChat GPTに書いてもらったところ大変はかどりました。その手順を説明します。

きっかけエンジニアとの振り返りMTGで、こんな相談を受けました。

解決策はいくつか考えられます。

目視でカウントする

Figmaのデザインシ

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

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

2023.11.29にFriends of Figma Shonanで発表した内容を紹介します。当日使用したスライドは以下から確認いただけます。

はじめに今回のテーマは「実務のためのマイクロインタラクション」です。

オライリーから出版されている『マイクロインタラクション』では以下のように説明されています。

最小単位のインタラクション

「愛される製品」と「許容範囲の製品」の違いを生む

トリ

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

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

2018年にSpotifyのiOSアプリでは5つあったタブが3つに変更されました。

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

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

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

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

オブジェクト指向UIデザインを業務に

もっとみる
UIモーション 02:理解のための動き

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

UIモーションについての記事第二弾です。
前回の記事ではUIになぜ動きが必要かを説明しました。

この記事で取り上げたように、UIに動きを取り入れる際は大きく2つの目的があります。 1つ目は「理解のための動き」です。利用者は動きを通じてシステムの状態や変化、情報の構造や関係性、操作方法についての理解を得ることができます。2つ目は「演出としての動き」です。グラフィック要素と共に使用されることが多く、

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

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

先日、AppleのSF Symbolsのカスタムシンボルを作成するFigmaプラグインを個人開発しました。

開発の経緯と利用方法について説明します。

SF Symbolsとは何か?SF Symbolsは、Appleが公式に提供しているアイコンライブラリで、5,000種類以上のシンボルが収録されています。現在正式リリースされているバージョンはSF Symbols 4で、次期バージョとしてSF S

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

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

Figmaの新機能としてVariables(変数)が追加されました。Variablesにカラー、数値、テキストを定義しておき、アートボード上のレイヤーの各種プロパティに適用して利用することができます。

公式のPlaygroundを見ると、ダークモードとライトモードなど、複数のモードを持つデザイントークンを管理するような使い方が想定されているようですが、これをデザイン内で使用するダミーコンテンツの

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

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

LlamaIndexを使うと、独自のデータを使ってChatGPTに質問に答えさせることができます。

このライブラリを使用して、Google Colabの環境でオリジナルなチャットボットを作成しました。これをSlackボットとして利用するためGoogle Cloud Functionを利用しました。その際の手順を記事にします。

Google ColabでのLlamaIndexの使用Google

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

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

⚠ 2024.1.22追記: この手順で使用しているFeedlyのMixes APIやAccessTokenの取得方法は現在公式ドキュメントから削除されています。現状問題なく動作していますが予告なく停止する可能性がります。ご注意ください。 

⚠ 2023.10.29追記:無料アカウントでのFeedly APIの提供は終了し、利用にはFeedly Pro(月額$8)の登録が必要になりました。

もっとみる
UIモーション01: UIになぜ動きが必要か?

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

スマホアプリやWebサービスなど、スクリーン上のUIには様々な形でモーション(動き)が使われています。
こうしたUIモーションは利用者として毎日何気なく目にしているものですが、そこには作り手がいて目的があるはずです。この記事ではUIモーションの目的と効果的な使用方法について考察します。

UIモーションとUIアニメーション「モーション」と「アニメーション」はどちらも動きを表す言葉として、同じ意味で

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

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

この記事は、Figma 開発 Advent Calendar 2022 の12日目の記事です。

先日、Simple BookmarkというFigma・FigJamウィジェットを作成しました。URLを入力すると、ファビコンとタイトルを表示するシンプルなウィジェットをFigma、FigJamのキャンバスに配置することができます。

公開から2週間ほど経ちますが1,000人以上のの方に試していただきま

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

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

ここ最近、Figmaファイルのリファクタリングに取り組む機会が何度かあり、再利用しやすいデザインづくりを試行錯誤してきました。
その中で得られた知見を記事にまとめいきたいと思います。
今回は再利用しやすいアイコンライブラリの作成方法について説明します。

ライブラリとは何か?そもそもライブラリとはなんでしょうか?
Wikipediaで「ライブラリ」を調べると以下のように説明されます。

元々はプロ

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

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

「エンジニアリングに興味があるデザイナー、デザインに興味があるエンジニア Advent Calendar」20日目の記事です。

今年の5月から、社内でクライアントワークのチームから自社事業のチームに異動し、映画・ドラマ・アニメのレビューサービスのFilmarksで有料会員機能のPMを担当しています。
以前はUIデザインやアプリ開発、あるいはその中間的な仕事としてプロトタイプ開発やディレクションな

もっとみる