masui / Web時代のユーザインタフェース研究 - GlidePlease note that Glide no longer supports Internet Explorer versions 7 or 8.
ゲーム系UIデザイナーの勉強を２年近くやって思った12のこと。 - meycoのUX&UIデザイン技術メモ
あけましておめでとうございます。 新年になり、すこしゆったりとした時間を過ごす事ができました。せっかくなので、去年からずっと思っていたUIデザイナーについて思った頭の中のことをまとめたいと思います。 WEBのUI設計よりも、明らかにゲームの方が難しい これは結構何度も言ってますが、ゲームの設計(ゲーミフィケーションのアプリ含む)の方が明らかに「やることが多い」です。 もっとプレイしてもらうには？ゲームが終わったときに、どのような設計になればもう一度やってくれる？ チュートリアルは必要？やりこみ要素はどうする？ソーシャルとどうやって連携する？ポイント加算の条件は？アクショナブルフィードバックは？日常で使ってくれるような設計には何が必要？盛り込みすぎではないか？ などなど、考えることが多いです。 このあたりは、ソーシャルゲームが本当に上手にできてるなーと思っているので、日々勉強しています。 ゲ
デザインの7か条『誰のためのデザイン？ 認知科学者のデザイン原論』 - RyoAnna
USBメモリをパソコンに挿すと引っかかる事がある。コネクタの半分が空洞、半分が突起になっているため、2分の1の確率で引っかかる。これは、マークやランプを上に向けて挿さないユーザーが悪いのだろうか。『誰のためのデザイン？ 認知科学者のデザイン原論』の著書ノーマンは、このような事例をデザイナーの問題だと主張する。 ノーマンによるデザインの7か条。 外界にある知識と頭の中にある知識の両者を利用する。 作業の構造を単純化する。 対象を目に見えるようにして、実行のへだたりと評価のへだたりに橋をかける。 対応づけを正しくする。 自然の制約や人工的な制約などの力を活用する。 エラーに備えたデザインをする。 以上のすべてがうまくいかないときには標準化をする。 例えば、4番の「対応づけ」の悪い例は、部屋の電灯スイッチ。一般的なスイッチは縦と横に4つ並んでいるが、実際の電灯の配置とは一致していないため、どこを
2013年に話題になったデザインに関する「考え方」が変わる記事14選
デザインをしつづけていると、たまに柔軟に考えられなかったり、自分のデザインに対して疑問を感じるときがありませんか？ そういうときは一度、初心にかえってデザインに関して考え方を見直したり、インスピレーションを刺激することも大切です。 また、デザイン思考を身につけるためにも、常日頃から考え続けることも重要です。 今回は、過去に話題になり、読むだけでデザインに関する「考え方」が深まる14個の記事をご紹介します。 デザインに対する考え方が変わる・深まる記事 これはウェブページです｡ ウェブデザインの本質は､言葉です｡ ウェブで一番強力な道具は､今も昔も言葉だということを、思い出させてもらいました。 ▷これはウェブページです｡ 選ばれるウェブデザインとは ９つの基本的なルールと感情に訴えるデザインについて詳しく書かれています。 サイトの使いやすさだけでなく「ユーザーがそのサイトにどんな感情を抱くか」
モバイルUIのデザインに役に立つUIパターンギャラリー集17選 - showrtpath - iOSブラウザ開発日記
2013-12-23 モバイルUIのデザインに役に立つUIパターンギャラリー集17選 アプリの開発の時にUIのデザインに悩みますよね。 そんな時、モバイルUIのパターンギャラリー集が役に立ちます。 そのギャラリーサイトのサイトを集めてみました。 スクリーンショットを集めたものと、デザイナーの作品のものがあります。 Showrtpathブラウザを開発していた時はdribbbleをよく見ていました。 Pttrns - Mobile User Interface Patterns 優れたiPhoneサイトデザイン集 - iPhoneデザインボックス Mobile Patterns lovely ui Inspired UI - Mobile Apps Design Patterns [iPhone] Mobile Awesomeness Meerli · Featured Android Nic
問題解決のためのスタイルガイド入門
定義が広いスタイルガイド フロントエンド開発者からスタイルガイドという言葉を耳にするようになりました。効率的、かつ一貫性のある見た目とコードをつくるための共有ツールとして、スタイルガイドが使われることがあります。一見、目新しくみえるスタイルガイドですが、最近生まれた新しいアイデアではありません。ロゴやコーポレートカラーの使い方を記したスタイルガイドは昔からありますし、ライターにもスタイルガイドがあります。 このように、開発者も、デザイナーも、ライターも同じように「スタイルガイド」という言葉を使っています。人によって、その言葉から受ける印象も異なれば、必要としている要素も異なります。YUI 並の UI アセット をスタイルガイドに含めることを期待している人もいます。アプリや Web サイト開発におけるスタイルガイドを作る際に難しいのは、何で作って管理するかではなく、どの範囲をスタイルガイドと
we love herokuのデザインリニューアル
we love herokuリニューアルのお話です。今回はデザインサイドの話です。 we love heroku とは we love herokuは、herokuを使ったサービスを登録するギャラリーサイトです。 開発したキッカケは、@herokujpさんのつぶやきでした。去年の2月ぐらいでしたかね、仕事の帰り道にこのつぶやきをみて、設計しながら家帰り、即実装という感じでした。 railsを初めて1ヶ月ぐらいの頃にherokuを試したところ、すごく感動したのですっかりherokuのファンになっていました。そして、2月のheroku meetupに参加しようと思っていたところ、先ほどのつぶやきが目に止まり。作ってみるかな、と。 トップページを振り返ろう 今回は機能の話は書きません。あえての見た目の話だけです。当時のバージョンのスクリーンショットはこんな感じでした。 Bootstrap2のまん
UIの進化を止めるうんこユーザーに我々はどう立ち向かうべきか
「基本的に運営側がすることが正しいんですよ Webの世界ってそういう論理で動いてるんですよ」理論 実はここで言われている@masarakkiさんの意見はすごくわかる。「最高にクール」なUIがクソユーザー（便宜上、UIの良さがわからないユーザーを本エントリではそう呼ぶ）によって阻止されるのは中の人としては決して喜ばしいことではない。 ユーザーは「最高にクールなUI」がわかるか？ まずこの問いから始めたい。一般ユーザーは「最高にクール」なUIがわかるか？ 答えはNOだ。彼らは「使いやすい」UIはわかっても「クール」なUIはわからない。そして「使いやすい」というのは結局各人の主観に依るものなので、この「使いやすい」UIというのは参考にはできても信用はできないものである。 この話を読んで真っ先に思い出した１つの話がある。 フラットデザインや新機種が評判どうか、というのはAppleにとっては意味が無
【DevLOVE甲子園2013】UIと画面遷移を設計するときに 破綻しないようにするための、 ひと手間
【DevLOVE甲子園2013】UIと画面遷移を設計するときに 破綻しないようにするための、 ひと手間
UI/UXデザインに関わる者なら見ておきたい記事とスライド10選 - Sadakoa.jp-Blog-
2013-11-07 UI/UXデザインに関わる者なら見ておきたい記事とスライド10選 今回はUI/UXデザインについて触れてある記事やスライドで自分が実際に読んで参考になったと思ったものを備忘録としてまとめました。実際にUI/UXデザイナーの人や、僕と同じくUI/UXデザイナーを目指している人、また実際に興味がある人のお役に立てたら幸いです。 記事1 UI/UXの違いについて 5分でわかるUIとUXの違い : Excite Designer's Blog そもそもUIとUXは何が違うのかという事を知らない人もいると思います。 まずはUIとUXの違いについてはっきり知らなければなりません。 記事2 なぜUIとUXがよく混同されてしまうようになったのか UXとUIが混同されるワケ : could UIとUXが混同されてしまう理由について触れてある記事です。 僕も最初はUIとUXを混同
デザイナー必見！アプリのUIを一覧で見られるギャラリー。
iOS7のフラットデザイン化でほとんどのアプリがデザインの路線を大幅に変更する事を余儀なくされました。これまでのお馴染みアプリもどんどんアップデートされ、フラットデザインへの対応がなされています。これからアプリを開発するにもフラットデザインのUIというのは非常に重要な要素になっています。 App Storeでデザインの参考になるアプリを一つ一つ見ても良いのですが、UIを一覧で表示してくれる非常に便利なサイトを見つけたのでご紹介。 アプリのUIを集めた「Pttrns」 こちらがトップ画面。アイコンではなくUIで並んでいるのでたくさんのデザインを素早く見る事ができます。新着順で並んでいるので、フラットデザインのものばかりが表示されています。見ているだけでも楽しいですね。 簡単に細部のチェックが可能 画像にカーソルを合わせると、ルーペで拡大してくれます。なので細部のデザインやフォント・ボタンを確
母親から学ぶ使いやすいウェブサイトのインターフェース・デザイン
インターネットが苦手な母親に子どもが使い方を教えるのはほほえましい光景ですがなかなか骨が折れるものです。そんな母親が1人でもウェブサイトを使えるようにデザインすることで、誰にでも使いやすいユーザー・インターフェースを作る方法がまとめられています。 Designing User Interfaces for Your Mother — Design/UX — Medium https://medium.com/design-ux/dd45ec50f7b0 ◆母親のためのインターフェース・デザイン ウェブデザイナーであるトニー・ジャインズさんは、「ちょっとコンピューターのことを見てくれない？いろいろと大丈夫かしら？」とよく母親から不安そうに聞かれるそうです。彼女はインターネットを使いますが、全てを知っている訳ではありません。そこでジャインズさんは世界中に何百万の母親と同じレベルのユーザーがいる
ズルいデザインテクニックを生かして作る、汎用性のあるズルいボタンデザイン
さて今回は、ズルいデザインテクニックの集大成ともいえる「ズルいボタン」です。これまでの連載で取り上げた数々のズルいデザインテクニック、「ズルいテキストシャドウ」「ズルいグラデーション」「ズルい角丸」、そして前回解説した「ズルいボックスシャドウ」を用いたズルいボタンの作り方を解説します。 今回のズルいボタンに関しては、以前にズルいデザインテクニックのスライドで紹介したものから大幅に改定を加えて、より汎用性があり、さまざまな場面で使い勝手の良いものに刷新しました。 改良のポイントは次の通りです。 文字サイズの変更、またそれに併せてボタンサイズの変更に対応しています iタグを使ったアイコン用のWebフォントに対応しました。今回はfont-awesomeを使って解説しています フラットデザインの流行に伴うデザイン傾向に合わせ、立体感やグラデーションをより控えめに、かつpaddingを大きめに取った
すてきな入力フォームを作るために調べてみたこと - console.blog(self);
入力フォームって、基本的に忌み嫌われるもの。項目がたくさんあると、そっとタブを閉じたくなる。 旅行に行くときに、いろいろな旅行会社の入力フォームを見たけど、あまり使いやすくなかった。というか、見た瞬間に入力する気が失せてしまうような入力フォームが多かった。 入力フォームの多いページに関わることがあるので、入力フォームに関する資料をいろいろ読んだ。タブを閉じられないように、使いやすい入力フォームを考えたい。 入力フォームについて読んだもの 参考になったのはこれらの資料。どの資料も新しいものではないけど、参考になることはたくさんあった。 僕は英語が苦手で、そんな僕が読んだ感想を書くので間違いがあるかも。間違っていたら教えてください。詳細は原文を読んでください。 RIAC：RIAコンソーシアムユーザビリティガイドライン LukeW | Web Form Design Best Practices
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
私が考える安全なプログラムを書くために必要なこと
http://sap.github.io/openui5/
STORES.jpのつくりかた
iOS7でAppleが目指したのは「UIデザインの常識」の再発明である
GunosyのUIを徹底的に分析してリデザインしてみた