三菱UFJ銀行アプリのデザインシステム構築｜Japan Digital Design, Inc.
Japan Digital Designの柳沢です。 三菱UFJフィナンシャル・グループの戦略子会社であるJapan Digital Design（以下JDD）でExperience Design Div.（以下XDD）に所属し、プロジェクトの推進や体験設計などを担当しています 第1回：三菱UFJ銀行アプリリニューアルとCXデザインの軌跡 第2回：理想の体験を描いて磨き直すCXデザインのプロセス 第3回：リニューアルを支えたFigmaのプロトタイプ活用 第4回：三菱UFJ銀行アプリのデザインシステム構築 👈 第5回：（仮）ビジュアルアセットのガイドライン開発 第6回：（仮）プロモーションマテリアル制作 連載記事一覧今回はデザインシステムの構築についてご紹介します。 最近ではデザインシステムを取り入れるプロダクトも多くなりました。三菱UFJ銀行アプリでもデザインシステムを取り入れており、導
百様図｜大丸松坂屋百貨店
百様について 百様についてあらたなシンボル「百様図」は、 大丸松坂屋百貨店が大切にする「百様」という価値観を形にしたもの。 百様は「歴史」「土着」「うつろい」「気持ち」の 4つのまなざしが重なりあって生まれました。あらたなシンボル「百様図」は、大丸松坂屋百貨店が大切にする「百様」という価値観を形にしたもの。百様は「歴史」「土着」「うつろい」「気持ち」の4つのまなざしが重なりあって生まれました。 「歴史」「土着」「うつろい」「気持ち」「歴史」1/4 大丸は年、 松坂屋は年大丸は年、松坂屋は年2つの百貨店は、創業からそれぞれの伝統を育ててきました。2007年に経営統合し、その後2010年に「大丸松坂屋百貨店」が誕生。不思議なことに、両社は数百年にわたり「お客さまに謙虚であること」「まずは社会のために」という通じ合う精神を持ち続けてきました。伝統はあたらしく、あたらしさは普遍的に。先人のバトンを
実在するWebサイトのワイヤーフレームからデザインに落とし込む際の意図やテクニックを詳しく解説したデザイン書 -Webデザイン&ワイヤーフレーム比較見本Book
※本ページは、アフィリエイト広告を利用しています。 他の人はどういう工程でWebデザインを仕上げているのか、気になりませんか？ 通常は表に出ることのない実在するWebサイトのワイヤーフレームの設計、デザインカンプへの落とし込み、チェックバックを重ねて最終の完成形までブラッシュアップするまでの、デザイナーの意図や考え、デザインのテクニックなどを詳しく解説したデザイン書を紹介します。 掲載されている37のWebサイトはすべて実在するWebサイトです。 表紙に既視感を覚えた人は、大正解！ 去年末に当ブログで紹介した『WebデザインプロセスBook』（紹介記事）の続編というか第2弾で、前書はベストセラー３冠で評判でしたが、本書は前書よりもさらにパワーアップしています。 前書との大きな違いは、前書は1-4年目のデザイナーさんによるダミーサイトでしたが、本書は15-20年目のデザイナーさんによるすべて
Webスタイルガイド | Science Tokyoデザインシステム
Webスタイルガイドは、本学のWebサイト管理者・運用担当者をはじめ、Webサイトに関わるすべての方が利用することができます。ご利用いただく際は、利用規約の記載事項を遵守し、最新の情報やデータをご利用いただくようお願いいたします。 更新履歴
なぜデザイナーは組版の専門家のいうことがわからなくなるのか｜井上のきあ
タイトルの主語が大きすぎて炎上しそうなので、まずはじめに、ここでいう「デザイナー」は、イラレ（Adobe Illustrator）あたりからデザインを始めた、グラフィック寄りのデザイナー（縦組み長文などをやったことがない）のことを指します。 Illustratorでの操作を前提として説明します。図の原稿用紙のマス目も、Illustratorでつくったものです。InDesignは出てきません。 自分の経験を振り返って書いています。独学でやってるひとが迷い込みやすいルートなんじゃないかと思うので、何か理解の手がかりになるかもと。もし、そういう系のデザイナーだけど専門家の言うことはちゃんとわかるよ、っていう方いらしたらスルーしてくださいね。 ※用語の定義は、いちおうJIS規格（「JIS Z8123 印刷技術用語」など）に揃えています。ひとによって定義が違ってたりするので… その1：字間は詰めるの
東京ディズニーシーと植民地主義 ～地理学的に解き明かす～｜やのゆー
東京ディズニーシーと植民地主義 2001年9月4日、新たなディズニーパークが開園した。その名も東京ディズニーシー。冒険とイマジネーションをテーマにした、世界でも唯一のディズニーパーク。中心に建つモニュメントとそれを囲うように存在するエリア(テーマポート)など、構造はディズニーランドに基礎を置きつつも、アトラクションやレストラン、ストーリーなど大きな独自性が見られるのが特徴だ。 アラビアンコーストの建築について記述した前回のブログに続き、東京ディズニーシー(以下、TDSと記述)の持つ植民地主義(コロニアリズム)的な側面について記述していこうと考えている。 このアイデアは私が大学院生だった2021年頃からずっと頭にあったが、書く気が起きず放置していた。今回文章化に踏み切ったのは、あるTwitter上での投稿がきっかけだ。 でずにーC、入ったら地中海で少し奥に隣あってニューヨーク、別方向の奥に嘘
その「直感的なUI」、本当に直感的ですか？｜wentz
こんにちは。SmartHRのプロダクトデザイン本部でプレイヤー/マネージャーをしているうえんつ（@wentz_design）です。今回は何かと見かけることがある「直感的なUI」という表現について建設的な批判をしたいと思います。 まず、この記事は「直感的」という言葉自体を否定したり、その使用を禁止すべきだと主張するものではありません。「直感的」という概念には本質的な価値があり、ユーザー体験の重要な側面を表現しています。 私が問題提起したいのは、この言葉が具体性を欠いたまま無批判に使われている状況です。この記事を通じて、「直感的」という言葉の背後にある具体的な要素を言語化し、より効果的なコミュニケーションと測定可能なデザイン目標の設定を目指したいと思います。 「直感的なUI」という甘い誘惑新しい企画や開発プロジェクトが始まるたび、私たちは無意識にこの言葉を繰り返していないでしょうか？ 「このア
グラデーションがくすんでしまうのには原因がある、それを自動的に解決して美しいグラデーションを生成できる無料ツール -Gradient Generator
美しいグラデーションを作成するには、補間するカラーにグレーが含まれないようにすることが重要です。グレーが含まれてしまうと、それがデッドゾーンになり、汚いグラデーションになってしまいます。 このグレーのデッドゾーンを回避し、簡単に美しいグラデーションを生成できる無料ツールを紹介します。 Gradient Generator – CSS & SVG Export ツールを紹介する前に、なぜグラデーションがくすんでしまうのか。 PhotoshopやFigmaなどで幅広い色相のグラデーションを作ろうとすると、グラデーションの中央にグレーのデッドゾーンができてしまうことがよくあります。 左: グレーがあるグラデーション、右: グレーを回避したグラデーション このグレーのデッドゾーンを避けるには、グラデーションに使用するカラーは大きなカーブ（直線はダメ）を描いて補間する必要があります。 そしてここで紹
ダークパターンレポート2024 ダークパターンの無自覚な使用を防ぐために ｜ 株式会社コンセント
ダークパターンレポート2024ダークパターンの 無自覚な使用を防ぐために 4社の取り組み例から 考察する、 防止活動普及の鍵 消費者よりも企業にとって都合の良い行動を取るようにし向ける手法、ダークパターン。 悪意のある事業者が意図的に用いる手法だと思われるかもしれません。 しかし、ビジネスで求められる目標を達成するため、 悪意がなくても結果的にダークパターンを用いてしまう可能性があります。 企業はどうすればこの「ダークパターンの無自覚な使用」を防ぎ、 消費者とのより倫理的な関係性を目指していけるのでしょうか? コンセントでは、所属企業にダークパターン使用防止の取り組みがある ビジネスパーソン4名にインタビューを行いました。 本レポートは具体的な取り組み内容を紹介するとともに、 そこから見えたダークパターン問題に向き合う上での課題や 無自覚な使用を防ぐための論点を考察するものです。 調査結果
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
DroidKaigi 2024 での発表資料
あの演出はそういう名前だったのか！ 「明日から使える！海外文献に頻出するLevel Design用語の紹介」で13用語を学ぼう［CEDEC 2024］
あの演出はそういう名前だったのか！ 「明日から使える！海外文献に頻出するLevel Design用語の紹介」で13用語を学ぼう［CEDEC 2024］ ライター：わさび 2024年8月21日，ゲーム開発者向けカンファレンス「CEDEC 2024」で，ゲームデザイナーの知久 温氏によるセッション「明日から使える！海外文献に頻出するLevel Design用語の紹介」が行われた。 本セッションは開発者向けに行われたものではあるが，実例を交えてやさしめに解説されていたため，「あのゲームで使われていた演出はこういう名前だったのか！」と，ゲーマー目線でも楽しめる内容だった。レベルデザイナーの目線で見るゲームの世界をのぞいてみません？ 知久氏は，ハクスラSTGや対戦TPSといったジャンルでレベルデザイン業務を経験した実績を持つフリーのゲームデザイナー。副業としてゲーム開発の研究家としても活動している
失敗しない美しいUIにする配色の選びかた【実践編】
Refactoring UIで公開された「Building Your Color Palette」より許可をもらい、日本語抄訳しています。 これまでに以下のように鮮やかな色の配色ツールを使ったことはあるでしょうか？ ベースとなる色を選び、「補色」や「類似色」などいくつかの配色オプションを調整すると、ホームページを構築するために使用すべき５つの色見本が表示されるというものです。 完璧な配色を選ぶためのこの計算された科学的アプローチは、とても魅力的に見えますが、実はあまり役に立ちません。 自分のサイトをこんな風にしたのなら話は別ですが… 実際のホームページに必要な配色 ずばり、５つのHEXカラーコードだけでは何も作れません。 実際にホームページを制作するには、もっと包括的な色のセットが必要です。 インターフェースにはこれだけたくさんの色が使われている 良いとされる配色カラーパレットは、3つのカ
【イカしたUIを見る】Vol.2 これは発明だ！と思ったUIパーツ10選｜Goodpatch Blog グッドパッチブログ
知れば知るほど面白くなるUIの世界を皆さんにもチラ見せしたい……ということで、連載の第2弾となる今回は「これは発明だ！」と私たちが感動したUIパーツについてご紹介します。 ミクロな視点でアプリを観察し、UIパーツ一つひとつに注目してみると、普段は気付けない面白い発見がたくさんありますよ。 ※各UIパーツの名称は、公式で発表されているものではなく、私たちが便宜的につけた呼称になります。 関連記事：UIデザインとは？ 大切な5つのポイントや取り組み事例を紹介 Apple Booksのセミモーダル Appleが提供する電子書籍アプリ「Apple Books」では、カルーセル状に並んだ本を押すと、そのままセミモーダルが立ち上がります。前の画面の一覧性を保ちながら、それぞれの本の詳細を見ることができるのが特徴的ですね。さらに下スクロールすることで、全モーダルへと滑らかに変化します。 このUIのポイン
カラーパレットのコントラスト比を揃えるのにOKLCHカラースペースが便利だった｜よつくら
株式会社アンドパッドでUIデザイナーをしている、よつくらです。 2024年の7月、おそらく3年ぶりにアンドパッドで運用しているデザインシステムの、網羅的なカラーパレットを作成しなおしました。今回、カラーパレットのコントラスト比を揃えるのにOKLCHカラースペースが便利だったので紹介します。 網羅的なカラーパレットのコントラスト比を揃える前回カラーパレットを作成したとき、1段階目の網羅的なカラーパレットと、2段階目の意味を持ったカラーパレットを作成しました。そのときの学びは下記のnoteにまとまっています。 1段階目の網羅的なカラーパレットについて、色相の異なる色同士で同じコントラスト比を保っておいた方が、UIコンポーネントを作成するときに便利です。 毎回コントラスト比の計算で悩むのは嫌だ例えば上の図のように、いろいろな色で使えるタグコンポーネントを設計するときのことを考えてみましょう。 こ
スラデザ
高品質なスライドのデザインのギャラリーサイト。現役デザイナーが完成度の高いスライドだけをピックアップしているので、営業資料、採用ピッチ資料、プレゼン資料のデザインの参考にご利用ください 。
【新連載・イカしたUIを見る】vol.1 こんなの見たことない！と感動したUI｜Goodpatch Blog グッドパッチブログ
こんにちは！UIデザイナーのsugasoとharuです。UIデザインの面白さ（沼とも言う）にハマってしまった私たちは、定期的に「イカしたUIを見る会」（以下、イカ会）という課外活動を行っています。 イカ会では、最近触ったアプリや発見した魅力的なUIを共有し、普通なら見逃してしまうであろうデザインのこだわりや、ハートを揺さぶられるポイントについて語り合ったりしています。 知れば知るほど面白くなっていくUIの世界を皆さんにもチラ見せしたい……ということで、イカ会の様子を連載することにしました。第1弾となる今回は、「こんなの見たことない！」と私たちが感動したアプリをご紹介します。 関連記事：UIデザインとは？ 大切な5つのポイントや取り組み事例を紹介 Clear Lists 最初にご紹介するのは、ご存知の方も多いタスク管理アプリ「Clear Lists」。 Clear Listsの特徴はナビゲー
ReactとZodで作る堅牢なフォームバリデーション - ICS MEDIA
前回の記事『2024年版 HTMLで作るフォームバリデーション』ではHTMLの機能を駆使したフォームバリデーションの実装について解説しました。HTMLのみでも高機能なフォームを作成できるのは解説したとおりですが、HTMLに加えてJavaScriptを組み合わせることでより高機能なフォームを作成できます。それに加えて、開発者体験の向上も期待できます。 本記事では3つのライブラリを使用して実践的なフォームを作成する方法を解説します。 UIライブラリ「React」 フォーム向けライブラリ「React Hook Form」 型システムと相性の良いスキーマバリデーションライブラリ「Zod」 また、静的型付け言語であるTypeScriptもこれらのライブラリと同時に使用し、堅牢なフォームの実装を目指します。 本記事を読むことで以下の知識が身につきます。 フォーム画面のユーザー体験（UX）と、フォーム実
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「負けがほぼ確定すると場を荒らす子っているんだよ」社会の中でも感じる"ちゃんと負ける難しさ"とゲームを続けたくなる仕組みの重要性
ロジカルなUIデザイン 考え方と関わり方 / A Logical Approach to UI Design, How to Think and Engage
「ティアキン」スクラビルドは“12万通り”全組み合わせを手作業チェック！ 「ムリでは？」から始まる実装までの道のり【CEDEC2024】
