タグ

UIに関するynsynsのブックマーク (64)

  • UIデザイン時の「ユーザーの使いづらい」には2パターンある。350万ダウンロードの家計簿アプリ「Zaim」が教える、UI改善の失敗談。 | アプリマーケティング研究所

    UIデザイン時の「ユーザーの使いづらい」には2パターンある。350万ダウンロードの家計簿アプリ「Zaim」が教える、UI改善の失敗談。 今回は350万ダウンロード突破、家計簿アプリの「Zaim」さんにお話を伺いました。ユーザーが伸びたタイミングや、UI改善の失敗談など。 ※株式会社Zaim 代表取締役 閑歳 孝子さん。 「Zaim」の近況について 「Zaim」のユーザー数は今どのぐらいですか? 閑歳: 2011年7月にリリースして、350万ダウンロードを超えています。OSで言うとiOSの方が多いですが、最近はAndroidも伸びています。今も広告費は使っていません。 今までに、ユーザーが大きく伸びたタイミングはありますか? 閑歳: 去年はダウンロード数がグッと伸びた印象があります。2013年の終わり頃から、スマホをみんなが当につかうようになって、すごく高齢者と若年層が増えました。 データ

    UIデザイン時の「ユーザーの使いづらい」には2パターンある。350万ダウンロードの家計簿アプリ「Zaim」が教える、UI改善の失敗談。 | アプリマーケティング研究所
    ynsyns
    ynsyns 2015/05/19
  • Semantic UI

    Design Beautiful Websites Quickly Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Concise HTML Semantic UI treats words and classes as exchangeable concepts. Classes use syntax from natural languages like noun/modifier relationships, word order, and plurality to link concepts intuitively. Get the same benefits as BEM or SMACSS, but wit

  • 優れたユーザーインタフェース(UI)を実現するチェックリスト36項目

    【img via tabletop assistant by MattHurst】 優れたユーザーインタフェースとは何か。どのようなデザインを「優れたユーザーインタフェース」と呼ぶのに相応しいのだろうか。 GoodUIというサイトに優れたユーザーインタフェースを実現するために確認しておきたい36項目をイラスト付きで解説していた。とても分かりやすく納得できる内容が多かったので、紹介しておく! 1.マルチカラムではなく、シングルカラム 複数カラムだとユーザーの目線が左右に逸れてしまう可能性があるため。 2.まずはギフトを渡してみる 最初から買うことを促すよりもまずはこちらから何かを与えることによってユーザーに喜ばれる。 3.似た機能や項目は1つにまとめて表示する 似た機能を分散させる必要はない。 4.ユーザーからの反応を載せる 実際に使っている「ユーザーの声」を参考に買い物をする人は少なくない

    優れたユーザーインタフェース(UI)を実現するチェックリスト36項目
    ynsyns
    ynsyns 2014/01/24
  • UXをみっちり基礎から教わることができた「モバイルUI/UXのキホン」って勉強会のレポート! 

    10/4に渋谷で開催された「モバイルUI/UXのキホン」 に参加しました。2011年からいろいろなテーマで開催されている歴史のある勉強会なのと、ディスカッションや意見交換を通じた双方向性を大切にしている、学びの多い勉強会でした! 今回は勉強会の中で特に参考になった点を書いていきます! 🍣 発表スライド発表の際に使われたスライドです。しっかりとした内容です! 発表スライドは「prezi」というサービスを使っているそうです。動きのあるカッコイイデザイン! 🎃 UI/UXは最近のバズWordデジタルガジェットでは特にいえることですが、市場が成熟してきて機能的な差別化が難しくなってくると、ユーザーの体験(UX)が重視されるようになってくるそうです。スマホアプリケーションは特にこういった要素が強く、ココ最近は『UI/UX』がバズWordになっているそうです。 🐹 UI/UX/IAの言葉の定義ま

    UXをみっちり基礎から教わることができた「モバイルUI/UXのキホン」って勉強会のレポート! 
    ynsyns
    ynsyns 2013/10/09
  • ストレスのないスマホサイトを作る8つのポイント!

    お久しぶりです。マラガの海の贈り物ディレクターのSEKOです。 みなさんは普段スマホで「いつ」「どこで」調べ物をしますか? 私は会社の行き帰りの電車の中で調べ物をしている事が多いですが、「限られた時間の中で知りたい情報をすぐに見つけたい」なのにサイトが重かったり、知りたい情報が見つけにくい、操作がしにくい。そんな経験はないでしょうか? 日はストレスのないスマホサイトを作るにあたりUIをどのように考慮していけば良いか8つのポイントをお届けします。 スマートフォンを利用するシーンを想像しよう。 まず一番重要なことがスマホサイトを利用するシーンを考える事です。大抵スマホサイトを利用する場合は下記の状態が考えられます。 時間に余裕がない 通信環境が不安定な状況にいる 利用が断続的である。 屋外、通勤時間の電車の中、休憩時間のカフェ、会話中に思い出せない事がある時など「すき間の時間」の利用シーンが

    ストレスのないスマホサイトを作る8つのポイント!
  • 新着記事

    『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。

    新着記事
  • スマホUI考(番外編) なぜ機能追加をし続けるとアプリが破綻するのか? | fladdict

    この写真は、アーミーナイフの名門ウェンガー社のジャイアントナイフという最高級ナイフである。141の機能を持つ、ギネス認定もされた厚さ24cm、重量1.3kgの世界で最も高機能なナイフだ。トップメーカーが自社製品の全機能を1つに集約したこの製品こそが、機能拡張の行き着く先を指し示している。 なぜ適切な機能追加であっても、機能を追加しつづけることで破綻をするのか?エントリは、「スマホUI考(番外編) 顧客やユーザーの要望に全て対応すると、アプリは99%破綻する」の続きになる。 エントリでは以下の4つの側面から、機能を追加するリスクを考える。まず第一に「選択肢の数が必ずしも善ではないこと」。次に「人間の判断力は使うほど消耗すること」。そして「画面スペースが有限のリソースであること」。最後に「どんなに機能を増やしても、一画面で強調できるものは限られていること」。これらの4つは全て、機能追加が最

  • スマホUI考(番外編) 顧客やユーザーの要望に全て対応すると、アプリは99%破綻する | fladdict

    顧客や上司、ユーザーの場当たりな要望に対応しつづけると、どんなアプリもゴミアプリになる。たとえそれが理にかなった要望であっても。 なぜなら面積の限られたスマホでは「一画面の機能数とボタン数」が、使い易さと品質に深くリンクしているからです。 ということを、エラい人にプレゼンするのがお仕事の今日この頃。でも毎回毎回、同じことを説明するのがシンドイので資料をブログにまとめたいなぁと思うなど。 思考実験として、ここでは架空事例としてTwitterアプリを例に考えてみる。 何かの間違いで、日の大手メーカーがTwitterを買収すると・・・UIデザイナーが体を張らないと99%ぐらいの確率でこうなるのです。 ここがオリジナル Request1: ダイレクトメッセージをトップ階層に ユーザーからの真っ当な要望。実際にはサービスの質ではないのですが、要望はかなり多いはず。 ただTwitter社的にはme

  • マウスオーバーエフェクト Creative Link Effects

    If you enjoyed these effects you might also like: Creative Button Styles Simple Icon Hover Effects

    ynsyns
    ynsyns 2013/08/07
    effects
  • UI/UXが学べる神スライド7選 | Find Job ! Startup

    FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ

    UI/UXが学べる神スライド7選 | Find Job ! Startup
  • Buttons Builder

    ynsyns
    ynsyns 2013/06/27
  • Googleから学ぶ ヌルヌルサクサクなスライドメニュー - Qiita

    スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。 Facebookのwebページですらボタンの反応は悪いしアニメーションも動かないし最悪です。 一方Google先生はパーフェクトなスライドメニューを実装していた さすがGoogle先生! 俺達に出来ないことを( Googleのスライドメニューは以下の点でパーフェクトです。 1. スライドのアニメーションがとても滑らか・ちらつかない 2. ボタンの反応にストレスを感

    Googleから学ぶ ヌルヌルサクサクなスライドメニュー - Qiita
  • これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう(後編) | Goodpatch Blog

    UIデザインの新しいワークフローを作るために長谷川恭久さんとの共同プロジェクトとしてスタートした“Patch Project”。導入部分として長谷川さんにお話頂いたワークフローの提案について「これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう(前編)」として記事にしました。後編となる今回は、デザイナーがするべき雰囲気のデザイン、また具体的なワークフローについての話をまとめていきます。 ルック&フィールを考える photo credit: Crossett Library Bennington College via photopin cc ではHTMLプロトタイプを作っている間にデザイナーがするべきことは何なのか。それは雰囲気をデザインすること。レイアウト以外のデザイン、色やタイポグラフィ、写真や動画について考えていくのです。 具体的に言うと、スタイルガイドを作るこ

    これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう(後編) | Goodpatch Blog
    ynsyns
    ynsyns 2013/05/01
    Web実装されたあとで如何に幻滅させないかという模索。
  • これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう(前編) | Goodpatch Blog

    先日、長谷川恭久さんとの共同プロジェクト、“Patch Project”がスタートしました。これはUIデザインの新しいワークフローを作るために立ち上がったプロジェクトです。これまでのワークフローを見直して、より良いUIを作っていくためにはどうするべきなのか、実際に何かのUIをデザインしながら模索していきます。そのプロセスや結果はどんどんオープンにしていきますのでお楽しみに! まず今回はその導入部分として、ワークフローの提案について長谷川さんに話して頂いた内容を記事にしました。前編では、デザインカンプをやめてプロトタイプを作るべき理由を中心にまとめています。 そもそもUIとは何か UIの話というと多くの人がビジュアルデザインの話をしますが、そもそもUIとは人間とコンピュータの関係を円滑にするためのものです。人がコンピュータと関わるとき、そこには必ずインプットとアウトプットがあります。その中で

    これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう(前編) | Goodpatch Blog
    ynsyns
    ynsyns 2013/04/23
    "UIデザインの新しいワークフロー"
  • Amazonメニューの「使いやすさ」を検証する方法

    マウスカーソルを重ねると下層の項目が開く階層型のメニュー(ドロップダウン)では、カーソルを注意深く移動しないとメニューが閉じたり、隣のメニューが開いたりしてしまうことがあります。 Amazonでは、このような誤動作を防ぐために、カーソルが下層のメニューに向かって移動している間はメニューが少し長めに開き続けるようになっていることが最近、ブログで紹介され、話題になりました(英語のオリジナル記事/日語の紹介記事)。 操作してみると確かに快適ですが、説明されなければ気がつかない地味な工夫です。 ユーザーの利便性を高めるために地道に改善を積み重ねるのも大事ですが、誰にも気がつかれないのはもったいない話です。効果を定量的に検証できるようにすれば、制作スタッフの貢献度が社内で認知されるようになり、いろいろな提案が通りやすくなるでしょう。 また、改善のつもりが実は効果が薄く、作り手の自己満足で終わること

    Amazonメニューの「使いやすさ」を検証する方法
    ynsyns
    ynsyns 2013/04/22
    ホバーによるインタラクションでは重要な機能をもたせるべきでないと思っている。あくまで付加的な利用に留める。
  • Slide and Push Menus | Codrops

    Fixed menus that will slide out from the sides of the page and in case of the right and left side optionally move the body. A set of fixed menus that will slide out from any of the edges of the page. The two menus that slide out from the left and right side can also be used in combination with the body moving to the left or right side, respectively, hence being “pushed”. There are examples of how

    Slide and Push Menus | Codrops
    ynsyns
    ynsyns 2013/04/18
  • 言葉はグラフィックより大事なインターフェイス

    2013年3月16日にAndroid Bazaar Conference 2013 Spring が開催されました。昨年に引き続き今年も登壇。前回はゲームをテーマにして話をしましたが、今回は「コンテンツで改善する UI デザインの極意」と題してコンテンツと UI をテーマに話をしました。 見た目が綺麗だから良い UI というわけではない UI のインスピレーションとして Dribblbe や Android Patterns のようなギャラリーサイトを見ている方は多いと思いますし、「素晴らしい UI のまとめ」と名付けた記事も、だいたいはこうしたギャラリーサイトを参照していることが多いです。 実装まで携わった経験がある方ならなんとなく分かると思いますが、Dribble で紹介されている UI アイデアの多くは現実味がない想像図が多く掲載されています。実装しようとするならばパフォーマンスや操

    言葉はグラフィックより大事なインターフェイス
    ynsyns
    ynsyns 2013/03/18
  • アップルと任天堂のUI思想(立命館大学映像学部教授サイトウ・アキヒロ)|ガジェット通信 GetNews

    ソーシャルメディアのUI(ユーザーインターフェース)をゲームニクスの観点から読み解く。 Facebook、eBay よりもミクシィ、ヤフオクが流行る真の理由 SNSといえば世界的にはFacebookですが、Facebook に登録はしたものの使っていない……という人が大半ではないでしょうか。日でいち早く普及したのはミクシィでした。 同じように世界的なネットオークションといえばeBay ですが、日で広まったのはヤフーオークションでした。なぜなのでしょうか。 理由は簡単です。ミクシィやヤフーオークションが、Facebook やeBayよりも使い勝手が良かったからです。 では日人にとっての使い勝手とはどういうことなのか。それはゲームライクなユーザーインターフェース(UI)の流れを持ったものです。ではゲームライクなUIとはどういうものなのか。それはマニュアルを参照しなくても直感的にすぐに始め

    アップルと任天堂のUI思想(立命館大学映像学部教授サイトウ・アキヒロ)|ガジェット通信 GetNews
    ynsyns
    ynsyns 2013/02/28
    読み応えがあった
  • アップル風カルーセルUIは意味があるのか?

    アップルのサイトで印象的な「カルーセル(画像スライダー)UI」。しばらくすると、ページ上部の大きなエリアが右から左へなめらかに流れていきます。エリア下部のドットや左右の「<」「>」をクリックし、手動でも切り替えられます。 カルーセルにはバリエーションがありますが、記事で取り上げるのは以下のようなスライダー型のUIです。 エリア全体が一定間隔で右から左へ流れていく エリア下部のドットが現在位置を表す ドットや左右の「<」「>」をクリックし、手動でも切り替えられる ページを遷移することなくコンテンツが切り替わるので、貴重なエリアを有効活用できる点が優れています。タブと違って、隠れたコンテンツが気付かずに埋れてしまうことも減りそうです。 ただし、広告だと無視されてしまうバナーブラインドネス効果が発生するリスクがあります。脈絡が無く連続性の低いプロモーション画像をつなげると違和感があるため、CD

    アップル風カルーセルUIは意味があるのか?
    ynsyns
    ynsyns 2013/02/19
  • クリエイティブを言語化できるスキルの必要性とコミュニケーションデザイン / Maka-Veli .com

    先日、某社の社長さんと飲んでた時、色々な技術について話していたこと。 「そんな事よりも、クリエイティブを言語化する事の方がよっぽど求められてる」 と会話になった。 ”言語化” なんともデザインとかけ離れた言葉だ、と思う方は居るかもしれないが、 デザインはそもそも対話する事に意味があり、全てデザインというのは理由があり施されている。昨今でいうUIなんかは、全てユーザーとの対話力がキーとなる。 いかにユーザーの意識と対話できるかによって、GUIが設計される。(想定) 何度も書いているし、色々な場面で見られる言葉だが、デザインとは情報設計が主軸だ。 表面的な装飾はあくまでも”装飾”でしかない。(装飾そのものも意味を持ったデザインの一つだがそれは別の話で) GUIは一番わかりやすいので、僕のブログを読んでくださっているクリエイティビティ溢れる人々は「そうそう」とも「違うだろ」とも今