最近のウェブサイトでよく見かけるUIのデザインパターンをコレクションし、その特徴や使い方・注意点を解説したサイトを紹介します。

user-agentを参照せずに、IE6, 7, 8, 9の各バージョンを判定するスクリプトを紹介します。 var ie = (function(){ var undef, v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i'); while ( div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->', all[0] ); return v > 4 ? v : undef; }());

Snappy Words -Free Visual English Dictionary and Thesaurus キャプチャは「happyの類語」 [ad#ad-2] 使い方は簡単で、フォームにテキストを入力し「Go」ボタンをクリックするだけで、そのキーワードと同義語、広義語、狭義語、関連語などを表示します。 オレンジの点線（is sililar to） 同類語 ブルーの点線（also see） 同義語 グリーンのライン（is a kind of） 同種 レッドのライン（opposes） 反対語 表示された各キーワードをクリックすると、更にそのワードの類語を調べることができます。 マウスホバーすると、簡単な英語辞書にもなります。

サービス終了のお知らせ いつもYahoo! JAPANのサービスをご利用いただき誠にありがとうございます。 お客様がアクセスされたサービスは本日までにサービスを終了いたしました。 今後ともYahoo! JAPANのサービスをご愛顧くださいますよう、よろしくお願いいたします。

アムンディ　ビクフィリップ氏「グリーンボンドの『効果』求める」 欧州運用最大手のアムンディは、グリーンボンドのファンドを複数運用している。投資家は投資資産がCO2削減に貢献したか定量開示を求めるようになった。

IE用に条件付きコメントを使用してスタイルシートを配置した際に、ブラウザのレンダリングをすこし早くするテクニックを紹介します。 ※下記の画像はクリックで拡大 Conditional comments block downloads 上：test 1の測定結果（適用前：CSSの後に読み込み開始） 下：test 2の測定結果（適用後：CSSと並列で読み込み） [ad#ad-2] 下記は上記ページを参考にしたものです。 はじめに スタイルシートの構成 test 1：ごく普通に条件付きコメントを使用 test 2：条件付きコメント使用時に並列読み込みを可能にする その他の解決方法とまとめ はじめに 条件付きコメントを使用しない場合は通常、CSSファイルと次のファイルが並列で読み込まれます。 条件付きコメントを使用した場合 詳しくは後述のtest 1：ごく普通に条件付きコメントを使用を参照 これを並

総務省によると世界の国の数は193（2010年1月1日現在）とのことですが、全部で240種類の国旗のアイコン素材を紹介します。 2400 Flag Icon Set [ad#ad-2] ダウンロードできるアイコンのフォーマットはPNGで、サイズは16, 24, 32, 48, 64の五種類、それぞれ立体感のあるものとフラットなものが揃っています。 アイコンのサイズは五種類 国旗アイコンのファイル名は、国名とカントリーコードの二種類があります。 アイコンの利用にあたっては個人でも商用でも無料で利用が可能です。 商用の場合は特に寄付を受け付けています、とのことです。また、足らない国旗があれば随時追加するので連絡をください、とのことです。

写真はウェブに限らず、デザインをする上で非常に重要な要素です。 ここではウェブデザインで使用する際の写真の入手から、カラースキーム、タイポグラフィとの組み合わせ方などシンプルで効果的な方法を紹介します。 Designing From a Photo: Quick Tips and Best Practices [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに 写真の入手 Color Schemes Typography Bleed まとめ はじめに フォトグラフィはタイポグラフィ以来、デザインを成功させる最も素晴らしい手段です。クオリティが高い写真は程度の低いデザイナーでも素晴らしいデザイナーのように見せるでしょう。 素晴らしいフォトグラフィのデザインをするためにいくつかのテクニックとアイデアを紹介します。 写真の入手 まず第一に、デザイナーとしてあなたができる最も良い方

ベック君はじめてのプレゼン発表の巻 その夜、ベック君は緊張のあまり眠れなかった。 遡ること12時間前･･･、出来上がりの資料をオオハシ課長にレビューしてもらっていた。 オオハシ課長 ：お、資料できたんだね。いいじゃん、いいじゃん。 メホリ先輩 ：ええ、この2日間で数えること22回のリテイクを繰り返しましたからね。良いスライドになったんじゃないかと。 ベック君 ：メホリ先輩には沢山ご迷惑をおかけしてしまい申し訳ありません。 オオハシ課長 ：まぁまぁ、結果こうやって良い資料ができたんだからいいじゃない。ところで、メホリ君、あの件はもう話した？ メホリ先輩 ：ああ、すっかり忘れてました。 ニヤリと笑う二人。 メホリ先輩 ：明日、お客さんへのプレゼンはベック君がやってね（ハァト オオハシ課長 ：重大任務だけど頑張ってね☆ 「えっえっ」と戸惑うベック君。 メホリ先輩は時計を指さして メホリ先輩 ：午

Photoshopの標準機能だけで、グラデーションやレイヤースタイルをつかった美しいボタンを作成するチュートリアルを紹介します。 Photoshop For Beginners: Creating buttons for web part 1 Photoshop For Beginners: Creating buttons for web part 2 [ad#ad-2] 上記、四つのボタンのチュートリアルはPart 1, 2に分かれており、それぞれ二つずつのチュートリアルが掲載されています。 各チュートリアルはPhotoshopのキャプチャ付きなので、英語が苦手な方でもどのようなフローですすめるか理解できると思います。 ボタンはグラデーションやレイヤースタイルといった王道のテクニックだけでなく、ノイズをのせたりライトをくわえたりと細部までしっかり手がはいった作りになっています。

ウェブページのレイアウトやエレメントなど、ウェブデザイン向けの無料リソースを配付しているサイトを紹介します。 Design Kindle [ad#ad-2] ダウンロードは登録など面倒なことは一切不要で、各ページの「Download」ボタンをクリックするだけです。 ダウンロードできる各PSDファイルはレイヤーが保持された状態でした。

Vendor-prefixed CSS Property Overview [ad#ad-2] 一覧は、四つのレンダリングエンジンごとの指定方法がまとめられています。 下記は各レンダリングエンジンとその代表的なブラウザです。 Gecko系 Firefox Webkit系 Chrome, Safari Presto系 Opera Trident系 IE 各レンダリングエンジンの採用状況は、ウェブブラウザの一覧（Wikipedia）を参照ください。 一覧は下記のようになっており、右端には各プロパティのW3Cへのリンクも掲載されています。

お絵かきやページのちょっとしたアクセントにもぴったりな水墨画のタッチが描けるPhotoshopのブラシを紹介します。

Mr. Data Converter [ad#ad-2] 変換できるフォーマットは下記のようになります。 ActionScript ASP/VBScript JSON PHP Ruby XML キャプチャのデータを変換後は、下記のようになります。 ActionScript

ウェブベースの会社・サービスで使用しているロゴデザインを11の特徴に分け、見習うべき素晴らしいもの、ちょっと残念なものなど11のトレンドを紹介します。 11 Trends in Web Logo Design: The Good, the Bad and the Overused 以下は各ポイントを意訳したものです。 はじめに 1. バッジとボタン 2. スピーチバブルとメガホン 3. 不透明 4. かわいいイラスト 5. スクリプトやスラブ系のクールなフォント 6. 葉などの植物 7. 歪な四角形 8. レトロゲーム 9. ワードの一部だけカラーを変更 10. ロゴタイプ 11. ノードやハブ はじめに ウェブベースの会社や新規事業のためにロゴをデザインすることは、果てしない魅力の追求です。私たちは、ロゴのトレンドについていくつかの知識をピックアップしました。トレンドのいくつかは素晴らし

デザインエレメントの中でも最もシンプルな『ライン』をデザインに使う際、知っておきたい役立つチップスを紹介します。 6 Tips for Designing With Lines [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに 1. Use an Underline 2. Break Up the Line 3. Flank the Type 4. Go Vertical 5. Go Diagonal 6. Go Nuts はじめに ここでは最もシンプルなデザインエレメントである「ライン」について見てみます。 デザインにシンプルなラインをほんの少し加えるだけで、退屈なデザインに構造とグラフィカルなスタイルを与えることができます。ラインが効果的に使われた時にはシンプルなトリックではなくなり、素晴らしいデザインになるでしょう。 1. Use an Underline タイポグ

イギリス、地域自然保護条例の権限を地方自治体に譲渡 【環境行政 その他(環境行政)】 【掲載日】2010.10.01 【情報源】イギリス／2010.09.17 発表 9月17日、イギリスの環境・食糧・農村地域省（DEFRA）は、イングランドにおける地域自然保護条例に関する権限を、環境大臣からイングランドの地方自治体に譲渡することを公表した。これにより、イングランド内の地方自治体は、環境大臣の承認を必要とせず、条例を策定し、承認し、廃止でき、地域社会や地域のステークホルダーとの協議を通じて、決定できるようになる。 1949年に制定された国立公園及び田園地域へのアクセス法第21条に基づき、地域自然保護区の設置は、地方自治体により実行され、さらに、保護区を保全するための条例が制定される。これまで、その条例の施行前に環境大臣の承認が必要であったが、今回の権利譲渡により、中央政府が地域自然保護区の条

『ラルス・バク（デンマーク、チームHTCコロンビア）、マヌエル・カルドソ（ポルトガル、フットオン・セルヴェット）らがローテーションでメイン集団を牽く』 ほとんどのライダーは何らかの形で集団走行や隊列走行を行ったことがあるだろう。通常、隊列走行では順番に一人ずつ先頭に出て走行し、風を受ける。しかし、多くのライダーは隊列走行における最も重要な法則に気付かずにいる。何故なら、その法則はあまり語られることがないからだ。法則の多くは、正式な集団走行ではない場合にも適用される。この記事では、隊列走行と集団走行のエチケットについて、「語られなかった物語」を話すことにしよう。 集団走行のエチケットは、集団の速度を一定の高さで維持し、事故を避けるために設定されている。隊列走行の基本的な目的は、走行の効率を上げることだ。つまり、集団走行によって集団内のメンバーが一人で維持できる速度より高い速度を維持する。誰

PandraHouseが、インド式の計算メソッドを使った計算トレーニングアプリ『インド式計算マスター 』をリリースしています。 13のステップをマスターすることにより、2桁どうしのかけ算(99×99)を暗算できるようになります。 PandraHouse、インド式の計算メソッドを使った計算トレーニングアプリです『インド式計算マスター』をリリース ● アプリの概要 インド式の計算メソッドを使った計算トレーニングアプリです。２桁のかけ算を暗算でできるようにトレーニングします。 ● アプリの説明 このインド式計算マスターは99×99までの計算が暗算でできるようにする画期的なアプリです。 6級から1級までと初段から7段までの13の段階 に分けて練習を積むことにより、最終的にはどんな二桁暗算もすらすらと解ける力を養成します。 たとえば、6級の11をかける計算は、かけられる数の和を2つの数の間に入れるだ

最近リリースされた高品質なフリーのデザインフォントを紹介します。 Lintel Regular 個人・商用利用無料。 St Marie 個人・商用利用無料。 AW Conqueror Sans 個人・

imgZoom デモ [ad#ad-2] imgZoomの主な特徴 lightbox風のインターフェイス（暗いオーバーレイ、次の画像へのスイッチ） CSS/HTMLベースでのカスタマイズ フェードや回転のアニメーションで画像を拡大 ズームイン、ズームアウトのAPIの提供 jQueryのプラグインとして動作する軽量（7KB）スクリプト imgZoomの実装方法 外部ファイル 下記の3ファイルを外部ファイルとして記述します。 <link rel="stylesheet" type="text/css" href="css/imgzoom.css" /> <script type="text/javascript" src="sc

2, 3, 4, 6, 9, 12, 18の均等分割をはじめ、黄金比の分割にも対応したグリッドレイアウト用のCSSのフレームワークを紹介します。 The Square Grid [ad#ad-2] The Square Gridのグリッド設計 グリッドの全幅は994pxで、両端に余白7pxをとり、残りの980pxを均等に35分割したものをベースにしています。 均等分割のカラム

全ての素材が完全にオリジナルに作成された、多種多様なテクスチャ素材、PhotoshopとGimp用のブラシがダウンロードできるTexturemateを紹介します。

通常、透過処理をした写真画像を使用する際のフォーマットはPNGを使用することが多いと思います。これを写真画像にJPEG、その上にマスクのPNGを使用してトータルの容量を軽減する方法を紹介します。 デモでは、PNGのみで127KB、JPEG with PNGで42KB、と約1/3容量が軽減しています。 ;(function() { var create_alpha_jpeg = function(img) { var alpha_path = img.getAttribute('data-alpha-src') if(!alpha_path) return // Hide the original un-alpha'd img.style.visiblity = 'hidden' // Preload the un-alpha'd image var image = document.cre

#FFFFFFなどのRGB値の16進法表記を含めたURLから、そのカラーや色相環を利用した配色を表示するオンラインサービスを紹介します。 Whatcolor キャプチャは「#a4b37cの5 analogous colors」 [ad#ad-2] 上記キャプチャは、「#a4b37c」をベースにして色相環で隣接している5つの色をピックアップしたものです。 #a4b37c（ベース） #7cb396 #7c8eb3 #ac7cb3 #b3807c Whatcolorで利用できるURLの書式は以下の通りです。 http://whatcolor.heroku.com/cdc (省略表記) http://whatcolor.heroku.com/ccddcc (通常表記) http://whatcolor.heroku.com/009246/fff/ce2b46 (イタリアの国旗) http://wh

泡を配置した画像を使用して、CSS3で美しいアニメーションを適用したボタンを作成するチュートリアルを紹介します。 CSS3 Animated Bubble Buttons デモページ [ad#ad-2] デモのアニメーションを楽しむにはWebkit系ブラウザ（Chrome, Safari）でご覧ください。 CSS3アニメーション非対応ブラウザ（Firefox3.6など）でもそれなりに美しく表示されます。

jQuery Skin デモページ [ad#ad-2] デモでは下記のように多種多様なコントローラーが実装されており、いくつかのコントローラーは互いに連動して動作します。 デモページ ※クリックで拡大 対応ブラウザはFirefox, Chrome, Safari, Operaで、IE6ではうまく動作しないでしょう、とのことです。 IE7で試したところ、いまいちでした。 jQuery SkinはjQueryのプラグインのため、実装にはjquery.jsが必要です。

Photoshop風のインターフェイスを備えた、とっても使いやすいCSSグラデーションを作成するオンラインジェネレーターを紹介します。 Ultimate CSS Gradient Generator [ad#ad-2] 生成されるスタイルシートは、moz系（Firefoxなど）、webkit系（Chrome, Safariなど）だけでなく、旧ブラウザやIE用のfilterも生成されます。 生成されたスタイルシートの例 background: #eeeeee; /* old browsers */ background: -moz-linear-gradient(top, #eeeeee 0%, #5E5E5E 42%, #cccccc 70%, #cccccc 87%); /* firefox */ background: -webkit-gradient(linear, left top

KEYS.css [ad#ad-2] キーボードのカラーはダークとライトの2種類が用意されています。 また、キートップの文字はテキストデータなので、長い文字列や日本語でも表示されます。

海外のサイトでよく見かける無料素材のまとめで多くの場合、利用条件については『それぞれ確認してください』の一言で紹介されています。利用条件には、個人・商用での利用、クレジット・リンクの表記などそれぞれ異なり、素材を利用する際には個別に確認する必要があります。 下記の「ボケのテクスチャ集」で紹介されている無料素材を例に、各利用条件を見てみます。 Awesome Freebies: Ultimate Collection of Free Bokeh Textures

デモページ：2（テキスト版） 右側のパネルの切り替えは手動と自動に対応しており、スクリプトのオプションで設定が可能です。 スクリプトのオプションでは次のものなどが設定できます。 切り替えの自動と手動 パネルの表示時間 フェードの時間 ラベルの画像とテキスト ラベルに画像を使用した際、ロールオーバー時の変更はスクリプトの機能に含まれているため、ロールオーバー用の画像を用意するだけで実装されます。

マイクロソフト社が公開している、Internet Explorerの各バージョン（IE5, IE5.5, IE6, IE7, IE8, IE9）のCSSサポート状況の一覧を紹介します。 ※IE9は2010年10月現在、ベータ版です。 CSS Compatibility and Internet Explorer [ad#ad-2] 上記の「CSS Compatibility and Internet Explorer」では、CSS2.1, CSS3の各プロパティのIE5～IE9betaのサポート状況がまとめられています。 Internet ExplorerのバージョンごとのCSSのサポート状況はおおまかに、IE6でCSS Level1をサポートし、IE8でCSS Level2 Revision1(CSS2.1）を完全にサポートしCSS Level3の機能を少しサポートし、IE9ではCSS3

アムンディ　ビクフィリップ氏「グリーンボンドの『効果』求める」 欧州運用最大手のアムンディは、グリーンボンドのファンドを複数運用している。投資家は投資資産がCO2削減に貢献したか定量開示を求めるようになった。

iPhone 4 Simulator [ad#ad-2] iPhone 4 Simulatorを使用するには、Lockを右にドラッグしてはずします。

さまざまなデザインの手描き風の矢印を描くPhotoshopの無料のブラシを紹介します。 40+ Hand Drawn "Arrow" Photoshop Brushes [ad#a

Five Useful Design Techniques and Coding Solutions For Web Designers [ad#ad-2] 下記は各ポイントを意訳したものです。 PHPはWordPressでのものとなっています。 1. 複数の項目がある棒グラフのエフェクト 2. ホバー時に追加情報を表示 3. カテゴリごとに異なるカラーを適用 4. ちょっと面白い画像のキャプション 5. ウェブのための印刷風デザイン おわりに -developersではなく、designers 1. 複数の項目がある棒グラフのエフェクト 下記のサイトで使用している棒グラフでは、上：タグの種類と数、下：コメントのついた記事と数、をそれぞれ素晴らしいエフェクトで実装しています。 こういった数値化されたデータは、ユーザーに対して有用なコンテンツの手がかりを提供し、ユーザビリティを改善することに