DesignWalker » インスピレーション

ショッピングサイトをデザインする際に使えるサイトまとめ

admin — Thu, 03 Sep 2009 05:10:25 +0000

ショッピングサイトは扱っている商品やマーケティングはもちろんですが、デザインやインターフェースの使い勝手なども、売り上げにつながる大きな要素なのでは無いでしょうか？

カートの使いやすさ、商品の見やすさなど、デザイン部分で改善できる部分もたくさんありそうです。

今回は、ショッピングサイトをデザインする際に参考にできそうな使えるサイトをいろいろとまとめてみました。

35 Inspirational Shopping Cart Page Designs

意外とありそうで、あまり無かったショッピングカートのデザインのまとめ。ショッピングサイトでは、カートの使い勝手がとっても重要なのではないでしょうか？見やすくて、使いやすいカートのデザインが35種類まとめられています。いろいろと参考になります。

ecommr: a collection of e-commerce interface and design elements

Eコマースのデザインをするなら、絶対おすすめのecommr。ショッピングサイトのインターフェースや要素がたくさん集められています。こちらもかなり参考になりますね。

10 Tips to Design Usable Shopping Carts

使い勝手の良いカートをデザインするための10のティップスとカートのサンプルです。英語が不得意な方でも、画像を見ているだけでもとっても参考になりますよ。項目の部分だけ訳してみました。
1.フルページのカートとミニカート
2.ステップに分ける or １ページにまとめる
3.ミニカートからフルページのカートへアイコンでリンク
4.カートに入れるボタンをわかりやすく
5.見やすいTableレイアウト
6.ショッピングを続けるリンク
7.多すぎる入力項目を避ける
8.ヘルプをたくさん提供する
9.アイコンを使ってわかりやすく
10.つねに確認ページを使う

5 Tips and Tricks For An Effective eCommerce Site With 10 Brilliant Examples

こちらも、効果的なEコマースサイトを作る5つのティップスと10のサンプルです。こちらも、項目だけ意訳。
1.なぜこのサイトから購入するのかを明確に
2.商品にたどり着く方法（カテゴリーや検索など）をたくさん提供する
3.とにかく便利に！
4.ラッピングやトラッッキングなどの追加機能を付け加える
5.追加の料金などユーザーにネガティブな驚きを与えない

50 Inspirational E-Commerce Website Designs

とってもきれいなショッピングサイトをまとめて50サイト！

9 Characteristics of Well-Designed E-Commerce Websites

こちらもクールにデザインされたEコマースサイトが紹介されています。

23 Excellent Examples of How to Design Online Stores

こちらも23種類のかっこいいショッピングサイトがまとめられています。

Registration Usability – 87 Registration Forms Tested

ユーザー登録の際に、あまりにも項目が多いと、面倒になって登録されなくなってしまいます。かといって、あまりにも情報が少ないのも、マーケティングに使えないですね。このサイトでは、いろいろなユーザー登録から、どの項目が使われているのか、パーセントでまとめてくれています。少し情報が古いのですが、まだまだ参考になりそうです。

107 Add to Cart Buttons of the Top Online Retailers

100種類を超える『カートに入れる』ボタンのサンプルがまとめられています。

ウェブデザインのユーザーインターフェースに使えるサイトまとめ

admin — Mon, 24 Aug 2009 21:34:27 +0000

誰にでも簡単に使いやすいユーザーインターフェイスをデザインする事はウェブデザインにおいてとても重要な要素となります。

とは言っても、誰もが直感的に使いこなせるユーザーインターフェイスをデザインする事はなかなか簡単なことではありません…。

今回は、優れたウェブデザインのユーザーインターフェイスを作り出すために、参考になりそうなサンプルサイトをいろいろとまとめてみました。

User Interface (UI) screenshot collections

30あまりのカテゴリーに分けられたウェブデザインのユーザーインターフェースがスクリーンショット付きでまとめられているコレクション。とても助かります。

MephoBox | Web Design and Web Inspiration

こちらのサイトもカテゴリーに分けて、ユーザーインターフェースをまとめてくれています。数もこちらの方が多いかも。スクリーンショットも大きめで、見やすいです。

design|snips

すっきりと見やすくまとめられているので、お探しのユーザーインターフェースがサクッと見つかります。

Pattern Tap : Organized Web Design Collection of User Interfaces for Inspiration and Ideas.

