DesignWalker » 仕事で使えるツール

ワイヤーフレームに使える素材いろいろ

admin — Wed, 05 May 2010 23:06:22 +0000

以前、このブログでご紹介した「ウェブサイトの設計図ワイヤーフレームを活用しよう」

ウェブサイトをデザインする前に、用意すると、とっても便利なワイヤーフレーム。

ページの各要素をレイアウトして、デザイン制作をスムーズに行うことが出来ます。

今回は、そんなワイヤーフレームに使える素材をいろいろとまとめてみました。

Design Stencils – Design Pattern Library – YDN

Yahoo!デベロッパーネットワークで公開されているステンシル。いろんな形式でダウンロードできるので、とても便利ですよ。

Free Sketching & Wireframing Kit

こちらもワイヤーフレームに必要な要素を一通りまとめてくれています。IllustratorやPDF、SVG、EPSでファイルを公開してくれているので、助かりますね。

Wireframe Symbols

Illustrator形式でダウンロードできるワイヤーフレームのシンボルファイル。

OmniGraffle Wireframe Stencils | Konigi

オムニグラフでかなり使えるステンシル。

Free Web UI Wireframe Kit

こちらもオムニグラフでつかえるシンプルなキットです。

OmniGraffle UX Template | Konigi

サイトのページレイアウトに重宝しそうなテンプレート。

Mac OS X Interface 2

こちらはMax OS Xのテンプレートです。

Flex 3 Stencil

こちらはFlexのステンシル

Web Page Elements

小さなアイコンも含まれているページ要素がまとめられています。

Designers Toolbox: OS Form Elements

ブラウザごとにフォームの要素がまとめられています。

Browser Form Elements PSD

Photoshop形式でまとめられている、フォーム要素。FirefoxとIEバージョンでまとめられています。

Turquoise PSD « Ps Galaxy – Free PSD Files and best photoshop Freebies

こちらは、Vistaの要素がPhotoshop形式でまとめられています。

Web Form Elements Vol.2

サンプルしかダウンロード出来ませんが。とっても参考になりますよ。

Web Form Elements

こちらもクールなウェブフォームのサンプルです。

Webdesigner kit

Photoshop形式でちょっとした要素がまとめられています。

WEB UI Treasure Chest v 1.0

ボタンやフォーム、アイコンなど、いろいろな場面で使えそうな要素がいっぱい詰まっています。

Windows 7 Window PSD

ウィンドウズ7の要素をPhotoshopでどうぞ。

Exclusive Free GUI Pack from Art.Gen

とっても質感のある、ボタンがまとめられています。

iPhone and iPad Development GUI Kits, Stencils and Icons

iPhoneとiPadのステンシルとアイコンがまとめられています。

UI Design : Google Android GUI Application Mockup PSD

こちらはAndroidの要素がまとめられています。

A wireframe kit for Google Drawings and 5 reasons it beats Omnigraffle and Visio

Google Drawingsで使えるワイヤーフレームのキットがまとめられています。

ウェブデザイナーにおすすめ Google Chromeエクステンションいろいろ

admin — Sun, 18 Apr 2010 21:47:52 +0000

最近では、Google Chromeを標準のブラウザとして利用されている方々も多いのではないでしょうか。

表示もサクサクで自分好みに拡張できるエクステンションもだんだんと充実してきました。

今回は、ウェブデザイナーやデベロッパーの方々におすすめのGoogle Chromeのエクステンションをまとめてみました。

Web Developer

FirefoxでもおなじみのWeb DeveloperのChrome版。CSSやForm、画像表示、アウトラインなどなどとっても便利な機能が満載です。

Pendule

こちらもWeb Developerに良く似たエクステンション。CSS、JavaScript、画像の表示、カラーピッカーやルーラーまでついてる優れもの！

Firebug Lite

おなじみFirebugのChrome版。CSS, HTML, JavaScriptを編集する事が可能です。

MeasureIt!

こちらも必須のツールではないでしょうか。サイズを計る事ができるエクステンション。

Pixlr Grabber

表示部分、ページ全体、選択部分でスクリーンキャプチャーが撮れるツールです。

Webpage Screenshot

こちらも簡単にスクリーンショットが保存できるツールです。

Aviary Screen Capture

スクリーンショットを撮って、直接Aviaryのウェブアプリで画像を編集することができます。

Clip to Evernote

Evernoteをお使いの方には便利。気になる記事や画像をEvernoteに簡単クリップ。

Resolution Test

クリックひとつで指定のサイズにブラウザをリサイズしてくれます。

IE Tab

Chrome内でIEによるページ表示をしてくれるエクステンション。

Eye Dropper

表示しているウェブページから色を抽出できるカラーピッカー。

Color Picker

