以前、このブログでご紹介した『見比べられるビフォー・アフターデザインいろいろ』

サイトのリニューアルデザインの際に、ポイントとなるのは、既存のサイトデザインから必要な要素をより効果的に見せなければいけないと言う事ですね。

リニューアルは単純に見た目を変えるだけではなく、ユーザーがそのサイトをより使いやすくする必要があるのではないでしょうか。

今回は、ウェブサイトのリニューアルデザインのビフォー・アフターなどいろいろとまとめてみました。

Preparing and Planning for a Redesign

appleやfirefox、CNNなど有名サイトのビフォー・アフターデザインをもとに、デザインリニューアルする際のポイントがまとめられています。

A new global visual language for the BBC’s digital services

BBCのリニューアルが詳しく解説されています。

The Apple Store’s Checkout Form Redesign

appleのウェブサイトのチェックアウトのリニューアルを詳しく解説されています。

Better Web Forms: Redesigning eBay’s Registration

少し昔ですが、eBayの登録フォームのリニューアルを紹介されています。

Design View / Andy Rutledge – Quiet Structure

CNNのリニューアルデザインをUSA TODAYとくらべて解説されています。

Redesigning Your Own Site

デザイン会社のウェブサイト・リニューアルのプロセスが公開されています。

Building Web 2.0: A Case Study for Simply Fired’s Redesign

コミュニティサイトのリニューアルデザインのビフォー・アフターが公開されています。

Websites We Visit: How They Look Like 10 Years Ago | Inspiration

有名サイトの現在と10年前を紹介してくれています。

Know How To Plan Your Website Redesign & Get Inspired

SmashingMagazineなどの人気ブログのリニューアル、ビフォー・アフターが紹介されています。

The Continuing History of Amazon’s Tab Navigation

Amazonのメニュー部分のデザインの遍歴が紹介されています。

Redesigning The Government: The U.S. Supreme Court

ここ数年アメリカの政府系のウェブサイトは、デザインに力をいれていますが、NPO法人の提案する政府系のウェブサイトのリニューアル案が紹介されています。

Smashing Magazine—Realigned

人気ブログSmashingMagazineのリニューアルを各ポイントにわけて紹介されています。

Extreme Makeover: Craigslist Edition

アメリカの人気のコミュニティサイトCraigslistのリニューアル

Dear AmericanAirlines

アメリカン航空のリニューアル、ビフォー・アフターが紹介されています。

Cliff Notes on a Website Redesign – Tips and Thoughts from the Creattica Inspire Design

人気ブログPSDTutのデザイン遍歴などが紹介されています。

The Design Evolution of Popular Websites

CNNやAppleなどの人気サイトのこれまでのデザイン遍歴がまとめられています。

出先で急な修正作業など、あまりあってはいけないのですが、どうしても今すぐに！という事態に陥った事のあるデザイナーの方々も少しはいらっしゃるのではないでしょうか？

そんなときに限って、必要なアプリケーションがラップトップにインストールされていなかったり…。

今回は、そんな万が一のときに備えておける、USBで持ち歩き可能な無料で使えるポータブルアプリをいろいろとまとめてみました。

GIMP Portable

出先でPhotoshopが使えない！そんなときにGIMP PortableがUSBファイルに入っていると安心ですね。

Portable Inkscape OS X

ベクターファイルを編集するにはPortable Inkscapeがおすすめですが…。OS X版しか見つけられませんでした。。

Blender Portable

3Dレンダリングまでポータブルになってるんですね。あまりウェブデザイナーの方々には関係のないツールでしたね。

Fotografix

Fotografixは、Photoshopの簡易版といたところ。ちょっとした修正ならこれでも十分対応できそうです。

Notepad++ Portable Edition

ノートパッドのポータブルエディションです。

Oiko CSS editor

CSS, (X)HTMLとXMLのエディターです。

Portable NVU

WYSIWYGエディターもついているオーサリングツール。

FileZilla Portable

FTP、FTPS、SFTPをサポートするファイル転送プログラム。

