マガジンのカバー画像

#デザイン 記事まとめ

7,065
デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
運営しているクリエイター

#UIデザイン

メルカリのデザイン指針を作る取り組み [後半: プロセス編]

はじめにUX Designチームのasakomです。2022年12月〜2023年3月にかけて、メルカリのデザイン指針を作ることを目的に検討プロジェクトを立ち上げ、Brand Core(ブランド・コア)とDesign Principles(デザイン原則)を作成しました。今回はこの活動を、2つの記事で紹介していきたいと思います。 この記事では、メルカリのBrand CoreとDesign Principlesを策定するまでのプロセスを紹介します。Brand CoreとDesign

世界中で愛される「Figma」の秘密を見てきた。

UIUXに携わるみなさま、こんにちは! トランスコスモス株式会社のデジタルインタラクティブ(DI)事業本部で、Web制作をはじめ、オフィスデザインから採用まで、幅広く携わらせてもらっている宮園です。 このたびFigma Japan様よりご招待いただき、2024年6月26日〜27日にサンフランシスコで開催されたFigmaのイベント「Config 2024」に現地参加してきました! Configでの発表内容は本家で公開されていますので、こちらからは現地の温度感や感じた印象、そし

「デザイナーの仮説」と「実際のユーザー行動」を比較してみた

こんにちは。一休デザイナーの安松・李です。 日頃、ユーザー体験を考えているデザイナーですが、ユーザーをちゃんと理解している自信はありますか? 私たちは、日頃の業務を行う中で足りていないと感じた「ユーザーの理解」をきっかけに、よくマーケティングで使われるカスタマージャーニーマップに興味を持ち、作成するワークショップを実施してみました。 経緯デザイナー組織で何か取り組みができないか考えた際に、以前から興味があった「カスタマージャーニーマップの作成」が挙がりました。 下記が興味を

生成AIが変えるUIデザインの未来

UIデザイン生成AI「Galileo AI」「Galileo AI」というUIデザイン生成AIがあります。ご存知ない方は、前回の記事も見ていただけると良いかもしれません。 どんなUIが生成されるのか120画面ほど生成しました。以下にいくつかサンプルを紹介していきます。 ダイエットアプリ 例えば、「ダイエットのためのアプリを作って」とお願いするとこんな感じになります。食事の記録や体重の推移チャートなどのコンテンツが提案されます。(こちらからそれなりに指定することもできま

WWDC24のデザイン関連セッション

今年のWWDCから各セッションの動画がYouTubeで視聴できるようになりました。日本語字幕を確認できたり、読み上げソフトで日本語音声で視聴できたりします。 手軽に視聴できるようになったので、いつもよりたくさんのセッションを視聴することができました。 主にデザインに関連するセッションで気になったものをまとめていきます。 ラインナップは以下の通りです。 visionOSやApp Intentのセッションはまだ未視聴のため、紹介していませんが、今後視聴の上で追加するかもしれ

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

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

同じ役割でも違う名前?初心者向けHIGとMaterial DesignのUIパーツまとめ

今回のnoteは、HIG(Human Interface Guidelines)とMaterial DesignのUIパーツについてです! HIGとMaterial DesignのUIパーツは同じ役割でも名称が異なる場合もあるので、異なる名称、同じ名称に分けてまとめていきたいと思います✍🏻 ※大きく異ならない場合には同じ名称の方に分類します 異なる名称🍎iOS→タブバー / 🤖Android→ナビゲーションバー アプリ内の異なる領域間を移動するためのコンポーネントです。

【ChatGPT✕UIUX改善】爆速でWEBサイトの現状分析する方法

こんにちは!UXデザイン会社ajikeが提供するUX改善サポート&UIUXデザイナー育成サービスのDods(@Dods_ajikeInc)です。 ChatGPTの新モデルで「ブラウジング機能(インターネットから最新情報を取得して提供する機能)」が無料ユーザーにも使えるようになりました。そこで、今回はWEB上に公開されているサイトをChatGPTに現状分析してもらうことができるのでは…?と思って試した結果や実際に使用したプロンプトをご紹介したいと思います! ChatGPTの

古いと感じるウェブサイトのUIに共通する3つの特徴

こんにちは!UXデザイン会社ajikeが提供するUX改善サポート&UIUXデザイナー育成サービスのDods(@Dods_ajikeInc)です。 普段ウェブサイトを見たときに「何か少し古いデザインだな…」と感じることはありませんか?実は、ユーザーに古さを感じさせるウェブサイトにはUIに共通する特徴があります。 ウェブサイトなどのサービスを担当されている方から「UIを刷新したい!」というご相談があることも多いのですが、ユーザーが「古い」と感じてしまうデザインか?その原因はど

コンセント独自のUX設計手法 OOUXデザインプロセス

皆さんは新しいサービス企画を実現するためのデジタルプロダクトをつくるときに、どのようなことから着手し始めますか? いざ検討を進めると、次のような課題に遭遇することはないでしょうか。 これらの課題は、デジタルプロダクトで実現したいこと(要求)と実際にデジタルプロダクトをつくる上で必要なこと(要件)との間に、大きな隔たりがあることから生じています。 コンセントではその隔たりを埋めるために、ユーザー視点を取り入れた独自のUX/UI設計プロセスとしてオブジェクト指向ユーザー体験デ

iOSとAndroidの"Divider"の線幅の違いと各社の対応

アプリやWebサイトをデザインする際に、情報をまとまりごとに線で区切ることがあります。リストの各項目を区切ったり、コンテンツをセクションごとに区切ったりする場合です。この区切り線は"Divider"と呼ばれます。 このDividerの線幅について、国内外のサービス各社の対応を調べてみました。 iOSとAndroidのDividerの線幅の違いiOSアプリのリストはSwiftUIで以下のように実装できます。 var body: some View { List { Se

デザインスキルを上げるならこれを読むべし!基本の人間工学記事 3選

こんにちは!東芝UIデザインチームnote事務局の小林Jです。 みなさんは「使いやすさ」について、どのように考え、どのようにデザインしていますか?ちゃんと「使いやすい」ものづくりができているか不安になったことはありませんか? そんな時によりどころになるのが「人間工学」です。 「人間工学」とは、人間にとって使いやすく、安全な道具や製品、システムを考える学問です。人間特性をもとに環境や道具の使い勝手などを研究する学問でもあります。 「人間特性」とは、知覚から認知、身体に至るま

IPの世界観に寄り添う、マルチブランドなカラーシステム設計論

はじめにこのnoteで紹介するカラーシステム設計プロセスは、多くの人にとってはやりすぎで、役に立たない場合も多いです。 既存のカラーシステムやカラーシステムジェネレイターを利用するのが、最短かつ最適ルートだと思います。 デザインシステムやカラーシステムは「プロダクトのためのプロダクト」なので、とある事業における一つの解である、という前提で読んでください。 今もまだ多くの課題を抱えたものではありますが、イベントなど様々な場面でカラーパレットに興味を持っていただける機会が多か

LINEヤフーのデザインリーダーが語る、2024年Webデザイントレンド

こんにちは、Design Executive Center UID本部UID2部で部長を務めているイ・ジェフン( Lee Jehoon )です。 Webデザインの世界は、常に革新的なトレンドによって変化し続けていますが、それに迅速に適応することは簡単なことではありません。それだけに、新しいデザイントレンドをいち早く取り入れたいものの、何から始めればいいのか迷っているデザイナーは多いはずです。 そこで、この記事では2024年に注目される4つの重要なデザイントレンドをご紹介しま