マガジンのカバー画像

UI UX interaction

52
運営しているクリエイター

記事一覧

タップ成功率を可視化するUXツール「Tappy」公開

タップ成功率を可視化するUXツール「Tappy」公開

こんにちは、LINEヤフーDesign公式note編集部のGOです。
この記事では、LINEヤフー研究所が開発し2024年1月に社外公開されたタップ成功率可視化ツール「Tappy」について、その担当者にインタビューした内容をお届けします。
個人的に利用したところ、「タップ成功率の可視化」というものがいかにデザイナーにとって有用であるのか、使うほどに実感したため、すぐに記事化を打診。担当者にご快諾い

もっとみる
間違えがちなUI用語《モーダル?ポップアップ?》

間違えがちなUI用語《モーダル?ポップアップ?》

こんにちは!Link-UのUIチームです!
今回の記事はモーダルやダイアログ、ポップアップなどの似たようなUI用語について具体的な使用用途をまとめました。
混同しがちな用語なので明確に違いを捉えて理解しましょう🔥

モーダル特定の操作を求めるために表示させるウィンドウ
画面を覆い被さるようなウィンドウが表示されることを「モーダル」と呼びます。
情報を入力するように促したり、承諾やキャンセル、項目

もっとみる
094 FigmaのVertical trim(上下トリミング)が惜しい感じ。2023/03/29

094 FigmaのVertical trim(上下トリミング)が惜しい感じ。2023/03/29

やはり日本語の文字って難しいというか、形式が違うというか。

今日は小さいけど大きなアプデがFigmaに入り、「Vertical trim(上下トリミング)」という機能が地味に細かい部分ですが地味に嬉しい!けど、惜しい感じなんです。

おそらく欧文フォントのベースラインを基準にしてるので、日本語フォントは割りかしはみ出ています。上下中央かもちょっと怪しい感じです。

ただ欧文フォントでも個性的な形

もっとみる
ルールではなく補助線  ─ユーザー数2,000万人超のサービスにおける、Design Systemを立ち上げた話

ルールではなく補助線 ─ユーザー数2,000万人超のサービスにおける、Design Systemを立ち上げた話

こんにちは、メルカリDesign Systemの立ち上げと運用を担当したデザイナーのtottieです。
この記事では、メルカリの抱えていたデザイン上の課題をDesign Systemの導入で改善したお話をご紹介いたします。

なぜDesign Systemを導入したの?Design Systemを導入した理由は、大きく分けて2つあります。