WinSCP :: Portable Use

こちらも有名なファイル転送プログラムのポータブル版。

XAMPP

Apache、MySQL、PHPやPerlなどをパッケージにしてまとめてくれているアプリです。開発用に使えそう。

Mozilla Firefox, Portable Edition

Firefoxも持ち歩いて、いつでも自分の好きなアドオンと一緒に使えます。

Chrome(ium) Portable

Chromeのポータブル版もありました。

Opera@USB

Operaをお使いの方はこちら。

Toucan

ハードドライブとUSBなど二つのドライブをバックアップ、同期してくれるツールです。

FastStone Capture

簡単にキャプチャーが取れるツールです。

7-Zip Portable

ZIPやGZIP、TAR、RARなどに対応した圧縮・解凍ソフト。

PortableApps.com – Portable software for USB drives

その他、まだまだ使えるポータブルアプリがたくさんありそうです。PortableApps.comに行けば、お気に入りのポータブルアプリが見つかると思いますよ！

Download Portable Freeware

App-Stickにも無料で使えるポータブルアプリがたくさん。人気順にも並べ替えられるので、使えるアプリをサクッと探せます。

早いもので2009年も既に半分が終わってしまいましたね。

今回は、2009年上半期のデザイントレンドをまとめた記事やウェブサイトをまとめてみました。

74 Fresh Examples Of Beautiful Single Page Website Designs

2009年を代表するシングルデザインのウェブサイトまとめです。

25 Flourish Designs

花がとってもきれいなウェブサイトが25種類。

30 Stylish Examples of Doodles in Web Design

とってもきれいな３０種類のとってもきれいな手描き風のウェブサイトがまとめられています。

80+ Incredible Designs with Bird’s-eye View

80サイト以上のバードアイビュー（真上から見下ろした）のデザインが紹介されています。

Web Design Trend Hunting – The Messy Desk: Examples & Best Practices

こちらもバードアイビューデザインに近いまとめですが、散らかしたデスクをモチーフにしたデザインがまとめられています。

25 Stylish Examples of Headers in Web Design

とってもクールなヘッダーデザインが25サイト。

New web design trends of 2009

とっても質感のあるグランジ系のデザインがいくつか紹介されています。数は少ないですが、とってもきれいなサイトばかりです。

Web Design Trend Showcase: Horizontal Bands

横に平行に伸びるラインがとてもきれいなサイトがたくさん。

30 Beautiful and Illustrative Website Footers

かわいらしいイラストが印象的なフッターデザインがまとめられています。

Web Design Trend Showcase: Letterpress Text Effect

プレスされたテキストエフェクトが使われているデザインがまとめられています。

35 Examples Of Masterful Lighting Effects In Web Design

光の質感をとってもうまく表現しているサイトがまとまっています。

22 Website Designs Inspired by Apple.com

アップルのウェブサイトからインスパイアされたデザインがまとめられています。

Logo Design Trends 2009 – Showcase

2009年のロゴデザイントレンドがまとめられています。

Web Design Trends For 2009

おなじみsmashing magazineさんがまとめられた2009年ウェブデザイントレンド

More Web Design Trends For 2009

こちらは続編

10 Stunning websites to inspire your webdesign style in 2009

とってもかわいらしいウェブサイトが10種類

Fashion Color Trends for Each Season| 2005 – 2010 | Fashion Trendsetter

ファッション業界の色のトレンドがまとめられています。

配色に迷ったときに、使える無料のツールはたくさんありますね。

先日もkulerが人気を集めていましたが、カラーツールはまだまだたくさんあります。

kulerは、完成度が高く、とても良くできたツールですが、用途によっては他のツールも使えそう。

今回は、無料で使える色にまつわるツールをいろいろとまとめてみました。

kuler

Adobeから公開されているkulerほんとによくできてるツールですね。

COPASO | Pro Color Palette Software from COLOURlovers

色に関するブログで世界一有名なCOLOURloversから公開されているCOPASO。こちらの完成度もなかなかです。

