タグ

uiに関するnyon2のブックマーク (60)

  • 興味の向こう側へのデザイン|Miyu Honda

    2019年4月26日に開催されたDIST.26 「Webサービスの個性を支えるデザイン」にて、上記のタイトルで5分間のLTをさせていただきました。 このnoteはその際に話した内容とスライド+補足の記事になります。 ------- 私はUI/UXデザイナーの多美優と申します。 ハイジ・インターフェイス株式会社には大学一年生の時にインターンで入社して、今年で7年目になります。 私たちは主に受託制作でWEBサイトやアプリのディレクション、情報設計、システム開発などをしています。 事例を話すと話しきれなくなっちゃうので、普段私がどんなことを考えてデザインをしているのかというとても基的なことを、分かりやすく話してみようと思います。みなさんにとって何かの足掛かりになれば幸いです。 よろしくお願いします。 私たちUI/UXデザイナーは、人と人、またはモノやサービスとを間接的に繋ぐものをつくっていま

    興味の向こう側へのデザイン|Miyu Honda
    nyon2
    nyon2 2019/04/27
    犬かわいい
  • SXSW | 未完成品を持ち込むとオースティンは100倍楽しめる

    nyon2
    nyon2 2018/03/28
  • Button Design Over the Years – The Dribbble Timeline | Toptal®

    Digital design and UIs are evolving at an incredible pace, and the styling of buttons along with it. The Dribbble Button Timeline shows us how button styles have developed over the past decade. authors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field. Digital desi

    Button Design Over the Years – The Dribbble Timeline | Toptal®
    nyon2
    nyon2 2017/09/22
    よいですね
  • iPhone X対応におけるデザイン上の注意ポイント | fladdict

    iPhone Xが発表されたわけですが、なにこのデザイナー泣かせの変態端末。 iPhoneUI設計者グレッグ・クリスティが追い出されて、ジョナサン・アイヴがソフトウェア統括となったのが2014年。 iOS7のフラット化あたりから、どんどんとUI設計が置いてけぼりになった感がありましたが・・・ここにきてまたデザイナー泣かせの豪速球が。 ざっくりデザインガイドラインを読んでの、気になったところメモ。 画面サイズ サイズは従来のベースであった4.7インチの375pt x 667ptから、375 x 812ptに。縦方向に145pt追加された。 想定されるインパクト 表示可能な情報量が増える 縦スクロール系コンテンツのコンバージョンが増加 スクロールで隠れるナビゲーションの必要性が低下 画面上部のボタンのコンバージョンが低下 ゲームなどの全画面イラストに、黒枠が出たり、見切れたりする グラフィッ

    iPhone X対応におけるデザイン上の注意ポイント | fladdict
    nyon2
    nyon2 2017/09/13
  • もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った - Qiita

    はじめに Webサービスやアプリを企画したり、立ち上げたりする際にプロトタイピングツールや、ExcelPowerpoint、Illustraterなどを駆使した謎のファイルで画面遷移図を描くことがある。 こういう図を元に仕様を決めて行って、サービスを作っていくのは以下の点で困る。 画面遷移図が保守されない。 書くのが非常に面倒くさい ユーザーのモチベーションの流れが追いづらく、見た目ばかりに注目してしまうものになりがち マシンリーダブル(ソフトウェアで構造を取り出せない)でない。 このような欠点があってどうにも扱いづらい。 そんなわけで、markdown風のテキストから簡単に画面遷移図を描けないかなとコンパイラを作成し、次にそれをインタラクティブに編集できるエディタを作成した。 UI Flows図について 画面遷移図的なものを書く際に、僕が個人的につかっていた表現方法として、UI Flo

    もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った - Qiita
    nyon2
    nyon2 2016/05/24
  • 人を強制的に幸せにするデザインとインターフェース | fladdict

    最近よく考えることに、人間を強制的に幸福にするユーザーインターフェースは作れないか、という着想がある。100万ユーザー級のアプリのUI改善に何か関わった結論として、単に使いやすいインターフェースや、KPIアゲアゲの設計とかに飽きた。 むしろ統計、認知心理学、脳科学、行動経済学などをフル活用して、デザインで強制的に幸せを生産できないだろうかと考える。 幸せは生産できるか? アメリカの哲学者、ウィリアム・ジェームズの言葉に、「私達は幸せだから笑うのではない。笑うから幸せなのだ」というものがある。日にも類似の表現として、「笑う門には福来る」という諺がある。 両者で注目したいのは、因果関係の方向だ。どちらも方向として、「笑う」→「幸福」という因果関係を説いている。「幸福」→「笑う」ではない。 実は最近の脳の研究によると、とりあえず口角を持ち上げれば、人間の脳はドーパミンを生産するのだという。脳

    人を強制的に幸せにするデザインとインターフェース | fladdict
    nyon2
    nyon2 2016/02/22
  • インターフェイスという名の付く会社が考えるUX

    7. 「UI」は「UX」の要素にすぎない ケース1 : UIが破綻してても、UXの満足度が高い ケース2 : UIを配慮しすぎた結果、UXが上手くいかない ケース3 : 現場に行かないと発見できなかったUX

    インターフェイスという名の付く会社が考えるUX
    nyon2
    nyon2 2015/10/29
  • ニュースアプリの「究極のUI」って何ですか? Yahoo!ニュースと日経電子版が大激論

    Yahoo!ニュースとエンジニアtypeが「『公共性×編集×テクノロジー』~ニュースメディアに求められる使命に、開発者はどう応えるのか~」と題した勉強会・交流会を9月17日に開催しました。後半のディスカッションでは、Yahoo!ニュースと日経済新聞のアプリ担当者が、ニュースアプリに求められるUI/UXとは何かを語り合いました。 ⇒前半のディスカッションはこちら:【編集×テクノロジー】激戦のプッシュ通知 Yahoo!ニュースアプリの「苦い」1日 登壇者は、日経済新聞の電子版アプリを監修したUIデザイナーの深津貴之さん(THE GUILD、写真左から2番目)、同紙デジタル編成局編成部の重森泰平次長(左から3番目)、ヤフー ニュース事業部のUIデザイナー宇野雄(左から4番目)。モデレーターはエンジニアtypeの伊藤健吾編集長(1番左)。あわせてエンジニアtypeの記事「ニュースアプリ「究極

    ニュースアプリの「究極のUI」って何ですか? Yahoo!ニュースと日経電子版が大激論
    nyon2
    nyon2 2015/10/19
  • Wonderwall

    Official website of WonderWall/Masamichi Katayama

    Wonderwall
    nyon2
    nyon2 2015/10/01
    めっちゃうごく
  • GoogleがプロトタイピングツールPixateを買収。無料化される。オススメ。 | fladdict

    Googleが、ローカルベースのプロトタイピングツールPixateを買収した模様。以後、Pixateアプリは無料となり引き続き開発が続けられるようです。 2013年頃、Pixateに$600払ってた俺は泣いた。おめでとうございます。 Invisionを主流に百花繚乱の分断化で割と困っていたプロトタイピング業界。Googleがこの分野に手を出したことで変動は起きるのだろうか。 これがプロトタイピングツールの決定版になるとよいですね。高性能だし無料だし。クラウド版も$5だし。 日でプロトタイピングサービスばパッとしない究極の問題は、サービスがオンラインのことなんですよね。SI系の人たちは「セキュリティ的な事情でオンラインの共有サービスを使えない」という事情がありました。Pixateはローカルアプリなので、その辺の心配をする必要がないのがポイントですね。そのうち大手SIとかでもこういうツールが

    GoogleがプロトタイピングツールPixateを買収。無料化される。オススメ。 | fladdict
    nyon2
    nyon2 2015/07/22
    たぶん$600は昔の話で最近は$150だったはず。その$150はクラウド版の月$5に振り替えられるとのことなので損しないやったー。
  • 『「AWA」のデザインはどのようにして作られたのか。』

    こんにちは。 AWAでアートディレクション/デザイン/ブランディングを担当しているムロハシと申します。 今回はAWAのUIデザイン、インタラクションがどのようにしてつくられたのか、 先日行った「 メディアプロデューサー養成講座」の講義内容をベースに、 簡単ではありますが書いていきたいと思います。 「AWA」とは? AWAとは、ひとことで言うと 「登録なしですぐに音楽が聴ける定額制の音楽配信アプリ」です。 サービスの特徴として第一にあげられるのは、 ・好きなアーティストを聴くだけでなく「プレイリスト」を軸に、自分の好みにあった音楽が「リコメンド」されること リコメンドを通じて「昔好きだったあの曲」や「まだ知らなかったけど好きな曲」を一人ひとりにパーソナライズしてお届けしています。 そのほかの詳しい説明は プレスリリースをご覧いただければと思います。 インタラクションモックの重要性 AWAの初

    『「AWA」のデザインはどのようにして作られたのか。』
  • 確実に良くするUI/UX設計

    日経電子版のリニューアルで、コンセプトモデル設計とプロダクト監修をさせていただいた。 超大型アプリを完全リニューアルするとき、KPIを落とす事なく、どのように整合性やユーザー利便性を担保していくか。 「日経電子版×Sansanアプリ開発プロジェクト成功への道〜アプリ開発者勉強会Vol.2」より http://connpass.com/event/16187/

    確実に良くするUI/UX設計
    nyon2
    nyon2 2015/06/25
  • よくわかるマテリアルデザインの設計コンセプト | fladdict

    iPhoneAndroidではiPhoneのほうが良くできているが、iOSのフラットデザインとAndroidのマテリアルデザインでは後者の設計が優れている。マテリアルデザインは、デザインとエンジニアリングが高いレベルで融合していて、ロジカルで非常に美しい。 以下、自分の理解をまとめたメモ。 紙とインク マテリアルデザインは「ペーパー」と「インク」のメタファーでできている。 ペーパーの特徴 バーやボタンといった画面上のUIコンポーネントは、バーチャルな紙でできたカードと考える。また、このペーパーは1dpの厚さを持っている。 ペーパーは純白の矩形、あるいはシンプルな円形である。三角や星型といった複雑な形はとらない。そのような複雑な形状や模様はインクが担当する。 現実とことなり、このペーパーは自由に伸縮することができる。 マテリアルデザインにおけるレイアウトは、複数のペーパーを並べたり、重ねた

    よくわかるマテリアルデザインの設計コンセプト | fladdict
  • 日本中の「UI/UX」の参考になるスライド資料を気合いで全部集めました!(たぶん) | BtoBサービスキューレーション Boxil(ボクシル)まとめ!

    UI/UX」はもはやWEBデザインやアプリ開発において、無くてはならない存在となっています。実際にWEBサービスやアプリに触れて確認することも大事ですが、資料でまとめて勉強するのもありですよね! そこで今回は、日中の「UI/UX」に関する資料を気合いで全部集めてみました!(たぶん) それでは、早速みていきましょう! UIデザインとUXの超基礎「UI Design & UX for ENGINEER」

    日本中の「UI/UX」の参考になるスライド資料を気合いで全部集めました!(たぶん) | BtoBサービスキューレーション Boxil(ボクシル)まとめ!
    nyon2
    nyon2 2015/05/22
    全部とは
  • 情報がないことを伝えるUIデザイン | UXデザイン会社Standardのブログ

    Empty Data(またはEmpty Status)」というUIパターンがあります。タイムラインやドロワーなどデザイナーであれば知っているUIパターンの名称に比べると、あまり日では聞き慣れないのかもしれません。Empty Dataは簡単に言うとデータがない時のUIになります(Webでの404に近いですが、少し違います)。では、Empty Dataを知るためにもう少し詳しく紹介していきたいと思います。 参考:モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集 Empty DataはUIである Empty Dataはただユーザにデータがないことを示すだけではありません。ユーザにデータが存在しないという情報をフィードバックし、どうしたらここに情報が入るかのアクションに繋げる立派なUIです。もしEmpty DataのUIが存在しなかったらユーザはどのように感じるでし

    情報がないことを伝えるUIデザイン | UXデザイン会社Standardのブログ
    nyon2
    nyon2 2014/07/10
  • Free Web & Mobile (iOS, Android) Prototyping and UI Mockup Tool | InVision

    Freehand – The all-in-one collaborative workspaceUnlock your team’s full potential – ideate, plan, execute, and track projects with Freehand There is something so natural about collaborating in Freehand. It feels like you’re holding a marker, and making ideas happen. I can’t imagine doing that in another tool. It captures that human essence of being in person and talking to someone that is right n

    Free Web & Mobile (iOS, Android) Prototyping and UI Mockup Tool | InVision
    nyon2
    nyon2 2014/05/22
  • JINS MEME(ミーム) | JINS - 眼鏡(メガネ・めがね)

    ウエアラブルデバイスの、遥か彼方へ - 世界初、自分を見るアイウエア。MEME(ミーム)とは、個人の中に存在する感情や習慣、好みなど、人間の生き方を左右する形のない情報のこと。あなたはJINS MEMEを通して、自分の内側を知ることになる。今の自分の疲れが見える。気分が見える。眠気が見える。それはまさに、最適なミームを選択し、育て、より豊かな未来をつくっていくこと。私(ME)が 出会う、もう一人の私(ME)。内なる自分を見るその眼が、外の世界を見る眼を変え、人生の景色を変えていく。ウエアラブルを超えるアイウエア、誕生。 これからは、ビッグデータよりも、ディープデータ。JINS MEMEをかけたあなたの眼やその付近からは、今まで得ることのできなかった圧倒的に高精度な身体情報(DEEP DATA)を取得することができるのです。人間の感覚器の約8割が頭部に集中し、五感の約9割は眼から感知されると

    JINS MEME(ミーム) | JINS - 眼鏡(メガネ・めがね)
  • UXの本質について | underconcept

    ユーザー体験(ユーザーエクスペリエンス/User Experience: UX)という言葉が広く聞かれるようになってきた。半ばバズワードのように、特にウェブデザインやマーケティングの記事などの中では、この言葉を見ない日はない。しかしながら、多くの場合、UXという言葉の真意や可能性を取り違えてしまっている。稿では、いくつかの観点からUX質を考えてみる。 1.UI/UXという誤用 1.1. UIUX まず、多くの記事や講演などで見られる「UI/UX」という表現からとりあげてみたい。 UI/UXとは、もちろん、User Interface / User Experience(ユーザーインターフェイス/ユーザーエクスペリエンス)の省略形であるが、多くの記事などで「すぐれたUI/UXデザイン事例」、「UI/UX講座」などの表現が用いられている。 「ユーザー」という共通項があるため、共通でくく

    UXの本質について | underconcept
    nyon2
    nyon2 2014/05/02
  • ウェブサイトやブログによくあるリストデザインが流行のグリッドデザインよりも有効なわけ

    「ウェブの未来を担う次のUIデザインは『カード』にあり」と言われるなど、ウェブサイトを格子状にレイアウトしたグリッドデザインは人気で、多くのアプリやウェブサイトで採用されていますが、実際にグリッドデザインと以前からあるリストデザインの2種類をテストしてみたところ、「リストデザインの方が明らかに見やすく、ユーザーの反応がいい」という結論が出ました。 List Beats Grid: Linear Feeds Perform Two to Three Times Better Than Grids http://blog.getprismatic.com/list-beats-grid-linear-feeds-perform-two-to-three-times-better-than-grids-2/ グリッドデザインとリストデザインのどちらが当に効果的なのか?ということを調査したのはソ

    ウェブサイトやブログによくあるリストデザインが流行のグリッドデザインよりも有効なわけ
  • おっぱいでUX語る

    この実況を見て気づいてしまった UXの各期間は「おっぱいでマッピングできる」 予期的UX: おっぱいを触りたいと願う 一時的UX: おっぱい鑑賞する触る揉む エピソード的UX: おっぱい揉んだ日の思い出'' 累積的UX: 「おれは、おっぱいを揉んだことがある」と自信を持つ ぼうくん | VoQn 🎨 @VoQn { 予期的UX: おっぱいを触りたいと願う, 一時的UX: おっぱい鑑賞する触る揉む, エピソード的UX: おっぱい揉んだ日の思い出, 累積的UX: 「おれは、おっぱいを揉んだことがある」と自信を持つ } なので、UX、完全におっぱいで語れる #気づき #jsおじさん

    おっぱいでUX語る
    nyon2
    nyon2 2014/03/28
    ちょうわかりやすい