ユーザーにあなたのウェブページを容易で、そして楽しくアクセスできるようにする実用的なユーザビリティの10のポイント（ガイドライン編）をSmashing Magazineから紹介します。 Tumblr 多くのフォームは2カラムのレイアウトを採用し、ラベルはフィールドの左に配置されています。一見よさそうに思えますが、これは採用すべきではありません。 なぜなら、フォームは一般に垂直に方向付けがされているためです。ユーザーが左→右→左下と視線を動かすことより、上→下と移動する方が容易です。 また、ラベルを左に配置することはもう一つの問題があります。 あなたはラベルを右揃えと左揃えのどちらで配置しますか？　左揃えはラベルを読みやすくしますが、どのフィールドのラベルか判断するのが難しい場合があります。 右揃えはその逆です。フィールドのラベルを判断するのは容易ですが、ラベルを俯瞰するのが困難です。 2.

Eコマースサイトの設計・制作時の間違いで、顧客を逃してしまう15のポイントと解決方法をSmashing Magazineから紹介します。 15 Common Mistakes in E-Commerce Design 下記は、そのポイントと解決方法を簡潔にしたものです。 原文ではキャプチャ入りで詳細に解説されています。 商品の詳細な紹介ページが無い。 商品の外観・材質・重量・寸法など詳細な情報を提供します。 連絡する手段が分かりにくい（提供されていない）。 ウェブサイトの全ページの見つけやすい場所に連絡に関する情報を掲載します。 購入のフローが長すぎる（分かりにくい）。 シンプルなレイアウトにし、入力→確認→完了のようにフローを簡潔にします。 購入時にサイトへの登録を必須にしている。 登録無しでも購入できるようにします。登録を入れる際は最後にオプションでいれます。 サイトの検索機能が役に立

汚した感じの「グランジ」をウェブデザインに上手に取り入れる5つのポイントをSpyre Studiosから紹介します。 form + function グランジと聞くと「いい加減である」といった印象をもつ人もいるかもしれませんが、それは100%間違いです。レイアウトに秩序をもたらすグリッドとの相性を見てください。 グリッドはコンテンツの流れを構築する役割をもっています。グランジにグリッドを取り入れることで、美しくより容易に読み取りが可能なレイアウトになっています。 2. 繊細な背景

サテン生地のように角度によって色が変わる布のテクスチャを作成するPhotoshopのチュートリアルをPhotoshopstarから紹介します。 Creating Chameleon Effect Fabric Texture チュートリアルは布の写真素材などを使用せずに、一からPhotoshopで全てを作成します。 そのため、カラーの変更やうねり具合の調整も自由にできます。

108 Mono Icons: Huge Set of Minimal Icons 配布されているアイコンのカラーはグレーで、オーバーレイやレイヤースタイルで別のカラーに簡単に変更することもできます。

ブラシはPhotoshopの標準ブラシ カラー「#babecc」で雪を描き、更に細かくしたい箇所はサイズを10pxくらいにします。 もう少し暗くしたい箇所には「覆い焼きツール」を使用し、明るい箇所にはブラシのサイズを大きくしカラー「#d6d9e6」を使用します。 ハイライトとなる箇所には「ドライブラシ（淡い濃度）」をカラー「#f2f0f6」で適用します。 最後に雪のレイヤーを追加し、違和感がでないように「ぼかしツール」でぼかしを入れます。

テキストをかっこよく魅せるPhotoshopのチュートリアルの紹介です。 How to Create 3D Text Blocks How to Create Remarkable 3D Text R

クリックで画像を変更し、各画像の個別リンクにも対応した画像ギャラリーを実装するスタイルシートをCSSplayから紹介します。 A permanent image click gallery 上記画像のパーマリンク こういったスタイルシートで実装されて画像ギャラリーは、通常マウスオーバーで画像を切り替えるものが多いですが、上記のものはクリックで切り替える仕様となっています。 実装には、iframeやJavaScriptは使用されておらず、CSS HackやIE用の条件付コメントも使用されていません。 対応ブラウザはIE5.5/6/7/8, Fx, , Safari(PC), Chromeとのことです。

