マガジンのカバー画像

design

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

#UI

デザイン迷子にならない旗を立てる

デザイン迷子にならない旗を立てる

Webサイトやアプリ、バナーをデザインをしようとFigmaやPhotoshopを開いたけど、そこから何をしていいか分からない。

そんなデザイン迷子の相談をよく受けるので、暗闇の中で助けになるコンパスを書き残しておきます。

結論から言うと迷子になるのは、進むべき方向を定めていないから。
デザインをするまえに必ずやらなければいけないことは、旗を立てることです。この辺りにゴールがあるよという、目印に

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

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

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

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

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

もっとみる
6つの情緒性の軸を使ってウェブデザインのトーンを決定する方法を解説します

6つの情緒性の軸を使ってウェブデザインのトーンを決定する方法を解説します

「言語イメージスケール」の問題点
いわゆる「トンマナ」と呼ばれる、ウェブサイトやアプリにおけるビジュアルデザインのトーン・方向性ですが、その決定方法には色々な方法があります。代表的なところでは「言語イメージスケール」の活用があげられるでしょう。

詳細な内容はこちら。

デザイナーならお世話になったことがある方も多いと思いますし、実際私も何度も活用させていただきました。このマトリックスを活用するこ

もっとみる
ダークモードまとめてみた

ダークモードまとめてみた

ダークモード簡単そうだけど、めっちゃむずっ!

最近は、ダークモードも当たり前な感じになってきましたね。まだ自分でデザインしたことがなかったので、いくつかのアプリを調べてみました。あと、今回はダークモードというか、「黒ベースのUIデザインってどうやるの?」みたいな視点でやったので、Netflix なども含んでます。

スクショはすべて Figma にアップしてまります。ご自由に閲覧・コメントくださ

もっとみる
【悪いUI・良いUI】発想の転換から打開したアイデアまで【デザイン思考】

【悪いUI・良いUI】発想の転換から打開したアイデアまで【デザイン思考】

※某まとめサイトにてまとめていた記事の転用です

BASENAME: 2150782012031271001 STATUS: Publish ALLOW COMMENTS: 1 ALLOW PINGS: 1 CONVERT BREAKS: richtext DATE: 12/06/2018 00:54:50

良い・悪いと思ったデザイン例からデザイン思考、デザインに関した事例などを多数サイトやS

もっとみる
【チームライブラリ活用編】 デザインシステムを #Figma でもっと強くする

【チームライブラリ活用編】 デザインシステムを #Figma でもっと強くする

【まずやること編】 デザインデータをSketchからFigmaにお引越ししよう
もあわせてドウゾ

・・・

ノゾエ(@conoito)です。

今年3月頃に、SketchからFigmaに、UIまわりのデータの移行を行いました。
約半年が経った9月現在、特に大きな問題もなく快適に本運用を行なうことができています。

今日は、Figmaに移行してから行なった、
コンポーネントの整備からスタイルの最適

もっとみる
ビジネス構造 , 実装方法まで探る徹底したUI/UXトレース分析 〜Ubereats編〜

ビジネス構造 , 実装方法まで探る徹底したUI/UXトレース分析 〜Ubereats編〜

今年ももうすぐ終わりですね。
昨日が仕事納めで落ち着いたので、noteを更新したいと思います!

今回は、入社直後の会社の研修でやらせていただいたUI/UXトレース分析についてです。この研修をやらせていただいたことで個人的に凄く知見が増えました。

そこで、会社にnoteで発信していいか聞いたところ快く承諾してくださったのでまとめてみました。

私が就職前にやっていたUIトレースでは、画面のトレー

もっとみる
本当は教えたくないUIデザイン学習の参考にしているInstagram(インスタグラム)アカウント

本当は教えたくないUIデザイン学習の参考にしているInstagram(インスタグラム)アカウント

良いUI/UXデザイナーになるには、他人が作ったデザインを見るのが大切だと、多くの国内外のデザイナーさんたちは言っています。

僕もそれに倣い、UI/UXデザインを学び始めて約2ヶ月ですけど、ほぼ毎日他人のUIデザインを見ています。

他人のデザインが見れるサイトで代表的なのは、以下の3点でしょうか。

■ Dribbble
■ Behance
■ Awwwards

これらのウェブサイトやアプリ

もっとみる
2ヶ月連続、CVRが前年より約40%以上改善を達成したUI改善

2ヶ月連続、CVRが前年より約40%以上改善を達成したUI改善

こんにちは、クラシコムのデザイナーの遠藤です。クラシコムは、7月31日に期末を迎えました。そのちょうど期末の日に、利き腕の右手首を骨折してしまい、文字だらけかつ無骨なブログになりますが、お付き合いください。

13期末、なかなかにドラマチックな数字が踊る結果となりました。

2019年6月、7月のCVRが前年より約40%以上改善しました!!

嬉しすぎます…!もちろん、この結果に到達できたのは、様

もっとみる
話すことが苦手なデザイナーさんへ 〜内向型シャイデザイナーの生きる道

話すことが苦手なデザイナーさんへ 〜内向型シャイデザイナーの生きる道

人前で話すことを苦手としているデザイナーは多い。

ボクも話すことが苦手である。
知らない人の前だと、ドキドキしてしまう。
たくさんの人の前で話さなければいけない場合、
処刑前の犯罪人のような気持ちになる。ごめんなさい。死にたくない。

そんなボクだけども、十数年間、なんとかデザイナーとしてやっていくことができた。
なので、話すことを苦手にしている若いデザイナーを見ると、
「大丈夫、一緒にがんばろ

もっとみる
「インタラクション」とは何か? vol.1

「インタラクション」とは何か? vol.1

本記事は、Human Computer Interaction(HCI)の国際学会「CHI 2017」にて、コペンハーゲン大学のHornbæk氏とアールト大学のOulasvirta氏が発表した "What Is Interaction?" を私が翻訳・独自に解釈したものです。

「インタラクション」という単語は定義されていないそう言われてみれば…と思う、2017年に発表された衝撃的なタイトルの論文

もっとみる
プロダクトデザインの訓練に、ホワイトボードチャレンジをしてみよう!

プロダクトデザインの訓練に、ホワイトボードチャレンジをしてみよう!

こんにちは、灰色ハイジ @haiji505 です。
現在サンフランシスコにあるプロダクトデザイナー養成所「Tradecraft」に在籍しています。

※ この記事は自分のブログからの転載です。

座学だけでなく手を動かして問題解決に挑むカリキュラムがたくさんあります。そのうちの1つがこの「ホワイトボードチャレンジ」です。

ホワイトボードチャレンジって?ホワイトボードチャレンジは、選ばれたお題に

もっとみる