はてなブックマーク

今年はバイブコーディングの一年でした。 ChatGPTでコードを部分的に書いてもらっていた1月から、AIが自律的に開発をこなす12月まで。様々なAI開発ツールを試しながら、プラグインやアプリの開発に取り組みました。リリースできたFigmaプラグインは2本。プロトタイプで止まったものや検証のみのものを含めると、10本以上の開発に挑戦しました。 使用したツールも様々で、変化の多い１年でした。 AIコードエディタ：Cursor、Antigravity CLI：Claude Code、Codex フロントエンド生成：Figma Make、v0 ノーコード：Zapier、Agent Builder １月から振り返ってみます。 1月：Custom Text Linter昨年末から1月にかけて、テキストチェックのFigmaプラグインを開発・リリースしました。業務での課題をきっかけに、外部公開可能なプラグ

今年のWWDCから各セッションの動画がYouTubeで視聴できるようになりました。日本語字幕を確認できたり、読み上げソフトで日本語音声で視聴できたりします。 WWDCの各セッションの動画をYouTubeのApple Developerチャンネルで視聴できるようになっていた。https://t.co/hA4RVE0ZxQ 2023年のWWDCのセッションも追加されてる。日本語字幕で視聴できるのが便利。 pic.twitter.com/wbU86jBoBu — 鈴木慎吾 / TSUMIKI INC. (@shingo2000) June 11, 2024 手軽に視聴できるようになったので、いつもよりたくさんのセッションを視聴することができました。 主にデザインに関連するセッションで気になったものをまとめていきます。 ラインナップは以下の通りです。 visionOSやApp Intentのセッシ

アプリやWebサイトをデザインする際に、情報をまとまりごとに線で区切ることがあります。リストの各項目を区切ったり、コンテンツをセクションごとに区切ったりする場合です。この区切り線は"Divider"と呼ばれます。 このDividerの線幅について、国内外のサービス各社の対応を調べてみました。 iOSとAndroidのDividerの線幅の違いiOSアプリのリストはSwiftUIで以下のように実装できます。 var body: some View { List { Section(header: Text("タイトル")) { Text("テキスト") Text("テキスト") Text("テキスト") } } .listStyle(.plain) }これをプレビューすると、各リストの間に 物理ピクセル数 1 の太さの線が表示されます。 iOSアプリのリストAndroidアプリのリストは以下

今までちゃんと使ったことがなかったTikTokを最近がっつり触ったところ、UIやインタラクションの細かな作り込みに気づくことが多く、発見の連続でした。今後の機能開発やUIデザインの参考にもできそうなので記事にまとめます。 調査期間：2024/1/22 - 1/29 使用環境：iPhone 15、iOS17 1. アクションなしの没入体験TikTokで最も特徴的なのは動画フィードでのレコメンドの仕組みです。フルスクリーンで表示されるショート動画が上下のスワイプで切り替わり、視聴行動（視聴時間やスキップなど）に応じて次の動画がレコメンドされ続けます。そのため利用者はフォロー、いいね、コメントなどの主体的なアクションを一切しなくても、フィードをスクロールするだけで自分好みのコンテンツが表示され続けます。 動画フィードでは利用者の視聴行動に応じて動画が次々とおすすめされるTwitterやInsta

毎朝、デザイン系の英語記事を10件ほどおすすめしてくれるSlackボットです。このボットは現在も問題なく稼働し続けていますが、毎朝のニュースは文字で読むよりも音声として聞いたほうが負担が少なく続けられそうです。 そこで、このSlackボットを拡張して、毎朝デザインニュースのポッドキャストを自動生成する仕組みを作ることにしました。 成果物はじめに成果物について。完成したポッドキャストは毎朝SpotifyとApple Podcastで配信しています。 おおまかな処理の流れ開発前に想定した処理の流れは以下の通りです。 毎朝ポッドキャストが自動で配信される理想的なフロー自分はコンテンツ制作者ではなく、あくまでリスナーというスタンスを取りたいため、ワークフローに自分が介在しない完全自動化が理想です。 ところが、Sound Cloud APIの利用に必要なアプリケーション登録の受付が現在停止しているこ

インタラクションデザインの名著と言われていますが、長らく絶版となっていて中古価格は年々高騰する一方です。なかなか手を出しづらい値段ですが、原著の最新版である以下なら普通の価格で購入できます。 About Face: The Essentials of Interaction Design (English Edition) www.amazon.co.jp この原著を自動翻訳し日本語で読めないかと試してみました。その手順を説明します。 注意事項今回説明する手順は、著作物の複製にあたります。著作権法では「私的使用のための複製」のみ認められており、これを超える目的での複製は著作権法に違反する可能性があります。ご注意ください。 使用環境使用したのは以下の環境です。 Macbook Air Automator（Mac標準搭載の自動処理ソフト） Adobe Photoshop Adobe Acrob

