[B! ui] thraktのブックマーク

なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita

なぜエンジニアが作る画面はダサいのか…?﹁理由﹂と﹁対策﹂を徹底解説︻エンジニア向け画面デザイン講座︼UX UIDesignUIデザイン画面設計 1.はじめにエンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。今回は﹁それ﹂をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみようまず、こんなアプリを考えてみてください。フィットネストレーナーが使うアプリトレーニングルームでお客様とお話しながら使う端末はタブレットそして会員の個人情報確認前回までのトレーニング状況の確認次回の予約受付といったことをします。使える情報としては、こんな感じです。あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。

thrakt 2021/12/10

design
ui

リンク

フォントの選び方・使い方

京大マイコンクラブ(KMC) 春合宿2017 KMC Website: https://www.kmc.gr.jp/index.html Read less

thrakt 2017/04/03

リンク

ページャ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さんお前

thrakt 2014/07/07

リンク

ssig33.com - ネイティブアプリ並のウェブアプリを云々

なんか最近そういうの流行ってるようですね。僕も考えを書いてアクセス数を稼ぎます。ページ遷移を過度に抑えようとするな下手に AJAX 使いまくるぐらいならページ遷移したほうがマシであることが多いです。世の中にはページ遷移を抑えようとして酷いことになってるJSを沢山見ます。よく考えろ。ローカルストレージを活用しない localStorage に画像とか放りこむの異常に重くなるのでオススメしません。認証持たないサービスで設定値保存するのに使うとかに留めた方がよいと思う。非同期な API 絶賛してて気に食わない感じはしますがこの記事を一読することをお勧めします。 localStorage は小さなデータをいくつか入れる分には十分に高速です。大きなデータを入れると十分に低速です。 scroll イベントに対してリスナーを置かない scroll イベントの監視は実際最悪のアイディアです。こ

thrakt 2012/09/05

はい

リンク

ニコニコ超会議2012『超エンジニアミーティング』で喋った時のスライドを公開します - ぼくはまちちゃん！

こんにちはこんにちは！！ニコニコ超会議2012 ﹃超エンジニアミーティング﹄で喋った時のスライドを公開します！﹃ふつうのformをつかいたい﹄ - はまちや２ - ニコニコ超会議2012 難しい話は苦手なので、普通のお話です。あとこのスライドはIEでは動きません。他のブラウザで見てね。 (追記) IEでも見られるようになりました。たぶん。超エンジニアミーティング全体の内容については、﹃ニコニコ超会議の﹁超エンジニアミーティング﹂を全部取材してみた﹄でまとめてくれています。ちなみにぼくは自分が喋ったあとは、ずーっと隣の﹃ニコニコ学会β﹄の発表を見てました。ロボット作ったりとかすごいかっこいい。 (関連記事) その言葉は誰のためのもの？ [この日記のブックマークコメントを見る/書く ]

thrakt 2012/05/02

ui
web

リンク

Metro UIは「UXアプリ養成ギプス」 : 小野和俊のブログ

昨日、今日とWindows Developer Days(WDD)に参加してきた。二日間セッションに参加して感じたのは、﹁Metro UIは﹃UXアプリ養成ギプス﹄だ﹂ということである。デザインの原則がある。例えば原則のひとつに、”Content before Chrome”というものがある。これは、﹁コンテンツを主役にし、ツールバーやメニュー等のコンテンツへの没入を妨げるものは最小限にする﹂というものだ。こうしたデザインの原則やガイドラインがきちんと決められている、ということは重要なことではあるが、それ自体はさほど驚くべきことでもない。先日ブログに書いたように、最近の主要なプラットフォームには、大抵UX/UIのデザインガイドラインが定められているからだ。では私が何に驚いたかというと、Metro UIではこのデザインガイドラインが﹁半強制﹂されていることだ。 UX/UIに意識の高い

thrakt 2012/04/26

リンク

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

thrakt 2011/11/15

リンク

買い物山脈 Kinectがゴトウ家にもたらした大きな変化とは

thrakt 2011/10/19

game
ui

リンク

GIMPが提案するソーシャルUI

着実に機能を増やし続けているオープンソースの Photoshop 代替プログラム GIMP。他アプリケーションとの連携を考えると Adobe 製品で揃えた方が有利ですが、機能だけみると Photoshop のライバルと見なしても良いくらい充実しています。GIMPは Photoshop と同様、プラグインやアクションが共有されているので、ある程度の機能のカスタマイズが可能です。高機能というのは嬉しいですが、それ故に使いたい機能がどこにあるか分からなかったり、どうやって使えば良いか調べるのも面倒だったりします。日本でも書籍は販売されていますし、日本語Wikiもありますが、手間がかかることから結局慣れたソフトウェアに戻ってしまうということもあると思います。そんな課題を解決するかもしれない機能が Adapta bleGIMP です。細かい説明は後にして、まずはビデオを見てください。達成したいタ

thrakt 2011/05/31

面白い。画像加工のチュートリアルってすごい数が多いしかなりいいんじゃないか

ui
design

リンク

プログラマのためのUXチートシート — ありえるえりあ

はじめに http://msdn.microsoft.com/ja-jp/library/aa511258.aspx の﹁Windows ユーザーエクスペリエンスガイドライン﹂﹁ガイドライン﹂主に﹁コントロール﹂の抜粋です。以下の基準で抜粋しました Web UIに応用可能実用的かつ具体的自明ではないプライマリUIを目立たせるプライマリ UI要素を強調するには、以下に従います。 - プライマリ UI要素は、視線の通り道に配置します。 - タスクを開始する UI要素は、左上隅または中央上に配置します。 - コミットボタンは、右下隅に配置します。 - 残りのプライマリ UIは、中央に配置します。 - コマンドボタン、コマンドリンク、アイコンなど、注意を引き付けるコントロールを使用します。 - 大きなテキストや太字のテキストなどの目立つテキストを使用します。ユ

