ネームプレート（名札）、店員さんが胸に付けてるアレです。
ひとことにネームプレートと言っても、サイズによって使用するクリップが違うのです。
例えばヨコ60mm x タテ30mmのプレート使用する場合、このなかでおすすめなのが画像にある一番左のクリップ。理由は、まんなかにある２つのクリップではネームプレートが下を向いてしまうので、名札としてはっきり相手に見えないのは格好が悪いですよね。格好がイイと思えるネームプレートとは、ビシッっとまっすぐ相手に向いてるものだと思います。

デザイン面でもこの小さな裏方さんを考慮します。それは、このクリップの大きさ。安全ピンやクリップの上部がプレートからはみ出さないか、そういったところも細かく考えながらプレート制作の方々と進めています。

なんでもいいから作る。そんな仕事はあってはならないことです！よねっ？

Googleのトップページにファスナー出現。そう、今日はファスナーを発明したGideon Sundbackの誕生日です。

ところでこのファスナー、英語でなんと言うか ご存知ですか？
「Zipper」ジッパーと言います。なんでも閉めたり開けたりする時に「ジジジッ」って聞こえるからだそうで・・・。

毎日、お世話になっているファスナーがあるのは今日という日があるからですね！

PlaxとはGitHub（https://github.com/about/）のヘッダーに使われているギミックのこと。
そこで今回、サンプルとしてPlaxを使ったデザインを簡単に作ってみた。
URL: http://www.p-willbe.com/sample_code/plax_jquery/

一般的な視点でパッと見た感じflashの動画のように見えるが、これはjQueryを使用しているのでiPhoneやiPadなどのflash未対応osでも表示させることができる。

使い方はwebデザイナーであればある程度推測できると思うが、jquery.jsを読み込んだ後、plax.jsを読み込む。
各画像にはcssでposition設定し、topとleftで配置する。その時に重要なのがz-indexだ。これで上下のレイヤー分けを行うので、事前に設計が必要となる。また、imgにはidまたはclass設定をplax用に設けておき、後述するplax.jsの設定コードでも必要となる。

plax.jsの設定はすべてjqueryコードで行う。

$(document).ready(function () {
$('#willbe-logo').plaxify({"xRange":40,"yRange":40})
$('#willbe-fishline').plaxify({"xRange":20,"yRange":20})
$('#willbe-fish').plaxify({"xRange":70,"yRange":70})
$('#willbe-epi').plaxify({"xRange":30,"yRange":100})
$('#willbe-hatena').plaxify({"xRange":65,"yRange":65})
$.plax.enable()
})

上記のようなコーディングルールで設定する。

マウスの動きに応じて動きを大きくさせたい場合は数字を大きくすると良いだろう。ただし設定値が同じだと、なんとなくぎこちない動きになってしまうので、ちょうどいい動きになるまで調整をしたほうがよさそうだ。
こういったちょこっと動くデザインは、アイデア次第でどこでも仕込めそうなので、webデザイナーの方々にはぜひチャレンジしてみてほしい。

http://www.google.co.jp/