なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】UXUIDesignUIデザイン画面設計 1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。
ページャNight 1ページ目という勉強会やりました - その手の平は尻もつかめるさ
そういえば昨日「ピクシブ株式会社」って言おうとして3回くらい噛んだ気がする— プリントゴッコ (@moznion) 2014, 7月 5 ページャNight，僕が当初想定していたよりも1000倍位有益な会になって本当に嬉しかったです．あとで記事等書きます．— プリントゴッコ (@moznion) 2014, 7月 5 録画したustの様子はこちら http://www.ustream.tv/recorded/49544381 ページャNight <[1]> on Zusaarというイベントを開催致しました． 実に冗談みたいな理由から興ったイベントでしたが，ページャ (ページネーション) というWebサービスの1コンポーネントに焦点を絞った非常に濃厚かつ興味深いトークの数々を聞くことができて，非常に良い勉強会になったと思います． 以下，発表の一覧です． 15分トーク @mizchiさん お前
ssig33.com - ネイティブアプリ並のウェブアプリを云々
なんか最近そういうの流行ってるようですね。僕も考えを書いてアクセス数を稼ぎます。 ページ遷移を過度に抑えようとするな 下手に AJAX 使いまくるぐらいならページ遷移したほうがマシであることが多いです。世の中にはページ遷移を抑えようとして酷いことになってる JS を沢山見ます。よく考えろ。 ローカルストレージを活用しない localStorage に画像とか放りこむの異常に重くなるのでオススメしません。認証持たないサービスで設定値保存するのに使うとかに留めた方がよいと思う。 非同期な API 絶賛してて気に食わない感じはしますがこの記事を一読することをお勧めします。 localStorage は小さなデータをいくつか入れる分には十分に高速です。大きなデータを入れると十分に低速です。 scroll イベントに対してリスナーを置かない scroll イベントの監視は実際最悪のアイディアです。こ
ニコニコ超会議2012『超エンジニアミーティング』で喋った時のスライドを公開します - ぼくはまちちゃん！
こんにちはこんにちは！！ ニコニコ超会議2012 『超エンジニアミーティング』で喋った時のスライドを公開します！ 『ふつうのformをつかいたい』 - はまちや２ - ニコニコ超会議2012 難しい話は苦手なので、普通のお話です。 あとこのスライドはIEでは動きません。他のブラウザで見てね。 (追記) IEでも見られるようになりました。たぶん。 超エンジニアミーティング全体の内容については、 『ニコニコ超会議の「超エンジニアミーティング」 を全部取材してみた』でまとめてくれています。 ちなみにぼくは自分が喋ったあとは、ずーっと隣の『ニコニコ学会β』の発表を見てました。 ロボット作ったりとかすごいかっこいい。 (関連記事) その言葉は誰のためのもの？ [この日記のブックマークコメントを見る/書く ]
Metro UIは「UXアプリ養成ギプス」 : 小野和俊のブログ
昨日、今日とWindows Developer Days(WDD)に参加してきた。二日間セッションに参加して感じたのは、「Metro UIは『UXアプリ養成ギプス』だ」ということである。 デザインの原則がある。 例えば原則のひとつに、”Content before Chrome”というものがある。これは、「コンテンツを主役にし、ツールバーやメニュー等のコンテンツへの没入を妨げるものは最小限にする」というものだ。 こうしたデザインの原則やガイドラインがきちんと決められている、ということは重要なことではあるが、それ自体はさほど驚くべきことでもない。先日ブログに書いたように、最近の主要なプラットフォームには、大抵UX/UIのデザインガイドラインが定められているからだ。 では私が何に驚いたかというと、Metro UIではこのデザインガイドラインが「半強制」されていることだ。 UX/UIに意識の高い
githubのアレ(history.replaceStateとかhistory.pushStateの話) - 愛と勇気と缶ビール
会社で下の記事についてリマインドしてもらって、なんとなく気になっていたことを調べたメモ。 http://webtech-walker.com/archive/2010/12/06160539.html 記事を読んで、history.replaceState(null, "title", "/new.html") とかやると遷移なしでページのcontentも勝手に置き換わるのかなー、だったらあのアニメーションはどこで発火してんだ？とか考えていたがそもそもreplaceStateの動作について勘違いしていた。 要は、次のようなhtml書いてボタンをクリックしても、historyの先頭が置き換わるだけでページ自体には何も起こらない。(ただしlocation.hrefは置き換わっており、reloadすると/replace.htmlにいく) <!DOCTYPE HTML> <html lang="e
GIMPが提案するソーシャルUI
着実に機能を増やし続けているオープンソースの Photoshop 代替プログラム GIMP。他アプリケーションとの連携を考えると Adobe 製品で揃えた方が有利ですが、機能だけみると Photoshop のライバルと見なしても良いくらい充実しています。GIMPは Photoshop と同様、プラグインやアクションが共有されているので、ある程度の機能のカスタマイズが可能です。 高機能というのは嬉しいですが、それ故に使いたい機能がどこにあるか分からなかったり、どうやって使えば良いか調べるのも面倒だったりします。日本でも書籍は販売されていますし、日本語Wikiもありますが、手間がかかることから結局慣れたソフトウェアに戻ってしまうということもあると思います。 そんな課題を解決するかもしれない機能が AdaptableGIMP です。細かい説明は後にして、まずはビデオを見てください。 達成したいタ
プログラマのためのUXチートシート — ありえるえりあ
はじめに http://msdn.microsoft.com/ja-jp/library/aa511258.aspx の 「Windows ユーザー エクスペリエンス ガイドライン」 「ガイドライン」 主に「コントロール」 の抜粋です。 以下の基準で抜粋しました Web UIに応用可能 実用的かつ具体的 自明ではない プライマリUIを目立たせる プライマリ UI 要素を強調するには、以下に従います。 - プライマリ UI 要素は、視線の通り道に配置します。 - タスクを開始する UI 要素は、左上隅または中央上に配置します。 - コミット ボタンは、右下隅に配置します。 - 残りのプライマリ UI は、中央に配置します。 - コマンド ボタン、コマンド リンク、アイコンなど、注意を引き付けるコントロールを使用します。 - 大きなテキストや太字のテキストなどの目立つテキストを使用します。 ユ
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 と呼
どこまでも歩いていける3Dコントローラー「Virtuasphere」
各社から3D表示対応のディスプレイが多数発売されたり、ゲームコントローラーもモーション検出のものが出そろうなど、本格的に立体映像環境が整ってきています。少し前まで非現実的だった「バーチャルリアリティ」という言葉がにわかに現実味を帯びてきたわけですが、問題は空間の広さ。どんなにリアルなバーチャル環境を用意しても、移動できる距離は有限なので、どうにもなりません。 そこでアメリカの企業が「3Dルームランナー」と言えなくもないモーションコントローラーを開発。これで鬼軍曹に罵倒されながら10km走るゲームがリリースされても難なく遊ぶことができるようになります。 詳細は以下。 この3Dコントローラー「Virtuasphere（ヴァーチャスフィア）」の原理は鋼鉄の台座の上に直径約3mの中空のボールを載せて回転を検出するというもの。これを使うことで仮想空間の中を自由に歩き回ることが可能になります。 実際に
スマートフォン最適化を実施する際に最低限抑えておきたいこと : LINE Corporation ディレクターブログ
こんにちは。livedoor グルメを担当している澤田です。 livedoor グルメでは3月に、iPhone版Safariブラウザでの表示最適化に対応いたしました。これは、iPhone版Safariブラウザでlivedoor グルメを閲覧した際に、PC版の画面ではなく、iPhoneの表示サイズや使い方に合わせてカスタマイズされた画面を表示させるものです。 最適化されてないサイトの場合は、基本的にPCと同じ画面がiPhoneに表示されるので、表示される画面が小さく、大量の画像データなどを読み込むため表示に時間もかかります。 この「最適化」の作業を行うことで、iPhoneユーザーにとって必要な機能を、より使い易いナビゲーションで提供できるようになります。 今回はその画面開発時に、ユーザーの使い勝手に留意して設計した、いくつかのポイントについてご紹介します。iPhoneをお持ちの方は、ぜひSa
iPhone向けのWebサービスを開発する時に気をつけた事 - そうだ？Blogを書こう？
LivedoorReaderPinChecker http://ldrpin.appspot.com/ すっかり遅くなりましたが、LivedoorReaderPinCheckerの開発話の続きです。 LivedoorPinCheckerの開発話 - そうだ？Blogを書こう？ 開発でも一番時間をかけた、UI関係の話を書いていきたいと思います。 ドッグフーディング まず最初に、UI関係で一番強く感じるのは、 ドッグフーディングは本当に大切だという事です。 ようは、ある程度自分で使ってみないとわからんという事です。 今回は自分が使うために作っていたので、特に意識してドッグフーディングをした訳ではありませんが、 形になったら使って、気になった所のチケットを発行して、修正して、と繰り返しているうちに、 ドッグフーディングの威力に気づいた次第です。 これを通して、自分が本当に便利だと思えるサービスを
クールな「脳波制御式ヘッドセット」 | WIRED VISION
前の記事 月の北極に大量の氷を確認：その検知方法は 「警察に中指サイン」は憲法で保障？：米国で裁判 次の記事 クールな「脳波制御式ヘッドセット」 2010年3月 4日 IT コメント： トラックバック (0) フィードIT Charlie Sorrel 米Emotiv社の『EPOC』ヘッドセットは、ゲーム用機器として、さらに、身体障害者向け補助機器として市販されている。 Emotiv EPOCは、脳の活動を監視するための14個の脳波測定(EEG)用電極を搭載し、さらに、ジャイロスコープで空間内での頭の位置がわかるようになっている。 Emotiv EPOCは、顔面運動に関連する脳の活動を読み取り、それをもとに使用者の感情や意図を推測する。それをソフトウェアで翻訳し、ゲーム、フォトビューワ、オンスクリーン・キーボードなど、様々なアプリケーションを制御する仕組みだ。 あらゆるアプリケーションやマ
jQuery でページスクロール - daily dayflower
jQuery 1.2 以降だと scrollTop（と scrollLeft）という疑似スタイルが利用できるようになったので，jQuery UI を使わずとも，jQuery Core 本体だけでページ内スクロールができるようになりました。 たとえば， <html> <body> <p> blah, blah, blah, ... blah, blah, blah, ... </p> <p> <a href="#" id="link_to_top">ページの先頭へ</a> </p> </body> </html> このような HTML で「ページの先頭へ」というリンクをクリックしたときに，スムーズにスクロールしたいのなら， $(function () { if (! $.browser.safari) { $('#link_to_top').click(function () { $(thi
Twitterのようにスマートな通知バーを一瞬で実装できるjQueryプラグイン「jQuery Notify bar」:phpspot開発日誌
Twitterのようにスマートな通知バーを一瞬で実装できるjQueryプラグイン「jQuery Notify bar」 2010年01月08日- jQuery 'Notify bar' Twitterのようにスマートな通知バーを一瞬で実装できるjQueryプラグイン「jQuery Notify bar」。 ページの上部にアニメーションされながら表示されるあの通知バーです。 時間がたつとアニメーションしながらスマートに消えてくれます。ページデザインがどんなものであろうと影響を受けません。 色を変えて、エラーモードにしてみたり、成功モードにしてみたり自由にできます。 実装は超簡単で、次のように初期化するだけです。 $(function () { $.notifyBar({ html: "メッセージ", delay: 2000, // 表示するミリ秒数 animationSpeed: "norm
キーボードショートカットを作る(Java) - voidy21の日記
こんな感じのやつ キーボードのjかkで上下に移動させるやつを実装する 何も考えずにKeyListenerを使ってやってみる import java.awt.event.KeyEvent; import java.awt.event.KeyListener; import javax.swing.JFrame; import javax.swing.JTree; import javax.swing.tree.DefaultMutableTreeNode; import javax.swing.tree.MutableTreeNode; @SuppressWarnings( "serial" ) public class TreeSample extends JFrame implements KeyListener { public TreeSample(MutableTreeNode t
iPhoneアプリのツールバー部分に使えそうなアイコン色々:phpspot開発日誌
知人のアプリ作者の人に、アイコンを探すのに苦労したという話を聞いたので、iPhoneアプリのツールバー部分に使えそうなアイコンを色々まとめてみました。 全部足すと545種もありますので、ツールバーアイコンには困らないかもしれません。 iPhoneアプリケーション作者の方や、今後作ろうと思っている場合に参考にどうぞ。 30 Free Vector Icons | Dezinerfolio 綺麗にまとまったデザインで種類も次のような３０種類がまとまってます Glyphish – Great icons for great iPhone applications 130種類の商用利用可能な汎用アイコンセット。 Free iphone toolbar icons こちらも、商用利用可能な160種類の汎用アイコンセット app-bits : iPhone Toolbar Icon Set : iPh
Engadget | Technology News & Reviews
Doctor Who is back, louder and more chaotic than before
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フォントの選び方・使い方
買い物山脈 Kinectがゴトウ家にもたらした大きな変化とは