ウェブサイトを構築する際にワイヤーフレーム（骨組み）からしっかり作り込んでおくとデザインの作業もスムーズに進めることができます。

また、クライアントに提示するプレゼンテーションとしても利用できるので、ワイヤーフレームを作って、要素の抜けや動作の矛盾などをなるべく最小限にすることができるのではないでしょうか。

今回は、ウェブサイトの設計図とも言える、ワイヤーフレームについていろいろとまとめてみました。

以前にこのブログでご紹介した『ウェブの画面設計に使えるまとめ』もあわせてどうぞ〜。

I ♥ wireframes

ワイヤーフレームがどんどんアップされています。とても参考になります。

The Fine Art of Wireframes

まるで漫画のような仕上がりの手描きのワイヤーフレーム。

The Paper Version of the Web

こちらも手描きのワイヤーフレームがいくつかまとめられております。

Download a Stencil Kit

ワイヤーフレームを作成する際によく使われる要素があらかじめ用意されている便利なツール。

Web Browser Elements

ブラウザごとに、ボタンやチェックボックス、ラジオボタンなどのフォーム要素画像をダウンロードすることができます。ワイヤーフレームを作成するときに重宝しそうですね。

web.without.words

こちらのブログは、実際にあるウェブサイトからワイヤーフレームを作成するとどうなるのかをアップされているユニークなブログ。

Wireframes Magazine

その名もワイヤーフレームマガジン。様々なワイヤーフレームが紹介されているブログです。

Redesigning the ExpressionEngine Site

ワイヤーフレームから実際にデザインが仕上がっていく行程を見ることができます。

The what, when and why of wireframes

ワイヤーフレームの重要性を説明してくれています。サンプルの画像を見ているだけでも参考になるのではないでしょうか。

Lovely Charts

ブラウザから以下のようなフォームが簡単に作れるツールです。JPGやPNGでエクスポートすることができます。

The Pencil Project

無料で使えるFirefoxのアドオンです。簡単にフォームなどを並べてワイヤーフレームを組むことができます。

ウェブデザインを上達させる一番早い方法は、やはり真似をすることなのではないでしょうか？

特にこれからウェブデザインをはじめる方々には、チュートリアルなどを沢山こなして、いろいろなデザインの手法などをひとつひとつ身に着けていくうちに自分のスタイルができてくるのではないでしょうか？

先日、noupeさんのブログで『Website Backgrounds: 70+ Impressive Trends, How To’s & Best Practices』というすばらしいまとめがアップされていたので、そこからピックアップしてご紹介。

この記事では、人気のウェブデザインの背景デザインとそのデザインのチュートリアルがまとめて紹介されています。

『あぁ。このデザインかっこいいなぁ』と思っても、なかなか真似できないレベルの高いデザインでもチュートリアルを追っていけば何とかそれっぽくできるものです。

少しずつマスターして、カッコいいデザインが作れるようにがんばりましょう！

Viget Labs

水彩画風の背景デザイン

Viget Labs

How To: Make the Viget Inspire Background

こちらは、Viget Labs自らチュートリアルを公開されています。風景写真を元に加工して背景を作っていきます。

Create a Nature Inspired Painted Background in Photoshop

こちらは、ブラシを利用して、背景を描いていく方法です。

Sony CES 2009

ちょっぴりレトロなデジタルのボケ味風の背景

Sony CES 2009

Awesome digital bokeh effect in Photoshop

Photoshopを使って、ボケ味風の背景を作る方法です。

GoodBytes Blog

キレイな光のラインを背景に使った例

GoodBytes Blog

Abduzeedo Job Board banner in Fireworks

こちらは、Fireworksのチュートリアルですが、光のラインをキレイに作り出しています。

hereslifeafrica

破れた紙を背景に

hereslifeafrica.com

Create a Realistic Torn Paper Effect in Photoshop

ブラシとテクスチャをうまく使えば、やぶれた紙の質感が作り出せます。

