はてなブックマーク

Webサイトを作っていて、動画ではファイルが重たすぎるけど、 Gifアニメーションではきれいに見せることができない…といったときに、 最近良く見かける手法として、一枚の画像をコマ送りすることで 動画のように見せる、「スプライトアニメーション」という方法があります。 [参考] スプライトアニメーションを使った最近のウェブデザイントレンド | つみきブログ 画像自体を一枚の縦長／横長の画像にして、 JSとcssにより背景の位置をずらしていくことで、 読み込み速度を心配することもなく、滑らかに、 動画よりもはるかに軽い容量で見せることが可能となる 非常に便利な方法なのですが、一番大変なのが一枚の画像にする、という手順かと思います。 そこで、Photoshopスクリプトを作成して、 エンターキーを叩くだけで一枚にずらっと並んだらステキだなと思い、 作成してみました。 下準備 動画ファイルをコマ送り

今年9月から新宿私塾朗文堂に通い始めたこともあり、 日々の仕事の中でWeb上でもっときれいに文字を見せたい、 もっと読みやすくしたい、と思うことが多くなりました。 そこで、文字を少しでもきれいに見せたいときに役立ちそうな font-smoothingの備忘録兼紹介記事です。 概要 最近Google+で「レフ女」という活動をしているのですが、 Google+は全体的にスッキリとした印象があり、 文字がきれいだなと思って調べていた所発見したのが「-webkit-font-smoothing」です。 cssで設定できるテキストレンダリング方式で、 下記3つの値を持っています。 -webkit-font-smoothing: none; -webkit-font-smoothing: antialiased; -webkit-font-smoothing: subpixel-antialiased

先週から毎週THE GUILDにて開催されることとなった、 社員研修的な勉強会のレポートです。 第一回目のテーマは「乱数」です。 わたしは勉強会に1時間くらいしか参加できなかったのですが、 その中で「星の瞬き」というテーマでProcessingを用いたアニメーションスケッチを作成したので、それができるまでの過程を記録も兼ねてまとめます。 前置き これまでにもjsで何度かMath.random()を使っていたので 0から1の間のランダムな数を返してくれる関数 という認識はありましたが、 ランダムに要素の色を変える ランダムにテキストをピックアップする など非常に直接的「ランダム」な使い方しかしていませんでした。 勉強会の内容 fladdictさんのブログにまとめてあるレジュメをいただいて、 ピザをつまみながら、まず「乱数」の概要について教わりました。 その後は各自自分のレベルに合ったものを演

多くの人にとって、Webサイトを見ることがどんどん日常に馴染んできている中で、 他のサイトとの差別化や、ユーザーへの配慮に必要不可欠となってくるのが マイクロインタラクションです。 この記事では、細部にこだわったサイトをつくるために 簡単に導入できるWebサービスやjQueryプラグインを紹介します。 マイクロインタラクションとは？ そもそも、マイクロインタラクションとは何かと言うと、 「製品の最小単位のインタラクション」として定義されています。 （マイクロインタラクション ―UI/UXデザインの神が宿る細部 より） 米国のデザイナー／建築家であるチャールズ・イームズの名言に、 「細部は単なる細部にとどまりません。細部こそが製品を作り上げるのです」 とあるように、今後ユーザーに「なんとなく使いやすい」「なんとなく、つい見てしまう」 といった体験をしてもらえるようなWebサイトやアプリをつく