カテゴリーの数も、集められているサンプルの数も、とっても多くて眺めていると時間を忘れてしまいそう…。とっても使えるサイトですね。

Infragistics Quince: UX Patterns Explorer

Silverlightで作られたサイトです。プラグインをインストールしてから見てください。

Konigi

詳細ページがきれいにまとめられていて、とっても見やすいサイトです。

UI Patterns —
Comprehensive User Interface Design Pattern Library

まとめてズラズラと眺めていくにはこのサイトが良さそうです。

Comprehensive User Interface Design Pattern Library" border="0" />

Yahoo! Design Pattern Library

Yahoo!がまとめるユーザーインターフェース。さすがです。

jQuery UI

jQueryのユーザーインターフェースをお探しなら、まずはこちらからです。

UI Pattern Factory

右カラムにある、タグからお探しのユーザーインターフェースを絞り込むと見やすいです。

StyleIgnite.com

レイアウトやナビゲーションなどとっても参考になるサンプルがまとめられています。

UI Scraps: user interface designs found by Jason Robb

アメリカ・ボストン在住のデザイナーJason Robb氏の気になるユーザーインターフェースをtumblrで

Interaction Design Pattern Library – Welie.com

ひとつひとつのユーザーインターフェースを詳しく解説してくれているサイトです。

flickr | [Design Solutions]

flickrにもたくさんユーザーインターフェイスの参考になるコレクションがたくさんあります。他にもこことか、ここもよさげです。

2009年上半期デザイントレンドまとめのまとめ

admin — Thu, 02 Jul 2009 07:10:24 +0000

早いもので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

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

携帯サイトデザインギャラリーいろいろ

admin — Tue, 02 Jun 2009 06:20:07 +0000

ウェブサイトのデザインギャラリーはたくさん公開されていますね。

携帯サイトになると、それほどデザインギャラリーは無いのかと思っていました。

でも、クオリティの高い携帯サイトのデザインギャラリーはいっぱいありました。今回は携帯サイトのデザインギャラリーをいろいろ集めてみました。

英語サイト

英語の携帯サイトギャラリーはiPhone用に作られたデザインがギャラリーがメインです。

Mobile Awesomeness

ユーザーが投稿できるモバイルウェブサイトデザインがアップされています。きれいなサイトがたくさんあります。

Web Design Inspiration for the iPhone

iPhone用サイトに特化したウェブデザインギャラリーです。

Mobify – Make your existing website mobile

こちらもとってもきれいなiPhone用サイトがたくさん掲載されています。

日本語サイト

携帯といえばやっぱり日本。日本の掲載サイトデザインギャラリーも参考になるサイトがたくさんあります。

25 Great Examples of iPhone Optimized Sites

モバイルウェブデザイナーのためのウェブデザインサイト集です。現在700を超えるサイトが掲載されています。

モバイルサイトデザイン集のモバイルデザインアーカイブ　公式サイト

モバミル – イケてる携帯サイトデザイン

みんなで集めるイケてる携帯サイトデザインギャラリーです。現在100件以上のサイトが投稿されています。

Site Seein’ – デザインが優れた携帯サイトのギャラリー

色やカテゴリーで絞り込める携帯サイトのデザインギャラリー

case:MobileDesign! モバイルサイトのデザイン

デザイン性の高い、掲載サイトが更新されているブログです。

Twitterの背景・テンプレートデザインに便利なサイトいろいろ

admin — Wed, 01 Apr 2009 05:04:56 +0000

このブログをご覧のみなさんで、Twitterを利用されている方も多いのではないでしょうか？

今回は、Twitterのデザインをもっとクールにできるように、インスピレーションまとめやデザインエディター、パターンや背景画像がダウンロードできるサイトなどをまとめてみました。

まずは、デザイナーの方などのクールなTwitterデザインを見て、参考にできるようなインスピレーションサイトからどうぞ。

インスピレーションサイト

25 of the Best Designed Twitter Homepages

25種類のとってもクールなTwitterデザインがまとめられています。

Twitter Background Design How-To and Best Practices

落ち着いた色見の背景を中心にいろいろとまとめられています。チュートリアルもあります。

40 Beautiful Twitter Theme Backgrounds

こちらは40種類のクールなTwitterの背景サイトを集められています。イラスト系が多いです。

30 Mind Blowing Inspirational Twitter Backgrounds

30種類のTwitterがまとめられています。どれもとってもきれいですね。

42 Twitter Backgrounds

42種類のTwitterデザインです。とても参考になります。