[ws] Color Scheme Designer

mono、complement、triadなど、配色の基本がクリック一つで分かります。

[ws] Color Scheme Generator 2

こちらも感覚で使えるカラースキーマ

Create Color Schemes, Test Color Combinations – Colorspire

こちらは、ボックスにひとつずつ色を足して、色味を確認することができるツール。

colordb – the color database

配色を選択して、テンプレートに設定して確認することができるツールです。

4096 Color Wheel

カラーホイールにマウスオーバーするとセーフ、スマート、アンセーフカラーの３タイプが表示されます。

ColorJack: Color Generator

シンプルながら、いろいろな配色が試せるツールです。

Online color chart

シンプルなカラーピッカーです。次々と色が追加されていきます。

Color Wizard – Color Scheme Generator – Color Theory for web designers

上部のスライダーをスライドさせて色を決めれば、あとはセオリー通りの色味が分かります。

Unsafe Colormatch

テンプレートに色を付けていくことができるツールです。

Fashion Color Trends for Each Season| 2005 – 2010 | Fashion Trendsetter

色のトレンドがまとめられているツール。2010年までの色のトレンドが予測されています。

Name that Color

色の名前が分かるツール。左側のカラーホイールから色味をピックすると、色の名前が表示されます。

Japanese Traditional Colors – 日本の伝統色: 2xup

日本の伝統色がまとめられております。Photoshop用のカラーパレットへのリンクも公開されています。日本の伝統色がPhotoshopですぐに使えます。

日本の伝統色 Japanese Traditional Colors – 色彩のスパイス

こちらも日本の伝統色をまとめられております。日本以外に、中国、フランス、イギリスなど世界の伝統色がまとめられています。

Color Palette Generator

画像をアップすれば色味が分かるツール。

ColorBlender.com | Your free online color matching toolbox

スライダーで色味を決めて、Photoshopやillustratorの形式でダウンロードできます。

Veerle’s Topp, Daily Color Scheme

更新は止まっていますが、色のスキームがアップされています。

ColourMod Dashboard Widget » DHTML Colour Picker

Macのダッシュボードウィジェット。

Firewheel Design | Dashboard Widgets

毎日カラースキームが配信されるMacのダッシュボードウィジェット。

ColorSchemer – Online Color Scheme Generator

クリック一つでその色に合った色味をまとめて表示してくれます。

ColorMixers: Remixing RGB since 2003

スライダーで色を決めれば、その色に合った色とテキストを表示。

Color Hunter

画像からつくられたカラーバレット。

GenoPal – Color Schemes

カラーパレット、画像からの色味抽出、画像に色味を足してくれる３種類のツール。

Color Combinations Tester – Combo Tester – ColorCombos.com

各カラムに色を設定して見比べられるシンプルなツール。

I Like Your Colors

URLを入力すると、CSSから色味を抽出してくれるツール。

ColorZilla for Firefox

ブラウザ上の色味をピックアップできるFirefoxのアドオン。

Color Fields Colr Pickr

色で探せるFlickr画像。

Color Theory @ ColorJack

あらかじめ用意されているカラースキームを見ることができます。

COLOR IN MOTION

見ていて楽しい、カラースキームをテーマにしたフラッシュ。アニメーションもかなり凝っています。

ボタンのデザインを変えるだけでもサイトの印象は大きく変わるのではないでしょうか。

本日は、ボタンやバッジのデザインに関するサイトをいろいろとまとめてみました。

ButtonBuilder – Web Button creation for Mac OS X

ボタンを作成するソフトです。あらかじめ用意されている50種類のボタンのスタイルから選んで、文字をのせるだけ。PNG、JPGで保存できます。とってもシンプルなんですが、結構使えるMac用のフリーソフト。

ジェネレータ

ButtonBoost – The Button Generator

現在150種類ほど、かなり豊富なスタイルが用意されているボタンジェネレータです。

Buttonator

きれいなボタンがいろいろなジェネレータ。

My cool button

とってもシンプルなボタンジェネレータです。

