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

そんな時に参考になるのが、『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

先日「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

Firefoxを簡単に軽くする2つの方法

Fireworksで使える素材を探している。

そんなあなたにおすすめなのが、『An Explosion of Adobe Fireworks Resources』。Fireworksの素材集決定版です。

ライブラリやパターンやシンボル、スタイルやシェイプなど、かなりたくさんの素材が揃っていますね。

かっこよくて使えそうなのをいくつかご紹介します。

• Arrows
  矢印がいろいろ入っているライブラリ
• Kaliber Patterns
  種類がたくさんあるパターンファイル
• iPhone GUI as Rich Symbols for Fireworks
  iPhone用のGUIシンボル
• 150 Fireworks Styles (Gradient Effects)
  グラデーションスタイル150
• 15 Grunge Colors Styles
  グランジ系のカラースタイル
• 131 Ultimate Web 2.0 Styles
  Web2.0系の艶感のあるスタイル
• Fireworks Toolkit for Creating iPhone Mockups
  iPhoneのモックアップを作るためのツールキット
• Adobe Fireworks Template for Android by UNITid
  アンドロイドのテンプレート
• Free Template #6 - Business Website
  ビジネスサイトのテンプレート
• FTG Textures
  シンプルで使いやすいテクスチャいろいろ
• Wood Textures
  木のテクスチャいろいろ

Fireworks使いの方は、ぜひダウンロードしてみてはいかがでしょうか？

An Explosion of Adobe Fireworks Resources

IEにだけできないことを可能にしたい。

そんなときにおすすめなのが、『10 ways to make Internet Explorer act like a modern browser』。IEをモダンブラウザのように扱う方法です。

便利そうなのが揃っているので、ざっとご紹介しますね。

• HTML5をIEでも使用可能にする
  html5.jsを読み込んで、HTML5をIEでも使用可能にする
• text-shadowプロパティー
  IEでtext-shadowプロパティーをfilterを使って実現
• IEでのbox-shadow
  filterを使ってシャドウに見せるテクニック
• 角丸
  モダンブラウザはborder-radiusで、IEにはDD roundiesを適用
• マルチカラム
  div要素にカラムを追加する。IE用にはjQueryプラグインで実装

HTML5の表現はだんだん増えてくるかと思うので、一度見てみてください。

10 ways to make Internet Explorer act like a modern browser

無料で使えるアイコンを探している。

そんなときにおすすめなのが、『11 Great Resources to Find Free Icons』。フリーアイコンが見つかるサイト集です。

• Iconfinder
  商用無料のものをフィルタリングして探せるベストアイコン検索サイト
• Icon Fever
  しっかりとライセンスの記述があってタグ検索もしやすいサイト
• IconsPedia
  カテゴリーから探しやすいサイト。アイコンパックのクオリティーも高い。ライセンス情報もわかりやすい
• Icon Seeker
  マウスオーバー時のプレビューが便利なサイト
• Iconza
  かっこいいアイコンの色をワンクリックで変更できて、サイズも3つから選択可能

既出のものも結構ありますが、久しぶりに見ると、かなり便利なものが揃っていますね。

気になったサイトがあったらぜひ見てみてください。

11 Great Resources to Find Free Icons

ペン等の絵を自分で描きたい。

そんなときに参考になるのが、『How to Create a Realistic Fountain Pen』。リアルな万年筆を描くPhotoshopチュートリアルです。

かなり細かく解説されていますね。ぼかし（ガウス）やぼかし（移動）、選択範囲の拡張・縮小やグラデーション、シャドウ（内側）などのディテールまで、一通りやってみると別のものを作る時にも参考になるかと思います。

原文には書かれていませんが、「ビュー / 表示 / グリッド」（command + @）でグリッドを表示しながらやると、ペンツールで作業しやすいですね。

PSDを作ったのでよかったら見てみてください。

How to Create a Realistic Fountain Pen

モックアップを作成したい。

そんなときに使えそうなのが、『MockFlow』。モックアップ作成AIRアプリです。

元々Webサービスでモックアップ / ワイヤーフレームを作成・共有できたMockFlowですが、そのAIRアプリが出たようですね。Web版と連携しているようです。

UIが洗練されていて、使っていて気持ちいいですね。コンポーネントも充実していて、imageやBanner、Button、Pagination、Textなど、ドラッグして配置することでモックアップを作成できます。

AIRアプリのUI。なかなかいい感じ。

ドラッグしたコンポーネントをダブルクリックすると、値や色を変更できたり、deleteキーで削除できたりと使いやすいですね。

ただ日本語が使用できないのが難点。アルファベットしか打てないようになっています。

一度見てみてください。

MockFlow

RSSや吹き出しなどのアイコンを探している。

そんなときにおすすめなのが、『Web User Interface』。商用無料のRSS・吹き出し・矢印・虫メガネのアイコンセットです。

They're released royalty-free, so you may use them for any commercial or personal purpose.

とのことで、商用でも無料で利用できます。

aiのパスデータも入っているので、自由にリサイズできますね。

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

Free Exclusive Vector Icon Pack: Web User Interface

そして歯医者へ。口の奥の方に痛みがあったのと、歯の治療の最終回。いろいろ処置してもらって回復！

ふぅ。大変だった。健康第一ですね。生活習慣を見直します。

スクリプトフォントを探している。

そんなときにおすすめなのが、『Free and Commercial Script Fonts』。商用無料のスクリプトフォント集です。

いくつかご紹介しますね。

↑はLearning Curve Pro。

Creampuff

Ballpark

CAC Champagne

Saginaw

Font Squirrelにリンクするものは、「License」タブにライセンスの詳細が書かれているので、使用する際には確認してください。

Free and Commercial Script Fonts

色が人に与える効果について知っておきたい。

そんなときにおすすめなのが、『Color Theory for Designers, Part 1: The Meaning of Color』。デザイナーのためのカラーセオリーです。

暖色、寒色、無彩色などの12色について、色が与える効果と、その色がうまく使われているWebサイトが紹介されています。

まとめとして、以下のように挙げられていますね。

• 赤
  情熱、愛、怒り
• オレンジ
  エネルギー、幸福、活力
• 黄色
  幸福、希望、偽り
• 緑
  新しい始まり、豊富、自然
• 青
  穏やかさ、責任、悲しみ
• 紫
  創造性、貴さ、富
• 黒
  神秘、エレガンス、悪
• グレー
  気難しさ、保守的、堅苦しい
• 白
  純粋、清潔、美徳
• 茶色
  自然、健康、信頼
• 黄褐色・ベージュ
  保守的、敬虔、さえない
• クリーム色・アイボリー
  穏やかさ、優美、潔白

色は視覚言語で、人にどういった影響を与えるかがわかってきているので、チェックしておきたいですね。

サンプルサイトも参考になるので、ぜひ見てみてください。

Color Theory for Designers, Part 1: The Meaning of Color

夜はちゃんと寝よう。。