あらかじめ用意された豊富なテンプレートから簡単にCSS3のナビゲーションを作成できる無料のソフトウェアを紹介します。 CSS3 Menuの画面 CSS3 Menuの使い方 使い方は簡単で、CSS3やHTMLに詳しくなくても作成できると思います。 「+」ボタンをクリックして、ラベルの数を増やします（下記キャプチャ）。 「-」ボタンは数を減らします。 右側のパネルのテンプレートからナビゲーションのデザインを選択します。 カスタマイズが必要な場合は、下のパネルからデザインをはじめ、文言・リンクなどが変更できます。 完成したら、「ディスクアイコン」をクリックしてCSS3 Menu用に保存します。 HTML+CSS+画像ファイルを生成する場合は、「Publish」ボタンをクリックします。

ウェブサイトの制作に役立つGoogle Chrome用の機能拡張をCSS Reflexから紹介します。 15 Must Have Google Chrome Extensions for Web Development [ad#ad-2] Pendule HTML, CSS, WAIなどの検証をはじめ、CSSの無効化、リンクチェック、カラーピッカー、ルーラーなど。 Chrome Sniffer そのサイトで使用しているCMSとJavaScriptのライブラリを表示。 Chrome Web Developer Tools FirefoxのWeb Developer toolbar（日本語版）のクローンを目指して開発。 IE Tab ChromeでIEのレンダリングで表示。 Window Resizer ウインドウのサイズをワンクリックで任意の値に変更。 Chrome SEO 各種検索エンジン

商用でも無料で利用できるEPS, AI, CDRフォーマットのベクター素材を収集しているサイト「Vectormadness」を紹介します。 Vectormadness [ad#ad-2] 現在登録されているベクター素材は約7,800種類あり、22のカテゴリに分けられています。そのカテゴリからいくつかピックアップします。

写真やイラストの画像をカンバスに描いたようにするPhotoshopのチュートリアルを紹介します。 また、チュートリアルのアクションを作成したので、よければどうぞ。 元画像、左：イラスト（©みなぎあき）、右：写真 [ad#ad-2] 以下に紹介するチュートリアルは、下記ページを元にしたものです。 Canvas Texture Imitation Step 1. 元画像の調整：ノイズ 画像をPhotoshopで開き、そのレイヤーを複製（[Ctrl]+[J]）します。 複製したレイヤーを指定し、[イメージ]-[色調補正]-[色相・彩度]を選択し彩度を少し下げた後、レイヤーの不透明度を「70%」にします。 複製したレイヤーと元のレイヤーを結合し、[フィルター]-[ノイズ]-[ノイズを加える]を選択し、量を「10%」にして「OK」ボタンをクリックします。

ユーザーが安心してウェブサイトを利用できるように、ウェブサイトの信頼感を与えるためのガイドラインを紹介します。 Stanford Guidelines for Web Credibility [ad#ad-2] ガイドラインは少々古いものですが、現在でも通用するものではないかと思います。 下記は10のガイドラインとその簡単な説明を意訳したものです。 ウェブサイトの情報や記事が正確なものであるか実証することを簡単にする。 これらの証拠となる第三者やベースとなる資料へのリンクを掲載することで、ウェブサイトの信頼性をつくることができます。これらのリンクをクリックしないとしても、人々はあなたの情報や資料に対して信頼を示します。 ウェブサイトの運営組織、または運営者を明らかにする。 ウェブサイトが合法的な組織によるものであることを明示することは信頼性を引き上げるでしょう。一番簡単な方法は物理的な情報

ダークグレー、シルバーグレー、反転したグレーの三種類のグラデーションを使用した各60個、計180個の無料のアイコン素材を紹介します。 Mono Gradient Icons Set: 60 Free Icons for Your Web Designs [ad#ad-2] ダウンロードできるアイコンのフォーマットはPNG, PSDの二種類で、PSDは下記のように各レイヤーやレイヤー効果が保持された状態になっています。

テキストや画像、div要素などが配置されたパネルをアニメーションでスライドさせるアコーディオンを実装するjQueryのプラグインを紹介します。 アクセシブルで初期表示に任意のパネルを選択できるなど高性能な上、超軽量スクリプトなので、アコーディオンを導入する方は是非検討してみてはいかがでしょうか？ jQuery plugin: Easy Accordion デモページ [ad#ad-2] Easy Accordionの主な特長 IE6を含め、クロスブラウザ対応。 スムースなアニメーションを伴ったアコーディオンを簡単に実装可能。 自動スライド、手動スライドの切り替えが可能。 同一ページに複数のアコーディオンを配置可能。 初期表示に任意のスライドを指定可能。 画像を使用しないで設置可能。 カスタマイズが容易（高さ・幅・ボーダー・背景画像など） アクセシブルで、SEOにもフレンドリー。 さまざまな

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

追加したspanに個別にカラー指定したキャプチャ Lettring.JSの実装 実装は簡単です。スクリプトを外部ファイルとして指定し、下記のように記述します。

HTML, CSS, JavaScriptをはじめ、XML, ActionScript, Flex, Java, Perl, PHP, SQL, Cなどさまざまな言語に対応したコードを手軽に管理できるソフトウェアを紹介します。 Code Bank [ad#ad-2] Code Bankは簡単に個人でコードを保存・管理できるAdobe Airのアプリケーションです。Subversionのコード専用お手軽版という感じでしょうか。 データベースはローカルとサーバーのどちらにも作成することができます。 画面はシンプルで、使い勝手もよいです。 コードの登録画面では、Language（登録する言語）、Title（タイトル）、Description（説明文）、Code（コード）、Tag（タグ）を登録できます。

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

HTML5+CSS3+jQueryを使った面白いユーザインターフェイスが特徴的なHTMLのダミー要素を生成するオンラインサービスを紹介します。 Fillerati [ad#ad-2] 生成できるHTMLのダミー要素は下記の四種類です。 p h1, h2, h3, h4, h5, h6 li テキスト 操作方法は面白いです。 生成する種類を選択（ハイライト表示）し、スライダーの上でマウスを左右に動かし文字量を設定します。 生成されるダミー要素は下のボックスに表示され、コピーする際はスライダーでクリックします。

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

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のキャプチャ付きなので、英語が苦手な方でもどのようなフローですすめるか理解できると思います。 ボタンはグラデーションやレイヤースタイルといった王道のテクニックだけでなく、ノイズをのせたりライトをくわえたりと細部までしっかり手がはいった作りになっています。

コントラストはカラーだけではありません。 ユーザーに伝えたい重要なエレメントを適切に目立たせる4つのコントラストを紹介します。 Fully Understanding Contrast in Design [ad#ad-2] 下記は各ポイントを意訳したものです。 コントラストとは 1. カラーのコントラスト 2. サイズのコントラスト 3. シェイプのコントラスト 4. ポジションのコントラスト おわりに 通常、コントラストがテーマに扱われる時は初心者向けのものが多いでしょう。例えば書籍では、『ブラックとホワイトがコントラストをもっており、レッドとオレンジはそうではありません』と書いてあります。初心者向けの本では、コントラストはカラーのことだけが触れられており、サイズやシェイプについては触れられていないでしょう。 アマチュアのデザイナーとプロのデザイナーを区別する最も容易な方法は、コントラ

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

HTML5では何ができるのか、各ブラウザの対応はどうなっているのか、が一目でわかる -What is HTML5?

Whitespace: The Underutilized Design Element [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに ホワイトスペースとは 優雅さと洗練さ レジビリティとユーザビリティ ホワイトスペースに注目する はじめに 素晴らしいウェブデザインをつくりだす多くのエレメントがあります、その中でも十分に利用されていないものの一つがホワイトスペースです。すべてのデザインがホワイトスペースを持っていますが、問題はすべてのデザインが十分持っているわけではないということです。 これは経験不足のデザイナーと彼らのクライアントがホワイトスペースを単にスクリーンの領域の浪費として見るという事実があります。 しかし、真実は違います。ホワイトスペースはあなたのデザインの最も貴重なエレメントです。 ホワイトスペースとは その名前が暗示する白いスペースである必要はありませ

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

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

By Louis Lazaris / September 28, 2010 / 49 Comments Updated: August 7, 2022 Last week I posted a chart that listed support for CSS3 features in IE9. This post will consider the extent of IE9 support for HTML5 and related technologies. The chart is divided into two sections. The first covers the new HTML5 markup elements, and the second covers the APIs and other stuff. My personal assessment is tha

emazekraker - Web Wireframe Kit WEBサイトのクールなワイヤーフレームを作成する際に使えるPSDファイルが公開されています。 サイト構成にあたっての必要なパーツはある程度そろっているのでドラッグ＆ドロップやコピーをして並べるだけで綺麗なサイトのワイヤーフレームができそうです。 白バージョンもあります。 カッコいいワイヤーフレームが必要な場合は活用できそうです 関連エントリ オンラインでワイヤーフレームが描画できる「HotGloo」がかなり便利

bxCarousel | jQuery Carousel Plugin 関連アイテムを出す場合等に使えそうなjQueryカルーセル「bxCarousel」 次のようなUIでamazonの関連商品を出すような場合に使えそうです。 個々のアイテム自体はulリストで定義するだけなので簡単。 ブログ記事の最後なんかに設置することもできそう 関連エントリ JavaScriptで実装するクルクル回転する3DカルーセルUI実装ライブラリ 高速に動作する画像カルーセルＵＩ実装用jQueryプラグイン「Agile Carousel」 無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル カルーセルやページャ機能がついたYUI 2.6.0がリリース

25 Online CSS Compressors to Optimize Your CSS Code ブラウザ上でCSSを圧縮・最適化できる２５のツールが色々とまとまっています。 沢山ありますが、自分にあったものを選べば作業効率を上げてくれそうです。 関連エントリ CSSのオンライン圧縮ツール色々 オンラインCSS整形＆最適化＆圧縮ツール集 サイトのパフォーマンスを上げる、PHPでCSSファイルを圧縮転送する各種方法

iPhone CSS3 これはすごい！CSS3で描画されたiPhone。 画像でもFlashでもなく、CSS3で描画されています。 それぞれのアイコンや時計さえもCSS3で描画されているところが凄いです。 関連エントリ ピュアCSS3で3Dアニメーション IE6-8でもCSS3に対応するライブラリまとめ jQueryとCSS3、HTML5でここまで出来るホバーインタフェース 近未来に頻繁に使われるであろうCSS3サンプル１０

Building a Custom HTML5 Audio Player with jQuery Neutron Creations HTML5のオーディオプレイヤーを作るチュートリアル。 オーディオプレイヤーを実装するライブラリ等はありますが、自分でデザインしたいような場合に参考にできそうです。 実装コードはjQueryベースになっているようです。 ライブラリがあって簡単に実装できるけど、どういう風に実装してどう動くかという部分について知っておくのもよさそうですね。 関連エントリ HTML5で動画や音声再生を可能にするライブラリ集

21 Ridiculously Impressive HTML5 Canvas Experiments | Nettuts これは見ておくべきHTML5のCanvasを使った実験集。 ここまで出来るの？っていうサンプルが満載で一度は見ておきたいものばかりです。 8 Bit Color Cycle Particle Letter Animation Particle System Strange Attractors Liquid Particles Fake Floor Reflections 次世代のWEBが楽しみです。 関連エントリ HTML5で動画や音声再生を可能にするライブラリ集 HTML5ベースのTODOリスト「5List」 CSSでクールにデザインされたHTML5動画・音楽プレイヤー実装JS「MediaElement.js」 CSSでスキン作成が可能なHTML5動画プレイヤー実

25 Brilliantly Simple Web Page Designs | Design Shack シンプルデザインのウェブページデザイン２５。 シンプルすぎる程シンプルだけど、その分印象深いサイト集です。 簡単にデザインしてそれでいてインパクトがあるようなサイトを作る際の参考にできそう。 関連エントリ 一流のサイトデザインを一から作成する手順集 CSSでデザインされたiPhoneサイトのまとめ「CSSiPhone」 シンプルだけど、クールなデザインサイト集 白黒のクールなサイトをデザインする際に参考になる30選

Icons Pack "Web Cartoon" by *shlyapnikova on deviantART 漫画っぽさが超いい感じのWEBアイコン集「Web Cartoon」。 次のような４０種類のアイコンセットが公開されています。 綺麗にデザインされたアイコンが多い中、なかなか強烈なインパクトがありますね。 関連エントリ 手書き感がなんとも素晴らしいアイコンセット集 アイコン検索エンジントップ１０ 10セットの1000種類にのぼる秀逸なフリーのアイコン集 アイコンデザイナーのためのツール集

40 Various High Quality Free Paper Patterns and Textures 紙質色々なハイクオリティなテクスチャパターン色々。 次のような色々な種類の紙のテクスチャがまとまっています。 一言で紙といっても実に様々ですね。 関連エントリ ハイクオリティな紙のテクスチャ３５ ヴィンテージ感がいい感じのテクスチャ色々 ジーンズ模様のテクスチャ色々 カラフルでフリーな美麗テクスチャ集

50 Free Expedient High-Resolution Fabric Textures | Naldz Graphics 高解像度な美しい織物テクスチャ５０がまとまったエントリのご紹介。 サイトのバックグランド等に使うことができそうです。 単に背景画像等にするだけでもサイトの印象ががらっと変わりそうですね。 関連エントリ ハイクオリティな紙のテクスチャ３５ ヴィンテージ感がいい感じのテクスチャ色々 カラフルでフリーな美麗テクスチャ集 ジーンズ模様のテクスチャ色々

27 Creative And Beautiful CSS Websites Designs For Inspiration クリエイティブなデザインのCSSサイト２７がまとまったエントリのご紹介。 綺麗なサイトが満載でインパクトの強いサイト作りの参考にできそうです。 関連エントリ CSSでデザインされたiPhoneサイトのまとめ「CSSiPhone」 一流のサイトデザインを一から作成する手順集 シンプルだけど、クールなデザインサイト集 白黒のクールなサイトをデザインする際に参考になる30選

CSS3 Border Images for Beautiful, Flexible Boxes CSS3で独自デザインの綺麗なボーダーを実装する例。 border-imageを使って、次のように画像を使いつつ綺麗なボーダーを容易に実装できる例です。 デモページはこちら border-imageがないと実装はかなり面倒そうです。 応用して面白いことが出来るかもしれませんね。 関連エントリ CSS3の擬似クラスをIE6-8でも使えるようにする「Selectivizr」 便利なCSS3ツール6つ＋α IE6-8でもCSS3が使えるようになる「CSS3 PIE」

35 Amazing Photoshop Text Effect Tutorials | Vandelay Design Blog Photoshopテキストエフェクト作成チュートリアルが35個まとまっています。 既に紹介したものも含まれていますが、そうでないものもあったのでご紹介です。 色々なデザインの仕方があるものですね。 関連エントリ あの有名プロダクトのロゴを作るPhotoshopチュートリアルいろいろ 最近公開されたNewなPhotoshopロゴデザイン70のチュートリアル集 映画のタイトルロゴのような非常に美しい光と文字を描画するPhotoShopチュートリアル クールなネオン風ロゴを作成するPhotoshopビデオチュートリアル

10 Usability Testing Tools for Startups | DevGrow ユーザビリティのテスティングツール１０個がまとまったエントリのご紹介。 お金を払ってウェブ上からテストを依頼するものや、単にツールとして使えるものなど、オンラインツールも色々とあるものです。 記事の後半で簡単なユーザビリティチェックリストなんかもあります。 関連エントリ サイト公開前に役立つ２５のユーザビリティチェックリスト select ボックスを超便利にしてくれユーザビリティ向上に使える「jQselectable」 テーブルのユーザビリティを飛躍的に向上させる「Chromatable」

自分のTwitterを見やすくカスタマイズ＆バックアップできるPHPスクリプト「Tweet Nest」 2010年09月24日- Tweet Nest 自分のTwitterを見やすくカスタマイズ＆バックアップできるPHPスクリプト「Tweet Nest」。 自分でサーバに設置して、自分のツイートをより便利に閲覧・分析することが出来ます。当然PHPなので自由にカスタマイズOKです。 自分の月の書き込み数や、時間別の投稿数なんかが一目瞭然の画面。 twitpicの画像等も展開されてそのまま画面内に表示されます。 オリジナルのデザインもかなり素晴らしいですね。 Twitterにホスティングされていることで、レイアウトの自由度が制限され、広告なども載せられないので、こうしたツールを使ってみるのも良いかもしれませんね。 関連エントリ TwitterのAPIを使ったり調べる際に便利な「Twitter

20 Bold Free Script Fonts That You Don’t Have to Be A Girl To Use | Design Shack 力強い印象をもったBoldなフリーのフォント２０。 次のような力強い感じでデザインされたフォントが２０種類まとまっています。 英字のみですが、タイトル等に設定するとインパクトのあるものが作れそうです。 関連エントリ Twitterで使われているフォント「Pico」 クリエイティブでユニークなフォント３０ Web2.0っぽい30のフリーフォント集 フリーフォントがダウンロードできる６０サイト

100 Most Useful Free Photoshop Brushes for Web Designers | DJDESIGNERLAB - Find All Your Design Inspirations From This Laboratory 種類が様々なPhotoshopブラシ色々。 次のような、まとまりはありませんが便利そうなブラシが大量にまとまっています。 ↑は妙にリアルでブラシとして使ってみるのも面白そうですね。 関連エントリ クリエイティブでカッコいいPhotoshopブラシセット５０ ハイクオリティなPhotoshopブラシをダウンロードできるサイト色々まとめ 非常に美しい光などのPhotoshopブラシいろいろ 超かっこいいフラクタルのPhotoshopブラシ３０

Favigen - Favicon Generator 画像アップロードで簡単にfaviconが作れるサイト「Favigen」 favicon化したいファイルを指定して、サイズも指定後にSubmitを押せば出来るようです。 ちゃんとデザインしたいという方には使えないかもしれませんが、手っ取り早く作りたいという方は使ってみてもよさそう。

infinite, circular jQuery carousel --- CarouFredSel 2.1.3 どんなHTML要素もカルーセル化してしまえるjQueryプラグイン「CarouFredSel」。 指定した要素以下に<div>や<img>を単に並べるだけでカルーセル化してくれるプラグインです。 少ないスペースで多くのコンテンツを格納するのに便利です。 横だけでなく、縦スクロールもオプションで指定することが出来ます。 ページ下部にexamplesが多数紹介されているので他にも色々な機能があることを確認できます。 関連エントリ 関連アイテムを出す場合等に使えそうなjQueryカルーセル「bxCarousel」 JavaScriptで実装するクルクル回転する3DカルーセルUI実装ライブラリ 無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル

iPadやiPhoneアプリ等の開発ブログとして使えそうなクールなWordPressテー... 次の記事 ≫：2010年9月27日 管理人のブックマーク

Quovolver | a simple jQuery plugin for revolving quotes 「○○氏の声」を次々と表示できるjQueryプラグイン「Quovolver」。 「これは素晴らしい！革命的である」- by. phpspot みたいなものをアニメーションしながら次々表示できるjQueryプラグインです。 商品の説明ページなんかに利用者や著名人の声などとして表示する際に使えそうです。 アニメーションしながら切り替わります。 使い方は、必要なJSを読み込んだ後、要素を複数並べておきます。 例えば次のように。 <blockquote>aaa</blockquote> <blockquote>bbb</blockquote> あとは、$('blockquote').quovolver() のようにするだけです。 関連エントリ 通貨、日付のグローバリゼーションを可能にする

Tile5 | Tile5 - HTML5 Mapping and Tiling iPhoneでも使えるHTML5でGoogleマップみたいに地図や画像表示できる「Tile5」。 iPhoneでも使うことができてなかなか便利です。Androidにも対応予定 地図のドラッグ＆ドロップが可能。 地図だけではなく、Flickrの写真を検索して並べてみたもの。 GitHub上にてオープンソースで公開されています。 関連エントリ 見ておくべきHTML5サイト集 HTML5のポテンシャルを感じられる４８のサンプルサイト CSSでスキン作成が可能なHTML5動画プレイヤー実装JSライブラリ「Video JS」

CSS3 buttons 素敵なCSS3ボタンのショーケース。 次のようなCSS3で実現された素敵なボタンが沢山掲載されているページのご紹介 CSS3でのボタン作成の際の参考にできそうです 関連エントリ 綺麗にデザインされたCSS3ボタンのまとめ CSS3なボタンをWEB上で作れる「Button Maker」 これは必見のスイーツのような可愛らしいCSS3ボタン「BonBon Buttons」 CSS3でクールなボタンを作るチュートリアル集いろいろ 立体感がいい感じのiPhoneにも採用されているボタン実装CSS3サンプル