サクサク動くカラーピッカー。ウェブページからのカラー抽出ができれば良いのですが…。

Chrome Sniffer

表示中のウェブページがどんなフレームワークやCMS、JavaScriptのライブラリを使っているのかアイコンで表示してくれます。

Docs PDF/PowerPoint Viewer

PDF/PowerPointファイルをGoogleドキュメントのドキュメントから開くようにしてくれます。

Chrome SEO

各検索エンジンのバックリンクやトラフィックランクなどクリックひとつでSEO情報が簡単に確認できるようになります。

Googleウェブサイトオプティマイザーで効果的なデザインを提供する方法

admin — Sun, 10 May 2009 22:11:34 +0000

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

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

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

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テストです。上か下か、結局どちらが採用されたかわかりますか？正解はこちら。

無料で使える2009年カレンダーいろいろ

admin — Wed, 07 Jan 2009 14:15:43 +0000

少し、遅くなってしまいましたが、明けましておめでとうございます。
今年も、デザインウォーカーをどうぞよろしくお願いいたします。

みなさんは、もうカレンダーを買われましたか？意外とカレンダーって買おうと思うとなかなか良いデザインが見つからず、まぁ今回はいいかと思っているうちに年を越してしまい、買わずに時が過ぎてしまうって事無いですか？

今回は、とりあえず、無料ですぐに使える2009年のカレンダーをまとめてみました。

Download Your Free Spoonzilla Desktop Calendar

PDFファイルをダウンロードしてプリント。ラインに沿って切り取ると卓上カレンダーが出来上がります。

Thumb Calendar

ちょっと見づらいですが…裏表このカード一枚で１年分のカレンダーになってます。

