去年もエントリーした、「気に入っているサイト」シリーズの2009年版。今回も張り切って10個のサイトを紹介しようと思う。

2008年版は下記よりご覧ください。


では早速、2009年版をどうぞ。

Pianist Lounge (ピアニスト・ラウンジ) | ヤマハ株式会社
ピアノにまつわる人々をインタビュー形式で紹介する、ヤマハの読み物コンテンツ。
マージンの取り方、背景と文字のコントラスト、写真の配置など、長い文章を読ませるテクニックがふんだんに盛り込まれた、お手本のようなサイト。特に小曽根 真氏へのインタビューの回は秀逸である。
ピアニスト・ラウンジ
SIGMA DP2 : スペシャルコンテンツ
SIGMAのコンパクトデジカメ「DP2」を紹介する特設サイト。
1行の文字数を抑え、読む人の負担をやわらげた「おもてなし感」にあふれるサイト。オープニングムービーに表示される「⇒Skip Our Message」は、とてもじゃないけどクリックできない。
SIGMA DP2
ブルースタジオ:blue studio
建築事務所ブルースタジオが提供する住宅情報サイト。
気分で選べる「Feeling Search」は切り口の良さもさることながら、インターフェースが秀逸。ヒトんちをのぞいている様な感覚は、「渡辺篤史の建もの探訪」に通じるものがあって、たまらなく魅力的である。
ブルースタジオ
Panasonic Design | 松下電器産業株式会社
Panasonicのデザインについて紹介したコンテンツ。
ぐにゃぐにゃ動き回る有機的なグラフィックは文句なしの気持ちよさ。ライティングが素晴らしく、ついつい先が見たくなる「デザイナー特集」も見所のひとつ。「庫内は山中」には参った。
Panasonic Design
ネクタイ 通販 | 「TIE STATION - タイステーション」
ネクタイ専門店「TIE STATION」のECサイト。
柄や色、形や値段など多彩な選び方に対応したナビゲーションが、ユーザーに優しい。サイト制作はFICCだけあって、さすがのクオリティである。
TIE STATION - タイステーション
株式会社ワークスコーポレーション
出版社「ワークスコーポレーション」のオンラインブックストア。
多彩な情報をうまく整理したインターフェースが素晴らしい。カテゴリー分けしたグローバルナビゲーション、書籍情報のタブ表示や、カートボタンの配置など、参考になるレイアウトにあふれている。
ワークスコーポレーション
SKYARC Solanowa(ソラノワ)
情報共有システム「ソラノワ」の製品紹介サイト。
業種的に無機質になりがちなページを、楽しげに見せてるのはデザインのたまもの。親しみやすいイラストと、ビビッドな色使いは、覚えていて損はない。JavaScriptオフ時の対応と、FAQがあれば言うことなしか。
ソラノワ
つくるひと {生産者の想いを届けるコミュニティ}
「つくるひと」と「つかうひと」をつなぐコミュニティサイト。
心があったかくなる優しいデザインはもとより、つくるひとを応援するというスタンスがお気に入り。既存の商品を勝手にリデザインするプロジェクト、勝手ながら応援してます。
つくるひと
JR東海|着くまでも旅。
新幹線の車窓に切り取られた景色を紹介する、JR東海のスペシャルサイト。
つぶさな取材を元に、コピーライター仲畑貴志さんがつむぎ出す言葉の数々が、とにかく素晴らしい。
『あなたの移動をより豊かに。私たちは、旅を感じるきっかけをつくりたいと思いました。』ですか。す・・・素敵すぎます。
着くまでも旅。
IKEA - KOM IN I GARDEROBEN
IKEAのクローゼット用商品を紹介するスペシャルコンテンツ。
遊び心にあふれた映像はUNIQLOCK以上かも。IKEAのことが好きになりました。早く来い来い、福岡へ。
KOM IN I GARDEROBEN

以上、今年も10個のwebサイトを紹介してみた。
相変わらず隣の芝生が青く見えてるけど、来年こそは、このリストに自分が作ったサイトを入れたい今日この頃です。

jQueryプラグイン化した新バージョンを作成しました。

CookieをIEからFirefoxへインポートする際、ドメイン名の解釈の違いでcookieが複数生成されるバグを修正しました。(2010.03.06)

IE6,IE7でJavaScriptが動作しないバグを修正しました。(2009.09.10)

クッキー(cookie)とJavaScriptを使って、いわゆるYahoo!トピックスのタブ表示みたいなのを作ろう!という企画。

タブ表示サンプル

