web2.0を紹介するデザイナーブログ

サイトにスライドショーを導入したい。

そんな時に参考になるのが、『66 Examples of Perfect SlideShow Presentation in Web Design』。スライドショーをうまく使ったサイト集です。

かっこいいデザインが揃っているので、いくつかご紹介しますね。

• Kontoblick
  左のリンクから、センターの写真と右のテキストが切り替わるインターフェース
• Slidedeck
  水平にコンテンツが移動するアコーディオンタイプのスライドショー
• Mint
  ビジュアル下部のメニューにマウスオーバすると、フェードイン&アウトして内容が切り替わる
• Boulevard
  矢印をクリックすることで切り替わるインターフェース。動きが印象的
• Launchmind
  親しみのあるイラストを使って、サイトのコンセプトをうまく説明しているLaunchmind

限られたスペースに、効果的にコンテンツを配置している好例が多いですね。

ぜひ見てみてください。

66 Examples of Perfect SlideShow Presentation in Web Design

グローバルメニューに説明を加えたい。

そんなときに使えそうなのが、『jDiv』。説明を追加できる、jQueryを使ったドロップダウンメニューです。

メニューにマウスオーバすると、メニューのリストと説明の入る部分が大きく表示されますね。ふわっと表示される動きが気持ちいいです。

マウスオーバ時に現れるコンテンツは#hidden-divに書いて、あとはjdiv.jsを編集して複数のメニューに対応させるようですね。

デモは以下から。

Skip the code & show me the demo

ちょっと変わったメニューになっているので、一度見てみてください。

jDiv: A jQuery navigation menu alternative

今日のCREAMU

±0の加湿器を購入。TAKUMIのCHIMNEY2と迷ったんだけど、やっぱりデザインにひかれてこっちを選択。深澤直人さんデザインで、MoMAの永久収蔵品に選ばれたタイプですね。かなり満足しています。

±0 加湿器Ver.3 ホワイト XQK-Q030(W)

先日「Macの美しいアプリケーション20」でDaisy Diskを紹介した時に、開発者のOleg Krupnovさんから連絡をいただきました。

DaisyDiskは、ディスクの使用状況を可視化してくれる、Mac用の有料アプリ（$19.95）ですね。必要環境は、Mac OS X 10.5 Leopard 以上となっています。

ブログに書いてくれてありがとう。君のエントリーからアクセスがたくさん集まってうれしかったよ。ただサイトが英語だったからか、ダウンロードまでしてくれた人は少なかったようだ。

でも、DaisyDiskアプリは日本語にローカライズされているし、オンラインストアはジオターゲティングで日本語に対応している。英語なのは公式サイトだけなんだ。

そこで提案がある。version 1.5をちょうどリリースしたことだし、ブログで紹介してくれるならフリーライセンスとディスカウントコードを発行するよ。

という感じのうれしいメールをもらったので、このブログを読んでくださっている方にプレゼントします。

以下にフォームを用意したので、ぜひご応募ください。
抽選期間は2月10日23:59まで。ディスカウントコードのご応募は2月16日23:59までとさせていただきます。

DaisyDisk フリーライセンスプレゼント

以下に使用感をレビューしますね。

DaisyDiskをインストール。アイコンがかっこいいです。

使用領域がわかりやすいです。左下の「フォルダをスキャン」が便利ですね。

スキャン結果はこんな感じです。結構さくっとスキャンしてくれるし、トップリストで容量の多い順に並べてくれるのがいいですね。

という感じなのでよろしくお願いします！

DaisyDisk フリーライセンスプレゼント

フッタをブラウザ下部に固定配置したい。

そんなときにおすすめなのが、『cleanstickyfooter』。フッタをブラウザ下部に固定配置するCSSテクニックです。

IE6とそれ以前のブラウザ用に、ハックは1つしか使っていないとのこと。min-heightの部分のハックのようですね。

ほかには同様のテクニックに以下のものがありますが、前者はwidth:100%のフッタには対応していないようです。

CSS Sticky Footer
ブラウザの下部にフッターを固定表示する『CSS Sticky Footer』

対応ブラウザは以下の通り。

・Firefox (2, 3, 3.5)
・Internet Explorer (6, 7, 8)
・Safari
・Opera
・Google Crome

ぜひ使ってみてはいかがでしょうか？

cleanstickyfooter

WordPressをECサイトやwikiのCMSとして使いたい。

そんなときにおすすめなのが、『10 Alternative Uses for WordPress』。WordPressのブログ以外の使い方です。

有料のものが多いですが、便利そうですね。

• eCommerce
  WordPressのECサイト構築プラグイン。PayPalやGoogle Checkoutに対応していて、デザインもカスタマイズ可能
• WordPress Wiki
  WordPressでwikiが構築できるプラグイン。$32
• Forum
  WordPressでフォーラムを構築できるbbPress
• Job Board
  ジョブボードを構築できるJobPress。$79
• Review Site
  現在のブログにレーティング機能を追加できるプラグイン

WordPress好きの方は、ぜひ試してみてはいかがでしょうか？

10 Alternative Uses for WordPress

CSS3で最も簡単にクロスブラウザの角丸を実装したい。

そんなときにおすすめなのが、『curved-corner』。CSS3でIEにも角丸を適用させるhtcファイルです。

Google Codeで、CSS3でIEにも角丸を実装させるファイルが配布されていますね。

クロスブラウザの角丸を実装するには、「border-radius.htc」ファイルをダウンロード、配置して、CSSに以下のように記述すればOKです。

CSS3

-moz-border-radius: 32px;//for Firefox
-webkit-border-radius: 32px;//for Safari and chrome
border-radius: 32px;//CSS3
behavior: url(border-radius.htc);//for IE

すごく簡単な方法なので、CSS3での角丸はこれで決まりなのでは、と思っちゃいますね。

デモもダウンロードできるので、ぜひ見てみてください。

Rounded corner HTML elements using CSS3

■関連記事
IEをモダンブラウザのように扱う方法10

それだけで絵になるフォントを探している。

そんなときにおすすめなのが、『46 Cool & Useful Dingbat Fonts』。装飾系フォント集です。

• Nymphette
  流線型のオーナメント。商用無料
• We Spray
  スプレーが描けるフリーフォント
• WC Rhesus
  液体がはねたようなフォント
• Border Corners
  レースの飾りなど、様々なコーナーの装飾
• Zoologic
  象やキリン、ワニやラクダなどの動物フォント
• DJ Horses
  かっこいい馬のフォント
• 4Yeo Sport
  スポーツシルエットのフォント
• Efon
  絵本に出てくるような、かわいいイラストフォント
• Facetype
  たくさんの顔のシルエット

入れておくと何かと便利だと思うので、一度見てみてください。

46 Cool & Useful Dingbat Fonts