タグ

UIに関するhmd703のブックマーク (248)

  • 日本製UIデザインツール「STUDIO」は従来のツールと何が違うのか - 酔いどれデザイン日誌 - Drunken Design Diary -

    先日、私の古巣である株式会社オハコからスピンオフしたオハコプロダクツ社から、UIデザインツール「 STUDIO」のクローズドβ版がリリースされました。 国産のUIデザインツールといえばグッドパッチ社が提供するProttなどが有名ですが、β版を触ってみた感想と合わせて STUDIOの何がすごいのか?従来のUIデザインツールとは何が違うのか?ということを紹介してみたいと思います。 目次 これはプロトタイピングツールではない 特筆すべきはシームレスな操作感 全員がMVPまで作れる時代 まとめ これはプロトタイピングツールではない まず、最初にSTUDIOを「UIプロトタイピングツール」ではなく「UIデザインツール」と記載したのには訳があります。近年はプロトタイピングの重要性が多方面で説かれているのに呼応するように、冒頭で紹介したProttをはじめ国内外からたくさんのプロトタイピングツールが登場し

    日本製UIデザインツール「STUDIO」は従来のツールと何が違うのか - 酔いどれデザイン日誌 - Drunken Design Diary -
  • デザインの名著に学ぶUIデザインに関する10のルール

    Ben Shneiderman氏の『Designing the User Interface』とJakob Nielsen氏の『Ten Usability Heuristics』の著書に基づく、インタラクションデザインに関する10個の原則というものがあります。 この原則は、「ヒューリスティック」と呼ばれるもので、経験則による広範なルールであり、特定のユーザビリティに関するガイドラインではありません。 1.一貫性を重視する 同じことを意味する複数の名称や状態があることは、ユーザーにとって好ましくありません。ユーザーの混乱を招かないように、用語と動作を一致させるようにしましょう。相手の驚きを最小限にする「驚き最小の原則(The Principle of Least Surprise)」に留意することが大事です。 アプリ内のすべての要素に一貫性を持たせるようにしましょう。たとえば、同じスタイルの

    デザインの名著に学ぶUIデザインに関する10のルール
  • 大林寛「インターフェース、その混血した言語性」 | ÉKRITS / エクリ

    インターフェースは……道具や機械にあなたの意志を伝えるための言語であるリチャード・ストールマン 主体なき世界のモノたち 「ユーザーインターフェース」や「ヒューマンインターフェース」といった言葉は、人間が主体である前提で使われてきた。対象となるのはモノであり、主体である人間は「インターフェース」を通じてモノをコントロールする。だから人間の目的から、モノのインターフェースが設計される。ここには、人間が主体でありモノが対象で、人間はモノではないという暗黙の了解がある。 この前提条件は、わたしたちの知性を根拠としていた。しかし、知性を判断するのも、また知性である。主体というものは、その知性を越える存在を想定した途端に、あっさりと失われてしまう。人間の主体が奪われるのを、悪夢かディストピアのように感じるとしたら、それは単にわたしたちが今持っている想像力のせいかもしれない。その前に、主体を想定せずにい

    大林寛「インターフェース、その混血した言語性」 | ÉKRITS / エクリ
  • Facebook Design | What's on our mind?

    Every pixel. Every word. Every part of the experience aims to deliver on that promise.

  • 家には77歳の年寄りがいるんだけど、iPadでもやはり難しいようでまったく手..

    家には77歳の年寄りがいるんだけど、iPadでもやはり難しいようでまったく手にとらない。 Androidは論外だった。 アプリにはだいたい主要な画面が4つか5つほどあり、簡単にいうとその画面を行き来しながら利用する物が多い。 年寄りにとって一番利用しやすいのは画面がリニアに進むということだ。 アプリをタップしたら常に最初にメニュー画面、メニューからボタンを押したら目的の画面のように進まなければ、そこで理解がむずかしくなる。 アプリによってはアプリタップ後、最後の画面を表示してくれる物も多い。そういうのは年寄りには難しい。まずは元に戻りたいと思うようだ。 スタート画面が設定されているのもあればない物もある。 アプリによってはしばらく時間があると普段とは違うメッセージが出る物もある。 タップでボタンが表示される奴は論外だ。タップの仕方によりボタンが出ない・出るで教える最中に喧嘩になる。 タップ

    家には77歳の年寄りがいるんだけど、iPadでもやはり難しいようでまったく手..
    hmd703
    hmd703 2017/01/04
    おれたちが年寄りになる頃には別の問題が出て来てるとおもうから大丈夫だ悩みの種は尽きない。
  • 常にキャッチアップしよう!iOSヒューマンインターフェイスガイドライン

    この投稿は、 UI Design Advent Calendar 2016の14日目の記事です。 OSのアップデートに伴い新機能が追加されているため、改めて見返すとiOSのヒューマンインターフェイスガイドライン(以下HIG)も一部変更が加えられています。 過去に読んだことはあっても常にキャッチアップしなければ、デバイスに適した設計からずれてしまい、ユーザーの期待する体験を提供できなくなってしまうのではないでしょうか。 今回は、アプリデザインをする際に改めて意識すべきHIGをおさらいしつつ、以前と変わった部分などをピックアップしながらご紹介したいと思います。 iOSのUIデザイン基3原則おさらいの第一歩として、原則を改めて見てみましょう。 他のプラットフォームとの区別にもなり、品質と機能性を高めるためにも必要なUIデザインの基3大原則があります。 実はこの原則、iOS9まではDefere

    常にキャッチアップしよう!iOSヒューマンインターフェイスガイドライン
    hmd703
    hmd703 2016/12/15
    そういえば最初読んだきりだ
  • U-NEXT キャリア

    U-NEXTは、2007年にサービスを開始した動画配信サービスのパイオニア。「ひとりひとりに、最高の時間を配信する。」 をミッションに、いま次のステージに進むべく、新たなメンバーを積極採用しています。会社についての情報はコーポレートサイトもぜひご覧ください。

    U-NEXT キャリア
  • ソシオメディア | OOUI – オブジェクトベースのUIモデリング

    最近、OOUX という言葉を見聞きしました。これはオブジェクト指向の利用者体験(Object-Oriented User Experience)のことで、いくつかの記事を読んだところ、アプリケーション設計において画面とデータを対応づける際にオブジェクトを手掛かりにするという方法論のようです。つまり OOUX は「オブジェクトベースのUIモデリング」と言い換えることができそうです。そうすると実は以前からそのようなデザイン手法はあり、「OOUI(オブジェクト指向ユーザーインターフェース)」と呼ばれていたのです。最近になって OOUX という言葉が使われるのは、OOUI のことを知らなかったか、もしくは流行語である「UX」を用いた方がかっこいいと考えたからではないでしょうか。 「オブジェクトベースのUIモデリング」というデザイン手法は、GUI アプリケーションをデザインする際の基的なテクニック

    ソシオメディア | OOUI – オブジェクトベースのUIモデリング
  • ディープラーニングで簡単に自動テストスクリプトが作れる「Magic Pod」 | 品質向上ブログ

    今日は、今話題のAI(人工知能)技術「ディープラーニング」を使い、誰でも簡単にモバイルアプリの画面自動テストスクリプトが作成できるWebサービスのお話です。 ※2017年7月24日よりオープンβ版を提供開始しました! AppiumやSeleniumのような画面を自動操作するテストツールはとても便利ですが、一方で、こうしたツールを利用していないプロジェクトもたくさんあります。何がツールの導入を妨げているのでしょう? 筆者は、次の2つがとりわけ大きな問題だと考えています。 システムの内部情報をある程度理解しないと、テストスクリプトを書くこと・読むこと・編集することが難しく、それなりのスキルが必要。 テストスクリプトの作成に時間がかかりすぎる。特に、読みやすく変更に強いスクリプトを作成しようとすると、かなりの手間がかかる。 これらの問題を、ディープラーニングによる画像認識を使って解決しようとして

    ディープラーニングで簡単に自動テストスクリプトが作れる「Magic Pod」 | 品質向上ブログ
  • Typography for User Interfaces | Viljami Salminen

    Typography for User InterfacesJun 21st, 2016Back in 2004, when I had just started my career, sIFR was the hottest thing out there. It was developed by Shaun Inman and it embedded custom fonts in a small Flash movie, which could be utilized with a little bit of JavaScript and CSS. At the time, it was basically the only way to use custom fonts in browsers like Firefox or Safari. The fact that this t

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

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

    16種類(45カテゴリ)の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選(スライド付)
  • 君たちはそんなにハンバーガーメニューが好きなのかね?

    はじめに 稿は UI Design Advent Calendar 2015 – 8日目のモバイル UI に関する記事です。 まず私はハンバーガーメニューという UI が嫌いです。その理由についてこの記事で説明していきたいと思います。 あの三線を人はハンバーガーと呼ぶ 最近よく見かけるあの“三線”のことを海の向こうでは ハンバーガーアイコン とか ハンバーガーメニュー とか言うらしいです。上のがパンで、真ん中のがハンバーグで、下のがパンに見えるからだそうです。にしてもこのただの三線をハンバーガーと表現するのは少し無理があるような気がします。まあ違和感あれどそこに抗っても仕方がないので、とりあえずこれはハンバーガーと呼称することにします。 ハンバーガーメニューを避けたい理由 真面目にハンバーガーメニューを考察してみます。 1. 何をするのかがわからないアイコン https://dri

    君たちはそんなにハンバーガーメニューが好きなのかね?
  • iOS ヒューマンインターフェースの原則 - Qiita

    Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに iOS のヒューマンインターフェースを理解するためにはまず UI 設計の原則を定めた聖典 iOS Human Interface Guidelines を読むことから始めなければなりません。ここにはプラットフォームの特徴からデザインの原則、それぞれの部品が何のためにデザインされたのか、どう利用するのか、iOS を構成する UI の基指針がまとまっています。 よく、『磨りガラス効果がかっこいい』『アニメーションしておくとイケてる』『ボタンは右配置の方が右手で押しやすい』『流行っているから』……などの観点によって UI の設計が

    iOS ヒューマンインターフェースの原則 - Qiita
  • UI Flowを簡単に記述できるguiflowが良い - note

    画面遷移の図を起こしたり、それをアップデートしていったり、共有したり、といった作業ってじつはとても地味で重い。重要な作業に変わりないんだけど、その作業的な重たさに辟易してしまうこと多数。特に、Office系を使うと死が待っている。同僚のテクニカルディレクターが死亡していたので、ツライなーと思っていたらよいものを見つけたので、実際に触ってみた。 >もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った - Qiita 魔法っぽい。マークダウンみたいなかんたんな記法でテキストを書くだけで機能遷移図になる。 graphviz というしくみを使っているようで、チャートを構造化しながら描画できるっぽい。しかもGUIのツール「guiflow」というものまで用意されているので、図の一部分をさわるとコードの該当箇所に飛べたりとか、いろいろ良い。 入れ方今回ほぼはじ

    UI Flowを簡単に記述できるguiflowが良い - note
  • もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った - Qiita

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

    もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った - Qiita
  • モバイルアプリのUIデザインの参考になるスライド10選

    今回はモバイルアプリのUIデザインをするときに参考になる素晴らしいスライドを紹介します。 モバイルアプリはWebデザインとはまた異なった視点が必要になってきます。モバイルアプリ特有のデザインフローや、プロトタイピング手法について学びたい方におすすめです! アプリUI勉強会 in ネットイヤーグループ

    モバイルアプリのUIデザインの参考になるスライド10選
  • Testing Accordion Menu Designs & Iconography | Viget

  • Free prototyping tool for web & mobile apps - Justinmind

    We use cookies to ensure that we give you the best experience on our website. Click here for more information. Goit

  • No UIはデザインを進化させる新しい概念

    Next Big ThingsとTech Crunchでも記事が書かれた「No UI」という概念が最近話題になっている気がします。 No UIとは「スクリーン(UI)の情報量や設計に頼らず、目的を達成すること」を軸にしたサービス体験を意味します。 流れの主流としては、テキストメッセージを使ったものが多いです。Operatorというショッピングサービスは、商品の検索機能や、オススメの商品が並ぶトップページ、カテゴリ別のナビゲーションなどは全くありません。 ”オペレーターに”テキストメッセージで自分が求める商品の特徴を送ることで、その要件に合ったものを返信して教えてくれるというものです。 スクリーンで四苦八苦するデザイナーの苦労Operatorのようなサービスの場合、ユーザーの要望を臨機応変に対応できるのでスクリーン上の複雑なケースを意識したデザイン設計が要りません。 が、現在、UIに関わるデ

    No UIはデザインを進化させる新しい概念
  • 最前線IT企業のデザイナーたちが参考にしてきた「UI・UXの良書」とは | nanapi [ナナピ]

    便利なシステムを生み出し、ユーザーの感動体験に欠かせない「UI/UX」。デザイナーとしてお勤めの方はもちろんのこと、IT業界に関わっている・関心があるなら積極的に学んでいきたい分野です。 今回話をうかがったのは、人気IT企業におつとめのデザイナーの方々。「UI/UX」について学び考える上で、おすすめの書籍を教えていただきました。 ご回答いただいた企業はこちら 1 グリー株式会社 2 GMOインターネット株式会社 3 GMOペパボ株式会社 4 ピクスタ株式会社 5 株式会社ブラケット 6 ヤフー株式会社 7 株式会社リブセンス グリー株式会社 細川菜々恵さん スマートフォン向けアプリ開発を担うスタジオ「Wright Flyer Studios」にて、Art UI UXチームのUI/UXディレクターを務める細川菜々恵さん(以下、細川さん)。UI/UXを学ぶにあたり、おすすめを教えていただきまし

    最前線IT企業のデザイナーたちが参考にしてきた「UI・UXの良書」とは | nanapi [ナナピ]