Design Systemへの取り組み 〜Frontend編〜 | メルカリエンジニアリング
この記事は、Mercari Bold Challenge Monthの1日目の記事です。 こんにちは、MercariのArchitectチームでDesign Systemに取り組んでいる@usagi-fです。 Design Systemはただのスタイルガイドラインではなく、会社として保持するデザインフィロソフィーから実装コードに落とし込まれたUIコンポーネントまで、広い範囲をさす言葉として認知されてきています。 現在私たちは本格的に構築へ着手しており、少しずつ進捗が見えてきました。この記事では主にDesign Systemにおける「UIコンポーネントの定義と実装」の部分に焦点をあて、私が担当しているWeb Frontendの事例を紹介していきます。 MercariにおけるDesign System Mercariでは将来的な組織規模の拡大に向けて様々な取り組みを行っていますが、Design
DarkModeのデザインを中心とした色彩設計の考え方 - くらげだらけ
こんにちは、くだくらげです。最近ははじめてのUIデザインという本を共著で書きました。 おかげさまでたくさんの人に読んでいただいて、コメントをもらえたりして嬉しいです。ありがとうございます！ PEAKSさんから出版しており購入できますので、よろしければ手にとってみていただけると嬉しいです。 peaks.cc 概要 WWDC 2019で新しく発表されたiOS13でOSレベルでのDarkMode設定が搭載されることになりました。MacOSの方は以前より追加されていましたが、iOSではなかったので個別のアプリが各々対応していました。 今回、iOSにもDarkMode設定が標準搭載されたことによって、iOSアプリのダークモード対応が必然的に迫られることになって来るのではないかと思っています。 ダークモードを好んで使う人は一定数存在していて、かく言う私もダークモードを好んで使っています。目に優しいだっ
UIデザインのバグを減らすための施策
UIデザインにもあるバグ 今年の WWDC 2019 で印象に残っているセッションのひとつが「Introducing SwiftUI: Building Your First App 」。SwiftUI は開発がよりスマートにできるようになるだけでなく、デザインツールの新しい可能性を示しているように見えました。SwiftUI はとてもエキサイティングですが、個人的に刺さったのが上の写真。改めて意訳した図を作りました。 UI デザインは単に理想型を作れば良いのではなく、様々な状態（ステート, State）を考慮する必要があります。情報量に応じてどう見せるかだけでなく、様々な種類のエラーにどう対応するか考えなければいけません。How to fix a bad user interface で紹介されている UI Stacks のように、少なくとも 5 つのスクリーンデザインが必要になります。
複雑な乗換体験を直感的に！ 乗換案内アプリのデザイン
これらを鑑みると、 アプリの画面上では乗り入れ箇所で路線色が変わり、誤って降車するリスクがある 行き先が異なる複数の乗客に対して、駅員さんは「直通運転」であることはアナウンスできても「乗換不要」という案内はできない アプリの画面を見ているのは本人のみ、かつ目的地まで目視できるので「乗換不要」と伝える方が有益 このような経緯から、あえて「乗換不要」としています。 手法は大事、ユーザー視点はもっと大事 文言はサービス内で表現のズレが起きないよう、用語辞典を作成しています。「ルート/経路」「電車/列車/鉄道」など。ただし意味が伝わりづらい箇所では、表現のズレを許容しています。注意しなければならないのは、このようなフレームワークや手法などを優先して、ユーザー視点を見失わないようにすることです。 ワイヤとビジュアルを並行して行うことでUX品質を高める 路線情報チームのデザイナーは、ワイヤフレームとビ
これだけ守れば見やすくなるデザインの基礎
2019/04/18に株式会社gumi様で行ったデザイン講義のスライドです。 デザインとは何か？デザイナーは何を考えてデザインを作っているのか？ という話から、実際にデザインを評価・検討するための言葉を紹介しています。 この 作品 は クリエイティブ・コモンズ 表示 - 改変禁止 4.0 国際 ライセンスの下に提供されています。 第二回「UIデザインをはじめよう」はこちら https://speakerdeck.com/kinakobooster/uidezainwohazimeyou 第三回「今日からできるUXデザイン」はこちら https://speakerdeck.com/kinakobooster/jin-ri-karadekiruuxdezain ※訪問講座のご案内※ あなたの会社に話しに行きます。料金表はこちら https://xemono.life/#/workwith/co
オブジェクトベースなUIデザイン｜Yoko Nishida｜note
WEB+DB PRESS Vol.107掲載のオブジェクトベース設計によるUIデザイン改善を読んだ。デジタルなサービスのUIを設計していく上で、とても参考になる知見なのでまとめてみる。 オブジェクトベースUI設計とはユーザーがやること（タスク）の手順をそのまま画面に反映させるのではなく、ユーザーの関心対象（オブジェクト）を画面とデータに対応させながら考えていく手法。 オブジェクトベースUI設計の良いところこのオブジェクトベースUI設計は、特に複雑なタスク＆要求が混在する業務利用アプリケーション（SaaS / B向けサービス）のUIデザイン改善、運用で活かしやすいという印象を受けた。 大規模なシステム、膨大なデータと連携しながら、多様なユーザーニーズに応えやすいUIを実現するにはどうすれば良いか。 要件に散在する情報をオブジェクトとして捉えることで、その場しのぎではないUIデザインが作りやす
エラーメッセージはフォームのどこに表示するべきか
UX Movementの著者および設立者です。ユーザー体験のデザインスキルの開発を手助けしてよりユーザーフレンドリーな世界のために、このブログを創設しました。 フォームのどこにエラーメッセージを配置していますか？ ユーザーの期待する場所にエラーメッセージが置かれていないと、ユーザーはフォーム入力を完了できなくなってしまうかもしれません。 フォーム入力を間違えたら、ユーザーはそれを修正して送信し直すために、なにが間違っていたのかを理解する必要があります。フォームを完了しようと思っていたとしても、それがあまりにも大変であればユーザーは心変わりしてしまうでしょう。 フォームの上か、フィールドのインラインか エラーメッセージの配置場所でもっとも一般的なのは、「フォームの上」と、「エラーのあるフィールドのインライン」という２箇所です。どちらの配置場所が、ユーザーにとってより直感的でしょうか？ 調査に
UI Crunch #13 娯楽のUI - by Nintendo - - YouTube
2018/4/27（金）に渋谷・DeNAオフィスで開催した『UI Crunch #13 娯楽のUI - by Nintendo -』。"もっと楽しく"を追求する、任天堂のUIデザイナー3名をお迎えし、「Splatoon」 や「Nintendo みまもり Switch」 などの事例を交えながらお話いただきました。 https://ui-crunch.connpass.com/event/82969/ ■■■■コンテンツ■■■■ 00:00:00～ 自己紹介・もくじ 00:03:57～ ①あそび心とUI 00:23:02～ ②SplatoonUIの狙い 00:42:22～ 任天堂の紹介 00:46:14～ ③NintendoみまもりSwitch は 誰のもの？ 01:07:07～ さいごに 01:10:51～ Q&A 【UI Crunchとは】 UI Crunchは、DeN
HOME'SのUIトレースをしてみた｜綿貫 佳祐 / Qiita
ここ最近ビジュアル制作についてのインプットが少ないなと思って実施しました。 LIFULL HOME'Sのweb版をトレースしています。 トレース元として選んだ理由は LIFULLさんは私が働いている会社と事業領域が似ていて、かつブランディングにも力を入れている。 ビジュアル面、ブランディング面は私の会社では全然力を入れられていないが、LIFULLさんをベンチマークすることで何か発見があるはず。といったものです。 それでは以下に学んだ内容をまとめてみます。 タイポグラフィ font-familyは基本的にヒラギノ角ゴシックです。 ごくごく一部だけSF Proが使われていました。 プレースホルダー内など、普通に指定したfont-familyが当たらずにiPhoneの初期設定としてSF Proが出ちゃってるのかな？と思います。 font-sizeはほぼ10, 12, 14, 16, 18, 20
AbemaTVのUIデザイン 僕なりの運用の心得 | CA BASE CAMP | CyberAgent Developers Blog
2018年1月22日（月）セルリアンタワーにて、サイバーエージェントの約1,800名の技術者に向けた全社技術カンファレンス『CA BASE CAMP』を開催しました。 本ブログでは、『CA BASE CAMP』にて行われたセッションの一部を、登壇スライドと共に順次公開していきます。 ▼開催レポート 全60セッション。約1,800名の技術者に向けたサイバーエージェントの全社技術カンファレンス『CA BASE CAMP』を開催 https://developers.cyberagent.co.jp/blog/archives/13613/ こんにちは！AbemaTVにてリードデザイナーを務めている松本(@ShunsukeM108)です。 この度サイバーエージェントグループでの技術カンファレンスCA BASE CAMPにて登壇させていただきました。サービスの立ち上げから運用までやってきて得られた
Sketchテンプレート付き！UXデザイナーがビジネスモデル図解に挑戦してみた｜Goodpatch Blog グッドパッチブログ
UXデザイナーのKatsukiです。 以前、ストーリーテリングの重要性、及びストーリーボードとしてストーリーを可視化する利点を記事にしました。 なぜビジネスモデルの図解に挑戦したか UXデザイナーである私が第一に期待されているのは、もちろんユーザーにとっての良い体験をデザインすることです。 そしてそのデザインがビジネスにインパクトを与えることもUXデザイナーの重要な役割です。 もはやその時点でUXデザイナーではなく、デザインストラテジストや、ビジネスデザイナーと呼べるのではないか？とも捉えられますが、それらの役割の呼称の議論は今回は割愛します。 更に具体的に言うと、新規事業を立ち上げるプロジェクトに携わるすべてのビジネスパーソンは、そのビジネスを伸ばすキモがどこであるのかを明確に定義し、説明できる必要があります。ビジネスとして注力すべきポイントを明らかにすることは、チームの士気を上げること
Devices from Design at Meta
Meta supports a diverse audience around the world and an equally diverse set of devices. To emphasize that in our design mocks, we redrew a range of devices to show the global diversity of the people using our products. Many of the devices come with a bitmap of the device with and without shadows. Please do not repackage and redistribute these as your own. Please see disclaimer for full details.
Facebook Design | What's on our mind?
Every pixel. Every word. Every part of the experience aims to deliver on that promise.
16種類（45カテゴリ）の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選（スライド付）
2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今
プロトタイプに発生する溝と対処法
完成品になれない溝をどう埋める あたかも完成品に見えてしまうデザインカンプには、様々な暗黙の了解が存在します。グラフィックツールで Web ブラウザ上での見た目を再現しようとしても、実際 HTML / CSS で組まれたデザインの見た目と同じになることはありません。どこまで静止画を作り込んでも、実際の完成品には成り得ない大きな溝が存在します。この溝が大きな誤解に繋がることがあります。 例えばレスポンシブ Web デザインの場合、幾つかの大きさで静止画のデザインを用意したとしても、その間（可変状態）でどうなるか想像するのが難しい場合があります。また、レスポンシブ Web サイトにおける表現は多彩になってきています。要素の順番を Flexbox で変えることもできますし、画像の配置の仕方もより柔軟で表現豊かになってきています。知識や経験がある方であれば静止画では表現されていない「実はこうなる」
DeNA南場智子氏が語った「経営会議より、UI/UXが大事」なぜ今デザインなのか？ - リクナビNEXTジャーナル
DeNAとGoodpatchが合同で運営する「UI Crunch」から、若手デザイナーのためのコミュニティの発展を目的として誕生した「UI Crunch Under25」。第一回のイベントが渋谷ヒカリエで開催された。その基調講演でDeNA会長・南場智子氏は、「これからのデザインとビジネスの関係」をテーマに講演。 何かの才能を持っている人や、ものをクリエイトできる人に対して、すごくコンプレックスを持っているという南場智子氏。なぜ今、デザインが大事なのか？その理由を、自らの失敗談とDeNAの事業戦略を交えながら語ってくれた。 ▲株式会社ディー・エヌ・エー 取締役会長 南場 智子氏 1986年、マッキンゼー・アンド・カンパニー入社。ハーバード・ビジネス・スクールでMBAを取得し、96年、マッキンゼーでパートナー（役員）に就任。99年に同社を退社して株式会社ディー・エヌ・エーを設立、代表取締役社長
男性が理解できない「女の意思決定」を可視化した「女ゴコロフレームワーク」とは。ネイルアプリ「ネイルブック」が語るアプリ運営の生体験談。 | アプリマーケティング研究所
男性が理解できない「女の意思決定」を可視化した「女ゴコロフレームワーク」とは。ネイルアプリ「ネイルブック」が語るアプリ運営の生体験談。 「ネイルブック」を運営しているスピカさんにお話を伺いました。女性心理を理解するための3ステップ「女ゴコロフレームワーク」とは？ ※株式会社スピカ 「ネイルブック」3代目ディレクター 正木友佳さん（初代ディレクターの川端さんにも同席いただきました） 「ネイルブック」が出来るまで。 「ネイルブック」について教えていただけますか？ 川端： 「ネイルブック」は、ネイル写真を共有するアプリです、現在は10名のメンバー（うち女性4名）で運営しています。 ダウンロード数については、2011年4月にリリースして、現在120万ダウンロードです。海外からのダウンロードもありますが、アクティブユーザーは日本のユーザーがほとんどです。 どんなユーザーが使っているんでしょうか？ 川
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
エンジニアにオススメしたい、デザインが学べる記事10選 | Goodpatch's Blog
ログイン - はてな
マネーフォワード クラウド - バックオフィスから経営を強くする
