マガジンのカバー画像

勉強中マガジン

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

#UIデザイン

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

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

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

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

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

Unsplush説明する必要も

もっとみる
UIデザイナーの能力開発ステップと鍛錬方法

UIデザイナーの能力開発ステップと鍛錬方法

先日、経済産業省・特許庁の「デザイン経営」宣言もあり、デザインの重要性が話題になることが増えました。具体的には組織だったり、評価・報酬だったり、採用・育成だったり、多岐に渡っていると思います。
一方で「デザイナーがいない。」とよく聞きますし「誰かいない?」と相談も頂きます。そして、僕は、デザイナーの人口が増えて活躍することができれば、より良いプロダクトやサービスが溢れ、世の中はより良い方向に変わっ

もっとみる
心地良さを感じるトランジションタイミング

心地良さを感じるトランジションタイミング

UIを考えていく上で、軽微なアニメーションへの理解や対応へのニーズはここ最近グッと高まっていると感じます。Invision Studio が標準でそれに細かく応えるような機能を持っている点を見ても、スクリーンデザインには今後欠かせない要素になっていくだろうなと思います。

状態の変化を伝えるアニメーション「トランジション」 とは、ある画面やカットから次の状態に切り替わる際のアニメーション処理のこと

もっとみる
世界一わかりやすい「イージング」と、その応用

世界一わかりやすい「イージング」と、その応用

これはdesigning plus nine Advent Calendar 2018 5日目の記事です。

こんにちは。ritarと申します。designing plus nineというサークルで日々楽しく活動しております。

最近、こんな記事を見つけました。

どうすれば体感でサクサク動作するかを書いた良記事です。

これのアニメーションの項を読んで触発されたので、以前からUIにおけるアニメー

もっとみる
【図解】 お買いものアプリUI 考察まとめ

【図解】 お買いものアプリUI 考察まとめ

ノゾエ(@conoito)です

今日は、お買いものアプリのUIの気づき、考察、感想まとめです。

特に、買いたい商品やジャンル、ショップごとの
「プロダクトからのおすすめ」
「ユーザーに最適化されたおすすめ」
の並び順やボリュームにフォーカスした図解と合わせてどうぞ!

1. 巨大EC系
2. 服飾系
3. 専門店系
番外編

☃️🌸☃

1. 巨大EC系
Amazon / 楽天市場 / ビッ

もっとみる
デザインシステムをアジャイルで。表記ルールを自社サービスのデザインに

デザインシステムをアジャイルで。表記ルールを自社サービスのデザインに

以前、「 デザインシステムをアジャイルで構築する方法 」という記事の展開で、今回は表記ルールに関する部分をお送りしようと思っています。
とはいえ、デザインシステムの話で、表記ルール?と思われる方もいらっしゃるかもしれません。よくイメージされるのは出版社や大企業の印刷媒体を意識した言語表現に関するルールを記載したものというイメージでしょうか?
ですが、そう言った体系的にまとまっている例は少なくともU

もっとみる
デザイナーの育て方

デザイナーの育て方

なぜこのnoteを書くのか近年は圧倒的なデザイナー不足だ。
世の中デザイン、デザイン思考が大事と言われて久しいが、どの会社もデザイナー採用に苦しんでいる。
いや、厳密にはデザイナー自体はいるのだが、圧倒的にデザイン能力の高い一部の事業会社や、クリエイティブ会社に一局集中しているという言い方の方が正しい。
そのような世間の中で、もはやいいデザイナーを見つけて引っ張ってくるよりも、「未経験からいかにい

もっとみる
使いやすさと分かりやすさのデザイン:メッセージの伝え方 その1

使いやすさと分かりやすさのデザイン:メッセージの伝え方 その1

事前確認するべきか、事後連絡で済ませるべきか
日常においてどのようなときに事前確認をしているかから考えてみましょう。例えば、仕事で上司の書類を自分でシュレッダーにかけるとき、当然事前に確認をとります。

もし、確認をとらずにシュレッダーにかけてしまった後、上司がその書類を探し始めたら大変です。もう取り返しがつきません。このように「取り返しがつかないこと」は事前確認が大切です。

取り返しがつかない

もっとみる
アプリのアップデート500本ノックから学ぶUI改善のヒント

アプリのアップデート500本ノックから学ぶUI改善のヒント

「ザ・マイクロコピー」という本の中で次のような一説がでてきます。

何も考えずにこれしかないだろうと3回クリックするのと、これかなぁと迷いながら1回クリックするのとは同じ重みを持つ 。

ちょっとした「?」がどれだけユーザーの集中力を邪魔しているか。

アプリの使い方に意識がさかれて、メインコンテンツへの集中がおざなりになっていたら勿体ない。アプリの運用者としては避けたい状況です。

そこで今回は

もっとみる
使いやすさと分かりやすさのデザイン:待ち時間の伝え方 その1

使いやすさと分かりやすさのデザイン:待ち時間の伝え方 その1

どれくらいで終わるかの目安を伝える
お目当てのラーメン店に行列ができていると、自分より前に並んでいる人の数を数えて、あとどれくらい待てばラーメンを食べることができそうか考え、並ぶか、それとも今日は並ばずに別のお店に行くか、を決断した経験があると思います。

写真やファイルをアップロードする時、ブラウザで新しく画面を表示するときなど、処理に時間がかかるためユーザーに待ってもらう必要があることがありま

もっとみる
Material Designの設計思想を探る

Material Designの設計思想を探る

この記事は、2018年5月25日に開催された Google I/O Extended 2018 Shibuya での講演内容を文章に起こしたものです。当時はGoogle I/O 2018の直後、Material Designガイドラインがいくらかアップデートされ、Material Themingや柔軟な基盤の構築といった新たな考え方が明示されたばかりでした。この講演は、アップデートされた内容の背景

もっとみる
Atomic Design と Figma の組み合わせでデザインが便利になる|デザインシステムの作り方

Atomic Design と Figma の組み合わせでデザインが便利になる|デザインシステムの作り方

スマートキャンプデザインブログ、デザイナー/エンジニアのhaguriです。

ユーザー体験の統一化のために大切な「デザインシステムの作り方」について紹介します。(スマートキャンプでもまだまだ模索中......)

スマートキャンプでは、インサイドセールスに特化したCRM「Biscuet(ビスケット)」という新サービスを発表をしました。

まだ開発中のサービスですが、このBiscuet(ビスケット)

もっとみる
意匠法改正でデザイナーは何に気をつけたらいいのか

意匠法改正でデザイナーは何に気をつけたらいいのか

2020年4月に、意匠権に関わる法律「意匠法」が改正されます。

今回の意匠法改正では、UIに関わる部分が大きく変更されます。いろいろ学ぶ機会がありインプットしていく中で、特にWebやスマホアプリに関わるデザイナーに意匠法を知る、または調べるキッカケになればと思ったのと少しの願いを込めて書きました。

何が変わるのか詳しくは特許庁のサイトで自ら確認して頂きたいが、UIに関わる点では、「画像」が保護

もっとみる
"Neumorphism" なるUIデザインのトレンド

"Neumorphism" なるUIデザインのトレンド

「新しいスキューモーフィズム」を謳う "Neumorphism" というデザインが最近一部で提唱されているようです。

Skeuomorph Mobile Banking by Alexander Plyuto

この例のようにボタンやカードなどの要素が凹凸で表現されていて、明るい影(光)が落とされているのが特徴です。それによってボーダーや塗りを使わずに要素の形状を表します。

Neumorphi

もっとみる