Design Knowledge _ デザイン業務知識

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

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

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

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

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

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

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

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

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

こんにちは！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サイトを構成する様々な要素を１つずつ特化して調査をしていきたいと思っています。今回はその「パーツ別デザインまとめ」シリーズ２本目です。 ↑ こちらの記事、たくさんの方に読んでいただけており嬉しいです！パタ

5段階モデルのStructure(構造)デザインの実践

この記事は Goodpatch UI Design Advent Calendar 2018の4日目の記事です。前回は、usagimaruによる結局、画面とはどこなのかでした。また、この記事の前段としてソフトウェア開発に関わる「●●デザイン」の分類を読んでいただけると幸いです。この記事では、私がデザイナーとして関わったプロジェクトでデザインガイドラインを作成した話を元にギャレットの5段階モデルに記述されている構造層においてデザイナーが何をするのか。というのを個人の経験か