マガジンのカバー画像

デザインTopic

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

#UIデザイン

エンジニアとデザイナーをつなげる!Figmaでつくる実装しやすいデザインデータ

エンジニアとデザイナーをつなげる!Figmaでつくる実装しやすいデザインデータ

こんにちは!プロダクトデザイナーの吉林です!

最近、新サービスのデザインシステムを0から立ち上げる機会があったのですが、実装しやすいデザインデータを目指して、自分なりにやってよかったな〜ということを備忘録的にまとめてみました。

Figmaの機能を使った具体的な内容や、初歩的なことも含みますが…少しでも参考になれば幸いです🙇‍♀️

1. 変数はFigmaのバリアブル機能で管理し、コードと一致

もっとみる
「CTAボタン」のUIを集めてみた|パーツ別デザインまとめ

「CTAボタン」のUIを集めてみた|パーツ別デザインまとめ

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

今回は、LPにおいてCV(コンバージョン)に大きく影響を与えるUIパーツ「CTAボタン」周りのデザインをパターン別に集めてみました。

はじめに前回の記事で予告をした通り、今後、LPやWebサイトを構成する様々な要素を1つずつ特化して調査をしていきたいと思っています。
今回はその「パーツ別デザインまとめ」シリーズ2本目で

もっとみる
エンジニア直伝!デザイン&実装の両観点で最適な「積むUIレイアウト」の制作方法

エンジニア直伝!デザイン&実装の両観点で最適な「積むUIレイアウト」の制作方法

こんにちは、@ShikiCheriです。
現在フリーランスのUIUXデザイナーをやっており、単発案件ではなく長期的に組織や事業にコミットするような形で、サービス開発のデザインを中心に担当しています。

デザインシステム構築を担当したことでUIデザインの最適解について目から鱗が落ちた…!?クックパッドは25年のサービスの歴史があり、特にWeb版は今でも現役で活用されているサービスです。私はこの長寿サ

もっとみる
アメリカと日本で違うピンタレストのUIを分析

アメリカと日本で違うピンタレストのUIを分析

ピンタレストアプリのユーザー登録画面が、アメリカと日本でかなりUIが違ったので、分析していきたいと思います。ちなみに、ピンタレストはユーザー登録画面以外は基本的にアメリカと日本でUIが同じみたいなんです…。不思議です。

入力ステップの表示の仕方が違うアメリカと日本では、入力ステップの表示の仕方でいくつか違いがありました。

アメリカ
・ステップバーで進捗を表示
・テキストで「1 of 3」と補足

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

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

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

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

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

もっとみる
【随時更新予定】推しのFigma Pluginまとめ

【随時更新予定】推しのFigma Pluginまとめ

こんにちは、株式会社アトラエでデザイナーをしています三上蒼太(@sota_mikami)です。

弊社ではデザインツールとしてSketchとFigmaを使っています。
どちらも併用していますが、個人的な好みはどちらかと言えばFigma(前職で使い倒していたので)。

この記事では、そんなFigmaの推しPluginをまとめていきます。
気分次第で随時更新予定です。

Unsplush説明する必要も

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

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

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

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

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

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

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

1、進めそう感

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

もっとみる