マガジンのカバー画像

UIデザインのはなし

113
本
実際に実務で参考にできそうな、UIデザイナーさんのお役立ち記事をまとめています。
運営しているクリエイター
oyuuuhan

#UI

[厳選5+1冊]UIデザイナーの骨組みをつくる本

UIデザインを学んでいる方、UIデザイナーを目指している方にぜひ読んでほしい本を個人的にまとめました。 難しめの本もありますが、いずれも本質的な内容です。 早めに読んでおくことで、自分のレベルをグッと上げてくれると思います。 ヒューメイン・インタフェースヒューマン（Human）ではなくヒューメイン（Humane）。 人に優しいインターフェースとは何かについて、「クリックする」「キーをおす」という行為にまで落とし込んで教えてくれます。 UIデザインのモードという概念を理解

Shino | Sof…

ロジカルかつコンパクトに！UI設計のためのワークフロー

こんにちは。ChatworkのUIデザイナーかねこです。最近では新しい機能やエキスパートレビューによる改善をメインに取り組んでいます。 今回はUIデザイナーの設計フローをHCDプロセスに準えてフォーマット化する試み「MONDRIAN」についての第三弾です。これまでの記事をまだご覧になっていない場合は、ぜひ読んでみて下さいね！ この記事では【MONDRIAN】の後半部分（骨格と表層）の内容についてご紹介します。 画面要素の重要度を元に、最小限のワイヤーフレームをステップ４

Chatwork De…

手戻りがゼロに！？ 情報整理を変えた独自UIフロー

こんにちは！UIデザイナーの大竹（@satocalog）です。最近では、UXリサーチ周りやワークショップ設計をゴニョゴニョしています。 今年Chatworkでは、新しいUIデザインフローが作成されました。そのきっかけについては、以下の記事で紹介しています。 今回は、独自UIフロー【MONDRIAN】の前半（要件〜構造）について紹介していきます。 この前半フローのおかげで私は作業の手戻りが無くなったので、かなりの推し部分です。 デザイン設計に入る前の徹底的なウォームアップ

Chatwork De…

検索結果の絞り込み・並び替えUIの観察

先日、検索結果の絞り込みUIの検討をするために事例を調べたところ、意外にもアプリによって様々な違いがありました。面白いテーマなため観点ごとに違いを整理し、メリット・デメリットや設計意図を考察しました。注目した観点は以下の7つの点です。 これらの観点をもとに以下の条件で12のアプリを調査しました。 1. 絞り込み・並び替えボタンの配置 まずは、絞り込み・並び替えボタンの配置場所について。ボタンの配置場所は大別するとこの２種類です。 それぞれの事例をみていきます。 A.

鈴木慎吾 / TSUM…

実装しやすいFigmaファイルの作り方

こんにちは。UIデザイナーのカヒブンです。 UIデザイナーとして、見た目が綺麗、ユーザーの使いやすい画面を設計するだけではなくて、実装のしやすさ・工数も考えた上で設計するのが大事です。今回は実装しやすいデザインデータの作り方ついて話したいと思います。 ここでは、私がFigmaを使う際、実装側の立場に立って考える癖を説明します。 実装しやすいデザインデータ・レイヤーがGroupだらけではない。レイヤーがきちんと整理されている ・ローカルコンポーネントが一ヶ所にまとめてあ

カヒブン

デザインシステムを改善！Figma のコンポーネントライブラリの整理でやったこと 7 点

家計簿サービス Zaim のデザイナーの今泉です。 今回はデザインシステムの一部、コンポーネントライブラリをリファクタリングした事例をご紹介します。 デザインシステムとはデザインシステムとは、良いデザインを『効率的』かつ『一貫性』をもって提供するための仕組みです。コンポーネントライブラリはデザインシステムの一部で、画面のデザインやボタン、リストなどの UI パーツの集まりです。 Zaim のデザインは Figma で作成し、コンポーネントライブラリも Figma 上で管

Ayumi Imaiz…

フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと

フロントエンドエンジニアとデザイナーさんは日々協力してプロダクトを作っていく関係にあります。デザイナーさんが作ってくれたものをエンジニアが素早く実現できるよう、いくつかエンジニアから意識してほしいことをまとめました。 なんでこんな話になったのか（前置きなので次の章まで飛ばしてOKです） デザイナーさんから「この画面をこんな風に作ってください」とXDやSketch、PSDなどいろいろな形で渡されることがあると思います。 僕の個人的な意見・経験ですが、いざ実装するぞとなったと

