このブログを読んでいただいている方々はiPhone4をお使いの方も多いのではないでしょうか。

受信感度の低下問題などもありますが、3GSに比べてピクセル数が4倍にもなった高解像度ディスプレイは一度使い慣れてしまうと、もう戻れないくらい、ディスプレイに見惚れてしまいます。

せっかくの高解像度ディスプレイ。どうせなら壁紙も自分好みの高画質な壁紙にしたいですよね！

今回は、640ピクセルx960ピクセルの高解像度ディスプレイに対応した高画質なiPhone4壁紙サイトをまとめてみました。

お気に入りの一枚を見つけてくださいね！

iPhone 4 wallpapers

様々なカテゴリに分けられた960ピクセルx640ピクセルのiPhone4専用の壁紙サイト。きっとお気に入りの一枚が見つかるはずですよ。

Poolga

おなじみPoolgaさんのiPhone4専用ページ。個性的で可愛らしい壁紙が沢山ありますよね！

iPhone Wallpapers That Don’t Suck

tumblrで作られたiPhone4壁紙ぺーじ。かっこいい壁紙が沢山。

Awesome Retina wallpapers, wallpapers for iPhone 4

クールな壁紙が多く公開されています。

InterfaceLIFT

こちらも有名な壁紙サイトInterfaceLIFTさんのiPhone4用の壁紙ページ。

Daily iPhone Blog

サイトに掲載されている壁紙の数はとてもたくさん。クール系、カワイイ系、セクシー系などなど。

iPhone 4 Wallpapers, iPhone 4 Backgrounds

ジャンル毎に分けてまとめられています。種類も豊富。

Dagens tips: 50+ Underbara bakgrundsbilder till iPhone 4

クール系の壁紙を中心に50枚ほどまとめてくれています。

The Grid iPhone Wallpapers

アプリのアイコンが収まるように作られたグリッドの壁紙。

iPhone 4 Wallpapers, iPhone 4 Backgrounds

こちらもiPhone4専用の壁紙サイト。様々なジャンルの壁紙が公開されています。

Flickr: The iPhone 4 Wallpapers Pool

flickrにもたくさんの壁紙がアップされています。

iPhone 4 Wallpapers

まだ少ししか壁紙が掲載されていないのですが、シンプルで可愛らしい壁紙がいくつか公開されています。

16 Apple-Wallpapers für iPhone 4 & iPad

アップルのロゴをモチーフにした壁紙が16種類まとめられています。

ウェブサイトの表示速度を少しでもスピードアップするためには、様々なウェブサイトの最適化の方法がありますが、写真やイラストなどの画像ファイルを軽量化する事が最も手軽で簡単な方法の一つではないでしょうか？

画像の劣化をなるべく抑えながら、軽量化できれば、表示速度も早くなりますね。

今回は、無料で使える画像最適化ツールをいくつかご紹介します。

ImageOptim

Mac OS X用の画像最適化ツールです。ファイルをドラッグ&ドロップするだけのとってもシンプルなツールです。

punypng – PNG Compression and Image Optimization

こちらはオンラインツール。最適化したい画像ファイルをアップすれば、画像を最適化してダウンロードできるようにしてくれます。手軽に使えますね。

Smush.it™

こちらもオンラインツール。最大5つまとめて最適化できるので、沢山ファイルがある場合には便利ですね。こちらはファイルをサーバにアップしてURLを入力するタイプです。

Online Image Optimizer

こちらは、サーバ上のファイル、もしくはアップロード両方使える最適化ツールです。さらにコンバーターもついているので、jpgからpng、gifからpngなど変換も同時にできるようです。

SuperPNG

Win、Macどちらでも使えるPhotoshop用のプラグインです。

RIOT – Radical Image Optimization Tool

こちらはWindows用です。最適化後のプレビュー画像を見る事ができます。

PNGGauntlet

JPG, GIF, TGA, PCX, BMPなどの形式のファイルを最適化してPNGに変換してくれます。

SuperGIF

こちらはgif形式のファイルを最適化するツールです。Win、Mac両方のバージョンが公開されています。

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

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

今回は、そんな万が一のときに備えておける、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にも無料で使えるポータブルアプリがたくさん。人気順にも並べ替えられるので、使えるアプリをサクッと探せます。

本日は、iPhoneの壁紙サイトのまとめです。