Blog Amuki

古びた紙を背景に

Blog Amuki

Creating Old Paper With Custom Brushes

紙をクシャクシャにして、スキャンして加工すれば、古びた紙が作り出せます。

STUDIO7DESIGNS

オーロラを背景に

STUDIO7DESIGNS

Aurora Borealis – North-South Polar Lights

グラデーションとフィルターを使えば、オーロラ風の背景が作れます。

AdaptD

虹のラインを背景に

AdaptD.com

Mix Cool Retro Curves Into Your Photographs

ブラシと変形ツールでキレイな虹を再現

Jared Campbell

ビンテージ風な背景

Jared Campbell

Create a Wicked-Worn Vintage Pop Art Design

テクスチャとシェイプツールでビンテージな背景を作るチュートリアルです。

Bart-Jan Verhoef

擦り切れた感じの背景

Bart-Jan Verhoef

Bart-Jan Verhoef: Make it worn

Bart-Jan Verhoefさん自身が、この擦り切れた感じのデザインの作り方を解説してくれています。

Boompa

カラフルな背景

Boompa

Painted Photo Manipulation

写真とブラシでコラージュしていけば、カラフルな背景ができていきます。すこしセンスが必要？

Starbucks Coffee At Home

手書き風の背景

Starbucks Coffee At Home

Pencil It In

手書きで書いてスキャンして、テクスチャ画像と合成

15 Great Examples of Cloned WordPress Themes

こちらは、他の有名サイトを真似て作られているWordPressのテンプレート集です。このように、他のサイトを真似てテンプレートを作るとかなり勉強になりますよ。いくつかピックアップしてご紹介。

WPSN

テンプレート | デモページ | オリジナルページ

The Beeb

テンプレート | デモページ | オリジナルページ

Free Digg-like WordPress Theme

テンプレート | デモページ | オリジナルページ

先日、就任式を終えたオバマ大統領。

大統領候補者の中で誰よりも、ウェブの重要性を理解していたオバマ大統領は、ウェブに莫大な費用をかけ、キャンペーン中は、ウェブサイトだけでなく、FacebookやMySpaceなどのSNSやblogにTwitterなどなど、新しいものを次々と取り入れ見事、勝利をおさめたオバマ大統領。

オバマ氏のサイトはデザインにもかなり力が入っていました。

今回は、オバマ大統領にまつわるデザインをいろいろとまとめてみました。

Welcome to the White House

就任と同時にホワイトハウスのウェブサイトもCHANGE!されていました。すっきりとしたエレガントなデザインですね。

Barack Obama and Joe Biden: The Change We Need

こちらは有名なキャンペーンページ。グラデーションの使い方が絶妙です。

Change.gov: The Obama-Biden Transition Team

こちらも政府サイト。

Design For Obama

PDF形式でダウンロードできるオバマ大統領のポスターです。用紙3X3のビックサイズのポスターがダウンロード可能です。

Special Obama

さまざまなオバマ大統領のポスターがまとめられております。

Downloadable Posters

こちらもオバマポスターいろいろです。

Obamicon.Me – Create Your Obamicon

あの有名なオバマポスターが簡単に作れるジェネレータです。自分の写真をアップすると、オバマポスター風に加工してくれるツール。

The Hardest Working Presidential Candidate Logo

オバマ・ロゴがいろんなバージョンにアレンジされています。

Logobama – Barack Obama Logo Creator

オバマ・ロゴのジェネレータです。写真をアップするとロゴに合わせてくれます。

Banner ads that Obama can believe in

キャンペーン用につくられたオバマ氏のバナー１０パターンあります。フラッシュバージョンとスタティックバージョンがあります。バナーデザインの参考にもなりそう。

Create an Inspirational Vector Political Poster

あのポスターをPhotoshopとillustratorでつくるチュートリアル。

Tutorial: Obama’s Background on Fireworks – Part 1

