YCAM(山口情報芸術センター)で開催されている「ミニマム インターフェース展」へ行ってきた。最近は、webでもユーザーインターフェースって言葉をよく聞くが、web屋以外の人がインターフェースをどういう風に捉えているのか興味があったので。

山口情報芸術センター外観

手と手をつなぐとき、その皮膚の接している面が「インターフェース」となる。

この説明には目からうろこが落ちた。インターフェースってコンピュータ用語かと思っていたが、こういう風に考えると急に身近なものに思えてくる。難しいことを小難しく説明する自称専門家が最近増えてるけど、難しいことを分かりやすく説明できる人のことを専門家って呼ぶんだと思う。

たとえば、webに詳しくない人から「HTMLってなに?」って聞かれたとき、
「Hyper Text Markup Languegeの略で、W3Cが策定した・・・」って説明する人よりも、
「ホームページが建物だとしたら、HTMLはその骨組みのことだよ」って説明できる人が間違いなく専門家だろう。

と、専門家とはなんぞやの話はさておき、本題の「ミニマム インターフェース展」。感想から言うと、刺激にあふれるものだった。福岡から3時間半かけて行く価値はある。ネタバレになるので、詳しい展示内容については触れないけど、LEADING EDGE DESIGNがデザインした会場ナビゲーションには思わず「すげー!!!」という声が出てしまった。

下の写真で、パンフレットを2枚並べて置いているが、これにも意味があるので是非現地に行って確かめてみてほしい。

ミニマム インターフェース展 パンフレット

今回はYCAMが主催するギャラリーツアーに参加したのだが、時間が許す方には是非とも参加することをお勧めしたい。YCAMの学芸員の方と一緒に、ああだこうだ言いながら展示作品を見て周るこのギャラリーツアー、作品の制作背景を聞けるだけでなく、学芸員さんの話もおもしろいので1時間という制限時間があっという間に過ぎてしまった。

「デザイナーとアーティストの違いは?」という問いに、対する答え

アーティストというのは問題を提起するひと、デザイナーは問題を解決するひとなのだと思う

この言葉、さすが専門家です。

ちなみにこの「ミニマム インターフェース展」、11月に始まり来年の2月8日まで開催されている。年明けからは面白そうなワークショップも開催されるようなので、時間が取れたらまた行ってみたい。なお、入場料はなんと無料! 一体どこから資金が出ているのか、それが一番知りたいかも。

(参考リンク)
ミニマム インターフェース
YCAM 山口情報芸術センター

先週の週末、天神に出たついでに行ってみた。
可士和プロデュースの「フタタ ザ フラッグ」に。

フタタ ザ フラッグ

福岡人にはおなじみ「紳士服のフタタ」がオープンさせたスーツの新業態店がこの「フタタ ザ フラッグ」。

コンセプトは「ジェネラル・スーツブランド」らしいけど、横文字ばっかで正直ピンと来ない。
翻訳すると「スーツ業界のユニクロを目指しました」みたいな感じかな。

スーツのお値段は1万円から。
今風なやつと、定番のやつの2種類から選べる。

フタタ ザ フラッグ

実際に1万円のスーツを見てみたけど、結構かっこよくて、この値段なら買ってもいいかも、と思わせるもの。確かに生地の質感とかは「それなり」な感じがあるけど、物足りないならもっと上質なものが「3万円」「5万円」「10万円」(じゅうまんえん!?)から選べるゆえ、ターゲットも広く取れる。

可士和的には『1000円スーツ』とか、『100万円スーツ』とか奇抜なことをして話題を作りたかったような気がするけど、なんか無難なとこに落ちついてしまった感ありあり。

しかし、しかしである。

今をときめく彼だけあって、新しい仕掛けを用意していた。
オープン記念として店の外に飾られていた花を、道行く人々に配っていたのだ。

フタタ ザ フラッグ

この花に群がるおばさま達がたくさんいたおかげで、店の前は人だかり。
その横を通るアキバ系の人々も興味津々の視線。

この花をうちに持って帰ったおばさまは、
「タダで花もらったバイ、天神で。なんかフタタが新しくなっとったー。」
って旦那、娘、息子に、言いふらすに違いない。

これこそ、バイラル・マーケティング。
うーん、発想がすばらしい。

ちょっと前にできたスーツセレクトではこけてしまった感があるけど、佐藤可士和の今後の仕事にはこれからも注目していきたいものだ。

(参考)
FUTATA THE FLAG
http://www.futata-the-flag.com/