Pittan

コラボレーションを加速させる Figma にさらにターボがかかるかもしれない Tips

私が所属している Goodpatch Anywhere はフルリモートのチームなので、メンバー同士は実際には会ったことがない場合がほとんど。でも Figma を使って、実際に隣の席にいる以上に、お互いの作業を共有しながらデザイン制作を進めていきます。 今回はそんなコラボレーションを加速させる Figma にさらにターボがかかるかもしれない Tips を書きたいと思います！ ※記事中の表記は Mac の Figma.app、日本語（JIS）キーボードの場合です。 ※「ターボ

sato.takehi…

新規登録 UI まとめてみた

シンプルだけど難しい「新規登録」のデザイン。 派手さはないけど、地道な工夫の繰り返し。 新規登録って大事 新規登録は離脱を抑えるデザインが重要です。 せっかくダウンロードしてくれたユーザーがサービス利用前に離脱してしまうともったいないので。 本記事では新規登録の UI パターンや事例をまとめてみました。新規登録をデザインする際は、この記事を参考にデザインしてみてください。少しでもお役に立てばうれしいです。 新規登録のポイント ① 最も負担の少ないタイミング ② 最小の操

あき - 良いもの作っ…

DailyUI 001 signUp - 登録しやすい新規登録とは

アウトプット！アウトプット！アウトプット！ DailyUI 001 登録しやすい新規登録を考えてみました。 目次 はじめに ・何を作ったか ・意識したこと 具体的な工夫点 ・遷移をひとつにする ・入力操作をアシストする ・過度な装飾を避け、シンプルに見せる ・わかりやすいフィードバックを示す ・文字を読みやすくする ・少しボタンを多くする 悩んだところ 片手操作をどうするか おわりに ・まとめ ・おわりのおわりに はじめに 何を作ったか タスク管理アプリの新規登

あき - 良いもの作っ…

100日続けたDaily UIの記録

あーーー 2018年中に終わって良かったーーー Daily UIという、メールアドレスを登録すると毎日お題が送られてきてそのUIをデザインするというチャレンジ企画があるのですが、去年の今頃はこれを途中で辞めてしまっていたのでした。 私の投稿をみてDaily UIを始めた人が立派に完遂するというのに何というふがいなさ...。これはよくないな、ということで再開したのが今年の9月頃。再びできなかった日を挟みつつも、旅行の合間などにもやり遂げてついに今月100個分のお題を終えたの

灰色ハイジ

大事なのは基礎！HIGを簡単にまとめてみた🍎

ももやんです。今回はAppleのHIG（ヒューマンインタフェースガイドライン）について簡単にまとめます🐻‍❄️ 🌟iOSの３つの大きなテーマiOSのデザインにおける３つの大きなテーマがあります。以下の３つのテーマを意識してアプリをデザインしましょう🔥 ・Clarity（明瞭さ） 読みやすいテキスト、わかりやすいアイコン、控えめな装飾、余白、色、フォント、グラフィックを用いて、重要なコンテンツや機能を明確に表示する。 ・Deference（控えめ） ベゼルやグラデーション

Momoka Saito

UIデザインで迷ったら、まず要素を分解してみよう

自動家計簿・資産管理サービス「マネーフォワード ME」のデザイナー池内です。この記事では、「要素の分解」を使ったUIデザインの進め方を紹介します。 UIデザイン時に考えることが多すぎてどこから手を付けたらいいかわからない、なかなかチームの議論がまとまらない時などの参考になさってください。 参考例：マネーフォワード MEのホーム画面予算表示「要素の分解」の例として、先日マネーフォワード MEのAndroid版でリリースした、「ホーム画面に予算を表示する」という機能を参考にプ

池内健一

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

スマートキャンプデザインブログ、デザイナー/エンジニアのhaguriです。 ユーザー体験の統一化のために大切な「デザインシステムの作り方」について紹介します。（スマートキャンプでもまだまだ模索中......） スマートキャンプでは、インサイドセールスに特化したCRM「Biscuet（ビスケット）」という新サービスを発表をしました。 まだ開発中のサービスですが、このBiscuet（ビスケット）のデザインシステムの考え方を紹介していきます。 上記のランディングページ（LP

スマートキャンプ　デザ…