オバマ大統領のキャンペーンページの背景をつくるFireworksのチュートリアル。

昨年から人気のグランジ系のウェブデザイン挑戦してみたい方も多いのではないでしょうか？

しかし、なかなかグランジデザインは難しいですよね。

今回は、グランジデザインに挑戦してみたい初心者の方に。そのまま使える、テクスチャ、フォント、ブラシ、チュートリアルなどをまとめてみました。

みなさん是非挑戦してみては？

200+ Free Grunge Photoshop Brushes

200種類を超えるグランジPhotoshopブラシまとめ

25 Free Photoshop Grunge Brushes – Vol. 1

25種類のグランジブラシ

Grunge Photoshop Brushes Set

こちらもグランジブラシのセットです。

50 Most Extreme Free Grunge Fonts

50種類もの欧文グランジフォントがまとめられております。

Grunge Textures – Free Stock Photos, Textures and Backgrounds

グランジ系に特化したテクスチャ集です。

200+ Textures, Brushes, and Fonts: Ultimate Grunge Roundup

200種類を超えるクオリティの高いテクスチャまとめです。

High-Resolution Grungy Paper Textures

高画質のグランジペーパーのテクスチャ

50 Dirty, Filthy Grunge Photoshop Effects

50種類ものハイクオリティなPhotoshopチュートリアル。

40 Beautiful Grunge Photoshop Tutorials

かぶってるものもたくさんありますが、こちらもクオリティの高いチュートリアルたくさんです。

Grunge Photoshop Tutorials

こちらもたくさんのグランジテクスチャがいっぱいです。

今回は、ウェブデザインのレイアウトに役立つサイトをいくつかご紹介します。

そのまま使えるレイアウトのサンプルや、いい感じのスクリプト、レイアウトの参考になりそうなインスピレーション系などを集めてみました。

CSS Layouts: A collection of 168 Grid and CSS Layouts

100%のリキッドレイアウト、950ピクセル、750ピクセルの３パターンの横幅で、合計168種類のCSSレイアウトが公開されています。ファイルのダウンロードもできるので、そのまま使えます。

Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!

こちらも有名４０種類のCSSパターン。ダウンロードも可能です。

Little Boxes

一つのボックスから、徐々にレイアウトされていく過程が確認できるので、初心者の方には、分かりやすいかもしれません。

jQuery UI.Layout Plug-in

jQueryを使ったレイアウト・マネージャーです。ヘッダーとサイドバーのみの簡単なものから、ツールバー、メニュー、ヘルプパネル、ステータスバーなど複雑なレイアウトまでカバーできます。まずは、デモページでどんな事ができるのか確認してみてください。

dfFlexiGrid

ユーザーがレイアウトを変更できるスクリプトです。こちらのデモページの上部のメニューをクリックすると、レイアウトがアニメーションで切り替わります。

Setting Equal Heights with jQuery

各カラムのボックスの高さを合わせてくれるスクリプトです。こちらのデモページからどうぞ。

HOKYPOKY. | MULTICOL. jQuery Plugin

MULTICOL. はHTMLで雑誌のような美しい段組みレイアウトを実現するだけのシンプルなjQueryプラグインです。もちろん、日本製のプラグインなので日本語もきれいに段組みにします。

footerStickAlt

フッターをブラウザの最下部、もしくはコンテンツの最下部に表示させるCSSのテクニック。デモページはこちらから。

How a Simple Layout Can Be Mixed ‘n’ Matched with Patterns, Photos and Backgrounds

Photoshopのチュートリアルです。ロゴやメニュー、テキストなどの配置と余白の取り方などが説明されています。

960 Grid System

960ピクセルを基準にサイトサムネイルの右上に配置されているボタンをクリックすると、12もしくは16本のカラムを表示してくれるインスピレーションサイトです。

Grid and Column Designs

美しいグリッドデザインをたくさん集められているサンプル集です。どのサイトもとってもきれいなサイトばかりです。

