マガジンのカバー画像

Design Knowledge _ デザイン業務知識

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

記事一覧

なぜ「実装がわかるUIデザイナー」が必要なのか

実装がわかる=「簡単なフローチャートをイメージできる」ジュニアのUIデザイナーが上に上がるための大きな壁が、実装がわかるかどうかです。実装がわかるとは、「プログラミングできる」ことではありません。 プログラミングはできなくていいけど、「ユーザーがアクションした時と結果画面の間に、どんな情報のやり取りがされたのかをイメージできること」をUIデザイナーは求められます。(正確には「フローチャート」と呼びます) しかし、そのイメージができない場合、ユーザー体験のラストワンマイルま

UIデザインの勉強方法を蒐集してみました。

みんなどうやってUIデザインを勉強しているのか、ふと気になりました。 そして、それらをコレクションしたらちょっと楽しいし、役に立つかもしれない。という訳でこの記事ではUIデザインの勉強方法を蒐集してみました。(蒐集という漢字、かっこいいんで使ってみました) 特段、この方法を推奨します!といった想いはないのですが、自分の経験談も少しだけ添えています。 UIデザインに関する知識を知るUIデザインをするうえ知っておきたい知識はたくさんありますが、まずはベーシックな所から固めてい

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

こんにちは!i3DESIGNデザイナーチームです。 今日は、私たちが様々なクライアントのプロダクト・サービスの改善を行っていく中で得た、ユーザビリティを改善するためのヒントを50個シェアしていきたいと思います。 マガジン「ユーザビリティチェックリスト」01〜09ののまとめ記事です。 「ユーザビリティチェックリスト」ということで、UIデザインの「あるある」を取り上げ、改善案とセットでまとめています。 今回は、10のヒューリスティクスをもとに分類してみました。10のヒューリス

日本国内でデザインシステムに取り組んでいる会社・事例をまとめてみた

海外の事例はいろいろあるので見てきたのですが、国内ではどんな会社が取り組んでいるのか、興味があったので調べてまとめてみました。 「おいおい、この会社が足りないぜ!」というものがあればコメントで教えていただけると喜びます。 WantedlyAtama plusCyberAgentプロダクトの「色」と向き合う「デザインとエンジニアリング」 | CyberAgent Developers BlogUXエンジニアの谷です。 「クリエイターHangout」はデザイナー数名のグループ

Figmaにおけるコンポーネントとバージョンの管理について考える

まだ完結していないシリーズの途中ではあるのですが、ちょっと早めに自分の備忘録としてまとめておきたかったので先にこちらを書いてしまいました。 相変わらずの文章量なのですが(ちゃんと読むのに15分は確実にかかります)、お時間ある方は読んでいただけると嬉しいです。そして、内容についてはまだ実験段階な部分が多いので、フィードバックを貰えると非常に助かります🙏 1.命名規則とコンポーネントの単位について命名規則とコンポーネントの単位はプロジェクトで使用される技術によって少し状況が変

フルリモート下でも孤独感を感じずバリバリ働けるデザインチームのコミュニケーションの仕組み

こんにちは。NewsPicks プロダクトデザイナーの川崎愛です。 Twitter(X)では、くろみやあいと名乗っています。結婚して苗字が変わったのですが、そのまま旧姓で名乗ればよかったと後悔しています。 さて、NewsPicksに2023年5月に入社してから約半年が経ちました。 NewsPicksのプロダクトチームはたまに出社のイベントがあるのですが、ほぼフルリモートです。私はフルリモート下での入社になりましたが、孤独感など全く感じずに仕事ができているので、その仕組みがす

【9割のデザイナーが知らない】視野を理解し一歩抜きん出たwebサイトにする方法

ご覧頂きありがとうございます! ギヤと申します! 今は主にweb制作の事業をしており、ロジカルですべてのデザインに理由があるwebサイト制作を目指しています。 今回のはじめての投稿は、webデザイナーがweb制作にも落とし込むべき「人間の視野」の話をしようと思います。 「インターフェースデザインの心理学」という本を読んでいたところ、とても参考になったのでこの場を借りてアウトプットしようと思います。 人間の2つの視野とはまず初めに、人間の視野は大きく以下の2つに分けられ