毎日、見る画面なのでやっぱり、おしゃれなもの、自分の気に入った壁紙を設定したいですよね。

なるべくおしゃれな壁紙を無料で配布されているサイトをまとめてみました。

+KN | Kitsune Noir » The Desktop Wallpaper Project

iPhone用だけでなく、とってもおしゃれなイラスト系のデスクトップ用の壁紙などを中心にさまざまなサイズの壁紙が配布されています。

Poolga. iPhone and iPod Touch wallpapers for the rest of us.

めちゃめちゃかわいらしいイラストメインの壁紙サイトです。

Pixelgirl Presents Free Icons, Desktops and Gallery Shop!

独特なタッチのイラスト系の壁紙がいっぱいあります。

iphone & desktop wallpapers for font freaks & typenuts

数は少ないのですが、センスを感じる壁紙が配布されています。

veer.com

おしゃれな壁紙をお探しなら、まずは、ここを探せば間違いないですね。

iDesign * iPhone – Free iPhone Wallpapers

アニメ、イラスト、写真などなどさまざまなジャンルの壁紙がまとめられています。

i love typography, the typography and fonts blog

タイポグラフィーがお好きなら、こちらの壁紙がきっと気に入るはず。

glennz.com

ちょっと笑ってしまうようなイラストの壁紙が配布されています。

ThemeMyPhone : Free Apple iPhone 3GS Wallpapers

アニメ、アニマル、写真などなど、こちらもさまざまなジャンルの壁紙がいっぱいありますね。

50 iPhone Wallpapers for Design Lovers

デザイナーの方々が喜びそうな、壁紙セレクションです。

chrisglass.com

かわいらしい壁紙がたくさん。まとめてダウンロードできるのも便利。

iphonetoolbox.com

こちらもオールジャンルの壁紙サイト

iPhone Wallpapers

映画やTVドラマ系の壁紙ならこちら。セクシー系も充実してます。

InterfaceLIFT

デスクトップの壁紙で有名なサイトですが、iPhone用の壁紙も一緒に配布されています。

alliphonewallpapers.com

こちらは、オールジャンルの壁紙サイトですが、セクシー系の壁紙が目立っているような・・・。

Flickr: The iPhone Wallpapers Pool

FlickrのiPhone壁紙 Poolもなかなか見逃せません。

人気のオープンソースCMS Joomla!を利用されている方も多いのではないでしょうか。

世界的なシェアも非常に高く、クオリティの高いテンプレートやJoomla!をさらにパワーアップさせてくれるExtensionsなどなど、たくさん公開されています。

今回は、無料で使えるJoomla!のテンプレートをまとめてみました。

Best of Joomla!

テンプレートの数も豊富で、とっても見やすくランキングなどの見せ方も、とっても上手なサイトです。お気に入りのテンプレートが必ず見つかるはず。

Joomla Templates Club

テンプレートは豊富で、さらにExtensionsもたくさんまとめられております。

Joomla24.com

2200種類を超えるテンプレートの数と、サムネイルだけでなくプレビューがあるところがとっても便利です。

SiteGround Template Gallery

バージョン1.0と1.5系でカテゴリ分けされたテンプレートサイト。

BoyGJ.COM

Joomlaテンプレートだけでなく、WordPressのテンプレートなども扱っています。

themesBase.com

有料テンプレートサイトですが、無料のテンプレートもたくさん掲載されています。

joomlashack.com

数はそれほど多くはありませんが、とっても見やすいテンプレートサイトです。

RocketTheme

とってもきれいなJoomlaのコミュニティサイトです。無料のテンプレートもいくつか紹介されています。

JoomlaJunkie

テンプレートをダウンロードするには、ユーザー登録が必要です。

joomla templates – IbolDesign

かわいらしいテンプレートが豊富です。

Joomla Show

イタリアの語のJoomlaテンプレートサイトです。

joomlaos.de

ドイツ語のJoomlaテンプレートサイトです。かなりたくさんの数のテンプレートが紹介されています。

The Ultimate Joomla Toolbox: Themes, Extensions and Resources

とってもかっこいいテンプレートや、使えるExtensionsなどが満載。

35 Beautiful Commercial And Free Joomla Templates

商用テンプレートと無料テンプレートともにクオリティの高いテンプレートがまとめられています。

