はてなブックマーク

先日読み終えたオライリーから出版されている"マイクロインタラクション"の感想です。 マイクロインタラクション ―UI/UXデザインの神が宿る細部 作者: Dan Saffer,武舎広幸,武舎るみ出版社/メーカー: オライリージャパン発売日: 2014/03/19メディア: 単行本（ソフトカバー）この商品を含むブログ (1件) を見る 概要 本書はあるタスクを行うため"だけ"の比較的小さなUIを議論した本です。 著者は、これをマイクロインタラクションと呼び、その例として以下の様なもの挙げています 登録画面などの入力フォーム ブラウザのページ内検索 プログレスバーの表示 これらの例の特徴としては、数回の操作で完結するインタラクションである点、全体への影響が少ない点などがあります。 本文中では、スマートフォンのアラームアプリやTwitterなどもマイクロインタラクションの例として挙げられています

UXという言葉は非常に誤解されているように感じます。これはUX〇〇を単にUXと言ってしまう軽率な省略によって引き起こされているのではないかと思っています。この省略のために、UXというのは結局なんなのか？という疑問を引き起こしているように感じています。この文章は、そういう疑問を持っていた一年前くらいに自分に対して説明を行うような気持ちで書きました。ただし、私は仕事としてUXを扱っておらず、自分の理解を整理するためにここで文章にしていることを留意ください。 UXとは そもそも、UXというのは"ユーザが製品に触れている際に経験する知覚や感情"であり"現実世界に起こっている事象"です。ここで重要なのは、UXは単に事象でありその他の意味は含まれていないということです。直感的といった曖昧な言葉がUXの形容詞として用いられていることが多いため、使いやすくなければUXでないような印象があるかもしれませんが

CSSを使って以下の図のようにDIV要素を下揃えにする方法を示します。 DIV要素を入れ子にして、親に対してposition: relative;を指定し、子に対してposition: absolute;を指定します。すると、子要素は親要素を基準として配置されます。これを使って、親要素からの相対的な位置に子要素を配置できます。これを利用すると、以下の図のようにサムネイルにラベルを重ねることができます。 基本 見本 HTML wrapperにサムネイルを構成するものを挿入します。 <div class="wrapper"> <div class="thumbnail"></div> <div class="label">たい焼き</div> </div> CSS 親要素にposition: relative;を子要素にposition: absolute;を指定します。 サムネイル画像はba