タグ

uiに関するatsuizoのブックマーク (16)

  • 16種類(45カテゴリ)の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選(スライド付)

    2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今

    16種類(45カテゴリ)の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選(スライド付)
    atsuizo
    atsuizo 2016/08/03
    すごくよくまとまってる。それぞれの要素の良し悪し、好き嫌いはともかく、トレンド、ってことで。
  • エンジニアでも一読の価値あり!UI / UXの入門スライド厳選10点まとめ

    Webサービス開発にしてもアプリ開発にしても、ユーザーに気持よく使ってもらうにはUI / UXを工夫する必要があります。 多くのユーザーに支持されている大規模WebサービスやアプリのUI / UXをよく見てみると、ユーザーにストレスがかからないよう細やかな工夫が施されていることがわかります。 エンジニアにとってもUI / UXに関心をもっておくことは重要です。 フロントエンドエンジニアはもちろん、バックエンドエンジニアもユーザーにより良い体験を届けるためにUI / UXを学ぶことをおすすめします。 今回は、エンジニアUI / UXを基礎から学ぶ際に参考になるスライドを厳選して10個まとめました。

    エンジニアでも一読の価値あり!UI / UXの入門スライド厳選10点まとめ
  • マイクロソフト、OfficeのUIフレームワークを「Office UI Fabric」としてオープンソースで公開

    マイクロソフト、OfficeのUIフレームワークを「Office UI Fabric」としてオープンソースで公開 マイクロソフトは、Office 365などのWebサイトで実際に使われているOffice UIを構成するフレームワークを「Office UI Fabric」としてオープンソースで公開しました。 フレームワークが備えているのは、タイポグラフィ、テーマカラー、アイコン、アニメーション、レスポンシブグリッドレイアウト、ローカライゼーションなど。

    マイクロソフト、OfficeのUIフレームワークを「Office UI Fabric」としてオープンソースで公開
    atsuizo
    atsuizo 2015/09/03
    いわゆるアンチMSの多いOSS界隈には人気でなさそうだけど、Officeとの親和性、使い勝手の類似性を売りにしたいビジネスシステム屋(Pkg、SaaS、SIer)に重宝されそう。
  • 入力フォームを改善して入力完了率を上げる! エントリーフォーム最適化15カ条 | 勝手にEFO分析-エントリーフォーム改善

    入力フォーム(エントリーフォーム)を入力していて、イライラする……と感じたことありませんか。ありますよね。自社サイトの入力フォームでユーザーにイライラを与えていませんか。 小さなイライラが積み重なった先にあるのは、エントリーフォームからの離脱です。ユーザーが一度エントリーフォームから離脱してしまったら、もう戻ってきてはくれないと覚悟しておくべきです。入力を完了してもらいエントリーフォームの「入力完了率※」を上げるためにはどうしたらよいのでしょうか。 そこで、この記事ではEFO(エントリーフォームを最適化)を行い離脱要因を減らして、入力完了率を上げる15カ条を紹介します。 少し手間をかければ劇的に入力完了率アップが期待できるはずの、「惜しい」エントリーフォームを各条1つずつ取り上げて、頼まれてもいないのに、勝手にそのフォームを分析して作った改善案とともに、ポイントとなるエントリーフォーム改善

    入力フォームを改善して入力完了率を上げる! エントリーフォーム最適化15カ条 | 勝手にEFO分析-エントリーフォーム改善
  • ショートカットキーはマウスより遅い - WirelessWire News

    CTRL+Xでカット、CTRL+Vでペースト。 ショートカットキーの使い方を覚えると、パソコンの達人になったような気分になりますよね。 しかし、実際にはショートカットキーを使用すると、マウスでメニューから「編集」「ペースト」を選ぶよりも平均2秒も遅いのです。 「そんなバカな」 と思いますよね。 しかし、これはTogことブルース・トグナッツィーニがAppleMacintoshの開発を担当した際に行った膨大な実験の結果、解ったことなのだそうです。 これはTogのWebページでも詳しく紹介されています。 しかし2秒とはとても信じられません。 むしろ逆のようにさえ感じます。 しかしTogの主張によれば、我々ユーザはショートカットキーを選ぶのに2秒かかっているものの、ショートカットにたどり着くまでの時間を喪失している、つまりプチ記憶喪失状態になっているというのです。 こんな不思議な話が、慶應

    ショートカットキーはマウスより遅い - WirelessWire News
  • 看板UIでEvernoteをプロジェクト管理ツールにするKanbanote

    あけましておめでとうございます。 今年も Lifehacking.jp は「人生を変える小さな習慣」を小さなハックや便利なアプリ、あるいは手元を変える文房具や思考を変える考え方といった多方面から書いていきたいと思います。 ところで新春のLifehackerで、看板のようなUIEvernoteでタスクを管理するKanbanoteが紹介されていました。 開発者が半日程度で作ったというこちらのサービスですが、簡単でいながら強力なプロジェクト管理のツールになりそうなので紹介したいと思います。 3つのリストで仕事のフローを制御 このサービスのもとになっているのは、パーソナル・カンバン方式という、仕事を3つの流れで制御するという考え方です。 Doing「やっていること」、Done「終わったこと」、Backlog「未処理」の3つのリストを作り、それぞれの間で単位となっているタスクをやりとりするとい

    看板UIでEvernoteをプロジェクト管理ツールにするKanbanote
  • 画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール | UXデザイン会社Standardのブログ

    2014.11.19 / UI 画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール Tomohiro Suzuki クライアントやディレクターから渡された画面遷移図を元にワイヤーフレームを作ってみると、後から足りない画面が次々に発見された、または画面内の情報がどこに繋がるのか分からないといった経験はありませんか? この画面遷移図というものは来は制作範囲の全体像と構造を明確にし、必要な画面というものを洗い出したりするものです。通常のWebサイトであれば、従来のような画面遷移図でも問題ないかもしれませんが、多くのインタラクションが発生するサービスの設計では複雑化しやすく、何度も情報を行き来して確認することになるため時間がかかります。 原因のひとつとして、画面遷移図では画面名のみを記載して繋げていくことになるため、必要な情報が不足していることが挙げられます。その結果、来で

    画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール | UXデザイン会社Standardのブログ
  • ScaleOut | Supership

    「ミライリアルの幸せを、デジタルの力で創る」ことを目指すSupershipグループの社内報です。日々の出来事、メンバーの働く様子や声、未来への想いなど、Supershipグループの”Be Super”なストーリーをみんなでシェアしていきます。

    ScaleOut | Supership
    atsuizo
    atsuizo 2014/01/08
    ソース書くチーム向けに強化されたサイボウズ/ガルーンの社内メールって印象を持った。
  • 伊藤直也氏が語る、モバイルアプリケーション開発のいまとこれから(後編)~Salesforce Developer Conference Tokyo 2013

    伊藤直也氏が語る、モバイルアプリケーション開発のいまとこれから(後編)~Salesforce Developer Conference Tokyo 2013 9月6日開催されたSalesforce Developer Conference Tokyo 2013のセッション「B2Cからみたモバイルアプリケーション開発のいまとこれから」では、コンシューマ向けサービス開発の現場に身を置いてきた伊藤直也氏が、モバイルアプリケーション開発を成功させるための方法をこれまでの経験や現在の開発現場のノウハウを基に語っています。 試行錯誤の回数を増やす、iOSとAndroidは同じように作ってはいけないなど、モバイルアプリケーション開発に関わるエンジニアやデザイナーにとって非常に参考になる内容が込められたセッションの内容を、ダイジェストで紹介しましょう。 (記事は「伊藤直也氏が語る、モバイルアプリケーショ

    伊藤直也氏が語る、モバイルアプリケーション開発のいまとこれから(後編)~Salesforce Developer Conference Tokyo 2013
  • 伊藤直也氏が語る、モバイルアプリケーション開発のいまとこれから(前編)~Salesforce Developer Conference Tokyo 2013

    伊藤直也氏が語る、モバイルアプリケーション開発のいまとこれから(前編)~Salesforce Developer Conference Tokyo 2013 いま多くの開発者が取り組もうとしているモバイルアプリケーションの開発は、経験の面でも技術の面でも、コンシューマ向けの開発現場が大きく先行しています。 9月6日開催されたSalesforce Developer Conference Tokyo 2013のセッション「B2Cからみたモバイルアプリケーション開発のいまとこれから」では、コンシューマ向けサービス開発の現場に身を置いてきた伊藤直也氏が、モバイルアプリケーション開発を成功させるための方法を、これまでの経験や現在の開発現場で得たノウハウなどを基に語っています。 試行錯誤の回数を増やす、iOSとAndroidは同じように作ってはいけないなど、モバイルアプリケーション開発に関わるエンジ

    伊藤直也氏が語る、モバイルアプリケーション開発のいまとこれから(前編)~Salesforce Developer Conference Tokyo 2013
  • iPhoneアプリ開発を勉強する最初の一歩の一歩 | F's Garage

    全くプログラムを書いたことがない人と、iPhoneアプリを勉強したいけどうどうしたらいいか?という会話をしていて、どうやらObjective-Cの初心者には、C言語ができないとプログラム書けません、と書いてあるらしい。 それに対して、いや、別にC言語は知らなくてもいいんじゃないかなぁ?!という会話をしていたんだけど、 (「知ってる」「知らない」というレベルにはCの場合、何段階もあると思う。「はじめてのC」のレベルか、それ以上かの差は大きい。) まぁ、そうでなくても仮にプログラミングのセオリーを分かっていても、Xcodeの使い方とか、Interface Builderの使い方とか、クラスのbindingの関係性とか、ややこしいXcodeらしい仕組みを身につけるのに結構時間がかかる。 また、Interface BuilderとかStory boardあたりが混沌に拍車をかけていて、どうせカス

    iPhoneアプリ開発を勉強する最初の一歩の一歩 | F's Garage
  • 1要素1クラス、画像を一切使わずCSSで実装するiPhone UI

    1要素に1クラスを指定するだけで、画像も使わずさっと作れるiPhoneCSSライブラリを作ってみました。 最近Macがほしくてたまらないえどです。こんにちは。(降ってこないかな・・) ↓実際に動いているデモはこちら(iPhone向けに作っているため、iPhone/Safariでしか最適化されていません) 1要素1クラス、画像を一切使わずにCSSで実装するiPhone UI - jsdo.it - share JavaScript, HTML5 and CSS ちなみにiPhoneで実際に見るとこんな感じに見えます↓ iPhoneで実際に見るには、以下のURLから見れます↓ (jsdo.itだとviewportが使えないため、ブログ自体にデモをアップしました) http://goo.gl/s5fV 1要素1クラスで実現する 今回のサンプル作成でこだわったのは、1要素に1クラスを指定すること

  • WEBデザイナー向け☆iPhoneアプリのUIデザイン

    どーもキンモクセイぷんぷん香る自由が丘からaoizmです。 秋満開!スマートフォンまっさかり!(強引) KAYACでもiphoneアプリ制作のお仕事が増えてきております。 WEBデザイナーがiphoneアプリのデザインをする際に、やっぱり気になるのがWEBとの違い。 画面サイズが小さく持ち歩けるデバイスiphoneは、デスクトップ上のアプリやWEBサイトとは 使用環境もその操作方法も異なるため、WEBとは違ったインターフェイスが求められます。 その違いを認識した上で、違いを活かしたデザインをするためには? iPhoneアプリUIデザインまとめてみました。 WEBサイトとiphoneアプリの違い 状況 持ち歩けるがゆえそのシチュエーションもさまざま 「会議で」「合コンで」「移動時」「就寝時」... 状態 そのときユーザーはなにをしている? 「歩きながら」「話しながら」「運動しながら」...

  • ソシオメディア

    ソシオメディアは各種ビジネス向けデジタルプロダクトのデザイン支援を行うデザインコンサルティング会社です。業界をリードする OOUI(オブジェクト指向ユーザーインターフェース)設計、独自ガイドラインをもとにしたエクスパートレビュー、クリエイティブ組織を構築するデザインマネジメント支援など、様々な角度から御社のデザイン戦略をサポートし、デジタルトランスフォーメーションを実現します。 もっと読む 多くの方からご要望をいただいておりました OOUI メソッドの解説書『オブジェクト指向UIデザイン ― 使いやすいソフトウェアの原理』が、2020年6月5日、技術評論社より遂に出版されました。 オブジェクト指向ユーザーインターフェース(OOUI)とは、オブジェクト(もの、名詞)を起点としてUIを設計すること。タスク(やること、動詞)を起点としたUIに比べて劇的に使いやすくなり、開発効率も向上します。 ブ

    ソシオメディア
  • ユーザーにとってはUIがすべて:UIデザイン原則をソシオメディアが語る - builder by ZDNet Japan

    シーネットネットワークスジャパンは9月29日、builderとしては2回目のイベントとなる「builder tech day」を開催した。今回は「User Interface & beyond」をテーマに、ソシオメディア、マイクロソフト、アドビシステムズ、カールのスピーカーが登壇し、ユーザーインタフェースの現在と未来について講演した。 稿では、ソシオメディア取締役である上野学氏の基調講演「ユーザーにとってはUIがすべて」を紹介しよう。 トイレにひそむUIのヒント 講演の冒頭、上野氏は米国の著名なデザイン・コンサルティング・ファーム、Adaptive Pathに2008年まで在籍していたDan Saffer氏と対話した際のエピソードを披露。 Saffer氏が「トイレにはユーザー・インタフェース・デザインの様々なヒントがある」と話していたことを紹介し、下の画像を示した。 上野氏は赤色の注意書

    ユーザーにとってはUIがすべて:UIデザイン原則をソシオメディアが語る - builder by ZDNet Japan
  • Ctrl+Fショック - 六の日記はこっちになったぞ

    RIAとかゆって、結局ほとんどがC/S時代のVBとかDelphiとかで作ってたUIを再現したいって話かと思うんですよ。 もちろん中にはぐっとエンタテインメントなかっちょえーUIな要望もあるかと思いますが、RIAな開発環境を使う側のニーズの絶対数の話だと、まあそうかと思うですよ。 で、がんばったわけですよ。 が、お客様がやろうとしたオペレーション例。 とにかく検索ボタン押す 検索結果が一覧表示 欲しいデータをCtrl+Fで探そうとするも、できない 検索できないんですけどという問い合わせ 今ブラウザを使って仕事しようって人はみんな普段の生活でブラウザ使ってあれこれいじってるわけで、そうすると、欲しいデータに辿り着くための方法というのは「Ctrl+F」なんですよ。 HTMLでいいんですよ。いや、HTML「が」いいんですよ。覚える事少ないから。 しかも求められてるのって、S2の従業員サンプルとかの

    Ctrl+Fショック - 六の日記はこっちになったぞ
    atsuizo
    atsuizo 2009/05/01
    C/SからHTMLに移ったとき、操作性の低下を泣く泣く飲んでもらったんだよなぁ。HTMLからRIAに代わる時、操作性全体は上がるのだろうけど、失われるもののほうが反応が大きくなるってことか。慣れって怖い。
  • 1