fkagamiのブックマーク / 2014年8月8日

画像を使わずCSSだけでアニメーションするチェックボックスを作ってみるTips : アートあいくる

DEMO こんな感じにアニメーションしてくれるチェックボックスを作ってみます。 IE9以上で動作。スマホ用として使っていけるはず…。実装手順 input要素を非表示に擬似要素とCSS3を使ってチェックボックスのデザインを作る擬似要素と擬似セレクタとCSS3を使ってアニメーションさせる HTML <label> <input type="checkbox"> <span><i></i>利用規約に同意する</span> </label> 必要に応じてクラス名をつけて下さい。今回はそのまま要素名でスタイルを指定していきます。順番に見ていきましょう。 1. input要素を非表示に label { cursor: pointer; display: inline-block; height: 44px; position: relative; } input { display: none

fkagami 2014/08/08

chackbox css animation

リンク

UI変更が不評な時に役立つ原因の切り分け方

UI変更をした時のことについていろいろと記事を見かけたので書いてみました。ユーザー側と制作側、それぞれの原因の切り分け方や分析、その対応に役立つと思います。 UI設計の際考慮する4つの要因例えば、UI変更により欲しい情報が見つけにくくなった、ということが起こったとします。この場合、ユーザーはその原因をUIやデザインに求めがちですし、制作者はその原因をユーザーに求めがちです。アプリのレビュー欄が荒れたり、ブログなどで制作側の主張があったり、というのも最近よく見かけます。このような課題達成の成功や失敗（この場合はユーザーが欲しい情報を見つけられるかどうか）に関して、ワイナー（Weiner, 1974）は、4つの原因があるとしました。「能力」「努力」「課題の難易度」「運」です。「能力」と「努力」はユーザー側の要因、「課題の難易度」は制作側の要因、「運」はそれ以外の要因です。上記の場合