thrakt 2010/11/19

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 と呼

thrakt 2010/10/22

リンク

どこまでも歩いていける3Dコントローラー「Virtuasphere」

各社から3D表示対応のディスプレイが多数発売されたり、ゲームコントローラーもモーション検出のものが出そろうなど、本格的に立体映像環境が整ってきています。少し前まで非現実的だった「バーチャルリアリティ」という言葉がにわかに現実味を帯びてきたわけですが、問題は空間の広さ。どんなにリアルなバーチャル環境を用意しても、移動できる距離は有限なので、どうにもなりません。そこでアメリカの企業が「3Dルームランナー」と言えなくもないモーションコントローラーを開発。これで鬼軍曹に罵倒されながら10km走るゲームがリリースされても難なく遊ぶことができるようになります。詳細は以下。この3Dコントローラー「Virtuasphere（ヴァーチャスフィア）」の原理は鋼鉄の台座の上に直径約3mの中空のボールを載せて回転を検出するというもの。これを使うことで仮想空間の中を自由に歩き回ることが可能になります。実際に

thrakt 2010/07/01

gigazine
ui

リンク

スマートフォン最適化を実施する際に最低限抑えておきたいこと : LINE Corporation ディレクターブログ

こんにちは。livedoor グルメを担当している澤田です。 livedoor グルメでは3月に、iPhone版Safariブラウザでの表示最適化に対応いたしました。これは、iPhone版Safariブラウザでlivedoor グルメを閲覧した際に、PC版の画面ではなく、iPhoneの表示サイズや使い方に合わせてカスタマイズされた画面を表示させるものです。最適化されてないサイトの場合は、基本的にPCと同じ画面がiPhoneに表示されるので、表示される画面が小さく、大量の画像データなどを読み込むため表示に時間もかかります。この﹁最適化﹂の作業を行うことで、iPhoneユーザーにとって必要な機能を、より使い易いナビゲーションで提供できるようになります。今回はその画面開発時に、ユーザーの使い勝手に留意して設計した、いくつかのポイントについてご紹介します。iPhoneをお持ちの方は、ぜひSa

thrakt 2010/06/10

リンク

iPhone向けのWebサービスを開発する時に気をつけた事 - そうだ？Blogを書こう？

LivedoorReaderPinChecker http://ldrpin.appspot.com/ すっかり遅くなりましたが、LivedoorReaderPinCheckerの開発話の続きです。 LivedoorPinCheckerの開発話 - そうだ？Blogを書こう？開発でも一番時間をかけた、UI関係の話を書いていきたいと思います。ドッグフーディングまず最初に、UI関係で一番強く感じるのは、ドッグフーディングは本当に大切だという事です。ようは、ある程度自分で使ってみないとわからんという事です。今回は自分が使うために作っていたので、特に意識してドッグフーディングをした訳ではありませんが、形になったら使って、気になった所のチケットを発行して、修正して、と繰り返しているうちに、ドッグフーディングの威力に気づいた次第です。これを通して、自分が本当に便利だと思えるサービスを

thrakt 2010/05/28

リンク

クールな「脳波制御式ヘッドセット」 | WIRED VISION

前の記事　月の北極に大量の氷を確認‥その検知方法は﹁警察に中指サイン﹂は憲法で保障？‥米国で裁判　次の記事クールな﹁脳波制御式ヘッドセット﹂ 2010年3月4日 ITコメント‥ トラックバック (0) フィードIT Charlie Sorrel 米Emotiv社の﹃EPOC﹄ヘッドセットは、ゲーム用機器として、さらに、身体障害者向け補助機器として市販されている。 Emotiv EPOCは、脳の活動を監視するための14個の脳波測定(EEG)用電極を搭載し、さらに、ジャイロスコープで空間内での頭の位置がわかるようになっている。 Emotiv EPOCは、顔面運動に関連する脳の活動を読み取り、それをもとに使用者の感情や意図を推測する。それをソフトウェアで翻訳し、ゲーム、フォトビューワ、オンスクリーン・キーボードなど、様々なアプリケーションを制御する仕組みだ。あらゆるアプリケーションやマ

thrakt 2010/03/05

gadget
ui

リンク

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

thrakt 2010/01/21

リンク

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

thrakt 2010/01/10

リンク

キーボードショートカットを作る(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

thrakt 2009/12/29

リンク

iPhoneアプリのツールバー部分に使えそうなアイコン色々:phpspot開発日誌

知人のアプリ作者の人に、アイコンを探すのに苦労したという話を聞いたので、iPhoneアプリのツールバー部分に使えそうなアイコンを色々まとめてみました。全部足すと545種もありますので、ツールバーアイコンには困らないかもしれません。 iPhoneアプリケーション作者の方や、今後作ろうと思っている場合に参考にどうぞ。 30 Free Vector Icons | Dezinerfolio 綺麗にまとまったデザインで種類も次のような30種類がまとまってます Glyphish – Great icons for great iPhone applications 130種類の商用利用可能な汎用アイコンセット。 Free iphone toolbar icons こちらも、商用利用可能な160種類の汎用アイコンセット app-bits : iPhone Toolbar Icon Set : iPh

thrakt 2009/11/14

リンク