フルサイズイメージの自社媒体として音楽サイト「inMusic」をオープンしました。

▼inMusic
http://www.inmusic.jp/
▼プレスリリース
http://www.value-press.com/pressrelease.php?article_id=25666

「音楽のそばに」「音楽の中に」「音楽と一緒に」
というコンセプトで"in music"と名付けました。

話題のアーティスト、これから注目のアーティストのインタビューやライブレポートは順次アップしていきますのでお楽しみに。
これまでの音楽サイトにないデザインと熱い記事を存分にお楽しみください。

勉強や調査のために色々なサイトを見ていると時々「こんなのやってても業界人の独りよがりで、世間はだれもついてこないんじゃないか？」という逆デジタルデバイドを感じることがあります。

ただそれでも仕事の上では「何か新しい事を」「誰もやったことないアイデアを」ということに思いを巡らさざるを得ないというのはもはや職業病でしょうか。

これはすばらしい！！
画像とかの横にあるテキストを上下中央にする。

ヨモツネット[日記] » CSS で簡単に上下中央揃えを実現する

これは是非使いたい！！！！！
今年の衝撃記事でした！

ソースを公開するので面白そうだと思った人はダウンロードして使ってみてください。
■ダウンロード

表示用とサムネール用の２つの画像を用意する必要がありますが、写真数の変更は基本的にHTMLの修正だけで動作します。

動作検証ブラウザは
Windows
　IE６,７
　FireFox 2.0
Mac
　FireFox2.0
　Safari3.0（たぶん２でも動きます）

CSSのoverflow:hiddenとposition:relativeのバグが解消できなかったためIEとそれ以外のブラウザでは画面構成とスライドショーの動作が異なりますのでご注意ください。

写真の枚数を変えるときはindex.htmlの「<!-- 編集領域　ここから --><!-- 編集領域　ここまで -->」となっている2ヶ所を変更してください。

-----画像表示部分-----
<div class="photo_caption" id="main1">
<img src="img/1.jpg" alt="image" width="512" height="384" class="photo" />
<div class="caption"><h2>プリンちゃん１</h2><p>トイプードルのプリンちゃん。椅子にすわる</p></div>
<div class="mouse_target"></div><!-- mouse_target -->
</div><!-- photo_text -->

-----サムネール部分-----
<div class="th_photos"><a href="#" id="p_id1"><img src="img/1_th.jpg" alt="image" width="64" height="48" class="photos" /></a></div><!-- th_photos -->

画像サイズは（とりあえず）固定でお願いします。
「画面表示部分」のid="main1"と「サムネール部分」のid="p_id1"の部分は連番になるので表示する画像の数に合わせて修正してください。
画像のファイル名は連番にしなくても大丈夫です。任意の名前を付けてください。画像を置く場所も好きな場所にできます。

このスライドショーはjQueryとプラグインのeasing pluginを使っています。
それぞれの詳しい情報は
▼jQuery
http://docs.jquery.com/Main_Page
▼easing plugin
http://gsgd.co.uk/sandbox/jquery/easing/
を見てください。

このスライドショーは改変、改修、再配布してもらって全然構いません。商用利用もOKです。
ボタン画像以外はHTMLとCSSで画面を作っているのでデザインやインターフェースの変更、表示画像サイズの変更もそんなに難しくないと思います。
index.jsがスライドショー本体になりますが、これも処理をだらだら書いているだけなのでjQueryの基本を理解していればそんなに難しくないし、すぐにソースのしょぼさに気付くと思います（恥）

////
写真表示の切り替え用に使っているクラスの付けたり外したりが一番面倒くさい処理になってます。addClass()、removeClass()じゃなくswapClass()みたいな関数があればいいのにと思うんですが。。。
////

サンプルで使っている画像はドッグウェアの「free stitch」から提供してもらいました。
どうもありがとうございます。

画面遷移をはじめ、ページ履歴の管理、ディープリンク、右クリックメニュー対応やマウスホイールなど、Flashサイトでよく求められる基本的なシステム部分を全て担ってくれます！