天神に紳士服フタタ新業態旗艦店-佐藤可士和さんプロデュース
http://tenjin.keizai.biz/headline/1787/

紳士服のフタタ
http://www.futata.co.jp/

KONAKA THE FLAG
http://www.konaka-the-flag.com/

「DD_belatedPNG」を使う方法を追記しました。(2011.02.21)

IE6の透過png対策のまとめ。

ちょっと前に、とあるサイトを制作したんだけど、お客様の要望は「遊び心を加えたものを」というもの。
結果、遊んだ感じのデザインにはなったけど、HTML+CSSで組むには苦しくなった。しょうがないので、コーディングで透過pngを多用したけど、ご存知の通りIE6は透過pngに未対応...。この問題に丸一日はまってしまい、完全にIE6が嫌いになりました。

とは言うものの、しばらくはIE6もターゲットブラウザとして残さないといけないだろうから、透過pngの扱いについて今後のためにまとめておく。

IE6で透過pngを適用するには、IE独自拡張のfilterプロパティを使うことになるのだが、次のような方法が知られている。

JavaScriptを使う方法

minmax.jssmoothScroll.jsなどで知られるto-Rさん作成のalphafilter.jsを使う方法。

1)ヘッダでalphafilter.jsを読み込む。

<script type="text/javascript" defer="defer" src="alphafilter.js"></script>

2)png画像にclass="alphafilter"を適用する。

<img src="sample.png" class="alphafilter" />

以上、それだけ。
とは言いつつ、この方法、background-repeatに対応していないため、今回は使用を見送り。

(参考)
アルファ画像を扱うalphafilter.jsライブラリ[to-R]


JavaScriptを使う方法 2 (2011.02.21 追記)

background-repeatにも対応してるJSライブラリ「DD_belatedPNG」が便利。この記事を書いた後にリリースされたみたいで、最近は透過pngならこれを使わせてもらってます。

<!--[if IE 6]>
<script type="text/javascript" src="DD_belatedPNG.js"></script>
<script type="text/javascript">
	DD_belatedPNG.fix('.png-ie6');
</script>
<![endif]-->

使い方は、IE6で読み込むための条件分岐を行った後、透過させたい要素(ここでは、class='png-ie6')を指定するだけ。

詳しい使用方法や注意事項は、ITキヲスクさんのサイトが参考になります。

(参考)
DD_belatedPNG(作者のサイト)
ITキヲスク | IE6用透過png対応策、DD_belatedPNGの使用法と注意点

CSSを使う方法

IE独自拡張であるbehavior:expressionを使い、CSSのみで透過pngの問題を解決する方法。
「見た目を制御するのはCSS」というwebの原則に合っているので、この方法が一番正しいような気がする。 ただし、background-repeat、background-positionに対応してないのが玉にキズ。ということで、これも使用を見送った。
なお、以下のサイトがよくまとまってるので参考にどうぞ。

(参考)
CSS ファイルだけで IE 6 の背景に設定した png のアルファチャンネルを有効にする | ヨモツネット


htcファイルを使う方法

ニュージーランドのweb屋さんが作ったIE PNG Fix v2.0が有名。
DLファイルに含まれている「iepngfix.htc」と「iepngfix_tilebg.js」の組み合わせ技で、background-position・background-repeatの両方に対応!

今回のサイトでは、ペンキで塗った背景の繰り返しなどに、この「IE PNG Fix v2.0」を使わせてもらいました。
以下、使用方法をざっと解説。

1)ヘッダでiepngfix_tilebg.jsを読み込む。
(background-position・background-repeat対策)

<script type="text/javascript" src="iepngfix_tilebg.js"></script>

2)透過pngを適用したい箇所(たとえばclass="pngfix")に、CSSでiepngfix.htcを読み込む一行を記述。

.pngfix{
	background:url(hoge.png) 0 20px repeat-y;
	behavior:url(http://hogehoge.com/iepngfix.htc);
}

3)iepngfix.htcファイル内、20行目にあるblank.gifへのパスを書き換える。

IEPNGFix.blankImg = 'http://hogehoge.com/blank.gif';

これにて実装可能だけど、注意点が2つ。
・スタンドアローン版のIE6(MultipleIEなど)ではうまく透過が表現されないみたいです。
・behaviorでhtcファイルを読み込むときは絶対パスで書く。

この方法にたどりつくまでかなり時間がかかった...。IEヤダ