たまに使いたくなるクッキー。でも処理がめんどくさそうなので今まで敬遠してきた。
そんな折、テレビから「START!一歩を踏み出そう」の声が・・・。なんか作らないといけないような強迫観念にさいなまれて、サンプルを作成してみた。

≫サンプルはこちら

以下、HTMLのマークアップ。(簡略化してます)

<ul id="tabhead">
	<li id="head-tab0" class="on"><a id="anchor-tab0" href="#">foo_a</a></li>
	<li id="head-tab1"><a id="anchor-tab1" href="#">foo_b</a></li>
	<li id="head-tab2"><a id="anchor-tab2" href="#">foo_c</a></li>
</ul>
<div id="tabbody">
	<div id="body-tab0" class="current">
		<h2>foo_a</h2>
		<ul>
			<li>hoge</li>
		</ul>
	</div>
	<div id="body-tab1">
		<h2>foo_b</h2>
		<ul>
			<li>hoge</li>
		</ul>
	</div>
	<div id="body-tab2">
		<h2>foo_c</h2>
		<ul>
			<li>hoge</li>
		</ul>
	</div>
</div>

肝心のJavaScript部分は以下↓

//変数設定
var CookieTab = {
	cookieName: 'select', //cookieに書き込むプロパティ名
	cookieExpires: 10, //cookieの有効期限(単位:日)
	tabHeadId: 'tabhead', //タブheadのID名
	tabBodyId: 'tabbody', //タブbodyのID名
	tabHdPrefix: 'head-', //タブheadリストのID接頭語
	tabBdPrefix: 'body-', //タブbodyリストのID接頭語
	tabAnPrefix: 'anchor-' //タブheadアンカーのID接頭語
};

//DOM読込完了後、tab制御開始
dom.event.addEventListener(window,'load',function(){
	CookieTab.setting();
});

//tabの初期制御
CookieTab.setting = function() {
	this.tabValue = this.getCookie(this.cookieName);
	this.domAnalysis();
	if(!this.tabValue || this.tabValue==undefined){
		this.tabValue = 'tab0';
	}
	this.tabControl();
}

//cookie書込用関数
CookieTab.setCookie = function(ckName, ckValue, ckExpires, ckDomain, ckPath, ckSecure) {
	var date = new Date();
	date.setTime(date.getTime() + ckExpires*24*60*60*1000);
	var ckStr = escape(ckName) + '=' + escape(ckValue);//日本語使用時の文字化け対策
	ckStr += '; expires=' + date.toGMTString();//有効期限をGMT値に変換
	if(ckDomain) {
		ckStr += '; domain=' + ckDomain;
	}
	if(ckPath) {
		ckStr += '; path=' + ckPath;
	}
	if(ckSecure) {
		ckStr += '; secure';
	}
	document.cookie = ckStr;
}

//cookie取得用関数
CookieTab.getCookie = function(ckName) {
	var ckMatch = ('; ' + document.cookie + ';').match('; ' + ckName + '=(.*?);');
	var ckValue;
	if(ckMatch){
		ckValue = ckMatch[1];
	} else {
		ckValue = '';
	}
	ckValue = unescape(ckValue);//escapeしたものを元に戻す
	return ckValue;
}

//DOM解析用関数
CookieTab.domAnalysis = function() {
	this.linum = this.ID(this.tabHeadId).getElementsByTagName('li').length;
	this.tabBdDiv = this.ID(this.tabBodyId).getElementsByTagName('div').length;
	if(this.linum != this.tabBdDiv){
		throw new Error('tabHead is not equal to tabBody.');
	}
}

//tabの初期設定
CookieTab.tabControl = function() {
	this.tabDisplay();
	for(var i=0; i<this.linum; i++){
		this.tabAnchor(i);//tabクリック時の動作設定
	}
}

//tabの表示制御
CookieTab.tabDisplay = function() {
	for(var i=0; i<this.linum; i++){
		//互換性維持のためclassの取得・設定にはhoge.className = fooを使用
		this.ID(this.tabHdPrefix + 'tab' + i).className = '';
		this.ID(this.tabBdPrefix + 'tab' + i).className = '';
	}
	this.ID(this.tabHdPrefix + CookieTab.tabValue).className = 'on';
	this.ID(this.tabBdPrefix + CookieTab.tabValue).className = 'current';
}

//tabクリック時の動作制御
CookieTab.tabAnchor = function(tabnum) {
	this.ID(this.tabAnPrefix + 'tab' + tabnum).onclick = function(){
		CookieTab.setCookie(CookieTab.cookieName,'tab' + tabnum,CookieTab.cookieExpires,location.hostname);//Cookieを発行するドメイン名を明示的に指定
		CookieTab.tabValue = CookieTab.getCookie(CookieTab.cookieName);
		CookieTab.tabDisplay();
		return false;
	}
}