ちょっとしたFlashエフェクトにセンスを感じる事はありませんか？

光の微妙な加減や、ちょっとしたスムーズ動きで自然に見せるFlashは、見ているだけでも楽しめますね。

たまには、このFlashどうやって作ってるんだろう？？って思うほどすごいものもちらほらあります。

今回は、そんなイライラも解消できるように、ソースもダウンロードできるハイクオリティなFlashエフェクトをいろいろとまとめてみました。

Levitated Daily Source, the good source

さまざまなFlashのエフェクトがソース付きで公開されています。どのエフェクトもとてもハイクオリティです！

gotoandlearn.com

チュートリアル動画とソース両方がダウンロードできるサイトです。Flashの勉強をしている方にはとっても便利なサイトです。

Cool Flash mask effect

マスクを利用して、ロボットの光を表現するとってもきれいなエフェクトです。

ソースはこちらからダウンロード

Flash Blur Transition Effect

ぼかして画像を切り替えてくれるエフェクトです。いろいろな場面で使える重宝しそうなエフェクトですね。

ソースはこちらからダウンロード

Cube transition on mouse rollover

キューブがダイナミックに回転して切り替えてくれるエフェクト。かなりのインパクトがありますね。

ソースはこちらからダウンロード

Circular Ripple Effect in Flash

水中での水の揺らめきを表現するエフェクトです。

ソースはこちらからダウンロード

Flash Ripple Effect

水面に映った顔がゆらゆらと揺れているようなエフェクト。微妙な揺れがとっても自然です。

ソースはこちらからダウンロード

Blur transition effect

マウスオーバーするとぼやけた写真がくっきりピントがあうようになるエフェクトです。こちらもいろいろな場面で使えそうですね。

ソースはこちらからダウンロード

SOSUECHTIG.DE complete FLA by ~patqueisler

とってもきれいなFlashテンプレートです。背景や光のエフェクトが絶妙です！

ソースはこちらからダウンロード

Masking background fla files

マスクを利用して、背景を切り替えるエフェクトです。

ソースはこちらからダウンロード

Business Card Flip Effect (Class With Source)

カードがくるりと裏返るエフェクトです。

ソースはこちらからダウンロード

Jadchor menu reworked by ~tecwzrd

マウスオーバーするとメニューが切り替わるエフェクト

ソースはこちらからダウンロード

Energy .FLA by =Flahorn

さりげない光のエフェクトがかっこいいです

ソースはこちらからダウンロード

Matrix Effect – FLA by ~5uRt

おなじみマトリックスのエフェクトです。

ソースはこちらからダウンロード

Squeeze Effect Source Code

画面上部から絞り出したようなエフェクトです。

ソースはこちらからダウンロード

Creating the the Shine Effect

きらっと光るエフェクトもいろいろ使えそうです。

ソースはこちらからダウンロード

Create a fire in Flash 8

炎がゆらゆらと揺らめくエフェクトです。

ソースはこちらからダウンロード

The Effect Generator

Flashのエフェクトジェネレーターです。コンポーネントを作って、エフェクトのアイコンをドラッグするだけで簡単にかっこいいエフェクトが生成されます。

デザインは最終的には好みの問題になってしまうので、クライアントの意向などで、なかなかデザイナーが提案したものに仕上がらない事もよくあります。

クライアント側の意見を後から後から追加されてしまい、結果的にはハチャメチャなデザインになってしまう事も…。

しかし、クライアントへ、きっちりと提案したデザインが効果的であるという事を提示できれば、納得してくれるのではないでしょうか？

Googleから提供されているウェブサイトオプティマイザーを利用すれば、簡単にデザインの効果測定（A/Bテスト）ができるので、なかなか使えるツールになるのでは？

Googleウェブサイトオプティマイザーは、同時に複数のデザインを公開してクリック率やコンバージョン率などを測定し、どちらのデザインがより効果的なのかを比較できるツールです。

クライアントの予算にもよりますが…。クライアントが主張するデザインと、デザイナーが提案するデザインに大きな溝がある場合、２つのデザインを同時に公開し、ランダムに訪問するユーザーを振り分け、効果を測定し効果の高いデザインを採用すれば、両者が納得してサイト制作を進めていく事が出来るでしょう。

今回は、Googleウェブサイトオプティマイザーなどのツールを使って、実際にデザインの比較テストをしている事例をピックアップしてみました。

