タグ

uiに関するhiromi-yonedaのブックマーク (12)

  • dely.design

    This domain may be for sale!

    dely.design
  • 『UXトレース』で、新メルカリをゴリゴリ掘り下げてみた|yudai

    【長めなので、時間がある時に読むことをオススメします】 … はいどうも〜!(Vtuber並感) 最近、メルカリに「メルペイ」が搭載されたということで、早速使ってみようと思ったワケなんですけども!!! _人人人人人人人人人人_ >   iPhone6s     <  ̄Y^Y^Y^Y^Y^Y^Y^Y^Y ̄ そうです。iD搭載してないおじいちゃんスマホなので、使えません。 お手上げ。無念。サヨナラ。って感じでした。カッコワラ。 それはともかくとして、 以前にTwitterで、こんな記事が流れてきました。 「アプリ設計から深い設計部分のUXまで考える」というのが、とてもいい訓練になりそうやな〜と思ったし、シンプルに楽しそうなので「やってみてえ〜〜!!」って思っていました。 なので今回は、タイトルにもある通り、 「メルペイが搭載されたメルカリ」を、 UXの5段階に則って、要件やら戦略などの深い部分ま

    『UXトレース』で、新メルカリをゴリゴリ掘り下げてみた|yudai
  • 課金 UI まとめてみた|あき - 良いもの作って正しく届ける

    売上を伸ばしたい。 課金率を伸ばしたい。 でも、難しい! コンバージョンするサブスク UI を勉強したかったので、いくつかのアプリをスクショ。あたまの整理にまとめたのでアップ。 Web の LPO はかなりノウハウ系記事がありますが、アプリのサブスク UI は、まだまだ少ない気がします。誰かの参考になれば嬉しいです。 まとめ内のコメントは個人的感想です。まだまだ勉強中なので、お気軽にご意見いただけるとうれしいです。 ※ スクショは少し前に撮影したものなので、一部古くなってるかもしれません。 UI パターン 1. ミニマム型 2. プラン比較型 3. 横スクロール型 4. リスト型 5. ロング LP 型 規約表示パターン 1. 固定表示型 2. 隠しスクロール型 3. フッター型 4. 遷移型 サービスパターン 1. 探索財 2. 経験財 3. 信頼材 UI パターン1. ミニマム型最低限

    課金 UI まとめてみた|あき - 良いもの作って正しく届ける
  • モバイルのレスポンシブデザインにおける4つの基本ポイント | UX MILK

    この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。 Keys to Designing a Great Mobile Website Experience さまざまな画面サイズのデバイスがあることから、今ではレスポンシブデザインが当たり前になっています。ユーザーがデバイスに関係なくコンテンツを利用できるように、さまざまな環境でテストをしながらWebサイトをデザインする必要があります。 ほかのあらゆるWebデザイン同様、モバイルなどの小さな画面向けのデザインに対する考え方はさまざまです。しかし考え方の違いに関係なく、Webデザインに関わる者であれば知っておくべきレスポンシブデザインの基があります。 次にWebサイトをデザインするときは、以下の点を踏まえてモバイル用にもカスタマイズしましょう。 リーダビリティとユーザビ

    モバイルのレスポンシブデザインにおける4つの基本ポイント | UX MILK
  • モバイルではメニューを画面下に表示すべき理由

    スマートフォンの使い方が、脳に影響を与えることがあります。ある調査によると、毎日スマートフォンを使う人は、脳の体性感覚皮質が大きいことがわかりました。体性感覚皮質は、親指のコントロールをつかさどる部位です。 また、ほかの調査では、ほとんどのユーザーがスマートフォンを片手で操作していることが明らかになりました。スマートフォンを握っているとき、ユーザーは左右どちらかの親指で画面を操作しているのです。親指はユーザーにとってマウスのようなものですが、その動きには限界もあります。 親指はマウスの代わり デスクトップデバイスでは、ユーザーは画面の操作にマウスを使用します。ナビゲーションメニューまでマウスを動かすことは簡単です。なぜなら、マウスは手首の動きを制限しないからです。 しかし、ユーザーがスマートフォンを握っているとき、親指は限られた範囲でしか動けません。画面に親指が届かない領域があるのです。こ

    モバイルではメニューを画面下に表示すべき理由
  • 検索 UI まとめてみた|あき - 良いもの作って正しく届ける

    検索 UI を作る機会があったので、リファンレンスを集めた。あたまの整理をかねてパターン分け。 パターン一覧 1. フリーワード型 2. サジェスト型 3. グループ型 4. あとからフィルター型 5. 条件指定型 6. レコメンド型フリーワード型キーワードで検索。入力中に検索結果がリアルタイムに変わるものが多い。 良いところ シンプル。入力と同時に検索結果を表示できるので、最短で検索対象へたどり着ける。 イマイチ キーワードが間違っていると、対象へたどり着けないことがある。 感想 タスク管理やシンプルなファイル管理に多く採用されていた。 複雑な検索条件が不要。ユーザーが検索対象のキーワードを把握している場合に有効そう。見つける、というよりも、ショートカット的な役割に近い。サジェスト型キーワードを入力すると、検索候補が表示。 良いところ キーワードを正確に把握していなくても対象へたどり着け

    検索 UI まとめてみた|あき - 良いもの作って正しく届ける
  • 強度の高いUIをデザインする|池内健一

    デザイナーの池内(@KD6JOE)です。アプリのUIデザインなどをやっています。この記事ではUIをデザインを始めたばかりの人向けに、強度の高いUIをデザインをするための手順をご紹介します。 最低限の品質のUIをデザインできるようになることがこの記事の趣旨です。ここで紹介する手順はあくまで一例で、ガチガチにこの通りに進める必要はないし、ケースバイケースです。自分のやり方に取り入れられるところだけ取り入れてください。 強度の高いUIデザインとは強度の高いUIデザインとは以下のものを指しています。 ・あらゆるUIパターンの検討がなされている ・どのUIパターンを採用するかロジカルに決定している ・仕様漏れがなく開発がスムーズに進む逆に強度の低いUIデザインとは、パターン検討がほとんどされず、ツッコミどころがありまくり、仕様が二転三転するものです。結果開発スケジュールの遅延を引き起こします。 ただ

    強度の高いUIをデザインする|池内健一
  • それ、そもそも本当に使ってます?思考停止デザインに学ぶ、Webサイトを「使う」ことの重要性について | 株式会社PLAN-B

    どちらも、先人たちが画面上でトライアンドエラーを繰り返し、定着したもの。私たちデザイナーは普段の業務で、これら先人たちの”ノウハウ”とも言えるお作法・トレンドを自身の制作物に取り入れています。この「お作法・トレンドを取り入れる行為」は、デザイナーとっては”当たり前”です。 しかし、その当たり前の行為をためらいなく行ってしまう自分を、一度見直した方が良いのではなかろうか?というのが記事のテーマとなります。 「当たり前」は思考停止のアラート私たち制作する側の人間は、お作法やトレンドを、普段から当たり前のように自身のデザインに取り入れていますよね。なぜなら、最低限トレンドに沿った「それっぽい」ものができるからです。しかし、それは極端な話、「思考停止」と言い換えられるのではないでしょうか? トレンドは刻一刻と変化し、今日使った表現が明日には時代とミスマッチ、ということにもなり得ます。お作法も同様

    それ、そもそも本当に使ってます?思考停止デザインに学ぶ、Webサイトを「使う」ことの重要性について | 株式会社PLAN-B
  • マイクロインタラクションとバレエ|深津 貴之 (fladdict)

    UIのモーションを考える時、よく脳内でバレリーナの動きを再生する。 妹がバレエをやっていたため実家の居間では、ローザンヌ国際バレエコンクールのビデオがよく流れていた。 ローザンヌは世界最強の若手バレリーナを決める大会だ。この番組はクロード・ベッシー女史というコメンテーターの、辛口実況がウリだった。彼女はパリオペラ座学校の校長先生でもあり、それゆえに評価のハードルが非常に高い。コンテストの登壇者は、ほぼ確実にベッシー先生に滅多斬りにされる。TVカメラのまえで泣きだすこともある。ある意味、登竜門であると同時に公開処刑の場でもあった。 そんなベッシー先生が珍しく大絶賛していたのが、2001年だか2002年に出場したミレナ・シドロヴァだった。(追記、ベッシーさん2002年引退してますね。ビデオで見てたから時系列がメタメタだった。2002年のコメンテーターは別っぽい)。 バレエに特に興味のなかった僕

    マイクロインタラクションとバレエ|深津 貴之 (fladdict)
    hiromi-yoneda
    hiromi-yoneda 2018/06/15
    [ [マイクロインタラクション] ]
  • ストーリーを語るデザイナーたち——heyのCIデザインはいかにして生まれたか? | Forbes JAPAN 公式サイト(フォーブス ジャパン)

    デザイナーが企業のストーリーを語るようになった結果、スタートアップにおける、デザイナーの役割が変わり始めた。旧来から企業内にいるデザイナーは、プロダクトの思想をデザインに落とし込むことを役割として担う。 ローンチ後も複数回ロゴを改定するなど、スタートアップでデザイナーがあげてきた成果は、言及するまでもないほどに壮大である。 しかし、デザイナーが着工する対象物は企業の「ロゴ」に留まらず、企業の「アイデンティティ」へと、より上流工程へと移動しつつあるのが昨今のトレンド。 企業のアイデンティティを設計する「CIデザイナー」が台頭し始めた。彼らは企業の歴史や背景から、ビジョンをデザインへと落とし込んでいく。企業の文化や背景といった目に見えにくいものを、目に見える「ロゴ」へと変換していくのだ。 2018年2月、hey社のCIを担当したCoineyのデザイナー、松隆応は自身のブログで、同社のCIが出

    ストーリーを語るデザイナーたち——heyのCIデザインはいかにして生まれたか? | Forbes JAPAN 公式サイト(フォーブス ジャパン)
  • サイバーエージェントのお蔵入りUIデザイン タップル誕生「おでかけ機能」のワクワクする仕組み

    UI改善に新機能追加。日々スクラップ&ビルドを繰り返しているサービス開発現場では、一つのデザインを創り上げるまでに数十を超えるデザイン案を作成することも少なくありません。連載では“お蔵入りUIデザイン”と題して、現在のデザインに至るまでにお蔵入りとなったデザインにフィーチャーし、「なぜお蔵入りになってしまったのか?」をオクラくんと共に担当デザイナーがご紹介していきます。 オクラくん お蔵入りになったデザインが大好物なオクラの妖精。お蔵入りデザインを見ると興奮してネバネバしてしまうクセがある。醤油と合う。 茂木 栞(もぎ しおり) 2013年にサイバーエージェント新卒入社後、コミュニティサービスのリニューアルや運用に携わったのち、「読書のお時間です」にチーフデザイナーとして参画。現在は趣味でつながる恋活サービス「タップル誕生」にてアプリやWebのデザイン業務に従事している。 オクラくん ネ

    サイバーエージェントのお蔵入りUIデザイン タップル誕生「おでかけ機能」のワクワクする仕組み
  • 任天堂が新人研修で伝えている、あそび心のデザイン|娯楽のUI 公式レポート #1 | キャリアハック(CAREER HACK)

    任天堂の新人研修で語られているのは「あそび心を伝える」という大切さについて。『スーパーマリオメーカー』を例に、UI/UXデザインチーフである正木義文さんが語ってくれた。 [目次] ・「みなさんとクイズをしたいと思います」 ・任天堂流「伝え方」のこだわり ⅰ教えるよりも体験してもらう ⅱファーストインプレッションを大事にする ⅲ体験は面白く ・わかりやすさと高機能を兼ね備えた、UIのデザインプロセス ・「あそび心を伝えるUIデザイン」3つのポイント ⅰUI脳と娯楽脳の二人三脚 ⅱ短所を「娯楽脳」で長所へ変える ⅲ将棋3席 麻雀5席 「みなさんとクイズをしたいと思います」 ※ 2018年4月に開催された「UI Crunch #13 娯楽のUI - by Nintendo -」のレポート記事としてお届けします。 「まずは、みなさんとクイズをしたいと思います」 そんな、あそび心溢れる一言で幕を開け

    任天堂が新人研修で伝えている、あそび心のデザイン|娯楽のUI 公式レポート #1 | キャリアハック(CAREER HACK)
  • 1