(参考)
IE PNG Fix - TwinHelix
(ページ中央「Download」内から「Test Area」へ移動、「IEPNGFix v2.0 Alpha」というリンクからDL可能)


【番外編】CSSで透明度を制御する方法

.transparent{
	filter:alpha(opacity=60);
	-moz-opacity:0.6;
	opacity:0.6;
}

1行目がIE用。2行目がFirefox・Netscape用。3行目がOpera・Safari用

手軽にできる透過処理。売り切れの商品だけ画像の透明度を下げたり、とか色々使えるかも?ということで覚え書き。

以上、透過pngのまとめでした。
IE6に苦しむ方のお役に立てれば幸いです。

(IE6の透過png対策 参考記事)
IE6にPNG画像のアルファチャンネルを効かせる方法のまとめ | Blog hamashun.com
IE-winで透過PNGを利用する方法 - Archiva
透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる - DesignWalker
[IE][CSS]IEで透過PNGを扱う為のまとめ - [ま]技術雑記
ユンサンの/융상의/YungSang's: 透過PNG と IE と IE7 まとめ

長年あたためていた、とんこつラーメンレビューサイト「ラーメンを斬る」をリリースした。

「ラーメンを斬る」のサイトキャプチャ

このサイト、元は僕が大学のときにやっていた、「とんこつラーメン食べ歩き」をつづる日記サイトだった。

文章自体は、今見ても割りに読めるものだけど、デザインはかなり残念な感じ。
「さすがに、これはまずいだろう」ということで、今まで公開するのをためらっていた。

それを今回、中身はそのままに表面だけリデザイン。
ま、最近流行りのリノベーションってやつです。

とんこつラーメンの情報だけは充実しているので、暇つぶしに読んでいただければ幸いです。
そのうち本として出版して印税生活を狙います。(←バカ)

「ラーメンを斬る」
http://ramen.komadoya.com/

仕事で、「エアロパス(=商品名)」⇒【検索!】みたいな画を作る機会があったんだけど、マウスが指になった画像を差し込むのに苦労したのでメモ書き。

検索ボックスのイメージ

ライフカードの「続きはwebで」CMとか、富士通FMVの「ウサタクの話(キャンペーン終了)」⇒【検索】とか、最近だと「きこりん品質」みたいな、サイト誘導広告がめっきり増殖中の今日この頃。

僕の元にもそんな仕事がやってきた。のだが、肝心の検索ボックスを作る段になって、クリックするときに現れる「指の形のマウスカーソル」が「PrintScreen」ボタンではキャプチャできないことに気付いて焦った。

指のアイコンを作る時間もなかったので、google画像検索の力を借りて、その場を切り抜けたんだけど、あとで調べたら解決方法が色々あるみたい。

以降、Windows XPの場合を例としてご紹介。

1)フリーソフト「マウスもキャプチャー」を使う。
※「マウスもキャプチャー」は公開が停止になったようです。(2011/01/26追記)
2)コントロールパネル > マウス > ポインタで表示されるアイコンをキャプチャする。
3)C:\WINDOWS\Cursorsに保存されているアイコンを使う。


まずは(1)の「マウスもキャプチャー」を使う方法。

このソフトを使ってキャプチャすれば、マウスカーソルまでキャプチャすることが可能になる。
軽量だし、常駐させるこもできるし、レジストリも汚さないしで非常に便利。
使用方法は、「マウスキャプチャ」を起動した状態で、通常通り「PrintScreenキー」でキャプチャするだけ。作者さま、すばらしいソフトをありがとうございます。


つづいて(2)のコントロールパネルからアイコンにアクセスする方法。

コントロールパネル内のマウスポインタ

どこかにマウスカーソルのアイコンが保存されてるとは思っていたが、コントロールパネルか...。
[ スタート > コントロールパネル > マウス > ポインタ ] にマウス用のアイコンがごそっと。そいつらをキャプチャしたものを下に貼り付けたので、単体でアイコンを使いたいときはこちらをご利用ください。

マウスポインタ画像


で、最後は(3)のWindowsフォルダ。

『.cur』っていう見慣れない拡張子でマウスカーソル用のアイコンが大量に。
[ C:\WINDOWS\Cursors ] フォルダに今すぐアクセス!

マウスカーソルが格納されているフォルダ

ちなみにMacだと、OS標準の「Grab(グラブ)」というキャプチャソフトの設定を変更すれば、マウスカーソルまでキャプチャ可能みたいです。

がんばれWindows...