Googleウェブサイトオプティマイザー

Googleウェブサイトオプティマイザーのページはこのような感じ。数字やグラフで一目で効果的なページがわかります。

Make sense of your site: tips for webpage design

もちろんGoogle社内でもこのツールは活用されていました。Googleのデザイナーの人たちは、以下の２パターンのデザインを比較し、多くのデザイナーが上のスクリーンショット付きのデザインに決定するだろうと予測していたようですが…。

なんと、結果は下のシンプルなデザインの方が30％もダウンロード数が多かったという結果がでたようです。Googleのデザイナーでもどちらのデザインがユーザーの心をつかむのかは、わからなかったという事ですね…。

画像を使ってインパクトを高める事と、コンバージョンをアップさせる事は必ずしもイコールではないという事ですね。

How Obama’s team used A/B testing to improve fund raising

アメリカ大統領選挙を制したオバマ大統領のウェブサイトでもしっかりとA/Bテストを行っているようです。サイトに掲載するTシャツのデザインを比較し、より効果的なデザインと配置を検証しているようです。

Google Website Optimizer Test: We Didn’t Implement the Winner

こちらもA/Bテストを行って、コンバージョン率を大幅にアップさせる事に成功した事例です。しかしながら、クライアントと話しあい、将来的なプランも見据えて2番めにアップしたデザインを採用したようです。クライアントとより深い関係を築く事が出来るのもA/Bテストの利点ではないでしょうか？

Sparkt Studio

数パターンのデザインを比較検証した結果、最も効果的だったデザインを採用した事例です。

最終的には、以下のデザインが採用されたようです。

Writing Decisions: Headline tests on the Highrise signup page

こちらの事例は、デザインというよりは、キャッチコピーのA/Bテストの例です。上がオリジナルのコピー、下が30％コンバージョン率をアップさせたコピーだそうです。他にも様々なコピーの組み合わせが比較されています。少しの違いのように見えますが、結果には大きな違いがでるのですね…。

Should Retail Email Sell or Inform? An A/B Split Test Case Study

フォントやサイズ、コピーを変える事で、クリック率を7％、コンバージョン率を6％、売り上げを15％もアップさせた事例です。

Experiment or Go Home!

お花屋さんのサイトで、花の写真だけでなく、女性の写真をくわえる事でアップさせた事例です。

Experimentando con el Test A/B

こちらは、スペイン語で書かれているのですが…。アイコンを上に配置する、吹き出しの色を変えてみるなど、デザインのマイナーチェンジで比較する事例です。

Demo Club A/B test results

こちらは、お問い合わせフォームのA/Bテストです。上か下か、結局どちらが採用されたかわかりますか？正解はこちら。

各ブラウザやバージョンでデザインをチェックするのは、なかなか大変な作業ですね…。

クロスブラウザのチェックはなるべく時間をかけずに済ませたいものです。今回はブラウザチェックに使えそうなツールをいくつかまとめてみました。

Xenocode Browser Sandbox

インストールしなくてもブラウザからクリックするだけで各ブラウザが立ち上がるツール。これは便利ですね。ブラウザだけでなく、他のソフトウェアも立ち上げることが可能です。例えば…

Gimp

Embedも出来ちゃうようです。ブラウザチェックには関係ありませんが…。

IETester

IE5.5〜8までチェックできるツールです。

Multiple IE

IE3.0〜6.0までを同時にインストールできるソフトウェアです。

Browsershots

URLを入力するだけで、さまざまなブラウザのスクリーンショットを撮ってくれるツールです。

NitobiBug

IE、Firefox、Safari、Operaなどのブラウザで利用できるJavaScriptデバッグツール

TestiPhone.com

iPhoneのニュミレーターです。

iモードHTMLシミュレータII

iモードのエミュレータです。

Openwave® SDK 6.2K

AU携帯のエミュレータです。現在一時公開停止中でした…。すみません。

先日、人気を集めていたQbrushesさんのエントリー『40+ Free Vector Graphics and Photoshop Brushes For Commercial Use』

40+ Free Vector Graphics and Photoshop Brushes For Commercial Use

商用利用も可能な、ベクター素材とPhotoshopのブラシをまとめられていました。

今回は、まだまだある、商用利用可能なベクター素材をまとめてみました。

