マガジンのカバー画像

デザイン

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

#UIデザイン

「料金比較表」のUIを集めてみた|パーツ別デザインまとめ

「料金比較表」のUIを集めてみた|パーツ別デザインまとめ

こんにちは!株式会社Rabeeでデザイナーをしています、nanamiです🌿

今回はLPやサービスサイトでよく見かける「料金比較表」のUIパーツに特化してデザインを集めてみました。

LPや特定のサービスサイトは構成要素が比較的パターン化されています。
「この要素・セクションのデザインどうしよう」となった時用に、要素ごとにデザインのパターンのストックを持っておきたい。

そんな皆さまに参考にして

もっとみる
アプリのUIをFigmaに移植した話(1/2)

アプリのUIをFigmaに移植した話(1/2)

こんにちは、みんなの銀行プロダクトデザイナーの中野です。

みんなの銀行ではこの度、デザインツールをAdobe XDからFigmaに全面移行しました。このnoteではその経緯やTipsを2回に分けてご紹介したいと思います。

以前、デザインシステムの構築に取り組んでいる話を綴りましたが、今回はその続編のような内容です。

👇筆者の別のnoteを読む

デザインツールの移行という一大事デザイナーで

もっとみる
デザインシステムでアニメーションを気軽に導入!

デザインシステムでアニメーションを気軽に導入!

こんにちは、kenjowです。
クックパッドのデザイン推進部デザイン基盤グループという、デザインシステムの管理運用などを行っている組織でデザイナーをしています。

さて、今年3月にクックパッドのアプリ内で表示されるloadingアニメーションのデザインをリニューアルしました!

このようにレシピ検索中などの画面表示時に表示されます。また、以下3種類のアニメーションがランダムで表示されるようになって

もっとみる
UI/UXデザイナーが歩くゼルダの世界

UI/UXデザイナーが歩くゼルダの世界

こんにちは。Sun*デザイナーのあきおです。

2023年5月12日、任天堂から「ゼルダの伝説ティアーズオブザキングダム」が発売されました。
私は現在育休中で慣れない育児に勤しむ身ですが、その傍ら毎日ハイラルの大地を闊歩する冒険者でもあります。(時間が溶ける…)

前作同様ゲームの内容自体も素晴らしいのですが、UI/UXの工夫も光るゲームです。
今回はティアキンの素晴らしさをデザイナー視点で語って

もっとみる
ダメなUIを作るコツ

ダメなUIを作るコツ

先日、「イカれたUIを作ろうの会」というオンラインイベントを開催しました。多くの皆さまにご参加いただき、誠にありがとうございました。
また、当イベントでは期待以上に自由で多様なUIがお披露目され、おおいに血湧き肉躍りました。主催者としてうれしい限りです。

ちなみに社内でも「ダメなUIを作ろうの会」と銘打って勉強会を実施しました。こちらもクローズドな空間ならではの盛り上がりを見せました。

背景そ

もっとみる
デザインシステムは、言葉を大事にする。

デザインシステムは、言葉を大事にする。

『恥ずかしくないモノを世に出せたと思ったら、それは遅すぎる』と
言われるほど、デジタルプロダクト/サービス業界には猛烈なスピード感がある。

デザインのブラッシュアップと同時に、コードや仕様、果てはサービスコンセプトまでが留まることなく更新し続ける。

デザインシステムが考慮されていないプロダクトデザインは、その怒涛の速度の中でカオスと化し、一貫したユーザー体験を死守するために現場は疲弊していく。

もっとみる
UIの名称まとめ 〜よく見かけるけどあれなんていう名前?〜

UIの名称まとめ 〜よく見かけるけどあれなんていう名前?〜

コンポーネントを作るときや開発チーム、クライアントと話をするときに名称が一致していないと何の話をしているんだか、、?となってしまします。

忘れっぽい自分は毎回名前をうろ覚えでつけてしまっていますが、戒めとして記事を書くことでしっかり覚えていきたいと思います。

※色んなところから引っ張ってきているので正式名称ではない(複数呼び名がある)ものがあるかもしれませんが、ご了承ください。

UIパーツ見

もっとみる
「なんか違う」と言われないためにデザイナーができること

「なんか違う」と言われないためにデザイナーができること

「イメージと違います」
これはデザイナーが一番言われたくないし、言われると悲しくなるワードだと思います。

私も今までこの言葉を聞くと「自分のスキル不足が原因だ・・・」と落ち込んでいましたが、最近、この原因は2つに分類できて、そしてそれは全く別物のスキルだと気付きました。

①ゴールとなるイメージを、技術不足により再現できていない
②ゴールとなるイメージを、依頼者と共有できていない

①は技術的な

もっとみる
これからデザイナーとうまくやっていきたいあなたへ

これからデザイナーとうまくやっていきたいあなたへ

ラクスデザインチームのうえだです。

突然ですが、デザイナーって「何をしているのかよくわからない人たち」だと思っていませんか?
デザインカンプを見て、「なぜこのデザインに至ったのか」疑問に思うことはありませんか?

何事も結果だけではなく、その背景や意図を説明しない限り理解は得られないものです。
そこで今回は、そもそもデザイナーって
・どういう姿勢でデザインをしているのか?
・どのようなプロセスで

もっとみる
追従ボタンをやめたらCVRが上がった話

追従ボタンをやめたらCVRが上がった話

クラウドファンディングサービスCAMPFIREでデザイナーをしている、塩月(@oshiokeiko)です。

ここ最近、私はCAMPFIREでプロジェクトを実施する方(プロジェクトオーナーさん)向けの施策に取り組んでいます。
その中で、小さな変更だけど面白い結果が出たな。と思ったことを記事にしてみました。UIを担当していてCVR向上のため画面改善を検討している方などのお役に立てれば幸いです。

もっとみる
全てのUIデザインに必要な5つの状態(実例と共に) - The five UI states

全てのUIデザインに必要な5つの状態(実例と共に) - The five UI states

授業ではあまり習わないですが、UIデザインの実務において常に考えなければならないフレームワークの一つにThe five UI statesがあります。雑に説明するとUIは以下の5つの状態になる可能性があることを踏まえて、それぞれに対してデザインを作っておくというコンセプトです。
• 何も登録されていない状態 (Blank state)
• ロードしている状態 (Loading state)
• 不

もっとみる
UIのお作法。28個の「〇〇できそう感」をまとめました。

UIのお作法。28個の「〇〇できそう感」をまとめました。

UIデザインにおいて「〇〇できそうな感」を出すことは、非常に大切です。予測される動作や意味が、自然に理解できれば、ユーザーにとって優しいデザインになるんじゃないかと思います。アイコン、大きさ、色などなど、デザインは細かい要素の積み重ね。すでに多くのユーザーに浸透し、習慣化されていそうな「〇〇できそう感」を28個まとめました。

1、進めそう感

時間の流れは左から右に表現します。右矢印は次、進む、

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

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

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

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

内海「そうなんや」

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

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

もっとみる
レイアウトデザインの視点を増やす
思考&Tips

レイアウトデザインの視点を増やす 思考&Tips

はじめにこのnoteは、私がTwitterで発信した「デザインの思考&Tips」のなかから、レイアウトデザインに関する内容を編集してまとめたものです。普段のデザイン業務で私が意識している、webデザインを中心としたレイアウトの考え方やTipsを紹介します。

「レイアウト」といっても、ただ単にドキュメント上に要素を置くのは誰でもできます。どんな素材にするか、どんな動線にするかを考えて位置を決めてい

もっとみる