Lightboxのようなモーダルで画像を表示するのではなく、画像の表示領域を直接拡大表示するユーザインタフェース。 モバイル環境ではOS標準のピンチイン・アウトで拡大縮小ができるためPCサイトのみの表示。 なにか汎用ライブラリを用いてるのかと思ったが、…

ローチケのアイテム認証画面のメモ。

Trello のパスワードリセット通知画面が遊び心があって良い。特攻野郎Aチームばりの心強い味方が来てくれる感がある。 引用元：https://trello.com/forgot

動作環境などをゆるく伝える表現例として。絵文字にしても良さそう。 引用元：https://wordpress.org/plugins/advanced-custom-fields/

イギリスのEU離脱余波と円高のおかげで保有株の値がぜんぜん上がらないため、腹いせに前から欲しかったPhpStormを購入しました。 購入時に支払い方法をクレカかPayPalか選択できるのですが、クレカの情報入力用インタフェースが良かったのでメモ。 引用元：h…

Sublime Text 2 で別々のディレクトリにある同名のファイルを開くと上記の画像にあるように「ファイル名 ー ディレクトリ名」と表示してくれて地味に便利。

pixivのユーザー登録完了画面。 ドメインがGoogleの場合、[今すぐGmailに移動]というボタンが表示され、このボタンをクリックするとGmailのログイン画面に飛ぶ。 あくまで推測になるが、Webメールとしてサービスを提供している他のサービス（Yahoo!メールやO…

はじめに #1のノートがまとめきれていませんが、2014年の8月22日〜23日にかけてAIITで行われた人間中心デザインの私的メモを以下にまとめます。 講義の前半はがっつりとした座学で、理解するにはデザインの歴史や意味論、記号論に関する前提知識が問われる部…

すげー細かい事ですが良いサンプルを見つけたので戒めのためにメモ。 問題 以下のように「ユーザID（メールアドレス）」と書かれていた場合、果たしてユーザーは何を入力するのが正解でしょうか？ 答え このサンプルの場合、「メールアドレス」が正解です。…

概要 これは産業技術大学院大学（AIIT）で絶賛開講中の履修証明プログラム「人間中心デザイン」の私的まとめです。※多分に主観が含まれてます。 2014年8月9日（土）より講義が始まっており、初回からアクセル全開の内容だったので記憶が鮮明な内に早いとこま…

※1ヶ月くらい前に書こうと思ってずっと放置してました。 前々から気になってましたが、はてなブックマークのPC版トップページのナビゲーションの増加が止まりません。一列に並ばせるメニュー数としては明らかに多すぎる気がするのですが、インターネット界の…

アプリ版「Yahoo!乗換案内」の現在時刻の大まかな現在地表示のナビゲーションが良い。あくまでも目安だけど、初めて利用する路線などで正しい方向に進めているか確認する場合に十分効果的。

見出しにページ内リンクが割り振られており、クリックするとロケーションバーが「http://jquery.com/download/#jquery-1-x」といった感じに遷移するため、ページ内リンクのURLを簡単に取得する事が出来るようになっている。 ちょっとした工夫だが、ページの…

[View as single page]をクリックするとページングで分割されている各ページ内容が1ページ内に表示される。 ページング自体、UIとしては微妙な感じですが、自動読み込み型だとユーザーの意図に反してコンテンツが勝手に読み込まれる場合があるため、ユーザー…

※まるで重箱の隅をつっつくような話ですが気になったので書きます。 Amazonでは注文を確定する前に事前に登録した配送先を選択出来る機能があるのですがこれがちょっと分かりにくい。 どう分かりにくいかというと具体的に画面を見てもらった方が早いと思うの…

UI Cloud http://ui-cloud.com/ 今更知ったのでメモ。 国内のサイトだと主にWebサイトの部品を中心とした「ブブンデザインアーカイブ」さん等がありますが、それと同様にWebデザインやモバイルアプリのUIを紹介しているサイトです。 こんな感じでPSD形式のUI…