Free Vector Art & Graphics

商用利用可能なベクター素材をいろいろな所から集めたギャラリーサイト。大量にありますね。

Free Vector Graphics: Original Vectors Free For Commercial Use

こちらのサイトも、すべて商用利用可能なベクター素材ばかりがカテゴリーに分けて並んでいます。

Commercial Use | Qvectors Free Vector Graphics

こちらは、ベクター素材のギャラリーサイトから、商用利用OKなカテゴリへリンクしてます。

Free Vector Art

このサイトに掲載されているベクター素材すべてが、商用利用OKなわけではないので、ライセンスを確認しないといけませんが…。Licenseの項目にcommercial Useと書いてあれば利用可能です。

I Heart Vector

こちらもすべてではないですが、掲載されているほとんどのベクター素材が商用利用OKでした。こちらもライセンスの確認が必要です。

KEEP DESIGNING

質の高いベクター素材がいっぱいです。

Graphics: Free Smashing Vector Icon Set – Milky

120種類もの、かわいらしいアイコン素材が利用可能です。

Bright! – a free icon set

こちらは148種類のアイコンがベクター形式で公開されています。もちろん商用利用可能。

Best collection of free vector graphics at free-vectors.com

こちらにも、たくさんのベクター素材が公開されていました。

Free Vector Icons Pack, 85 Icons Set | instantShift

使い勝手の良さそうな、ボタン系ベクター素材が公開されています。

LogoTemplater.com

このまま使っても、自分でアレンジしても良い、ロゴのテンプレートがベクター形式で利用可能です。

Free Vector Cliparts | N.DESIGN STUDIO

かわいらしいアイコン素材が公開されています。

Chadlonius.com – Free Vector Resources – Free Vector Illustrations

結構、手の込んだベクター素材がたくさん公開されています。

Round Pixel

使えそうなベクター素材がいろいろありました。

VectorJungle – Free Vector Art, Vector Graphics and Backgrounds

かわいらしいベクター素材がたくさんありますね。

Vector Freeware

シンプルなものから、ちょっと変わったものまで、個性的なベクター素材がいろいろあります。

Photoshopのアクションファイルは、ブラシ同様に多くのクリエイターが無料で配布している、Photoshopで読み込み可能なファイルです。

アクションファイルは、あらかじめPhotoshopの作業工程が記憶されているファイルで、その作業工程を自動で再現してくれる、とっても便利な機能です。

プロの技を保存したアクションファイルを手に入れると、クリック一回でプロの作業工程を再現してくれるのです。

まずは、アクションファイルのインストール方法から。

1. アクションウインドウを開く

既に、いくつかのアクションがプリセットされています。

2. アクションファイルを読み込む

アクションウインドウの右上の矢印ボタンをクリックして、『アクションファイルの読み込み』をクリックして、インストールしたいファクションファイルを選択します。今回、インストールしたアクションファイルは、こちら

3. アクションファイルのスタート

読み込んだアクションを選択して、ウインドウしたの矢印ボタンをクリックしてアクションをスタートします。

今回、以下の画像を用意していたのですが。

クリック一回で以下のようになりました。

このように、アクションファイルを利用すると自動で画像の加工をしてくれます。

他にもたくさん無料でアクションファイルが公開されているので、いくつかまとめてみました。

The Ultimate Collection Of Useful Photoshop Actions

おなじみSmashingMagazineさんのアクションファイルまとめ。タイトル通り、最強のコレクションです…。

http://www.visual-blast.com/photoshop/124-free-photoshop-actions/

こちらのまとめもいい感じ。クオリティの高いアクションファイルがたくさんまとめられております。

Photoshop Actions on deviantART

deviantARTのアクションページにもたくさんファイルがアップされています。以下は人気順にアクションファイルを表示してみました。さすがに人気の高いアクションファイルはクオリティ高いです。

PanosFX.com – PS Freebies

こちらもたくさんアクションファイルが公開されています。サンプルで使用した扇子のアクションは、こちらからダウンロードしました。

ADDICTED TO DESIGN

数は少ないですが、無料でいい感じのアクションファイルが公開されています。有料版もあります。

Action Central

すこしわかりづらいのが難点ですが、数はかなりあります。

Digital Darkroom

こちらも少しわかりづらいのですが…。結構使えるアクションファイルが多数掲載されています。