先日、検索結果の絞り込みUIの検討をするために事例を調べたところ、意外にもアプリによって様々な違いがありました。面白いテーマなため観点ごとに違いを整理し、メリット・デメリットや設計意図を考察しました。注目した観点は以下の7つの点です。 1. 絞り込み・並び替えボタンの配置 2. 絞り込みと並び替えの区別 3. 絞り込みUIの表示方法 4. 絞り込みUIの非表示方法 5. 絞り込み条件の指定方法 6. 数値の範囲で絞り込む場合の指定方法 7. 絞り込み後の表示の変化 これらの観点をもとに以下の条件で12のアプリを調査しました。 調査対象：Amazon、ZOZOTOWN、Pairs、YouTube、メルカリ、UNIQLO、Shutterstock、クラシル、Evernote、Uber Eats、LIPS、NewsPicks 使用OS：iOS14 調査日：2021年7月9日 1. 絞り込み・並び

この記事は、Figma Advent Calendar 2023の11日目の記事です。 最近Figmaで面倒な作業が発生し、自動化のためのFigmaプラグインのコードをChat GPTに書いてもらったところ大変はかどりました。その手順を説明します。 きっかけエンジニアとの振り返りMTGで、こんな相談を受けました。 使用頻度が高いコンポーネントから実装を進めたい。デザイン上で使用頻度の高いコンポーネントの一覧を出してもらいたい。 解決策はいくつか考えられます。 目視でカウントする Figmaのデザインシステムアナリティクス機能を使う 既存のプラグインを使ってカウントする プラグインを開発してカウントする 対象となる画面数が３画面くらいなら、「1. 目視でカウントする」で解決しそうです。しかし対象となるFigmaファイルで扱われている画面数は100画面を軽く超えるので、この案は却下です。 「2

2023.11.29にFriends of Figma Shonanで発表した内容を紹介します。当日使用したスライドは以下から確認いただけます。 はじめに今回のテーマは「実務のためのマイクロインタラクション」です。 オライリーから出版されている『マイクロインタラクション』では以下のように説明されています。 最小単位のインタラクション 「愛される製品」と「許容範囲の製品」の違いを生む トリガー、ルール、フィードバック、ループとモードの構造を持つ マイクロインタラクション、特にアニメーションやモーションをともなった社内での事例を元に実務に取り入れる方法について説明していきます。 制作事例Filmarksは映画・ドラマ・アニメのレビューサービスです。(株)つみきで自社サービスとして運営しています。作品一覧から画像をダブルタップすると、見たい映画に登録できます。マイページのタブに格納されるモーショ

Spotifyのタブバー、いままで5つだったタブが3つになってた。消えたのはBrowseとRadio。BrowseはSearchに統合され、Radioの機能はたぶん消えた。こういうアップデートって勇気がいるが、結果使いやすくなったと思う。 pic.twitter.com/vf1ncj0qjh — 鈴木慎吾 / TSUMIKI INC. (@shingo2000) October 19, 2018 長く使われ続けているサービスでは、新しい機能がどんどん追加されていきます。新しいユーザーを増やしたり、現在のユーザーを引きつけ続けることが主な理由で、Spotifyにも様々な機能が追加されています。それにも関わらず主要なナビゲーションのタブを減らすのは勇気のいる選択だと思いました。プロダクト開発に関わっていると実感しますが、何かを付け加えることよりも何かを削ることのほうがずっと難しいのです。このU

この記事で取り上げたように、UIに動きを取り入れる際は大きく２つの目的があります。 １つ目は「理解のための動き」です。利用者は動きを通じてシステムの状態や変化、情報の構造や関係性、操作方法についての理解を得ることができます。２つ目は「演出としての動き」です。グラフィック要素と共に使用されることが多く、モチベーションや達成感や愛着など利用者の感情に働きかけます。 今回の記事では１つ目の「理解のための動き」について、具体例を交えながら深めていきたいと思います。 動きによって何の理解を助けるのか？UIの動きによって何の理解を助けるのか？ 理解のための動きの目的をさらに複数に分けると、大きく以下の４種類に分類することができます。 アクションの結果を伝える システムの状態や変化を伝える 操作方法の理解を助ける 情報の構造や関係性の理解を助ける 具体的な事例を元に説明していきます。 1. アクションの