Free Web Button Maker – ButtonGenerator.com

中には、有料のメンバーのみのボタンもありますが、無料でコーディングされたファイルをダウンロードできます。

Web 2.0 Badges

とってもきれいなバッジジェネレータ

Fresh Badge Generator

こちらもバッジのジェネレータです。

ベクターダウンロード

77 Vector Buttons hot off the press.

とってもきれいな77種類のベクターボタンがダウンロードできます。

165 Vector Icons, Now in 5 Colours

こちらは、アイコンも含まれていますがボタンもいろいろあります。

Free Vector Buttons and Icons – Metal and Glass

グラスの感じがきれいなボタン素材です。

72 Free Vector Glass Buttons and Bars

シンプルなボタン素材。

Free Vector Badges – Glass

きれいなバッジもベクターでどうぞ。

チュートリアル

39 Photoshop Button Tutorials You Should Have in Your Arsenal

39種類のきれいなボタンを作るPhotoshopのチュートリアルがまとめられています。

45 Photoshop Tutorials for Better Navigation

こちらは、ナビゲーションのチュートリアルですが、ボタンっぽいものも多かったので、ご紹介。

Photoshop Button Maker

とってもリアルなバッジを作るチュートリアルです。

Flag Button Devkit

国旗のバッジを作るチュートリアル。

Handy Web 2.0 Icons In Photoshop

かわいいバッジを作るPhotoshopのチュートリアル。

How to design a cool web 2.0 button in Illustrator and Photoshop

質感のあるボタンをIllustratorで作るチュートリアル。

Toxiclab.org – Web buttons tutorial

シンプルなボタンを作るPhotoshopのチュートリアルです。

インスピレーション

107 Add to Cart Buttons of the Top Online Retailers

いろいろなサイトの｢カートに入れる｣ボタンが集められています。ご参考に。

日本でも、ニュースなどで報じられているかと思いますが、アメリカ大統領選挙が今年11月に実施されます。

というわけで、最近、大統領選挙関連のサイトをよく目にします。

多くのサイトは、アメリカ星条旗のイメージから、青と赤の色使いで作られてます。

本日は、ウェブデザインで見るアメリカ大統領選挙2008ということで、アメリカ大統領選挙関連のサイトをまとめてみました。

1. Barack Obama | Change We Can Believe In

2. HillaryClinton.com

3. Ron Paul 2008 — Hope for America

4. John McCain 2008 – John McCain for President

5. The Democratic Party

6. Political Base – Election and Candidate Information

7. Dennis Kucinich for President 2008 – Strength through Peace

8. Mike Huckabee for President

9. Republican • National • Committee

個人的には、やはりオバマ氏のサイトが、一歩リードかな？っといった印象です。

みなさんはいかがでしょうか？

ブログのサイドバーや、記事タイトルの横などによく表示されているカレンダー。

日付も単純にテキストだけで表示するのではなく、ちょっと手を加えておしゃれ～に見せたいものですね・・・

っちゅうわけで本日は、そんなカレンダーデザインをまとめてみました。

1. Calendar and Date Picker Design Showcase

35個のカレンダーデザインがずら～っと並んでおります。どれもとってもきれいですね。

2. Calendars & Date Pickers (54 examples)

こちらは、54個！4ページに分かれて紹介されています。↑と同じ方がまとめられて用なので、結構かぶっていますが。。参考までに。

3. A CSS styled calendar

おなじみveerle’s blogさんが紹介されている、カレンダーCSSです。

仕上がりは↓こんな感じ。とってもきれいですね。。

4. MikeCherim.com – CSS: Unordered List Calendar

MikeCherimさんが公開しているカレンダーXHMLとCSSのサンプルです。

5. A validating link calendar

CSSplayさんが紹介されているカレンダーは、月のリンクにマウスがオーバーするとカレンダーが右側に表示されます。

6. Web 2.0 Date Icons For Your Blog

こちらは、記事タイトルの横などに表示されている投稿日を日めくりカレンダー風に表示させるためのアイコンです。

