『「AWA」のデザインはどのようにして作られたのか。』
こんにちは。 AWAでアートディレクション／デザイン／ブランディングを担当しているムロハシと申します。 今回はAWAのUIデザイン、インタラクションがどのようにしてつくられたのか、 先日行った「 メディアプロデューサー養成講座」の講義内容をベースに、 簡単ではありますが書いていきたいと思います。 「AWA」とは？ AWAとは、ひとことで言うと 「登録なしですぐに音楽が聴ける定額制の音楽配信アプリ」です。 サービスの特徴として第一にあげられるのは、 ・好きなアーティストを聴くだけでなく「プレイリスト」を軸に、自分の好みにあった音楽が「リコメンド」されること リコメンドを通じて「昔好きだったあの曲」や「まだ知らなかったけど好きな曲」を一人ひとりにパーソナライズしてお届けしています。 そのほかの詳しい説明は プレスリリースをご覧いただければと思います。 インタラクションモックの重要性 AWAの初
Justaway : 軽快な動作が魅力！ユーザーストリーミング対応のシンプルなTwitterアプリ！無料 | オクトバ
まずはいつも通りアカウント認証を行いましょう。真ん中のTwitterアイコンをタップして認証画面に進んでください。 認証が完了すると自動的にアプリ画面に戻り、しばらくするとTLが読み込まれます。黒を基調にしたシンプルな見た目で、個人的にかなり好みです。 各ツイートの下にはRTとお気に入り数が表示されます。この辺りは非常に公式と似たUIなので、今まで公式を利用していた方も、違和感なく移行できると思います。 標準的なUIは残しつつも、所々に使いやすい機能が仕込まれています。例えば、ツイートボタンを長押しすると、TLを見ながら投稿ができる「クイックツイートモード」が起動します。 TLを追いながら投稿を続けるヘビーユーザーには必須機能ですね！ ツイート欄をタップすると、各メニューが表示されます。リプライやふぁぼ(お気に入り)など、標準的なものはもちろん揃っていますが、本アプリ独自のものも多々ありま
スマホUI考（番外編） UIやUXを劇的に改善する、『ビッグオー駆動型開発』とは | fladdict
いま『ビッグオー駆動型開発』とよばれる開発手法が、業界の一部で注目を集めている。 その理由は非常にシンプルだ。『ビッグオー』は非常に安価で簡単な手法でありながら、従来の開発手法に比べ劇的にUIやUXを改善できるためである。 製品コンセプトのような上流から、ボタンのレイアウトといった下流工程、さらにはグロースハックやプロモといったリリース後のフェイズまで一つの手法でユーザビリティを評価できる。この汎用性がビッグオー駆動開発の大きな特徴であり、導入時の利点となる。 今回はこのビッグオー、の概要と具体的なやり方について論じたい。TwitterのUI拡張予言以来、久しぶりのUI系エントリである。 ビッグオー駆動開発とは何か？ ビッグオー駆動開発は、正式には『OKAN Driven Development（オカン駆動型開発）』とよばれる開発手法である。 これは自分のオカンを指標とすることで、低コスト
そこそこユーザビリティの高いフォームを作った
そこそこユーザビリティの高いフォームを作った 入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです（サーバ側スクリプト
SIGIXD 2nd Googleにおけるインタラクションデザイン - 安藤日記
安藤日記 安藤日記：デジタルガジェット好き「安藤幸央」の日々のメモ ( yukio.andoh@gmail.com ) [ http://twitter.com/yukio_andoh ] Design Sprint Newsletter https://designsprint.substack.com/ SIGIXD 2nd ------------------------------------------------------- http://sigixd.org/2nd.php Googleにおけるインタラクションデザイン ＃川島さんの示唆に富んだ話がすばらしかった。 川島 優志氏 シニアウェブマスター・アジア太平洋マネージャー: "Behind the web design & Doodle creation" Judy Shade UX Researcher: "UX at
blog.8-p.info: Facebook の BigPipe と TTI
Posted at 2010/10/22 01:59, Modified at 2010/10/22 03:42 Facebook のフロントエンドは結構かわったことをやっていて、例えば、ログイン後の http://www.facebook.com/home.php には <div id="pagelet_home_stream"></div> みたいな空の HTML があり、その後に <script>big_pipe.onPageletArrive({ … });</script> <script>big_pipe.onPageletArrive({ … });</script> ... と script 要素が何個もならんでいる。 BigPipe: Pipelining web pages for high performance この仕組みは (変数名のとおり) BigPipe と呼
キャズムを超えろ！ - 団塊～シニア層向けのWeb設計 やっちゃいけない10のＵＩ
一時期パソコン教室の講師をやっていたことによる経験と、昨今Webサービス運用にあたって中高年層からのクレームなどを自分なりにまとめた結果として、50代以上のユーザに対するWebサービス＆PCアプリケーションのUI設計における以下10のTIPSを公開してみたいと思う。...といってもたかだか10個で収まる簡単な話ではないので、思いついたら都度追加して行きたい。 ID，ニックネームを考えさせてはいけない。半角英字開始限定は論外 IDやニックネームが思いつかない方が多い。これはシニアに限らず、ITリテラシーがそれほど高くない若年層についても言えること。作る側の人間も「過去にWebで使ったID,Nicknameは全て使っちゃダメ。何か新しいのを考えて入れてみて。」と言われると結構悩んじゃうもの。それと同じ状態に陥ると思っていただけるとわかりやすい。「IDのかわりに電話番号でもいいですよ」というと結
新聞でタグクラウド
週末なので軽いネタで。カナダのバンクーバーで発行されている新聞"Vancouver Sun"が、最近こんな紙面を作成したそうです： ■ Newspapers adopt Web 2.0 tag clouds (etre) （上図のオリジナルは Flickr にアップされています） カナダのブリティッシュ・コロンビア州の地価がどの程度変化したかを、なんとタグクラウドで表現しています。表示されている単語は地名で、文字が大きければそれだけ上昇率が高かったとのこと。 WEBで見慣れているタグクラウドも、紙面で見ると違和感を感じてしまいますが……バンクーバーの人々は、それだけWEB2.0系のサイトに馴染んでいるということなのでしょうか？まぁバンクーバー・サンがどこまで本気でこの表現方法を使ってみたのかは分かりませんが、意外と数年後には、タグクラウドをWEB意外でも使うことが普通に行われるようになるの
やっぱりすごい、マイノリティ・リポート的インターフェース | POP*POP
ちょっと前の話題ですが、あらためて動画を見る機会があったのでご紹介。 いわゆるマイノリティ・リポート的なインターフェースが実現されています。画面を直接触ってインタラクティブに操作できます。 iPhoneも複数のタッチポイントで操作できますし、将来的にはこうした流れになっていくのでしょうか・・・。 ご覧になった方も多いかもしれませんが、まだの方は是非下記の動画をご覧ください。 » Remapping the Universe using this GUI （via BassicTech News Blog） まさに映画「マイノリティ・リポート」を彷彿させる動画でした。こちらの映画もよろしければ。 » マイノリティ・リポート
最速インターフェース研究会 :: デザイニング・インターフェースを買った
買った。良本。 UI部品の名前が分からなくて困る、ってことが多かったのですが色々載ってて参考になる。基本的に英語の表記も載ってるのですが、たまに日本語しか書いてない箇所があるので、原書も買っといた。 Hello, my name is Jonathan and I am trying to get hold of the person who created the Pure JavaScript QRcode generator as I wish to know how to use the script. I am a fourth Student at Aberdeen Univeristy studying Computing Science and hope to use this script for part of my project. Thank-you.
いらないときは隠すインターフェース | SiMPLE*SiMPLE
いらないときは隠すインターフェース January 11, 2007 8:00 AM written by watanabe シンプルさを追求するには、削れるものをそぎ落としていく作業と同時に、きちんと意味が伝わるような工夫が必要なのかなと思います。 そういう意味で、シンプルなスペルチェッカーspellifyは参考にできそうです。 ↑ 画面には、フォームしかありませんが・・・ ↑ フォームをクリックすると使い方の説明がすーっとあらわれ、フォームの外をクリックするとすーっと消えます。 あまり使い慣れていない画面ではどうかと思いますが、検索窓のようにある程度何をするかわかっているところで、こうした「隠れ説明」が必要なときだけ出てくるというのも悪くないですね（少なくともちょっとした驚きがありました）。 場所にもよるかと思いますが、「必要なときには表示して、いらないときには隠しておく」というインタ
ビジネスリサーチの心得
2．ビジネスリサーチの情報収集 デスクトップ調査 の基本〜アニュアルレポートなど公開情報から… デスクトップ調査 とは、主にインターネットなどを使用して、公開情報を調査して整理・分析を行うものです。「CIAも収集する情報の95％が公開情報」ということで、情報不足とい… 2021.01.28 2021.05.13 1915 view 5．ビジネスリサーチのビジネスモデル ビジネスリサーチがアウトソースされる理由 ビジネスリサーチを社外に依頼する理由①〜信頼できる人「すべては依頼から始まる」からでも書きましたが、依頼主が社外にリサーチを委託する最大の理由は、事業環境を定点で把握… 2021.01.18 2021.05.13 146 view
「OK」と「キャンセル」、どちらが有効か ― ＠IT
ユーザビリティのヒント（最終回） 「OK」と「キャンセル」、どちらが有効か 「情報表現の最適化」 ソシオメディア 上野 学 2006/10/20 デスクトップのメモ帳を新規に開いて、メモを書き、ウィンドウを閉じようとすると、「変更を保存しますか？」というメッセージダイアログが表示されます。ユーザーにしてみれば、「新しいメモをいま書いたところなのに、なぜ『変更』なんだ？」と思うでしょう（本文から） 英語や、日本語の横書きでは、情報は大きく上から下に、左から右に展開していきます。ユーザーは画面（ウィンドウ内）の左上から右下に向かって意識を推移させて、そこで表現されている情報を取得していきます。 実際にはユーザーは、まず画面中央付近に視線をやり、そして全体をざっと見渡してから、重要と思われる個所に注目していくようです。ひとたび内容を読もうとか、入力フィールドを埋めていこうと決めたら、当然、上から
テーブルUIによるクールな新電子楽器rectable | 秋元@サイボウズラボ・プログラマー・ブログ
reactableは、バルセロナにあるPompeu Fabra大学での研究。 ブロック上の機器をテーブルの上で配置していくことで、電子音楽を鳴らすという楽器。テーブル上に置いたブロックが、シンセサイザーの各パーツとなる。 それらの場所、向き、どの面を下にするか、他の部品との角度、などを元に、シンセサイザーのパラメータが変わる。 また、そのパラメータがテーブルの上に投射されることで、演奏者へのフィードバックにもなっている。 なんとか説明しようとはしたけれど、動画を見てもらうのが一番てっとり早そう 動画に出てきたのは、以下のようなブロック ジェネレータ フィルタ 正弦波発信機 サンプラー メトロノーム シーケンサ ハーモナイザ 角度を変えたり、指で操作したりして、周波数や音量を調整する。近づけたり、並びを変えたりすることで効果が変わる。 もう一つ そのほかにも、カンファレンスで来場者(子供にも
【ハウツー】Yahoo! UI LibraryでさくっとAjax! (1) Yahoo! UI Libraryを使ってユーザビリティアップ! (MYCOMジャーナル)
「マルチプラットフォーム」「利用する際に必要なものは、デフォルトでインストールされているWebブラウザとネットワークに接続できる環境のみ」といったような利便性の高さから、見ない日はないと言っても過言ではないほど浸透したWebアプリケーション。今日もいたるところで、さまざまな業務を円滑にすすめるためにWebアプリケーションが利用されている。 Webアプリケーションはハイパーリンクやフォームなど、Webブラウザの基本機能を用いて作成されている。Webブラウザ単体でできることは限られているため、ローカルアプリケーションと比較するとユーザビリティにが低くなりやすい。このため、デベロッパはWebブラウザ上で動作するJavaScriptやFlashをもちいて、そのユーザビリティを高めてきた。 ここではJavaScriptコードを記述するデベロッパの負担を軽減かつユーザビリティを簡単に高めることができる
FPN-団塊〜シニア層向けのWeb設計 やっちゃいけない10のＵＩ
6．ビジネス分析フレームワークを学ぶ ビジネス分析フレームワークの学習と使い方 ビジネス分析 フレームワークや 経営学 の学習をどうビジネスリサーチに役立てるか、その考え方と留意点について解説します。… 2021.05.08 2021.05.09 115 view 3．ビジネスリサーチの報告書作成 ファクト、ファクト、ファクト〜事実に基づくこと 「What's Your Story?」という提案や提言がないレポートは意味がない、ということがよく言われますが、ビジネスリサーチの報告書は、内容の8〜9割は ファクト … 2021.01.19 2021.05.16 303 view 4．インプリケーションと提言 リサーチを通じて気付いたことは？公開情報から点と点を結ぶイン… インサイダー情報はそのままでは役に立たない！？ビジネスリサーチの依頼の中で、「業界の空気感はどうなっているか？」「この技術
Why Your Web App Sucks �
The reason it is so hard to make a great web application is because it is so easy to make it suck. The greatest ideas do not always translate into the greatest applications because of poor execution. What makes them so bad though? Let’s take a look. Easy is a feature Easy is always the #1 feature people look for when using a web site. Therefore, it makes sense that you have decided to make it feat
Vitamin Features » 15 Things you can do with Yahoo! UI
Learning to code can be fun! Get started today with a free trial and discover why thousands of students are choosing Treehouse to learn about web development, design, and business. Learn more With a starting salary of up to $75,000 per year, working in tech isn’t a job — it’s a career. Did you know? There are more than 500,000 positions in the tech industry waiting to be filled. Our Techdegree pro
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Technologies for UI
UIのセンス - 開発メモ