1つめは、開発における課題です。
導入を決定した当時(2

もっとみる
実案件から学んだ、本当に役立つUIデザインの法則50 ユーザビリティチェックリスト総集編

実案件から学んだ、本当に役立つUIデザインの法則50 ユーザビリティチェックリスト総集編

こんにちは!i3DESIGNデザイナーチームです。
今日は、私たちが様々なクライアントのプロダクト・サービスの改善を行っていく中で得た、ユーザビリティを改善するためのヒントを50個シェアしていきたいと思います。

マガジン「ユーザビリティチェックリスト」01〜09ののまとめ記事です。

「ユーザビリティチェックリスト」ということで、UIデザインの「あるある」を取り上げ、改善案とセットでまとめていま

もっとみる
UIから「白」が消える日

UIから「白」が消える日

こんにちは。ritarと申します。
今年の10月頃、YouTubeに大きいデザイン変更がありました。

アイコンの変更、角丸やレイアウトなど全体的に一新されているのですが、中でも自分が仰天したのは「アンビエントモード」という新機能です。

このモードをオンにすると、動画の下側のUI領域が、まるで動画部分から光が漏れているかのようにじんわりと色づきます。
これを見たとき自分は度肝を抜かれました。なん

もっとみる

デザインシステムの目的を考える

デザインシステムの目的とは?

と問われるとあなたはどんな風に答えるでしょうか?
おそらく「ユーザに一貫性のある体験を提供するため」「デザイン資産を再利用できるようにして生産性を上げるため」そんな答えが一般的だと思います。私もそんな感じで捉えていましたし、間違いなくそれらはデザインシステムの効能だと思います。

が、細かいところをよくよく考えると「一貫性とは具体的にどこが一貫していることを指すのか

もっとみる
「楽天カードらしさ」を追求した楽天カードのデザインシステムの導入と今後について

「楽天カードらしさ」を追求した楽天カードのデザインシステムの導入と今後について

楽天グループはさまざまなサービスを展開しており、楽天カードのお客様においても楽天カードだけではなく楽天市場や楽天銀行など、ほかの楽天グループのサービスも多くのお客様にご利用いただいています。

それぞれご提供するサービスは別ですが、お客様にとっては1つの「楽天ブランド」であるため、楽天グループ共通のデザインを踏襲しながらも、金融サービスに特化した顧客体験を提供できるよう、楽天カードのデザインチーム

もっとみる
手戻りがゼロに!? 情報整理を変えた独自UIフロー

手戻りがゼロに!? 情報整理を変えた独自UIフロー

こんにちは!UIデザイナーの大竹(@satocalog)です。最近では、UXリサーチ周りやワークショップ設計をゴニョゴニョしています。

今年Chatworkでは、新しいUIデザインフローが作成されました。そのきっかけについては、以下の記事で紹介しています。

今回は、独自UIフロー【MONDRIAN】の前半(要件〜構造)について紹介していきます。
この前半フローのおかげで私は作業の手戻りが無くな

もっとみる
Figma の Component Properties を学ぶ

Figma の Component Properties を学ぶ

こんにちは、ふじけん(@kenshir0f)です。
Figma Config 2022 で新しく追加された Component Properties によって UI コンポーネントをより再利用しやすい形で作ることが可能になりました。

この記事では Figma の Component Properties を使った UI コンポーネントについて、使い方とメリットなどについてまとめたいと思います。

もっとみる
「エンジニアに愛される Figma デザインの作り方」文字起こし

「エンジニアに愛される Figma デザインの作り方」文字起こし

先日 Figma Config にて「エンジニアに愛される Figma デザインの作り方」というタイトルで発表をしました。

せっかくなのでもっと多くの人に内容をお届けできればなと思い立ったので文字起こししてみます。

「エンジニアに愛されるデザイン」とは?私は二つ大きい基準があると思っていて、それは

デザインの意図を掴みやすい

デザインが変わった時の変更が容易

があります。そして前者は S

もっとみる
Figmaの新機能まとめ #Config 2022

Figmaの新機能まとめ #Config 2022

Figmaの大きなアップデートイベント Config 2022が開催されています。

僕自身業務でガツガツfigmaを使っているのですが、変更点は今まで気になっていたところを解消してくれる良いアップデートだなと思いました。

変更自体は figma公式のツイートのスレッド および それを訳している方 をみればざっとわかりますが、自分でも内容を噛み砕いて理解するために記事にまとめてみました。

内容

もっとみる
エモーショナルUIデザイン

エモーショナルUIデザイン

はじめに2013年にスタートアップに参加したことをきっかけに、今までいくつかのデジタルプロダクトのUIデザインに携わってきました。2020年にTakramに参加してからは、さらに多様な事業のプロダクトに関わらせていただいています。この約10年間のあいだに世の中のUIデザインのノウハウは確立されてきており、既存のコンポーネントなどを組み合わせれば、きれいなUIが誰でも簡単に作れる時代になりました。そ

もっとみる
Figmaでよく使うショートカット

Figmaでよく使うショートカット

こんにちは。UIデザイナーのカヒブンです。

UIデザインする時にショートカットを使うと、効率良く時間をかけずに作業をすすめられますので、今週のデザトレ(弊社のデザイン部で毎週行われているデザイン勉強会)でチームと一緒にFigmaでよく使うショートカットを学んでみました。

今回の内容は、Figmaを操作しながら学ぶとわかりやすいので、下記のFigmaリンクを参考にしていただければ幸いです。

もっとみる