公式のPlaygroundを見ると、ダークモードとライトモードなど、複数のモードを持つデザイントークンを管理するような使い方が想定されているようですが、これをデザイン内で使用するダミーコンテンツの管理に使用してみたいと思います。 FigmaのVariablesにダミー情報を登録しておき、一覧や詳細表示のインスタンスに反映するアイディア。 要素の有無や文字量が多い場合など、複数パターンを用意しておくと表示の検証が手軽にできるし、スクショに使うダミー情報もすぐに反映できる。良い気がするぞ。 #config2023 pic.twitter.com/Q4OgyFzJ5z — 鈴木慎吾 / TSUMIKI INC. (@shingo2000) June 23, 2023 ダミーコンテンツとは？ダミーコンテンツとは実際には存在しない本物らしいテキストや画像のことを指し、UIデザインの際に頻繁に使用しま

⚠ 2024.1.22追記： この手順で使用しているFeedlyのMixes APIやAccessTokenの取得方法は現在公式ドキュメントから削除されています。現状問題なく動作していますが予告なく停止する可能性がります。ご注意ください。 ⚠ 2023.10.29追記：無料アカウントでのFeedly APIの提供は終了し、利用にはFeedly Pro（月額$8）の登録が必要になりました。 こんな感じのSlackボットを作りました。 毎朝８時ごろに、デザイン系の英語記事を10件ほどSlackでおすすめしてくれます。 Feedly API ＋ ChatGPT (gpt-3.5-turbo) + Slack API + GAS (Google Apps Script) を使用しています。 1. 前提前提として以下の準備が必要です。 Google Apps Scriptの利用 Feedlyのアカウ

「エンジニアリングに興味があるデザイナー、デザインに興味があるエンジニア Advent Calendar」20日目の記事です。 今年の５月から、社内でクライアントワークのチームから自社事業のチームに異動し、映画・ドラマ・アニメのレビューサービスのFilmarksで有料会員機能のPMを担当しています。 以前はUIデザインやアプリ開発、あるいはその中間的な仕事としてプロトタイプ開発やディレクションなどを経験してきました。 PM業の傍ら、社内のデザイナーとエンジニアの受け渡し部分の改善に取り組みました。その検討過程について紹介します。 要件定義・UIデザイン・開発間のワークフロー改善もともとFilmarks内ではディレクターがGoogleスライドなどで要件資料とGithub Issueをつくり、 デザイナーがSketchでUIをつくりZeplinで書き出したURLをエンジニアに受け渡し、エンジニ

前回はInstagramのマイクロインタラクションを観察しました。今回はTwitterのマイクロインタラクションを観察し、それらがユーザーに与える効果を考察します。 ----- 新しいツイートの表示 ホーム画面で新しいツイートがあると、画面上部にラベルが表示される。タップすると該当位置までスクロール。iOSの更新UIとして定番化したPull-to-refresh（引っ張って更新）が初めて使われたのは、Twitter公式アプリの前身となったTweetieだったが、今や引っ張らなくても更新されるのは感慨深い。上が新しく下が古いというタイムラインでの基本ルールと、上から下に読む複数行テキストの特性上、タイムラインではスクロールの方向が一方向に定まりにくい。そのため、タイムラインを最上部までスクロールしなくても、更新された情報があると分かることは有益に感じられる。 入力文字数のカウントダウン 投稿

マイクロインタラクションにおいて、アニメーションなどの細部の作り込みや、それに伴う体感的な心地よさは大切ですが、手法に寄りすぎてしまうと導入意図やそれらが生み出す効果を見失いがちです。 そこで、マイクロインタラクションをデザインする際のインプットとして色々なアプリの挙動を観察し、それらがユーザーに与える効果を考察します。 今回はInstagramのマイクロインタラクションの観察です。 マイクロインタラクションのデザイン方法については、以前こちらに書きました。 マイクロインタラクションのデザイン。UIデザイナーもコードを学ぼう コレクション追加時のフィードバック 写真がプロフィールタブに格納されるアニメーション。プロフィール画面にコレクションが一覧化されることを伝える。サムネイルの動きが一旦停止するため視線が誘導される。 プロフィールタブを長押しした際のアカウント切替 上級者向けインタラクシ

前回の記事では、コードを学んだ経験がインタラクションを重視したデザインをするきっかけになったという話を書きました。 今回はマイクロインタラクションとコードについてです。 マイクロインタラクションとは？僕がマイクロインタラクションという言葉を知ったのは、この本がきっかけでした。 アプリやWebサービスを使っていると、些細だけど使いやすさに繋がっていたり、他のアプリにはない特徴となっているインタラクションに出会うことがあります。登録フォームのパスワードの安全性を示すバーや、いいねボタンを押した際の一瞬のアニメーションなど表現や目的は様々です。 この本では、こうしたインタラクションが ・小さいけれど気の利いたアイディア ・「こよなく愛する製品」と「許容範囲の製品」の違いを生むものであるとされ、様々な事例と共に分析されています。事例を眺めるだけでも楽める本なので是非手にとってみてください。 マイク