Twitter Backgrounds Gallery

Twitter専用のギャラリーサイトです。クールなデザインがたくさん集められています。デザインの参考にもなりますね。

パターン・背景画像・テンプレート

背景に使えるパターンや画像、テンプレートなどがダウンロードできるサイトはこちらから。

TwitterImage.com

こちらのサイトはTwitter用のクールな背景画像がたくさんあります。

Twitter Patterns

お気に入りの画像をクリックするだけでダウンロードできるTwitter用のパターンファイルサイト。

PatternCooler

結構、強めの背景が多いサイトです。

TweetStyle

Twitter用の背景画像をJPGやPNG、PSD形式でダウンロードできます。またテキストや背景などの色の設定なども公開されています。

Twitter themes

3種類のTwitter用テンプレートがダウンロードできます。

TwitterGallery.com

お気に入りのテンプレートを選んで、自分のTwitterのユーザー名とパスワードを入力するだけでテンプレートを反映してくれます。

デザインエディター

Twitter専用に作られたデザインエディターでお好みのTwitterデザインを作りたい人には。

MyTweetSpace.com

背景、フレームと順番にお好みのものを選ぶだけで簡単にTwitterデザインが完成するツール。

Online Twitter Background Designer / Generator

Twitter専用、テンプレートエディターです。

freetwitterdesigner.com

結構、高機能なTwitterようのデザインエディターです。

その他

自分で最初から背景画像を作ってみたいという方には

Make a Good Impression with a Custom Twitter Background

自分でTwitterの背景を作ってみたい人にはこちらの説明を読んでみるとよくわかります。（要英語力）

TwitterBacks.com

Twitter用に用意されているPSDファイルがダウンロードできます。

真似からはじめるウェブデザイン

admin — Mon, 09 Feb 2009 22:54:34 +0000

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

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

先日、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のテンプレート集です。このように、他のサイトを真似てテンプレートを作るとかなり勉強になりますよ。いくつかピックアップしてご紹介。

まだまだあるカラーツールいろいろ

admin — Wed, 28 Jan 2009 15:15:36 +0000

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

先日も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

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

オバマ大統領就任米国政府ウェブサイトもCHANGE! オバマデザインまとめ

admin — Thu, 22 Jan 2009 15:42:23 +0000

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

大統領候補者の中で誰よりも、ウェブの重要性を理解していたオバマ大統領は、ウェブに莫大な費用をかけ、キャンペーン中は、ウェブサイトだけでなく、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のチュートリアル。

ウェブデザインのレイアウトに役立つ１１サイト

admin — Fri, 16 Jan 2009 15:16:31 +0000

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

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

スライドスクリプトとスライドを上手く利用したウェブサイトいろいろ

admin — Fri, 09 Jan 2009 14:33:47 +0000

JavaScriptを使って、ダイナミックな動きのあるサイトがたくさんありますね。

今回は特にスライドに注目していろいろなスクリプトとスライドを上手く利用したウェブサイトをまとめてみました。

サンプルのスクリプトと、インスピレーションサイトを参考にして、かっこいい動きのあるサイト作りに挑戦してみてはいかがでしょうか？

インスピレーションサイト

これらのスライドスクリプトをうまく使うと、以下のようなかっこいいサイトがつくれますよ。ご参考にどうぞ。

DesignWalker » インスピレーション

ショッピングサイトをデザインする際に使えるサイトまとめ

ウェブデザインのユーザーインターフェースに使えるサイトまとめ

2009年 上半期デザイントレンドまとめのまとめ

携帯サイト デザインギャラリーいろいろ

英語サイト

日本語サイト

Twitterの背景・テンプレートデザインに便利なサイトいろいろ

インスピレーションサイト

パターン・背景画像・テンプレート

デザインエディター

その他

真似からはじめるウェブデザイン

Viget Labs

Sony CES 2009

GoodBytes Blog

hereslifeafrica

Blog Amuki

STUDIO7DESIGNS

AdaptD

Jared Campbell

Bart-Jan Verhoef

Boompa

Starbucks Coffee At Home

まだまだあるカラーツールいろいろ

オバマ大統領就任 米国政府ウェブサイトもCHANGE! オバマデザインまとめ

2009年上半期デザイントレンドまとめのまとめ

携帯サイトデザインギャラリーいろいろ

オバマ大統領就任米国政府ウェブサイトもCHANGE! オバマデザインまとめ