マガジンのカバー画像

UI UX interaction

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

#UIデザイン

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

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

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

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

もっとみる
ルールではなく補助線  ─ユーザー数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】の前半(要件〜構造)について紹介していきます。
この前半フローのおかげで私は作業の手戻りが無くな

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

内海「そうなんや」

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

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

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

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

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

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

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

もっとみる

新・えきねっとは誰のためのシステムなのか?

結論から書くと、ちょっと思い当たらない。というおはなし。

そもそも「えきねっと」とはJR東日本の予約サイト。今週末にリニューアルを実施しました。

切符オタクの界隈では「あの切符が発行できない」「売ってはいけないはずの切符が検索結果に出てくる」などなど、いろいろな反応があったようですが、一般の方からすると「鉄道オタクがなんか騒いでいるなぁ」っていう感じかもしれません。私も個々論的なところはあまり

もっとみる
ここが違うよ、紙のデザインとアプリデザイン

ここが違うよ、紙のデザインとアプリデザイン

こんにちは。
上流から下流まで、ワイドレンジなUXデザイナーを目指しているもりみです。

さて、今日は紙のデザイナーさんが、アプリデザインをする時に気をつけた方が良いと思ったことを書きたいと思います。

1.書体にこりすぎない

美しい書体を使っているデザインや、文字組みが美しいものを見ると、うっとりしますよね。とってもわかります、その気持ち。
私も「フォントが●●%OFF!!」なんて見かけると、

もっとみる