7. Create a Calendar style WordPress date format

ワードプレスをお使いのユーザーさんは、こちらのタグで投稿日をカレンダー風に表示できます。

8. Creating a Blog Entry Date Calendar Icon Look with CSS, Mostly

こちらも、投稿日をカレンダー風に表示するためのチュートリアル。ご参考に。

きれいなカレンダーが作れそうですね～。

ブログのコメントや、お問い合わせなどで使われるフォーム。

フォームをCSSできれいにデザインされているブログやウェブサイトをよく見かけます。

っちゅうわけで、本日はきれいにデザインされたフォームをいろいろ集めてみました。

1. The Watchmaker Project

2. Jonathan – Snook.ca

3. Infected-FX

4. Particletree

5. Binary Moon

6. 64k | Le blog de Soph et Ced

7. kgoule.com

8. Stu Nicholls | CSSplay

9. Tyssen Design

10. Niceforms

11. Microsoft® Expression®

12. rebelpixel productions

13. CSS Mania

14. Authentic Boredom

15. SaraJoy Pond

16. Picment.com

17. ShaunInman.com

18. A List Apart

どのサイトも、とってもきれいなフォームばかりですねぇ～。

サイト全体のコーディングとしては、Tableを使わず、DivタグとCSSを使って構成していくパターンが主流だと思いますが。。。

例えば、コンテンツ内に商品のスペック表や、料金表などを表示する場合、その名の通り”Table”タグを使う方が効率的ですね。

っちゅうわけで、本日はTableとCSSを使って表を作る方法をいろいろまとめてみました。

1. 16 Sortable Table Techniques | CSS Juice

こちらの記事では、Table、CSS、Javascriptを使って16種類のソート可能な表の作り方をまとめられております。ソート機能は、あると結構うれしい機能ですね。デザイン的にもきれいなものが多いです。

2. CSS-Based Tables: Modern Solutions | Smashing Magazine

こちらは、少し前の記事ですがCSSベースのTableデザインをまとめられております。きれいなものが多く参考になります。

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

CrazyEggの料金表のように、強調したいカラムを浮き出させる方法を紹介されています。いろいろ使えそうなアイデアですね。

4. Pure CSS Scrollable Table with Fixed Header

こちらは、表のヘッダー部分は固定され、データ部分のみスクロールさせるデモページです。データが多いけど、あまりダラダラ長く表示させたくない場合に使えそう。

5. A CSS styled table version 2 | Veerle’s blog

シンプルなゼブラテーブルならこちら。

6. Data Tables and Cascading Style Sheets Gallery

マウスがオーバーすると、その行がハイライトされます。

みなさんもきれいな表を作ってみてくださいね。

複数人でデザイン制作を行ったり、クライアントさんとのデザインに関するやり取りって、なかなか大変ですよね。。。

「あと数ピクセル上に動かして」

とか

「これと、これを入れ替えて」

とか…

電話やメールでこのようなやり取りをすると、うまく相手に伝わらなかったり、相手の意味するところがいまいちよく分からなかったり・・・

そんな時に使えそうな『ConceptShare』がSmashing Magazineさんでご紹介されていました。。

Photoshopの注釈ツールなどがオンラインで使える感じです。。。

シンプルなインターフェースなので、簡単に使えそう。

左上の”Add”ボタンからファイルをアップロードします。（URLを入力してウェブページを取り込むことも可能です。確認してみたところ、日本語がうまく表示されませんでしたが…）

試しに、写真をアップロードして、コメント入れてみました。。

サイトのキャプチャー画像をアップして、修正の詳細を確認したりできそう。。。

左下の、Peopleの”Add”ボタンからユーザーを追加して、複数ユーザーでコンセプトの確認、書き込みが出来るようになります。。。

ロゴや、サイトのデザインのレビューをしたり、店舗の写真などをアップして内装やレイアウトのレビューなどなど。。いろいろ使えそうですねぇ～。

こちらからどうぞ～。
『ConceptShare』