2009 Calendar + Wallpaper Pack by `GeorgeHarrison

iPhone、iPodTouchユーザーにはうれしい、壁紙カレンダーです。

Desktop Wallpaper Calendar: January 2009

かわいいものからクールなものまでカレンダー付きの壁紙がまとめられております。

2009 Calendar download

１２種類のクオリティの高いCGの壁紙カレンダーです。

Wallpaper collection: Calendar wallpaer 2009

こちらも１２ヶ月分きれいな写真のデスクトップ用の壁紙カレンダーです。

Various Calendar 2009 Design Inspiration

クールなカレンダーデザインがまとめられております。

2009 calendar in 6 formats by *123freevectors

ベクター形式でさまざまなタイプのカレンダーが公開されています。

Free Printable Calendars

色違いや形式の違う１２種類のカレンダーがPDF形式でダウンロードできます。

Make your own calendar 2009 in PDF

お気に入りの写真を入れて、PDF形式でダウンロードできるカレンダー・ジェネレータ。

PDFCalendar.com

自分で設定してPDF形式でダウンロードできるカレンダー・ジェネレータです。

手軽で使い勝手の良いCompact Calendar 2009 (でぃべろっぱーず・さいど)

Compact Calendarの日本語版です。Excel、PDF形式でダウンロードできます。

カレンダーを無料でダウンロード-パソコンカレンダーサイト

こちらも日本語でいろいろなタイプのカレンダーがPDF形式でダウンロードできます。

Dynamic Templates v2.02: The Next Generation

Mac版、Windows版それぞれ公開されているテンプレート・アプリケーションです。年、月、週、日ごとのテンプレートが入っています。サイズ設定もできるので、手帳のサイズに合わせてプリントすると便利ですね。

2009 calendars – Templates – Microsoft Office Online

Microsoftのサイトにも、WordやExcel形式のカレンダーがたくさんアップされています。

Plain Free Calendar Templates

こちらもオーソドックスなタイプのカレンダーが豊富です。

2009 Calendar template

クールなベクター形式のカレンダー

Calendar 2009 – free download!

Illustrator形式で、ダウンロードできるスタンダードなカレンダー。

Calendario 2009 vettoriale

PDF、EPS、AIなど、さまざまな形式で公開されているイタリア語のカレンダーです。

ニュースレターテンプレートとツールいろいろ

admin — Tue, 07 Oct 2008 08:05:27 +0000

HTMLでニュースレターを作成するのは、なかなか手間のかかる作業ですね。

ブラウザ同様に、様々なメールクライアントが存在するので、ひとつひとつチェックするのは大変です。

今回は、簡単に使えるニュースレター用のテンプレートとツールをまとめてみました。

CSS support in email clients

まずは、メールクライアントのスタイル対応表。メジャーなメールクライアントと、ウェブメールを一覧で確認できるので便利ですね。

テンプレート

テンプレートを使えば、お手軽にHTMLメールを作成できますね。そのまま使っても、ちょっとカスタマイズしても。ウェブとはちょっと違ったHTMLのコーディングの参考にも使えます。

33 free HTML email templates to get you started

Newsletter Templates | cakemail.com

HTML email templates by AWeber

HTMLemailers.com

チェック

メールクライアントをひとつひとつチェックするのは、なかなか大変です。そんな時は、チェックツールが便利です。

Testing Software for Web Professionals – Litmus

有料のツールなのですが、主要なメールクライアントでテストができるので、とっても便利。

Campaign Monitor

こちらも有料ですが、いろいろなメールクライアントでテストできます。このシステムから、メールをデザインして送信までできます。

ギャラリー

ニュースレターをデザインする人には、とっても参考になりそうな、ニュースレターのギャラリーサイトです。たくさんのニュースレターが集められているので、見てるだけでも楽しめます。

Email Design Gallery

Newsletter Archive – Help preserve the world’s email newsletters!

ニュースレターツール

メールの作成から、購読者の管理、解析ツールまでニュースレター送信に使えるツールをいくつかご紹介。

HTML Email Marketing from MailChimp

月に６通、100ユーザーまでは無料のニュースレターツールです。解析ツールも使えて便利ですね。

Letterpop

こちらは、年間10通、25ユーザーまでは無料です。

OpenEMM

こちらは、オープンソースのメール・マーケティングツールです。

Zookoda

こちらは、特にブロガーのために作られた無料のメールマーケティング・アプリケーションです。ブログに貼付けられる登録フォームなども用意されています。

phplist

オープンソースのニュースレター・マネージャーです。送信したメールが開かれたかどうか追跡してくれたり、クリックなどの追跡機能も豊富でなかなか使えそう。

サイトでチャートやグラフを使いたい時に使えるまとめパート2

admin — Fri, 11 Jul 2008 04:45:09 +0000

以前、このブログでご紹介した『サイトでグラフを使いたい時に使えるまとめ』

前回は、Illustratorのチュートリアルなどを中心にグラフの描き方をまとめたのですが、今回はFlashやScriptなどを使って、なるべく簡単にサイトにチャートやグラフを表示できる方法を中心にまとめてみました。

Chart Chooser

ExcelやPowerPoint用にきれいなチャートがダウンロードできます。

Open Flash Chart

Flashを使ったオープンソースのチャートです。とてもきれいなチャートが作れそう。

FusionCharts Free

こちらもFlashベースのとってもきれいなチャートです。

XML/SWF Charts

XMLとSWFで作られたチャートです。

PHP/SWF Charts

PHPとSWFで作られたチャートです。

flot

jQueryを使って作れるチャートです。

Flotr

Flotを元に、Prototypeをベースに書かれたチャートです。

PlotKit

こちらもJavaScriptチャートです。

Silverlight Charts

MicrosoftのSilverlightで動くチャートです。

JFreeChart

JAVAのチャートライブラリです。

Libchart

チャート作成PHPライブラリ。

.netCHARTING

MySQL,Access,Excel,XML,Oracleなどなど、さまざまなタイプに対応したチャートエンジンです。

Create A Graph

デザイン、データ、ラベルと手順に沿って入力していくときれいなグラフが作れるジェネレーター。

ウェブの画面設計に使えるまとめ

admin — Fri, 30 May 2008 08:06:59 +0000

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

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

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

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デザイン用のツールです。手書きで書き進めていく感じのツールです。

クリップアートいろいろ Part3

admin — Tue, 13 May 2008 05:51:56 +0000

以前、このブログでご紹介したクリップアートのまとめいろいろ。

『ベクター画像のクリップアートいろいろ』や『無料で使えるクリップアート集 – ６サイト』

でも、ご紹介いたしました。ちょっとしたクリップアートを加えるだけでも、見栄えは結構変わりますよね。

今回は、クリップアートまとめ第３弾です。

Miss Mary’s Vintage Image Archive Royalty Free Clip Art Images

Maryさんの描いたとってもきれいなクリップアートが無料でダウンロードできます！無料のクリップアートは現在46種類です。

Clipart deSIGN – Free Vector Clip Art and Illustrations

500種類以上のハイクオリティなベクター・クリップアートやアイコンが無料で。

Free-Clipart-Pictures.net

かわいらしいクリップアートが大量にあります。

Havana Street retro clip art and stock illustration

こちらは、基本有料のサイトなのですが、かわいい子供のクリップアートが無料でダウンロードできます。

Open Clip Art Library Drawing Together

以前にもご紹介した、Open Clip Art Library。パブリックドメインのクリップアートいっぱいです。

DK Clip Art

個人的に利用したり、学校のプロジェクトなどで使う場合は無料で使えます。

Clker.com – The online royalty free clipart

現在15,000を超えるクリップアートが紹介されています。PNG、SVG形式でダウンロードできます。

Discoverty Education

ディスカバリーチャンネルで有名なディスカバリー・コミュニケーションズ社が運営するサイトで公開されているクリップアート。

School Clip Art for Teachers and Kids

こちらも大量のクリップアートが公開されています。

Kaboose.com

きれいにカテゴリに分けられているkaboose。サイトのデザインもきれいですね。

Daily Clip Art

クリップアートがどんどん紹介されていくブログ。

Hasslefreeclipart.com

ちょっぴりレトロなクリップアートがいっぱいです。

PDClipart.org – Public Domain Clip Art

25,000を超えるパブリックドメインのクリップアートがまとめられております。

Free Clip Art Library at FunDraw.com

クリップアートに文字やシェイプなどが足せるFunDraw

Microsoft Office Online

Microsoftのサイトにも、使えるクリップアートがたくさん公開されています。

OxygenOffice Pro

OpenOfficeの修正バージョンOxygenOfficeは、3,000種類以上のクリップアートがインストールされています。

ロゴ・テンプレートを活用しよう

admin — Thu, 08 May 2008 05:29:25 +0000

新しく会社やサイト、サービスなどを立ち上げた時、最初に悩むのが名前とロゴのデザインではないでしょうか？

ロゴは、デザイナーさんに制作依頼すると結構、高くついてしまったりする事も…。

本日は、無料で（もしくは、なるべく安価に）作れるロゴのテンプレートとジェネレータのサービスをまとめてみました。

LogoTemplater.com

数はまだまだ少ないですが、とってもきれいなロゴのテンプレートが公開されています。ファイルはai、eps, pdf, jpg形式でダウンロードする事ができます！

Layouts4free.com

こちらは、Photoshop形式でロゴのテンプレートがダウンロードできます。フォントファイルも入っていて、自由にカスタマイズできます。

Interspire

IllustratorとPhotoshop形式でロゴがダウンロードできます。

TemplateWorkz.com

こちらもきれいなロゴをPhotoshop形式でダウンロードできるはずなんですが…エラーが出ていて、現在ダウンロードできませんでした。。エラーが解消してくれる事を祈りつつ、とりあえずご紹介。

Pixellogo

こちらは有料のサイトなのですが、とってもハイクオリティなロゴが$39から購入できます。これくらいの値段でこのクオリティなら、買ってもいいかもしれませんね。

Templates Box

こちらも有料ですが…３ヶ月間ダウンロードし放題で$39！ロゴだけではなく、WebサイトやFlashのテンプレートもダウンロードできるのでお得ですね。

Template Monster

有名なテンプレートサイトですね。こちらも有料ですが。。

Logo Maker

無料のロゴジェネレータです。豊富なテンプレートから選択してカスタマイズできます。

LogoYes

こちらは有料のロゴクリエーターなのですが、とっても良くできています。

FREE Logo Maker

ロゴを作るのは無料なのですが、ダウンロードするのに料金$49がかかってしまいます…。（じゃ有料か。）そのまま名刺やTシャツなどが作れるので便利かも。

Vector Magic

ビットマップ画像をベクター画像に変換してくれるツール。ロゴ制作に限らずいろいろ使えそうですね。

きれいなロゴを作ってみてくださいねぇ〜。

フォント・マネージメント日本語フォント欧文フォント

admin — Thu, 17 Apr 2008 07:27:16 +0000

本日は、フォントのまとめです。

最近では、かなりクオリティの高いフォントが無料で配布されているので、ついついたくさんフォントをインストールしてしまいますね。

結局、何がなんだか分からなくなって…

というわけで、最初にフォント・マネージメント・ツールをいくつかご紹介。

フォント・マネージメント・ツール for Windows

AMP Font Viewer

インストールされているフォントが一覧でずら〜っと見れるので、結構便利です。もちろんフォントのインストールや削除も出来ます。いくつか試してみた中で、これが今のところ一番使い勝手が良かったです。

Font Xplorer

こちらも同様フォント・マネージメント・ツールです。コンパクトにまとまっているので見やすいです。

The Font Thing

機能が豊富なフォント・マネージメント・ツール

フォント・マネージメント・ツール for Mac

FontExplorer™ X

Macユーザーの方には、こちら。今後、Windows版も公開される予定だそうです。

フォント・プレビュー

fontBROWSER

フォント・マネージメント・ツールをインストールするほどでもないけど…っという方には、こちら。flashアプリケーションが、アクティブになっているフォントをプレビューしてくれます。これは便利ですね。

日本語フォント

フォント・マネージメントの準備ができたら、早速いろいろなフォントをインストールしてみましょう〜。なるべく見やすいサイトをまとめてみました。フォントによって、いろいろと利用規約が違うので、よく注意して利用してください〜。

欧文フォント

欧文フォントがダウンロードできるサイトもまとめておきました〜。