Progression Framework は、Web サイト制作に最適化されたページ移動処理を自動的に行ってくれます。あなたはそのページ移動処理の流れにあわせて、好きなタイミングで、好きな演出を加えるだけで、オリジナリティに溢れた作品を、すばやく、簡単に制作することができるのです。

Progression Framework を使って制作するだけで HTML サイトのようなディープリンクやコンテクストメニュー、キーボードショートカットなどブラウザの基本機能が自動的に提供されます。さらにアクセスキーやツールチップなども必要な項目を入力するだけの簡単操作で実現できます。

Progression Frameworkを使った制作事例

世の中、どんどん便利になってく気がします。

Progression Framework
Progression Framework 2.0.1 リリース

▼オープンキューブ
http://www.opencube.co.jp/index.html

携帯コンテンツ制作会社らしいですがPCのコーポレートサイトもいい感じです。
ヘッダーのFlashの動きもかわいい。

visualcomplexity.com

巷では、
digg labあたりが有名かもしれません。

Design and the Elastic Mindsでも同じようなのがたくさん見れます。thaさん作

煮詰まったときに見るとなにかヒントを得られるかもしれません。

ユニークな広告が見れて、なごみます。
10 usos excelentes de la sombra en anuncios

この手のおもしろい広告を紹介するブログは、
いい刺激になります。
adverbox
adverblog
adsoftheworld
adsoftheworldが見やすくておすすめかも。

日本語だと、俺ブのエントリーでも書いたけど
KeyPersonQ
則天去私

ちょっと違いますが、広告業界とかに興味があれば、
広告会議

全然関係ないけど、最近よく読んでいるブログ
イケダノリユキのCommunitainment Blog
トライバルメディアハウスという会社の副社長さんです。
なかなか楽しそうな会社っぽい。

見つけました！！

一行目が通常
二行目がIE７
三行目がIE６です。

body{font-family:Verdana,Arial,Meiryo,"メイリオ","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Osaka,"MS P Gothic","ＭＳ Ｐゴシック",sans-serif;}
*:first-child+html body{font-family:Meiryo,"メイリオ",Verdana,Arial,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3", Osaka,"MS P Gothic","ＭＳ Ｐゴシック",sans-serif;}
* html body{font-family:Meiryo,"メイリオ",Verdana,Arial,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Osaka,"MS P Gothic","ＭＳ Ｐゴシック",sans-serif;}

事業内容は自販機（のボタン）製造やLEDなどの業者向けのサービスで世間一般の興味をそそるものではないですが、それでも人を引きつけるサイトです。

コーポレートサイト（BtoB事業の場合は特に）は「楽しみ」の要素を入れ込むのが難しかったりするんですがこういうサイトはいいお手本になります。

電通の特徴を活かした面白いコンテンツです。
フォームに文字を入力すると…。

あとは実際にお楽しみください。

ちょっと動きが気持ち悪いですが、Flashの実験的な面白いサイトです。
なんかどんどんFlashの表現力が高まっていっていいですなぁ。

ちなみにフルサイズイメージは、
58位のようです。
残念ながら、低いですね。

デザインという項目ももうけて欲しいのですが、
デザインは客観的意見として、
まとめにくいのでしょうか。

WEB制作会社を評価採点するサイト

iPhone向けWebアプリケーションとコンテンツの最適化

Safariが入っているので、特に難しくなさそうです。
基本的には、iPhoneのウィンドウサイズに合わせるだけで、良い感じかと。
CSS3のメディアクエリ機能を利用して、
CSSを条件分岐すればOKとのこと。
CSS3のメディアクエリはここに詳しく載っています。

href="small-device.css" type="text/css" rel="stylesheet" />
なんて形です。

あとはviewportタグっていうのがキーになりそうです。
今後やってみないと。

とりあえず、iPod touch買わんといかん。

どこの車のスペシャルサイトだろう？
と思ってみてたんですが…なんとグランツーリスモ。

ゲームのサイトとは思えない、ってかゲームのサイトを作ろうと思ってないですねこの人達。

これなら車のサイト作った方がいいだろ？と思わせるぐらいの倒錯ぶりが最高です。