デザイン未経験者がメルカリとラクマのUIトレース（ホーム画面）＆UI比較をしてみた｜Ryo Ito
目次 0. はじめに 1. メルカリとラクマのUIトレース 2. メルカリとラクマのUI比較 3. まとめ0. はじめにはじめまして、Ryo（@tw_ryo08）です。 5年目の大学に通いながら、HR領域の会社でプロダクトの開発ディレクターをやってます。 デザインのバックグラウンドは全くありませんが、UIやUXの設計をすることも多くデザインの勉強も兼ねてアプリやサービスのUIトレースや考察をやっていこうと思い、noteをスタートします！ きっかけになったのはココディーさんのnote ココディーさん、ありがとうございました！ 1. メルカリとラクマのUIトレースをしてみたデザインのスキル向上だけでなく、プロダクトやサービスを見る目や設計する能力も養っていきたい（むしろこっちがメイン）のでUIトレースするだけでなく、類似したサービス（ラクマ）との比較もしてみました。 まずは、メルカリ（アプリ）
実践的UXデザイン論 第2回 良いUXデザインとは 〜ノーマン・モービル・ギャレットの事例と共に〜 | クリエイターのための総合情報サイト CREATIVE VILLAGE
UXとは「User Experience：ユーザーエクスペリエンス」の略称で、製品やサービスを使用することで得られる体験を指します。 使いやすい・わかりやすいだけに留まらないユーザーのやりたいことを「楽しく・心地よく」実現するための思考法や手法を人間中心設計の普及に取り組まれている松原さんに伺いました。 今回お話を聞くのは… 松原 幸行（まつばら・ひでゆき） 美術専門学校を卒業後、パイオニア、富士ゼロックスのデザイン部門を経て2006年からキヤノン・総合デザインセンターに所属。アドバンストデザイン部門や業務系ユーザインタフェース部門をリード。 メーカー勤務と並行して、2004年にNPO法人 人間中心設計推進機構（HCD-Net）の設立に加わり、以後、理事としてHCDの普及に勤めている。2009年にHCD認定専門家資格を取得。著書に「ユーザビリティハンドブック」（2007年、共立出版、共著）
2017年要注目！モバイルに必要なスクリーン画面のサンプル実例15個まとめ
スマートフォンの登場によって、私たちの生活に欠かせないアイテムのひとつとなっています。さまざまなアプリケーションによって、よりライフスタイルを楽に、そして快適にしてくれます。 デザイナーの仕事は、ユーザーのニーズを満たすUIデザインを作成し、快適で満足のいくユーザー体験を作り出すことです。効果的なUIデザインを構築するためには、モバイルアプリケーションの特徴をきちんと理解し、構成している要素や機能を学ぶ必要があります。 現在、モバイル業界は急速に発展しており、アプリ業界もしかり。この記事では、もっとも一般的なモバイルスクリーンのサンプル例15個を、必要なデザイン要素と一緒にまとめて紹介します。 2017年に人気となる、知っておきたいUIデザインのトレンド8個まとめ モバイルの使いやすさを劇的向上！参考にしたい7つのポイントまとめ ニュース系アプリから見る、参考にしたいUIデザインアイデア1
デザイナーがデザインシステムに参加するための課題と対策
実装寄りの情報だけでは不十分 コンテンツだけでなくデザインも運用していきたいと考えたとき、デザインシステムを作ることが不可欠です。属人性を省きつつ、最低限の品質を担保することが可能なデザインシステムですが、作りさえすれば組織で広まるのかというと、そんなことはありません。 Salesforce の Lightning Design System、MailChimp の Design Patterns をはじめ、自社でデザインシステムを取り入れるためのインスピレーションは幾つか見つけることができますが、フロントエンド寄りになりがちです。早く Web サイトやアプリを実装するためのガイドラインなので当然ではあるものの、これだけではデザイナーがデザインシステムへの参加が難しくなる場合があります。多くの要因は「デザイン」と「コード」にある溝と大きく関わっています。 コードが分からないと参加が難しい
完全無料で美しい！参考にしたいUIキット50個まとめ 2017年保存版
ユーザーがウェブサイトを訪れたとき、まず目にするものがグラフィックデザインです。高品質なUIデザインを利用することで、ユーザーにサイトをより魅力的に見せることができます。 今回は、新しいデザイントレンドを取り入れた、完全無料ダウンロード可能なUIキットをまとめてご紹介します。 これらのUIキットを利用することで、クリエイティブで美しく、便利なウェブサイトやアプリデザインの作成をスピーディーに行うことができます。必要に応じてボタンやログインフォーム、ソーシャルメディアなどの要素を編集し、自由に利用することができます。 魅力的なウェブデザインを素早く仕上げる、すごい無料UIコンポーネント素材30個まとめ 完全無料でこのクオリティ！美しい新作UIキット50個まとめ 2017年版 Blog UI Kit ファイル形式: Sketch Prometheus | UI Kit ファイル形式 : PSD
「センスない」と言わせない！ 非デザイナーでもわかるUI配色のコツ
どんなに機能がイケてるアプリでも、デザインがイマイチだとなかなか使ってもらえません。そこで必要なのが、「色」の知識。もうセンスが悪いなんて言わせません。 Kissmetricsによると、製品の外観は消費者の購入決定判断に一番影響する要素です。最近では、マーケティングマネージャーがカラーコンサルタントを登用し、カスタマーを引きつける力のある色をどう選ぶべきかアドバイスを受けるのが通常になってきています。色が重要なマーケティングツールだと理解しているからです。モバイルアプリの開発者にとっても、そうした流れから学ぶべき、役立つことはたくさんあります。 カラーセオリーとは 3原色（赤、黄、青）を基本としたカラーホイールを芸術家が使うようになってから、もう何世紀もたちます。最初のカラーダイアグラムは350年前に誕生し、ニュートンによって開発されました。 最近使われるカラーホイールは、二次色（緑、オレ
Webデザインでよく使うUI要素の名称・用語一覧 - Qiita
Overview Webサイトを作っているとよく出てくるUIの名称を、ざっくばらんにまとめました。 人や会社ごとで固有の呼び方があると思いますが、私の場合こんな感じです。 コミュニケーション円滑にな〜れ ※2016/11/28 はてブコメントなど参照させていただき、少し更新しました。 ポップアップ表示系 ▼ アラート JSのalertかブラウザのデフォルト機能で出るやつ。ダイアログとも。 ▼ モーダル・モーダルウィンドウ 閲覧中のページにカバーを重ねて表示させるやつ。 modalは「このページはいま入力モードだぜ」といった意味合いでmodeを形容詞化したことば。 ▼ ツールチップ・ポップアップ表示 マウスオーバーすると吹き出しとかで表示されるUI。 補足説明などで使用されることが多い。 ▼ ポップアップウィンドウ 閲覧中のウィンドウとは別に、勝手に立ち上がるウィンドウ。 スパイウェアなどの
UIデザイナーの私が4年間で学んだ、ダッシュボードのデザインで大切な26のこと
モバイルアプリ相互送客ツール「Tapdaq」のメインデザイナーであり、Dashboard UI Kitの作者として知られるJan Losertさん。4年間のダッシュボードデザインの経験からまとめた26のステップは、UI/UXデザイナー必読です。 過去4年間にわたってダッシュボードとアプリケーションのデザインを続ける中、プロダクトをさらに良く効率的なものにするために、いろいろな部署と付き合っていくこと、そしてそうした部署の人たちの知識を活用することを学びました。 この記事では、私が学び、日常のルーティンに取り込んだすべてのステップを紹介しようと思います。こうしたステップがあったからこそデザイナーとして大きく成長できたと思うので、読者のみなさんに役立つことを願っています。 事前準備をする Step 1. 集められるだけの情報を集める（例示は3パターンでお願いする） 私にとって、実際に稼働してい
2017年に人気となる、知っておきたいUIデザインのトレンド8個まとめ
アプリデザインのトレンドは絶えず変化しています。時間が経てば消えてしまうものから、成長し、進化を続けるものもあります。多くのトレンドは検討する価値がもちろんありますが、一緒に新しい技術も必要となります。 優れたUIデザインは、シンプルさ（英: Simplicity）と有効性（英: Effectiveness）が全てです。これこそがデザイナーが機能性を達成しようとする理由です。しかし反対に、もしユーザーがアプリをうまく使いこなせないとき、UIデザインは失敗と言えるでしょう。 デザイントレンドが変化する理由にはさまざまな要因が考えられます。たとえば2015年の大きな流れとして、ハードウェアの変化やモバイル端末のレスポンシブ化が挙げられます。 公開された多くのモバイルアプリは、人気のある機能を必需品としてすぐに変化させてきました。さらに今では若者のおよそ90%が、モバイル端末上で基本的な操作を行
モバイルのUI要素を視覚的に分けるための６つのガイドライン
アプリのデザインは一見すると簡単そうかもしれませんが、実際プロトタイプに取りかかってみるとその難しさに気づきます。どのようなデザインにするか判断に迷いだすと、最初はシンプルに思えたことも複雑になり始めます。 例えば２つ以上のコンテンツを視覚的に分けるというシンプルなタスクでさえ、的確な判断をするのが難しいときもあります。 今回はそんな細かいUI要素の一つである「区切り線」やUI要素の「区分け」について見ていきたいと思います。 従来の区切り線 水平（または垂直）の線を使用すると、関連するコンテンツのセクションの間に必要となる視覚的な区分けを作ることができます。 この仕切りによってページにリズムと階層をつくり、コンテンツがどのように編成されているかユーザーが理解するのに役立ちます。 区切り線の種類と使い分け フルブリードディバイダー フルブリードディバイダー（余白なしで横幅100％の区切り線）
ミニマルなモバイルアプリUIで気をつけるべき６つのこと
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 デザインはユーザーのエンゲージメントを高める上で、最も重要なものの一つです。ユーザーはシンプルなインターフェースを好むようになってきたので、UIを基本的で必要最低限な要素のみに残していくことが成功の鍵です。 ミニマリズムは、構造と機能の絶妙な組み合わせから成り立ちます。その最大の強味は、構造を明確化することにあります。線を整え、たっぷりと余白を残し、そして視覚的な要素を最小にすることで、最も複雑な主題（内容）でさえもシンプルになります（もちろん、効果的に使われればの話です）。 ミニマルデザインでは、簡潔さ、明確さ、そして一貫性が求められます。明確なビジュアルコミュニケーションによってユーザーの問題解決を導くべきです。ミニマルなデザインのアプリが評価されるのは、ユ
説明できないデザインは、デザインではない。CAゲーム事業が目指す、デザイン組織とは | SELECK [セレック]
〜「スマートフォンで”夢中”を体感させるゲーム作り」を掲げ、サイバーエージェントが設立した「UIUX Lab」。「ビジネス的な価値」を理解するデザイナーを育成するなど、デザイン組織のあるべき姿を大公開〜 競争が激化し続けるスマートフォン向けゲーム市場。そんな中、株式会社サイバーエージェントは今年、ゲームに最適なUI/UXを考える専門組織「UIUX Lab」を設立した。 ▼スマートフォン向けゲームに最適なUI/UX研究をする専門組織、UIUX Lab UIUX Labは、サイバーエージェントグループ各社の第一線で活躍するUI/UXデザイナー7名で構成され、制作するゲームのクオリティ向上と、デザイナーの育成をミッションとしている、プロのデザイナー集団である。 その組織を率いるのが、「説明できないデザインは、デザインではない」と語る、代表の鷲山 優作さん。今回は同氏に、「ビジネス的価値」を高める
![説明できないデザインは、デザインではない。CAゲーム事業が目指す、デザイン組織とは | SELECK [セレック]](https://cdn-ak-scissors.b.st-hatena.com/image/square/4a095dfedbeccd5abc1ca13e998ae152d0e37a4e/height=288;version=1;width=512/https%3A%2F%2Fseleck.cc%2Fwp-content%2Fuploads%2F2018%2F06%2F1171.jpg)
ITエンジニアがUXデザインを実践するコツと心構え
「UXデザイン（ユーザーエクスペリエンスデザイン）」という言葉は、近年多種多様な職種業種で頻繁に耳にするようになりました。皆さんは、その意味をどのように解釈しているでしょうか？ 「なんだか小難しそう」「ちゃんと勉強したことがないし、自分にはできそうにない」といった印象を持たれている方も少なからずいるのではないかと思います。ですが、今回私が特にエンジニアの方向けにお伝えしたいのは、UXデザインは職種や専門領域に関わりなく、誰にでも、もちろんエンジニアにもできることということです。では、どのように取り組んだらよいのか、今回はWebサービスを例に解説します。 UXデザインとは？ UXデザインを実践するにあたって大事なことは、ユーザー（開発するWebサービスを使う人たち）を中心に、ユーザーが関わる関係者の気持ちを考えながらサービス作りを心がけることです。必ずしも「UXデザイン」という言葉の厳密な定
「シズル感」と「読みやすさ」ってどうやってデザインで解決する？お菓子専門Webメディアのリニューアルで使った手法 | THE BAKE MAGAZINE
「シズル感」と「読みやすさ」ってどうやってデザインで解決する？お菓子専門ウェブメディアのリニューアルで使った手法 こんにちは、BAKEのデザイナー井手口です。 前職では、グラフィックとウェブデザインの両方を経験できる制作会社に所属していましたが、以前から興味があったブランディングデザインを行いたく、今年の4月からBAKEではたらいています。 BAKEに入ってからは、店舗ブランドで使っている原材料のオリジナルブランド「011」のパッケージ開発や、店舗ブランドのイベント用LP作成やPOPなどのデザインを行いながら、同時進行で進めていたお菓子専門のウェブメディア『CAKE.TOKYO』を8月上旬にフルリニューアルしました。 リニューアルの経緯はCAKE.TOKYOのこちらの記事で書いたので、今回は、サイトのデザインについてデザイナー目線から説明しようと思います。 → CAKE.TOKYO 雑誌の
エンジニアの方にも知っておいてほしい、デザイナーが考えていること（第1回） | スペースマーケットブログ
こんにちは、デザイナーのあやちです。 アプリの実装の際など、デザイナーが作成したデザインをエンジニアの方に実装してもらうというシーンはたくさんあると思います。 今日は、そんなときにエンジニアの方に知っておいてほしい、デザイナーはこんなところに気をつけながらデザインをしているんだよ！というキホンの部分を紹介してみたいと思います。 デザイナーの方からしたら当たり前すぎることになってしまうと思いますが、初心に帰ってお付き合いいただけますと幸いです！ 余白や文字サイズの考え方 今回は、スペースマーケットのiOSアプリの予約一覧画面を使って、余白や文字の大きさについて見ていこうと思います！ こちらがiOSアプリの予約一覧画面です。 この画面の基本要素である予約のカセット1つにクローズアップして見ていきます。 たったこれだけの小さなカセットではありますが、意外とデザイナーはいろんなことを考えているんで
UIからフリーフォントまで 最新のフリー素材まとめ「27 Amazing Freebies For Designers」
デザイナーが常にチェックしておきたいフリー素材。常にいろいろな種類がインターネット上で発表されています。今回はそんなフリー素材をピックアップした「27 Amazing Freebies For Designers」を紹介したいと思います。 Portal freebie UIからフリーフォントまで、さまざまな種類の素材がまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 Free Freelancer PSD Template 洗練さえたシンプルな雰囲気のフリーPSDテンプレート。フリーランスで仕事をしている人向けにぴったりのデザインです。 2 Free Realistic Poster/Frame Mockup 額に入ったポスターのモックアップ。出来上がったグラフィック作品をはめ込んでイメージ作成に使えます。 Chubby FREE TYPE
だから、そのデザインはダメなんだ。Chapter2/03 - MdN Design Interactive
［Chapter2-03］ 説明文の存在に気づきにくい ロールオーバー表現 ▼THEME ●メニュー構成 ●操作性 ／ ▼CASE サイト全体 2016年6月29日／TEXT：香西 睦 ［1］ 説明の主体となる情報が、見た目でわからない ［2］ ユーザーが能動的にマウスポインタを合わせなければ見られない ［3］ 見た目の情報量が少ないため、次のページへすぐ移動してしまう ▼NGのワケ ロールオーバーによって表示される説明文は、見た目だけでは存在していることがわからず、ユーザーが自発的にマウスポインタを動かさなけば、気づいてもらえない。コンテンツの内容を判断するような用途には、使うべきではない。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブ対応の高品質なHTMLのテンプレートのまとめ、商用利用無料で最近のUIデザインが分かる | コリス
スマホのパンくずリスト19選＋α！あのサイトからあのサイトまで！
今年気になったハイクオリティなデザインUIキット − 2016 - NxWorld