//getElementByIdの短縮形を使用
CookieTab.ID = function(id) {
	var myId = document.getElementById(id);
	return myId;
}

解説は時間と紙面の関係上、割愛。スクリプトに少しコメントを入れてるので、そちらを参照ください。

ちょっと前から「オライリーのサイの本」を読んで、ちょこちょこ勉強してるけど、やっぱ手を動かさないとダメ。「名前空間を汚さないようにモジュール化する」ってことの意味が、やっと少し分かった気がする。

今回は「jQuery」を使わず実装したけど、jQueryを使った場合のスクリプトは以下。
jQueryにプラスして、「jquery.cookie.js」も使用するのであしからず。

//DOM読込完了後、tab制御開始
$(document).ready(function(){
	CookieTab.setting();
});

//tabの初期制御
CookieTab.setting = function() {
	this.tabValue = $.cookie(this.cookieName);
	if(!this.tabValue || this.tabValue==undefined){
		this.tabValue = 'tab0';
	}
	this.tabControl();
}

//tabの初期設定
CookieTab.tabControl = function() {
	this.tabDisplay();
	$('#' + this.tabHeadId + ' li a').each(function(value){
		$(this).click(function(){//tabクリック時の動作設定
			value+='';//数値型→文字列型変換
			$.cookie(CookieTab.cookieName, 'tab' + value, { expires: CookieTab.cookieExpires, domain: (location.hostname) });//Cookieを発行するドメイン名を明示的に指定
			CookieTab.tabValue = $.cookie(CookieTab.cookieName);
			CookieTab.tabDisplay();
			return false;
		});
	});
}

//tabの表示制御
CookieTab.tabDisplay = function() {
	$('#' + this.tabHeadId + ' li').each(function(){
		$(this).removeClass('on');
	});
	$('#' + this.tabBodyId + ' div').each(function(){
		$(this).removeClass('current');
	});
	$('#' + this.tabHdPrefix + this.tabValue).addClass('on');
	$('#' + this.tabBdPrefix + this.tabValue).addClass('current');
}

jQueryには、jQueryの難しさがあるし、こっちの方法も結構めんどい。適材適所で使うのがよいかと。

サンプルのダウンロードもできるので、興味がある方はどうぞ。
これを使う機会、いつか来るかな。

≫CookieTab.jsサンプルファイルの一括ダウンロードはこちら


ライセンス:
クリエイティブコモンズライセンス:帰属(Attribution, by)」での公開・配布となります。

・・・なんて大それたタイトルを付けたことを早くも後悔してる僕ですが、続けます。

建築家「坂 茂(ばん しげる)」と、デザイナー「原研哉」が、日本のクルマの独創性についてまとめた本が発売された。名前は「JAPAN CAR 飽和した世界のためのデザイン」。

JAPAN CAR 飽和した世界のためのデザイン

かつて欧米のモノマネに過ぎなかった日本のクルマが、いまや日本独自の価値観や個性を身にまとうようになっている。たとえば、日本のクルマの特徴である「小ささ」は、日本の美意識の原点「簡素・簡潔」という考えがはぐくんだものだ。

原研哉は、この本でそう解説している。

欧米のクルマが優れていることを認め、モノマネした日本を卑下するでもなく、日本らしい「小ささ」さという美点を見つける視点は、さすが原研哉というところ。

まあ「小ささ」の理由は、それだけではなくて、税制優遇のある軽自動車規格や、道路が狭い日本の交通事情とも密接に関係していると思うけど、ここに来て、あえて小さいクルマを選ぶ人が僕の周りでも増えてきた。

それは、80年代くらいまで主流だった「高級車に乗っていることがステータスだ」みたいな考え方から、「小さいクルマに乗る方が合理的でスマートだ」という考え方へ着実にシフトしているからなんだと思う。

これぞまさに「簡素・簡潔」の考え方。
かたや、そんな考え方がまだ浸透していないのが、僕らがいるweb業界。

トップページにはFLASHで動きを付けて!でも予算がないから、お問い合わせフォームは削って・・・。新着情報もシステムで更新できなくていいです・・・。

こんな言葉を聞いて、まだまだweb黎明期だということを思い知る今日この頃。お隣の中国では高級輸入車ブーム、韓国ではwebと言えばフルFLASHサイトがスタンダードなんだとか。

