「バラバラになりそうだった」メルカリUI / UXの認識をDesign Systemにまとめたデザイナーたちの話 | mercan (メルカン)
「Design System（デザインシステム）」とは、開発で必要となるデザインの概念やスタイルなどがまとめられたものです。開発効率の向上だけでなく、プロダクトの一貫性を担保するためにUIのコンポーネントを規格化。プロダクトマネージャー（PM）やデザイナー、エンジニアの共通言語として存在しています。 そんなDesign Systemが、メルカリグループ内で誕生したのは2019年夏ごろでした。 「なぜそのタイミングでつくったの？」 「Design Systemをつくった目的は？」 そんな疑問を、Design Systemの設計をリードしたProduct Designチームの@tottieと@morishy、@kitajにぶつけてみました。 ※撮影時のみ、マスクを外しています。
ユーザーが見落とすことがない入力フィールドを作るには
UX Movementの著者および創設者。ユーザー体験においてのデザインのベストプラクティス、スタンダードおよびテクニックを教え、それを広めることでより良いデジタルの世界を作り上げることを目標としています。 入力フィールドは、ユーザーに情報を要求するもっとも一般的なインターフェイスの要素です。入力フィールドにはさまざまなサイズや形状、スタイルがあります。そのような選択肢がある中で、最適なユーザビリティを提供するには、どのように表示すればいいでしょうか？ 強い視覚的な手がかり 最適な表示方法は、入力フィールドの機能と、ユーザーがどのように操作するのかによって決まります。つまり、入力フィールドには、ユーザーが何をすべきか示す強い視覚的な手がかりが必要です。 入力フィールドは、インターフェイスにテキストを入力するために存在します。したがって、ユーザーが視認したらすぐに行動を起こせるように、入力フ
最高のデザインツール「Drama」が登場！SketchやXDより良いかも。 | Web Design Trends
Dramaとは Dramaは、インタラクティブなプロトタイプやアニメーションが作成可能なUIデザインツールです。 公式サイトでは、Dramaによってできることとして下記の3つが挙げられています。 インタラクティブなプロトタイプやアニメーションが作れるUIデザインツールといえば、Framer XやInVision Studioなどが思いつきますが、使いやすさや操作性、機能の豊富さを比べるとDramaは頭1つ抜け出しているような印象です。 また、SketchやAdobe XDなどと比べるとUIデザインツールとしての機能に大きな遜色は無く、むしろ動作の滑らかさではSketchよりも勝っているのではないでしょうか。 Dramaを一言で述べると、「これまでのデザインツールのいいとこ取りをしたツール」であると言えるかもしれません。 現在はまだ正式リリースはされていませんが、公式サイトからベータ版をダウ
WebのUI設計特集その1！優れたメガドロップメニューサイト紹介｜長崎県のホームページ制作・WEB制作会社｜合同会社WebJoy
情報が多いサイトのデザイン、メニュー構成に困っていませんか？ 情報が多いサイトの場合、グローバルメニューの項目が多くなりすぎて見づらくなってしまいがちです。 ただでさえグローバルメニューは、初めて利用するユーザーにとっては扱いづらいものなのです。 それは何故かと言うとグローバルメニューというものはサイトの構造通りの並びになります。しかし、初めて利用するユーザーはサイト自体の構造を理解していないため、そもそもグローバルメニューを使って探すことからしないといけません。 だからこそ、グローバルメニューはユーザーにとってより使いやすいものにする必要があります。 そこで、弊社では広いスペースを活用し階層が深いページまで構造をわかりやすくまとめることができるメガドロップメニューを推奨しております。 今回は、メガドロップメニューを採用しているサイトの一覧を紹介したいと思います。
UIデザインにおけるナビゲーションのデザインパターンまとめ | ベイジの社長ブログ
前回エントリーでは「UIデザイナーが理解しておくべき11種類のナビゲーションと特徴」として、ナビゲーションの種類を、機能的な側面から分類し、ご紹介しました。 続編となる今回は、ナビゲーションをデザイン的な側面からとらえ、形状、ふるまい（動き）、階層というの3種類の表現軸に分けて、ナビゲーションでよく使われているデザインというものを整理してみました。 形状のデザイン UIにおけるナビゲーション要素が、主にどのような形状でデザインされているか、というパターンをここではご紹介しています。 メニューバー メニューをボタン化し、バー状にまとめたデザインです。PCサイトのグローバルナビゲーションやローカルナビゲーションなどによく採用されます。 一覧性に優れ、一目でナビゲーション要素と分かるため、ユーザビリティに優れます。一方、ある程度の表示スペースを必要とするため、スマートフォンではあまり用いられない
使いやすいスタイルガイドを作成！デザイナー向けテンプレート素材、ツール15個まとめ
より複雑になっていくWebデザイン制作では、統一感のあるデザインやレイアウトを利用することが重要です。プロジェクトをチームで進めるときや、公開後もメンテナンスしやすいサイト作成には、スタイルガイドを活用してみましょう。 スタイルガイドを利用することで、より手軽にデザインやレイアウトを統一でき、コード品質の低下を抑え、サイトの制作や運用、管理もしやすくなります。今回は、そんなスタイルガイドを作成するときに参考にしたい、無料で利用できる各種テンプレートやオンラインサービスをまとめてご紹介します。 詳細は以下から。 スタイルガイドはなぜ必要？ Web制作で困らない！スタイルガイド作成に必要なポイント10個まとめ + 無料テンプレート より抜粋すると、「スタイルガイドはWebサイトそれぞれのパーツに一貫性があり、全体を通してより親和性の高いデザインを作成するために、あらかじめデザインしたコンポーネ
「お金を払った感」はどのようにデザインすればよいのか｜Goodpatch Blog グッドパッチブログ
私たちは普段、お店でものを買う際には必ず「お金を払う」ということを行っています。現金やクレジットカード、交通系電子マネーに加え、最近ではApple Payなどのスマートフォンによる電子決済サービスも登場しています。そのような新しい決済サービスを使ったことがあるという方も増えてきているのではないでしょうか。 このブログでも度々注目されているお金とデザインのこと。先日起こった私の実体験を通して、このような「お金を払う」という体験のデザインについて考えてみたいと思います。 とあるコーヒーショップでの体験談：フィードバックの勘違い これは、とあるコーヒーショップでバーコード決済アプリを利用した際に体験した実話です。 さて、3コマ目で私はなぜ「会計が終わったな」と勘違いしてしまったのでしょう？ 振り返ってみると、会計時に私はこんなことを考えていました。 1コマ目：「電子決済アプリで支払いたい」 2コ
2015年のゲームUI/UXを振り返る
今年は大袈裟な見出しを考えたところで８割方燃え尽きました。 お久しぶりです。デザイナーの きの です。 今回は【UX Tokyo Advent Calendar 2015】 の7日目としてお送りします。 今年も僕はゲームのUI制作の現場で働いています。 サービスではなくコンテンツの制作となるゲームの現場では、UIもUX一緒に考える機会ばかりです。 （そんな現場の様子は去年のブログをごらんください） なので、業界関係者からは刺される覚悟で「UI/UX」という括りで今回は今年のゲームを振り返ってみたいと思います。 今年はいろんなゲームを遊んでいく中で、おっと思ったポイントを紹介します。 果たしてそれが来年のトレンドなのか、それとも・・・。 年越しには少し早いですが、一緒に振り返ってみましょう。 1. ユーザーはデータ容量に敏感 [画像：アイドルマスターシンデレラガールズ スターライトステージ]
Webデザインのスタイルガイドの作り方
Webサイトの制作はどんどん複雑化しており、１人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Webサイトを分割してチームでデザインをするときにチームメンバーが共通認識を持つには、デザインドキュメントまたはWebデザインのスタイルガイドを作成することが有効です。これは、エンジニアがデザインを変更してしまうことを防ぐのにも役立ちます。 異なるページの間に一貫した体験を作り出すために、スタイルガイドを用意するのはとても有効です。また、今後の開発やサードパーティ製品が生まれた際も、ブランドのガイドラインに沿い、ブランドの一部として知覚されるようにやすくなるでしょう。 Luke Clum氏は、Webデザインの第一歩としてスタイルガイドを利用することについて、昨年簡単に紹介をしました。この記事で
ウェブデザインの前線に居続ける。小山敬介のデザイナーとしての心構えやで | A.C.O. Journal
Why MonstarlabServicesWorkAboutNewsIRCareersContactJP世界の集合知とテクノロジーで変革をAmplifying transformation with Strategy,Design and TechnologyWhy MonstarlabOurServices世界の多様なプロフェッショナルが集結し、戦略策定、ユーザー体験設計、モダンな開発、成長基盤構築の各フェーズに伴走し、連続したイノベーションを繰り返すことで、お客さまの変革を実現します。01事業戦略02体験設計03開発04成長基盤構築サービスOurWork世界中で蓄積された豊富なナレッジと、あらゆる業界における実績、最先端のテクノロジーを駆使し、お客さまの変革を支援しています。ユーザー体験設計から革新的な保険サービスを生み出し、若い世代の日常に「保険」を取り込むことに成功Income
root｜芯を問い、成長に貢献する
芯を問い、 成長に貢献する私たちは事業の芯を共に見出し、 その価値をユーザーに届く形へデザインします。 お客さまの事業成長に貢献できるよう、 デザインパートナーとして伴走することを約束します。 私たちについて 事業紹介私たちはこれまで、事業戦略に応じたプロダクトデザイン戦略の立案からUXデザイン、人間中心設計に基づいたデザイン手法を実行することで事業の立ち上がりから成長までの過程を支援します。
【デザインまとめ】綺麗なデザインの管理画面 40種類
今日は管理画面のデザインを、まとめてみました。いつもより多めな40種類です。トレンドを反映してか、フラットデザインが多いですね。 通常の静的なサイトのデザインとは異なり、投稿がある場合無い場合とたくさんのパターンを考えながら制作しなければならないので、デザイン力が問われます。これらを日本語に置き換えるとまた違って見えたりするのですが、ひとまず、ご参考になればと思います。 ▼ The Kamarel デモサイト ▼ Apricot Bootstrap デモサイト ▼ The Vira デモサイト ▼ Cameo デモサイト ▼ DefOne デモサイト ▼ Pixit デモサイト ▼ AdminEx デモサイト ▼ Odin デモサイト ▼ Minimal デモサイト ▼ Delighted Flat デモサイト ▼ Tisa Premium デモサイト ▼ Adminre デモサイト ▼
クソ酷いウェブサイト
他に何がほしいってんだ、クソ野郎 お前はウェブサイトを作ってその糞サイトを最高だと思ってるんだろ？ お前は13MBに及ぶパララックスエフェクト付きのクソ重いページがアホらしいグッドデザイン賞をとるとでも思ってるんだろ？ お前は20kgあるjQueryファイルと83個のpolyfilがIE7をまともに動作させると思ってるんだろ？ どアホ、お前は間違っている。俺様が俺の考える最強のウェブページを教えてやる。 クソ軽量でクソ速いページ 全てのデバイス幅に対応できる どんなうんこブラウザでも見た目が一緒 お前のサイトに訪れるどんな糞野郎でもアクセス可能 読みやすく伝えたいことが明確（もっともお前が5MBサイズのシャレオツなコーヒー写真ではなくて伝えたいことがあればの話だがな） よく聞け、糞野郎ども お前らはハッキリ言ってオーバー・デザインだ。この史上最強のウェブサイトを見てみやがれ。俺がごみコンテ
Webサイトやモバイルサイトのワイヤーフレームがたくさん！でレイアウト作りの参考に役立つ「UI TITES」と「UXKITS」 | HTML5でサイトをつくろう
Webサイトやモバイルサイトのワイヤーフレームがたくさん！でレイアウト作りの参考に役立つ「UI TITES」と「UXKITS」 最近、自分の中でWebサイトの参考としてPinterestがとても便利で毎日みてるのですが、かっこよいサイトの他にレイアウトの例としてUIやUXに特化したボードなどもありチェックしています。 そんな時見つけた、Webサイトやスマホサイトを画面構成を作る際にたくさんのモジュールが用意されている「UI TITES」と「UX KITS」がシンプルだけですが組み合わせによって色々なレイアウトが作れるのでとても参考になりますので紹介します。 http://pixelbuddha.net/ui-tiles/ こちらは72個もモジュールがあり無料でダウンロードができます。 PHOTOSHOPデータやイラレデータがありますので、個々のモジュールを組み合わせてWebサイトのワイヤー
Webデザイナーが知っておきたいコンバージョン率の高いボタンを作る方法
あなたはコンバージョン率やクリック率の高いボタンを作る方法をご存知でしょうか？ディレクターに「コンバージョン率が低い」と言われると「あれ？自分のデザインのせいかな？」なんて思ってしまいますよね。そこからフォームやボタンのデザインを見直すWebデザイナーさんも多いと思います。 ではどうすればコンバージョン率の高いボタンを作ることが出来るのでしょうか？それは「人の心理を理解する」ことです。そうすることであなたもコンバージョン率の高いボタンを作ることが出来ます。 事実、A/Bテストを用いた検証でコンバージョン率を大幅に改善した事例は数多く存在します。今回はその事例と「コンバージョン率の高いボタンを作る方法」を併せてご紹介します！ そもそもコンバージョンボタンとは？ 本題の前に、そもそもコンバージョンボタンとは何のことか再確認してみましょう。コンバージョンボタンとは、Webサイトに訪れたお客様に資
アニメーション表示のプログレスバーをどうすれば体感速度がアップするのかが判明
ファイルをダウンロードする時やソフトウェアをインストールする際によく目にするのが進捗度合いを示すプログレスバーですが、このプログレスバーの表示にアニメーション効果を加えることで、処理の体感速度を実際よりも早く感じさせる効果があることがわかりました。 ProgressBarsVisualCHIv15CAMERA1 - ProgressBarsHarrison.pdf (PDFファイル) http://chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf カーネギーメロン大学コンピュータサイエンス学科 Human-Computer Interaction Instituteの研究チームは、次の3種類のバーを比較して実験を行いました。 実験では、この3種類のバーをそれぞれ比較させることで、その効果の違いを浮き彫りにして
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UI用のアイコンが1,400種類以上！商用でも完全無料で利用できる、シンプルなアイコン素材 -Remix Icon
株式会社つみき TSUMIKI INC.
最近のWebサイトで使われてる、UI要素をデザインするテクニックのまとめ -Little UI Details by Steve Schoger
Online Mockup, Wireframe & UI Prototyping Tool