フォームのラベル、必須か任意か問題

こんにちは! i3DESIGNデザイナーチームです。 みなさん、フォームに必須のラベルをつけるべきか、任意のラベルをつけるべきか悩んだことはないですか? 実際調べてみると、必須ラベル・任意ラベルについての議論は長い間繰り広げられており、色々な見解を見つけることができました。今回はこの「必須ラベル・任意ラベル論争」について調べ、どちらをどのように使うべきなのかまとめました。 必須ラベルと任意ラベルログイン画面や新規登録画面、お問い合わせなどフォームをデザインする機会は多くあり

ハンバーガーメニュー右か左か問題

こんにちは!i3DESIGNデザイナーチームです。 UIデザイナーであれば主にWEBサイト作成時、「ハンバーガーメニュー」を扱う場面が多々あるかと思います。そこで悩ましいのが、ハンバーガーメニューを右に置くか左におくか?という問題です。みなさんも一度はこの問題に頭を悩ませたことがあるのではないでしょうか?そこで、この記事ではハンバーガーメニューを右上・左上のどちらに置くべきか?を考察し、まとめていきたいと思います。 ハンバーガーメニューってハンバーガーメニューとはアプリケー

アイコン付きボタンについて掘り下げてみた

はじめにこんにちは!i3DESIGNデザイナーチームです。 今回は、UIデザインに不可欠なパーツ、”アイコン付きボタン”についての話です。 「次へ」「確認へ進む」「登録」「削除」など、UIには本当にたくさんのボタンが必要ですよね。 特に、アイコンを入れるとなったら、どっち側に入れる? 毎回矢印アイコンって必要? など検討すべきことも多く、結局なんとなくの感覚で作ってしまうこともしばしばではないでしょうか。 そこで、アイコン付きボタンの作り方について、傾向や考え方をまとめて

「料金比較表」のUIを集めてみた|パーツ別デザインまとめ

こんにちは!株式会社Rabeeでデザイナーをしています、nanamiです🌿 今回はLPやサービスサイトでよく見かける「料金比較表」のUIパーツに特化してデザインを集めてみました。 LPや特定のサービスサイトは構成要素が比較的パターン化されています。 「この要素・セクションのデザインどうしよう」となった時用に、要素ごとにデザインのパターンのストックを持っておきたい。 そんな皆さまに参考にしていただけると嬉しいです! はじめに今回は、集めた料金比較表のデザインをこちらのサ

「ステップ・フロー」のUIを集めてみた|パーツ別デザインまとめ

こんにちは!株式会社Rabeeでデザイナーをしています、nanamiです。 今回は、LPや提案資料などでよく使用されるデザインパーツ「ステップ・フロー」のUIを集めてみました。 はじめに「ご利用の流れ」や「お申込の流れ」など、時系列に並んだ項目をわかりやすく可視化する手段として用いられるステップ・フローのセクションは、サービスやプロダクトを訴求するLPや提案資料にかかせない存在です。 今回はそのステップの整列パターン別に、PC・SPでどのようにレスポンシブされるのか?と

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

こんにちは!株式会社Rabeeでデザイナーをしています、nanamiです。 今回は、LPにおいてCV(コンバージョン)に大きく影響を与えるUIパーツ「CTAボタン」周りのデザインをパターン別に集めてみました。 はじめに前回の記事で予告をした通り、今後、LPやWebサイトを構成する様々な要素を1つずつ特化して調査をしていきたいと思っています。 今回はその「パーツ別デザインまとめ」シリーズ2本目です。 ↑ こちらの記事、たくさんの方に読んでいただけており嬉しいです! パタ

ページに抑揚をつける「背景切り替え」のデザインアイデア

こんにちは! 株式会社Rabeeでデザイナーをしています、nanamiです🌿 Webサイトのデザインを作っていく時、気づいたら単調なデザインになってしまうことはありませんか? 「Webデザインはリズムが大事」とよく言いますが、リズム良く眺めることができるWebサイトって、つい上から下までスクロールしてしまいますよね。 今回は、そんなリズム感を生む工夫の1つ、背景の切り替え方に着目して分析してみました。 前後関係のあるセクションを繋ぐ「矢印型」LPでよく見る形です。例え