Design Knowledge _ デザイン業務知識

１人目デザイナー、初のデザインスプリント設計を振り返る

こんにちは！つむです今回はプライベートでUIUX支援をさせてもらっているスタートアップで実施したデザインスプリントを行うための集中合宿を振り返っていきたいと思います💼（会社には承諾を得てます⭐️）そもそもデザインスプリントってなんぞや？ってところから私自身、社会人歴２年目かつデザインスプリント初経験（なんならUX検討も）の状態からどうやってワークショップを設計したのか？失敗はなんだったのか？などをお話ししていけたらと思います🏃‍♀️ あくまでも初心者の取り組みですので

デザインシステム完全版｜Figmaでの作り方、事例など【2024年版】

このドキュメントの目的デザインガイドライン・システムに関する理解を深め、UIUXを通したプロダクト価値の最大化が業界として底上げされるといいなと思っています。あとは、私rikikaが個人的にいろいろなお仕事で作らせて頂く機会をいただくのですが、そのたびに事例や作り方のハウツーが目まぐるしく変わっていき、インターネット上に情報が散らばっていると感じていたのでそのsingle source of truthの役目を担いたいという気持ちもあります。とはいえ、絶対これが正し

開発チームで働くUIデザイナーのための、開発用語カンペ📝（開発系）

IT業界はツールや用語の種類が多く、情報更新も頻繁なので大変ですね…。今回は、仕事する上でよく聞く用語を『開発チームで働くUIデザイナーのための、開発用語カンペ』としてざっくりとまとめました。（随時更新予定…✍️） 📝開発系（プログラミング言語）Javascript HTML、CSSと並ぶ主要プログラミング言語。動的なWebページを作るために利用される（スライダー、ポップアップなどのアニメーションなど）。ChromeやFirefoxといった「ブラウザ上」で動作する、Pyt

iOS ヒューマンインターフェース要点🍎に、よくみる実例パーツを添えて…🥗

iOS のヒューマンインターフェースガイドライン（Human Interface Guidelines）とは、Appleの各種デバイスのUIデザインの設計思想・デザイン原則・実装指針などをまとめたもの。（2023年6月に大幅更新あり） UIデザインの基本的な指針として、参考にすべく、覚えておきたいポイントと実例と交えて整理したいと思います。アプリヘッダー＆ナビゲーションデザイン時に、気にしたいHIGポイント🍎Sidebars（サイドバー）サイドナビゲーションタイプ

【実録】デザイナーがスクラム開発チームの一員になるとなぜ良いのか？

はじめにこんにちは！株式会社スタメンでBtoBサービス「TUNAG」のプロダクトデザイナーをしているmonacaです。突然ですが今年の2月に、 TUNAGのプロダクト開発組織に大きな変化が起きました。プロダクト開発体制が大規模スクラム(LeSS)に移行したのです。スクラムは、アジャイル開発(ユーザーにプロダクトの価値をより速く届けるため、短いスパンで機能開発を行い、フィードバックを受けて開発サイクルを回し、プロダクトを改善していく開発手法)の思想をベースにしたフレー

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

フォローしませんか？

#UIデザイン