料金表やスペック表などに使えそうなTableのデザインを探してみるといろいろと見つかりました。

以前にもこのブログで「TableとCSSいろいろ」でもご紹介しましたが、

今回はTableのデザインパート２と言う事で、いろいろとまとめてみました。サンプルやダウンロードページが別に分かれているところは、そちらのリンクも記載しておきましたので、参考にどうぞ。

dhtmlxGrid

ダウンロード

Unobtrusive Table Sort Script

A CSS styled table version 2

デモ

Designing Tables for Usability

デモページ

MOOTOOLS JAVASCRIPT TABLE ROW & COLUMN HIGHLIGHTING

tablesorter 2.0

デモ | ダウンロード

jQuery plugin: Tablesorter 2.0

デモ | ダウンロード

GridView3

ダウンロード

phatfusion : sortableTable

ダウンロード

TableKit

ダウンロード

Data Tables and Cascading Style Sheets Gallery

一番左のカラムのDesign Nameをクリックするとデザインが切り替わります。気に入ったデザインは、一番右のカラムのDownloadからCSSファイルをダウンロードすることが出来ます。

Replicating a Tree table

Normal Table Test

Vertical scrolling tables

Brett asks the CSS Guy if the Row Locking with Checkboxes is fixed

デモ

how to create a table like Orbitz’s airline flights scheduling and pricing matrix

デモ

Pure CSS Scrollable Table with Fixed Header

Tablecloth

ダウンロード

mootable

ダウンロード

Creating a table with dynamically highlighted columns like Crazy Egg’s pricing table

Crazy Egg’sのサイトのような、飛び出すカラムのデザインチュートリアル。

Stripe your tables the OO way

デモ

CSS-Based Tables: Modern Solutions

CSSを使ったきれいなTableのデザインサンプル集です。

Pricing Tables: Examples And Best Practices

こちらは料金表のデザインのまとめです。きれいな料金表がたくさんまとめられております。

今回は、フォームの見た目にこだわっていろいろとフォームのデザインをまとめてみました。

登録、ログイン、コメント、検索などなどいろいろな場面で使われるフォームをきれいに見せるアイデアがたくさんつまっています。

Blog Comment Form Design Showcase | Smiley Cat Web Design

ブログのコメントフォームを集めたショーケースです。きれいなフォームがたくさんありますね。またこちらのサイトでは、他にもいろいろとフォームをまとめられております。ログインフォームや登録フォーム、別のブログコメントフォームも参考になりますね。

Pattern Tap

現在185種類のフォームデザインがまとめられております。

Form Generators, Styling, Inspiration | CSSAddict

おしゃれにデザインされたフォームがたくさん。

Web Form Design: Modern Solutions and Creative Ideas

おなじみSmashingMagazineさんのフォームデザインまとめ。さすがきれいなフォームがいっぱいです。

Primary & Secondary Actions in Web Forms

フォームのページでのユーザーの目線の動きをまとめられています。フォーム作りの参考になりますね。

37 Ways to Design the Comments Form | Blog design Blog for Blog Designers

37種類のコメントフォームデザインのまとめです。シンプルですっきりしたフォームがたくさん。

Form Elements: 40+ CSS/JS Styling and Functionality Techniques | Noupe

スクリプトを使ったフォームのサンプルがまとめられております。また、こちらのブログでは、『47+ Excellent Ajax CSS Forms』AjaxとCSSのフォームまとめも人気です。

Login Form Design Patterns

Flickrにひたすらフォームデザインのスクリーンショットをアップされています。現在178種類！

Clean and pure CSS FORM design

labelとspanを使って、フォームのラベルをきれいに配置する方法が公開されています。サンプルコードも公開されているので、ダウンロードして中身を確認することも出来ます。

ウェブサイトのデザインリニューアルなどの際に参考に。

どのように変更されたのか、以前のデザインと見比べてみるのもいいですよね。

