マガジンのカバー画像

ためになるUIUX記事

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

記事一覧

「shadcn/ui」って何が凄いの?実装知らないWebデザイナーが調べてみた

「shadcn/ui」って何が凄いの?実装知らないWebデザイナーが調べてみた

はじめにこんにちは!株式会社Rabeeのデザイナーのakaneです。

今回は、最近よく耳にする「shadcn/ui」について調べてみました。どうやらUIコンポーネントっぽいことは分かるけど、一体何を指すんだろう?いわゆる「UIライブラリ」との違いって何?といった疑問をデザイナー目線でお話しします。

どうぞ最後までお楽しみください🐰

「shadcn/ui」って最近よく聞きますよね「shadc

もっとみる
4年ぶりにデザインシステムを大幅改善した話

4年ぶりにデザインシステムを大幅改善した話

こんにちは、10X プロダクトデザイナーの日比谷(@suuminbot)です。2週間前、人生で初めて梅干しを食べ、梅干しの美味しさに目覚めました。スーパーで買えるおすすめの梅干しがあったら教えてください。

🍙 🍙 🍙

2020年のStailerのサービスイン当初から使われている「Stailer デザインシステム」。入社して数年たち自分がそのデザインシステムを使う中で課題が複数あり、今後の

もっとみる

初めての画面設計書(+Notion活用方法公開!)

本記事は、Sun* Advent Calendar 2022、14日目の記事になります。

自己紹介こんにちは 👋
2022年の春、新卒PMとしてSun*にジョインしたTam Xiuyao(タムシューヤウ)と申します!

多民族社会のマレーシアで生まれ育ちました。当地の高校を卒業後、日本に留学しました。大学ではデータサイエンスと機械学習の周りを研究して、スタートアップ会社でソフトウェアエンジニア

もっとみる
デザインの意思決定を強化するための論理的アプローチ

デザインの意思決定を強化するための論理的アプローチ

この記事では、私が普段デザインを作成するときの思考を論理立てて言語化してみました。
ここで紹介する思考プロセスは、ベテランのデザイナーであればすでに感覚的に実行している基本的な手法だと思います。

しかし、日々の作業で漫然と手を動かしてしまい、期待通りの成果が得られないデザイナーにとっては、新たな視点を提供できるはずです。

また、デザインの意思決定を「センス」ではなく「ロジック」として明確に言語

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

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

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

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

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

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

もっとみる
デザインレビューのガイドラインを作りました -心得編-

デザインレビューのガイドラインを作りました -心得編-

こんにちは。hacomonoのプロダクトデザイナーのかんちゃんです。

組織に所属しているデザイナーの方であれば、レビューのガイドラインが欲しいと思った経験はありませんか?

この記事は発足して2年弱のデザイン組織でデザインレビューのガイドラインを作成した経緯の記録です。
中小規模のデザインチームでレビューに課題を感じている方々の参考になればと思い、「心得編」「レビュー観点編」「レビューフロー編」

もっとみる
デザインとエンジニアリングの両側面から考えるユーザー体験

デザインとエンジニアリングの両側面から考えるユーザー体験

概要2024年11月14日開催の Spectrum Tokyo Meetup #15 の英語登壇を、日本語でまとめたものです。一部内容や画像修正しています。

デザインとエンジニアリングの橋渡しを担う「デザインテクノロジスト」という職能で、kintoneのデザインシステムの開発運用に携わっています。

その知見を生かして、デザインとエンジニアリングが交わる領域だからこそできる、よりよいユーザー体験

もっとみる
デザイナーが素早く戦力になるために心がけているキャッチアップとアウトプット

デザイナーが素早く戦力になるために心がけているキャッチアップとアウトプット

こんにちは、フリーランスプロダクトデザイナー@ShikiCheriです。今回は参画したプロジェクトの制作事例を紹介しつつ学んだこと、自分が心がけているキャッチアップとアウトプットのコツについてまとめました🎉

インプットフェーズとアウトプットフェーズで心がけたい"誤解を作らない仕組み"そんな状況下、短期間で着実に事業を前進させるために2つのフェーズで意識していることがあります。

参画直前:

もっとみる
FigmaのLayout grid(レイアウトグリッド)を活用する

FigmaのLayout grid(レイアウトグリッド)を活用する

渋谷でデザイナーをしています。福田です。
FigmaのLayout gridを利用してデザインを作成するのが、便利だったので備忘録として記録します。

Responsive layout grid とは
レスポンシブレイアウトグリッドでデザインを作成すると、画面のサイズや向きに左右されることなく、レイアウトを組むことができます。また、レイアウトグリッドのルールを決めてしまえば、そのルールに従ってレ

もっとみる
スマートバンクのデザインレビューの仕組みについて

スマートバンクのデザインレビューの仕組みについて

こんにちは!スマートバンクのプロダクトデザイナーhasegawaです。

現在、スマートバンクではデザイナーがそれぞれのミッションチームにアサインされ、制作を進めるチーム体制をとっています。
各ミッションチームには基本デザイナーが1名が配置されますが、そのデザイナーが一人でデザインを完成させるわけではなく、ミッションチーム外の複数名のデザイナーによるレビューを通じてデザインの質を担保しています。

もっとみる
デザインレビューのガイドラインを作りました -レビューフロー編-

デザインレビューのガイドラインを作りました -レビューフロー編-

こんにちは。hacomonoのプロダクトデザイナーのかんちゃんです。
組織に所属しているデザイナーの方であれば、レビューのガイドラインが欲しいと思った経験はありませんか?
この記事は発足して2年弱のデザイン組織でデザインレビューのガイドラインを作成した経緯の記録の第3弾「レビューフロー編」です💡

中小規模のデザインチームでレビューに課題を感じている方々の参考になればと思い、「心得編」「レビュー

もっとみる
リリースから2年。たどりついた「共創するデザイン」

リリースから2年。たどりついた「共創するデザイン」

こんにちは!メルペイでデザインマネージャーをしているのぶおです。

メルペイデザインチームで2020年実施してきた「共創するデザイン」、つまりデザインチームにおけるフィードバックループの作り方を、5つの項目に分けて紹介します。
デザイナー同士の担当を重ね合わせることで、お互いにフィードバックしやすい状況を作りました。一方通行でフィードバックするのではなく、みんなが、みんなにフィードバックしていく、

もっとみる
コンセント独自のUX設計手法 OOUXデザインプロセス

コンセント独自のUX設計手法 OOUXデザインプロセス

皆さんは新しいサービス企画を実現するためのデジタルプロダクトをつくるときに、どのようなことから着手し始めますか?
いざ検討を進めると、次のような課題に遭遇することはないでしょうか。

これらの課題は、デジタルプロダクトで実現したいこと(要求)と実際にデジタルプロダクトをつくる上で必要なこと(要件)との間に、大きな隔たりがあることから生じています。

コンセントではその隔たりを埋めるために、ユーザー

もっとみる
「便利さ」ではなく、「豊かさ」を生み出すデザインをしたい

「便利さ」ではなく、「豊かさ」を生み出すデザインをしたい

この記事は🎄MIMIGURI Advent Calendar 2023の19日目の記事🎄です。

前回は田幡さんのWHYからは始まらない!? WHEREから始める探究論でした。
noteの執筆頻度が実質年に1本になっているとのことですが、そのエネルギーが存分に込められた壮大な内容で、このまま本にできるのではないかと思うくらい濃密な内容でした。ぜひ読んでみてくださいね!

他の記事はこちらのマガ

もっとみる