マガジンのカバー画像

UI UX interaction

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

#デザイン

押したくなる色はある?CVボタンの色の違いによるクリック率・コンバージョン率への影響

押したくなる色はある?CVボタンの色の違いによるクリック率・コンバージョン率への影響

Webサイト上でユーザーをコンバージョンに導くCV(コンバージョン)ボタン。行動を喚起することから、CTA(Call To Action)とも呼ばれています。

ボタンの色はクリックやコンバージョンにどのような影響を与えるでしょうか?仮に「この色が最適解」というものがあれば、世の中のボタンはその色ばかりになっていることでしょう。

結論から言えば、ボタンを配置する場所や誘導する目的によって最適な色

もっとみる
ルールではなく補助線  ─ユーザー数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デザインの「あるある」を取り上げ、改善案とセットでまとめていま

もっとみる

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

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

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

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

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

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

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

それぞれご提供するサービスは別ですが、お客様にとっては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

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

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

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

もっとみる
わたしのUIデザイン制作フロー〜情報設計からビジュアルデザインまで〜

わたしのUIデザイン制作フロー〜情報設計からビジュアルデザインまで〜

こんにちは、UIデザイナーのマスダです。

この記事では、私のUIデザイン制作フローの紹介と、各段階での勉強に役立つ記事や本などを紹介しています。具体的なUIデザインの手法は紹介していません…!

わたしなりのUIデザインの制作フローを紹介することで、UIデザイナーの仕事が少しでもイメージしやすくなればいいなと思います。これからUIデザイナーを目指そうと思っている方、UIデザイナーになりたての方に

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

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

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

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

もっとみる
超わかる!ユーザーエクスペリエンス(雑)

超わかる!ユーザーエクスペリエンス(雑)

社内メンバー全員が、ユーザーエクスペリエンスをざっくり理解するための資料。(注: 以下は、ざっくり最速で基礎知識を説明するものです。厳密な定義は、ちゃんとした資料をご覧ください)。

5秒でわかる雑なUXモデルまず「だいたいあってる、ざっくりした概念図」を出します。

「すき焼き(コンテンツ)を、お箸(インターフェース)で、食べたら美味しかった(エクスペリエンス)!」

シンプルに示せば、UXとは

もっとみる
ミルクボーイがUIとUXの違いを説明したら

ミルクボーイがUIとUXの違いを説明したら

挨拶内海「どうもお願いします。ありがとうございます。今、NFTアートをいただきましたけどもね。ありがとうございます。こんなんなんぼあってもいいですからね」

駒場「いきなりなんですけどね、うちのおかんがね、好きなIT用語があるらしいんやけど」

内海「そうなんや」

駒場「その名前を忘れたらしいねん」

内海「IT用語の名前忘れてまうってどうなってんねん。あれやろ、IT用語ゆうたらどうせ、デザイン

もっとみる
UIデザイン時にやってしまいがちな18の誤ち

UIデザイン時にやってしまいがちな18の誤ち

WebデベロッパーのVictor氏による下記のツイートから始まるスレッドが大変参考になる内容だと感じたので、ご本人に許諾を得て日本語で紹介させていただくことにしました。

私は今年100以上のユーザーインターフェースをレビューしました。あなたのUI/UXデザインをより良くするための、下記に示す18個の良くある誤ちを回避しましょう。

本記事で使用する画像はすべてVictor氏のツイートから拝借して

もっとみる