今回は、ウェブデザインのビフォー・アフターを中心にデザインを見比べることができるサイトをまとめてみました。

Flip My Design – Before and After Gallery

その名の通り、ビフォー・アフターギャラリーです。リニューアルされたウェブサイトのビフォー・アフターを見比べてデザインの参考に使えますね。

Visualsoft

イギリスのウェブ制作会社のサイトのリニューアルの事例がたくさん紹介されています。きれいなサイトがたくさんあって、参考になります。

Sleepless Media

こちらは、サンフランシスコのデザイン会社のポートフォリオページです。すべてのデザインにビフォー・アフターが公開されているわけではないのですが、サムネイルの下に VIEW BEFORE & AFTERのリンクが表示されているものは、見比べることが出来ます。

Indiana Web Design

アメリカ・インディアナ州にある制作会社のポートフォリオページ。

Goldfish Network

こちらは、オレゴン州にあるウェブ制作グループのビフォー・アフターページ。

Consistent Image Web Design Portland Oregon

こちらもオレゴン州のデザイン会社のページです。

Design Makeover | Layers Magazine

ビデオプロダクションのサイトのリニューアルを３人のデザイナーが提案している事例が紹介されています。

Before and After Redesign, Example Sites, Web Communications, Northwestern University

ノースウェスタン大学のページリニューアルのビフォー・アフターがまとめられています。

Functioning Form – The History of Amazon’s Tab Navigation

アマゾンのナビゲーション部分のデザインの歴史が一目で分かるページです。

Ben Bodien | Delicious redesign: before/after, animated

Deliciousのリニューアル前のデザインから、今のデザインに変更していくアニメーション。動きもポップで楽しいです。

Brand New: Opinions on Corporate and Brand Identity Work

企業ロゴを中心に、ビフォーアフターが紹介されているブログです。

50 Stunning Examples of a great redesign: My Top Picks

ロゴやウェブサイト、パッケージデザインなど、デザインのビフォー・アフターが50パターン楽しめます。

TheDieline.com: The Leading Package Design Website: Features: Before & After

こちらは、パッケージデザインのビフォー・アフターを見ることが出来ます。

パララックス効果って、あまり聞き慣れない言葉ですが…。

初期の横スクロール型のテレビゲームなどでよく使われていた視差効果を使って奥行きを出す技法だそうです。

いくつかのレイヤーを、それぞれ違った速度でスクロール（奥にあるレイヤーはゆっくり、手前にあるレイヤーは早くスクロール）させる事で、視差効果を与えて奥行きがあるように見えるのだそうです。

今回は、このパララックス効果を上手にウェブデザインに応用サイトをいくつかまとめてみました。

How to recreate Silverback’s parallax effect

まずは、パララックス効果をウェブデザインに応用する方法から。ブラウザの横幅を変えてみると、４つのレイヤーに配置されているPNG画像がそれぞれスクロールの速度が違って奥行きがあるように見えます。サンプルコードも公開されているので、挑戦してみてはいかがでしょうか。CSSのbackground-positionのプロパティを%で指定して、各レイヤーのパーセントを変えるのがミソ。

Silverback — guerrilla usability testing

↑のサイトで説明されていたサイトがこちら。とっても良くできていますね。

Креативная разработка

こちらは、ロシアのサイトです。中央の男性と、右上の木、背景のバランスがいい感じです。

We All Hate Quickbooks, Do You?

ブラウザの横幅を変更すると、ページ下部の炎の部分がスクロールします。

Dromaeo

ヘッダーのかわいい恐竜がスクロール。

Percentage Backgrounds — Large numbers do interesting things

とっても楽しいスクロールですね。ブラウザの横幅を変えて遊んでみてください。

A parallax optical illusion with CSS: The Horse in Motion

これはすごい！馬が走ってます。

Dumago: Be carefree what you wish for

シンプルですが、とってもきれいな視差効果が出ています。