CSS-Tricksから、大きい画像を余白を作らずにブラウザのサイズに合わせて、背景に表示するスタイルシートを紹介します。 Perfect Full Page Background Image 下記、それを実装する要件とテクニックを二つ、それぞれポイントをピックアップして紹介します。 実装の要件 前提として、画像のサイズを調整する必要があるため、background-imageプロパティでの配置は不適格とします。 それを踏まえ、以下の条件をクリアさせます。 ページは画像でいっぱいに、余白は無しで 画像の大きさは自動調整 画像の比率は維持 画像はページ中央に 画像はスクロールさせない クロスブラウザ対応 一つ目のテクニックは余分なマークアップが必要で、IE6用にJavaScriptを使用したものを紹介しています。 二つ目のテクニックは、余分なマークアップを無くし、JavaScriptも必要と

CoolInput demo デモでは、フォームのテキスト欄にアイコンやテキストの配置や、背景色の変更を簡単な記述で行えます。 以前「jQueryのプラグイン33+1選 -2008年6月」で紹介した時から大きく変わった点は、テキストをそのままでsubmitボタンを押してしまった場合の対応やテキストをfunctionに記述できるなど使い勝手が向上しています。 demo: what's new CoolInputはjQueryのプラグインのため、実装にはjquery.jsが必要です。

Fresh eMediaから、個人でも商用サイトでも無料で利用できるPhotoshopのブラシを紹介します。 各画像をクリックすると、ブラシを表示します。

Mymaths.co.ukは、数学をゲーム感覚で楽しみながら学べるサイトです。 内容は全て英語なので、個人的には英語も学べるサイトです。

紙の端っこや真ん中など一部が焼けこげた、高解像度のペーパーのテクスチャ素材をSixre Visionsから紹介します。

ノートやメモ、札、テープ、クリップなど紙関連の素材をPSD FANから紹介します。 Freebies: Grunge Essentials Pack 8 Free High-Res Card and

デザインのアクセントや背景などに、はまりそうなPhotoshopのブラシをAdam Woodhouseから紹介します。 各画像をクリックすると、ブラシが表示されます。

一枚の画像で作成するCSSスプライトに、スライドやフェードのアニメーションを加えるスクリプト「SpriteMenu」を紹介します。 SpriteMenu demo SpriteMenu デモでは、イージングを使用したスライドとフェードのアニメーションが紹介されています。 使用している画像はどちらも同じで、下記のようになっています。 CSSスプライト用の画像（クリックで拡大） ナビゲーションはリスト要素で実装されており、スクリプトのオプションではナビゲーションのサイズ、アニメーションのエフェクト、スピード、イージングなどを変更できます。 SpriteMenuはjQueryのプラグインのため、実装にはjquery.jsが必要です。

Font Bros Font Brosでは主に有償のフォントを扱っていますが、無料で使用できるフォントもダウンロードできます。 Font Bros: Free Fonts フリーのデザインフォントはWindows用とMac用が用意されており、Font Brosオリジナルのものもあります。 ライセンスは各フォントで異なり、一緒にダウンロードできるPDFで確認してください。

パネルを垂直方向にスムーズに自動スクロールさせるニュースティッカーをスクリプトで実装するチュートリアルをWeb Design Boothから紹介します。 Create A Vertical Scrolling News Ticker With jQuery and jCarousel Lite demo 画像やテキストを配置した各パネルは、リスト要素で実装されています。 スクリプトのオプションでは、パネルの表示数、スクロールのスピードなどを変更できます。 ニュースティッカーの実装には、jQueryとそのプラグインjCarousel Liteが使用されています。

david walsh blogから、テキストリンクをアニメーションでスムーズにスライドさせるスクリプトを紹介します。 <textarea name="code" class="js" cols="60" rows="5"> $(document).ready(function(){ $('a.nudge').hover(function(){ //mouse in $(this).animate({ paddingLeft: '20px' },400); }, function(){ //mouse out $(this).animate({ paddingLeft: 0 }, 400); }); }); </textarea>