どんなにデザインが良くて、いいエンジンを載せたクルマだって、ブレーキがないと走れないし、ガソリンを入れてあげないとすぐ止まってしまう。

必要な機能・性能をコンパクトなサイズで実現しているJAPAN CAR。かたや余分な機能・要素ばかり詰め込んで、基本機能をなおざりにしている感のあるJAPAN WEB。

このエントリーを書き始めて、日本のwebの特色をあれこれ考えていたものの、どうにも答えが見つからないのは、「見つからないのが答え」だからなのかもしれない。

もっとweb業界が成熟していくと、日本の独自性も徐々に現れてくると思うし、新たな課題も出てくるんだろうなあ。

たとえば、人が死んだ後、その人が持っていたサイトやブログやアカウントはどう処理するのか?なんて問題は、そろそろ業界レベルで取り組んだ方がいい。といっても、なかなか話が進まないだろうから、個人的に考え中だったりする。

WEB_DEBLI

まあ、でもそんな大したことはできないし、自分にできることをできる範囲でやっていけば、そのうち、自分らしさみたいなものが生まれるんじゃないか、と物思う木曜の深夜でした。

(参考サイト)JAPAN CARのWeb版
JAPAN CAR | DESIGNS FOR THE CROWDED GLOBE

ってことで、街中で見つけた広告が、下の画像のそれ。

驚きのコストパフォーマンス0円広告

「え?0円!?」
何回見ても、0円と書いてあるので間違いない。「価格破壊の波がとうとうweb業界にも波及か!」と驚愕したのだが、いろいろと裏があるような気がしてちょっと調べてみた。

・・・どうやら無料なのは初期制作費用で、サイトを制作したあと、月々19,800円の運用費用が発生するのだとか。ふむ、そういうカラクリか。

月々2万として、年間で24万円。そうした固定費用として発生する「サイト運用費」を見えなくしているのが、この0円広告のミソなんだけど、webの現状を考えると、この考え方も悪くない気がする。

何十万円もかけてサイトを作って、完成したらほったらかしっていうパターンを知ってるけど、なんとももったいない。CMSを入れても、更新できる人がいない、更新する時間がないっていうケースもある。

そんなんだったら、この0円プランみたく、「せっかく月々のお金を支払ってるんだから、更新をお願いしようかな?」ってなった方が全然イイ。

いわゆるナナロク世代の僕は感じてるけど、webを取り巻く環境は一昔前と全然違う。でも、案外それに気付いてない人もいる。

美しいwebサイトを持っていることは、もはやアドバンテージではない。webサイトを作ろうとしている人全員にそのことを気付いてもらうために、この「0円広告」はweb業界として歓迎すべきことなのかもしれない。

最後に、次の言葉を紹介して締めます。

天才とは、ただ、努力の継続をできる人のことをいう

エルバート・ハバード (アメリカの教育家)

月々の会費を払ってるにも関わらず、スポーツクラブを休みがちな僕にとっては耳の痛い言葉です・・・。

博多の夏といえば「山笠」。で、今日7月15日は、山笠を締めくくる「追い山」ってことで眠い目をこすりながら行ってきました。

山笠フィナーレの追い山直前

「なんで、こげん早朝からやるとかー」っていつも思うけど、ヤマを見ればそんな気分はどこへやら。山笠に参加する男衆、かっこよすぎます。

櫛田入りを待つ

山笠

「どんたく」と並列の扱いをされたりするけど、祭りとしての格が全然違う感じ。山笠に参加するには、どんたくへの参加が必須条件らしく、しょうがなく、どんたくに参加している人がいるとかいないとか・・・。

追い山スタート

山笠

ヤマの重さは、なんと700kg!少しでも早く廻り止めまでたどり着こうと、かき手はこまめに交代しながら博多の町を練り歩く。

交代の合図は、山の前で「かき縄」を頭上にかざすポーズ。そうした山笠独特のしきたりを知ると、また別の面白さが味わえるかも。ちなみに、ヤマにかけられる「勢い水」はかき手の暑さをやわらげるとともに、かき縄を湿らせヤマにしっかり固定する効果があるらしい。

かき手、交代の合図

山笠があるけん博多たい

追い山終了後、山は解体され、次の年にまた新しい山を作るというのが山笠のルール。この一連の流れが景気対策になっているんだとか。その「山くずし」の現場写真を紹介して、平成21年の山笠日記を締めたいと思います。

山ならし

福岡で暮らしていることが、なんだか誇りに感じた一日でした。来年の7月15日も早起きして行くぞー!