Starry Night by CSS-Tricks

ブラウザの縦や横にリサイズしてみると奥行きを感じます。

JavaScript系

jParallax

マウスの動きに反応してレイヤー画像をスクロールしてくれるスクリプトです。サンプルもよくできています。

jParallax Demos

jParallaxを使ったデモです。とってもいい感じですね。

40 JAAR SIRE – U mag het zeggen

オランダのサイトです。こちらもスクリプトを使って、マウスが動くと、それに合わせて背景が動きます。

jQuery Parallax Scrolling – Build your own 1980′s video game! : Locomotivation

jQueryを使って、自動でスクロールさせる方法が紹介されています。

Parallax Demo

こちらは、最初にご紹介したSilverbackのデザインに、prototypeを使ったアニメーションのサンプルです。ページ中央のShrink!のリンクをクリックするとスクロールします。

Parallax Background with Javascript and CSS

縦のスクロールに対応しているスクリプトです。背景のチェック画像と、雲、ページ枠のスクロールに視差効果が出ていて、不思議な感じです。

JavaScript Example: Fly + Parallax Scrolling Effect

こちらもスクリプトを使った星空のサンプルです。

Flash系

Flash Kit

Flashを使ったサンプルです。Flashファイルもダウンロードできるので、参考になります。

Javier Ferrer Vidal

先ほどのFlashのサンプルをうまく利用すれば、こちらのサイトのような視差効果が作れるのではないでしょうか。

みなさんもパララックス効果をうまく利用してサイトをデザインしてみると、他のサイトと差別化が図れるのではないでしょうか。

構築するウェブサイトの規模が大きくなればなるほど、画面設計はとても大切なものになりますね。

要素の抜けや、動作的な矛盾が無いかを確認したり、デザイナーはその設計書を元にデザインをおこすので、設計書の善し悪しが、最終的にそのサイトの善し悪しに直結するのではないでしょうか？

今回は、画面設計の際に使えそうなサイトをいくつかピックアップしてみました。

PowerPoint Prototyping Toolkit

Office PowerPoint 2007をお持ちの方には便利なツールキットです。あらかじめ、よく使いそうな要素が用意されているので、とっても便利なキットです。

きれいなフォーム要素などが用意されています。

こちらはウインドウのプリセット。PowerPointで作ったとは思えないくらいとってもきれいに作られていますね。

Tools – Information Architecture Institute

こちらは、いろいろなタイプのツールがVisioやPDF、PowerPointなどで用意されてます。試しにCavazzaWireframe.pptというファイルを開いてみました。フォームの部分などそのまま使えそうな感じです。

Interactive Prototypes with PowerPoint

PowerPointのサンプルが公開されています。

Description of Enterprise Dashboard

ダッシュボードのサンプルです。

PowerPointのテンプレートは、以前このブログで、ご紹介した『PowerPointテンプレートサイトいろいろ』からどうぞ〜。

Design Stencils – Yahoo! Design Pattern Library

Yahoo!が提供してくれている、キットはOmniGraffle,Visio,PDF,PNG,SVG形式で公開されているので、いろいろなソフトでそのまま使えて、とっても便利ですね。

オムニグラフ [Omni Graffle]

Macをお使いの方々は、Omni Graffleがいろいろなツールなどが公開されているので便利かも。

Graffletopia

Omni Graffle用のシンボルやシェイプ、パターンなどがダウンロードできるサイトです。

SimpleWireFrame

Graffletopiaで人気のSimpleWireFrameは必要要素が網羅されているので、とっても便利。

OmniGraffle Wireframe Palette

こちらのパレットも便利そうなツールですね。

PDF Prototypes: Mistakenly Disregarded and Underutilized

PDFで画面設計を書く方も多いのではないでしょうか？こちらでサンプルがダウンロードできます。

DUB – DENIM

こちらは、ワシントン大学が開発したUIデザイン用のツールです。手書きで書き進めていく感じのツールです。