DesignWalker » ウェブデザイン

こちらは便利なブックマークレット。黒い”Printliminator”のボタンをドラッグしてブックマークバーに登録しておいて、印刷したいページでPrintliminatowをクリックすると。ページの右上に4つのボタンが表示されます。不要な要素をマウスオーバーしてクリックすると削除されます。そのごプリントボタンをクリックしてプリントすることができる便利なツール。詳しくは動画で使い方が紹介されているので、ご確認ください。

Aardvark Firefox Extension

Firefoxのエクステンション。こちらも要素を選択して非表示にしてプリントするなどの作業ができます。

Readability – An Arc90 Lab Experiment

自分好みのスタイルを設定することができるブックマークレット。スタイル、サイズ、横幅などを調整して、右側のボタンをブックマークバーに保存しておけば、いつでも自分好みのスタイルでページ印刷ができますね。

ここからは、サイトの制作者が使えるTipsをいくつかご紹介します。

Handy Tips for Creating a Print CSS Stylesheet

Print用CSSに加えておくと良いのでは？と思われるCSSがいくつかまとめられて紹介されています。

例えば、下記のようにprint cssに記載しておくとリンクのあとに、リンク先のURLを表示できたりします。

a:link:after {
	    content: " (" attr(href) ") ";
}

こちらは、#commentsの要素の前で必ず改ページするように設定することなども可能ですね。

#comments {
	    page-break-before: always;
}

Hartija – Css Print Framework

印刷用のCSSフレームワークです。このCSSファイルを元にして、いろいろと調整していくのも良いのではないでしょうか。

IE Print Protector

HTML5で構築されたウェブサイトをIEでプリントするといくつかの要素を認識せず、ページが崩れてしまったりすることがあるようです。その問題を解決してくれるスクリプト。

フォームの見栄え・使い勝手を強化するjQueryプラグインいっぱい

admin — Wed, 02 Jun 2010 22:44:21 +0000

お問い合わせやユーザー登録、ログインから商品の注文まで、ウェブでとっても重要なフォーム要素。

このフォームの使い勝手や見栄えはそのサイトの売上や登録に大きく影響するといっても過言ではありません。

フォームの入力項目が多すぎたり、わかりづらかったりすると、せっかく購入やユーザー登録する気になってくれているユーザーの方々も逃げてしまいますよね…。

今回は、フォームのデザインや使い勝手を強化してくれるjQueryのプラグインをいろいろとまとめてみました。

Perfect signin dropdown box likes Twitter with jQuery

Twitterのサインインボックスのようなドロップダウンボックスを再現してくれています。

Lightbox_me – Stupidly Simple Lightboxing

ライトボックスでログイン表示させることができます。

Pretty checkboxes with jQuery

チェックボックスの見た目を変えて、可愛らしくフォーマット。

Turn any webform into a powerful wizard with jQuery (FormToWizard plugin)

長いフォームをステップに分けて表示させることができます。

How to create Skype-like buttons using jQuery

Skypeっぽいマウスオーバーしたときにぴょこんとハネるボタンを作ることができます。

iPhone Style Radio and Checkbox Switches using JQuery and CSS

iPhoneスタイルのチェックボックスとラジオボタンを作ることができます。

jQuery checkbox

スイッチみたいにスライドさせることができるラジオボタンです。

Niceforms

jQueryを使って、フォームのデザインをスタイリッシュに変更してくれます。

Uniform Sexy forms with jQuery

こちらもフォームのデザインを変更できます。テーマもいくつか用意されていますね。

jQuery plugin : jqTransform

ボックスを角丸に、チェックボックスやラジオボタンも変更できるプラグイン

FancyForm – Javascript checkbox replacement

チェックボックスとラジオボタンをスタイリッシュに変更できます。

prettyCheckboxes

こちらも同様にチェックボックスとラジオボタンを変更できます。

jQuery Highlight Demo

選択している要素の背景をハイライトさせることができます。

jQuery magicpreview plug-in

フォームの右側にプレビューを表示させることができるプラグインです。

jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready

iPod風なドロップダウンメニューが実装出来ます。

jquery.combobox

階層化したセレクトボックスが作れます。

A jQuery inline form validation, because validation is a mess

必須項目などにメッセージを表示させることができるプラグインです。

Ketchup Plugin

こちらもエラー表示させることができるプラグイン。動きもあって可愛らしいです。

jQuery plugin: Validation

こちらも同様に、バリデーションプラグイン。

jTip – The Jquery Tool Tip

ツールチップを表示させることができます。

Date Picker – jQuery plugin

カレンダーを表示させて、日にちを先手くさせることができるプラグイン。

jQuery.timepickr.js

ちょっぴりユニークな、時間を設定させるプラグイン。

jQuery UI Slider from a Select Element – now with ARIA Support

スライダーで期間を設定させることができるプラグインです。

AJAX Upload

複数のファイルをページを遷移させることなくアップロードできるプラグイン。

JQuery File Upload Plugin Script – JQuery File Upload Script – Uploadify

こちらも複数ファイルをアップロードさせることがきます。

Styling an input type=file

フォームのファイルボタンを画像に変更させることができます。

Using form labels as text field values

ラベル要素をフォームのテキストボックス内に表示させておいて、ボックスをクリックすると消えます。

In-Field Labels jQuery Plugin

こちらもラベル要素をボックス内に表示させて、クリックするとフェードアウトして薄く表示させることができます。

JQUERY PLUGIN: CLEARFIELD

こちらも同様、ラベル要素をフォームのテキストボックス内に表示させておいて、ボックスをクリックすると消えます。

Justify elements using jQuery and CSS

テーブルを使わずにフォームの要素を整列させるプラグイン。文字の長さを見て、整列させてくれます。

Masked Input Plugin

ボックス内のテキストをフォーマットさせることができます。

meioMask – a jQuery mask plugin

クレジットカードや時間など、ボックス内のテキストをフォーマットさせることができます。

Password Strength Indicator and Generator

パスワードのセキュリティレベルをわかりやすく絵で表示させることができます。

jQuery Password Strength Meter

こちらも同様、パスワードのセキュリティを表示。

jQuery showPassword Plugin

チェックボックスでパスワードを伏字から表示させることができます。

jQuery plugin: autoResize

文字を増やしていくと自動的にテキストエリアが下に大きくなっていきます。

tableRowCheckboxToggle

テーブルを行ごとクリックできるようにして、チェックできます。

jQuery UI Multiselect

複雑な複数選択を可能にしてくれるプラグイン

Simple Image Submit Button Rollovers with jQuery

Submitボタンをロールオーバーにできます。

Jeditable – Edit In Place Plugin For jQuery

テキストをクリックしてフォームが出現。修正しなおすとテキストに戻ります。

ここまでできる！CSS3を使ったチュートリアルまとめ

admin — Mon, 17 May 2010 21:40:28 +0000

ここ数年でたくさんの情報が揃ってきたCSS3。古いブラウザでは対応されていないため、まだまだ一般に普及するまでは時間がかかってしまうのかもしれませんが…。

CSS3を使えば、ウェブデザインの可能性をさらに広げてくれることは間違いありません。

デザイナーの皆さんは、是非CSS3でどんなことができるの？って事だけでも今のうちから知っておいても損はないと思いますよ。

今回は、そんなCSS3を使えばここまでできる！っと可能性を感じられるチュートリアルをいろいろ集めてみました。

20 CSS3 Tutorials and Techiques for Creating Buttons

CSS3を使って、美しいボタンを作るチュートリアルが20パターン紹介されています。

12 Excellent CSS3 Button and Menu Techniques

こちらも美しいボタンやメニューのチュートリアルが12種類。

CSS3 Gradient Buttons

これまで画像を使って表現していたグラデーションとシャドウの美しいボタンもCSS3を使えば簡単に表現できるようになります。

Creating a Realistic Looking Button with CSS3

Mac風のボタンも簡単に表現できますね。

15 CSS3 Navigation and Menu Tutorials and Techniques

こちらはCSS3を使ってとっても綺麗なナビゲーションを作るチュートリアルが15種類もまとめられております。

CSS3 Glow Tabs

奥行きのあるきれいなタブもCSS3で表現できますね。

Create a Cool Messy List with CSS3 and nth-child

CSS3のrotateファンクションでメニューを微妙に歪めることも可能ですね。

Elegant Accordion with jQuery and CSS3

jQueryとCSS3でアコーディオンの美しいメニューを作ることもできます。

Cross Browser Pure CSS3 Horizontal Accordion

jQueryなどのスクリプトを使わなくてもCSS3だけでアコーディオンメニューを作ることもできます。

Pimp Your Tables with CSS3

テーブルもCSS3で美しく装飾しましょう。

Contextual Slideout Tips With jQuery & CSS3

jQueryとCSS3でびよーんっと開くスライドボックスを作ることもできます。

Halftone Navigation Menu With jQuery & CSS3

メニューにマウスオーバーすると、うつくしいハーフトーンのアイコンがアニメーションで表示されるチュートリアル。

Carbon Fiber Signup Form With PHP, jQuery and CSS3

登録フォームもCSS3とjQueryで作るとこうなります。

Colorful Sliders With jQuery & CSS3

3Dの美しいバーとスライダー。

Interactive Image Vamp up with jQuery, CSS3 and PHP

左側にあるアイテムを中央の画像に配置することができます。

jQuery quickie: Colourful rating system with CSS3

とってもカラフルでうつくしいレーティングシステム。意味なくマウスオーバーしてしまいますね。

25 Out of the Box Tutorials powered by jQuery and CSS3

まだまだあります。jQueryとCSS3を使って作られたチュートリアルが25種類もまとめられています。

10 examples of futuristic CSS3 techniques

ふきだしやボタン、メニューなどなどCSS3を使って表現するテクニックが10種類。

CSS3 Examples and Best Practices

ファンクションごとに実際の例をピックアップして紹介されています。

60 Excellent CSS3 Tutorials and Techniques You Should Know

こちらもたくさん！60種類のCSS3のチュートリアルがまとめられています。

50 Awesome Animations made with CSS3

こちらも必見！50種類のCSS3を使ったアニメーションがまとめられています。

グリッドデザインに使えるツールいろいろ

admin — Tue, 11 May 2010 22:06:25 +0000

ウェブサイトをデザインする際、レイアウトはどのようにおこなっていますか？

ガイドにあわせて、要素を配置できるグリッドを使用すると、レイアウトがワンランクアップしますよ！

今回は、そんなグリッドデザインに使えるツールをいろいろご紹介します。

Grid Style In Modern Web Design: Showcase and Resources

美しいグリッドデザインのサイトがたくさん集められています。

Grid Based Designs | inspiration gallery

グリッドデザインのウェブサイトを集めたインスピレーションサイトです。

960 Grid System

PhotoshopやIllustrator、Fireworksなどなど様々なファイル形式に対応したテンプレートが公開されています。サイトをデザインし始める時にはまずはこちらのテンプレートからはじめてみてはいかがでしょうか？

BlueTrip CSS Framework

グリッドデザインに対応したCSSフレームワーク。テンプレートとあわせてこちらのフレームワークも使えそう。

Blueprint: A CSS Framework

こちらもCSSのフレームワーク。

gridlayouts.com

このスクリプトを入れると、キーボードでctrl+shift+gを押すと設定したグリッドのバーが表示されます。

#grid

こちらのスクリプトはキーボードのgでグリッドが表示されます。

jQuery Masonry

このスクリプトを使えば、cssのFloatでガタガタにならず、綺麗にグリッドで並べてくれます。

Fluid 960 Grid System

jQueryとMoo Toolsバージョンが用意されているグリッドシステム。リキッドデザインにも対応しています。

Fluid Grid System

こちらもリキッドデザインに対応したグリッドシステムです。

Design a Clean Web Layout with the 960 Grid | Tutorial9

先にご紹介した960 Grid Systemを使った、デザインレイアウトのチュートリアル。グリッドデザインを始める人にはとても参考になるチュートリアルです。

nP: Grid Generator – build your own custom css grid

自分で好きなように数値を設定してpng形式でダウンロードできるグリッドジェネレータ

ZURB CSS Grid Builder

こちらもカラム数、カラムの幅、隙間の幅を設定すれば、CSSが書き出されます。

Variable Grid System

こちらもカラム数、幅などを設定してCSSがダウンロード出来ます。

The 1KB CSS Grid by Tyler Tate :: A simple, lightweight approach

こちらは数値を入力するのではなく、バーをスライドさせるタイプです。

Gridmaker v3

数値を変えればリアルタイムでグリッドが変更されます。

Grid Calculator

こちらもバーをスライドさせるだけで、グリッドを変更させることができるツールです。

Grid Designer

ボタンをクリックしてカラムや横幅などが調整できます。

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

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情報が簡単に確認できるようになります。

ついついクリックしたくなるボタンデザインいろいろ

admin — Wed, 14 Apr 2010 06:39:51 +0000

長い間、このブログの更新が滞っており、沢山の皆様から激励のメールなどをいただきました。
いろいろとご心配をおかけいたしまして申し訳ございません。少しずつではありますが、更新を続けていきたいと思っております。

これからもデザインウォーカーをどうぞよろしくお願いいたします！

今回の、テーマはついついクリックしたくなるボタンのデザインをまとめてみました。

ボタンひとつでクリック率やコンバージョンが大きく変わってしまうので、ボタンのデザインや配置はとっても重要ですね。

ボタンのデザインを変えたら、とたんに問い合わせ、売り上げが伸びたりすれば、デザイナー冥利につきますね。

皆さんも、ついついクリックしたくなるボタンのデザインを沢山見て、参考にしてみてくださいね。

ウェブデザインに使えるイラストのチュートリアルいろいろ

admin — Tue, 13 Oct 2009 22:27:58 +0000

イラストをうまく使ったウェブサイトはたくさんありますね。

例えば、SilverbackとかMailChimpなどは、とてもわかりやすいイラストをうまく使ったウェブサイトの例なのではないでしょうか？

一度見ると、『あぁ、あのゴリラのイラストのサイトね。』なんて覚えてもらえる確率が高まります。

イラストをうまく使う事でウェブサイトによりインパクトを与える事ができるのではないでしょうか？

noupeさんでまとめられていた『30+ Outstanding Character Illustrations in Modern Web Design』なんかのまとめも、すごく参考になります。

今回は、そんなイラストをきれいに描くために使えるチュートリアルをいろいろまとめてみました。

テーブルに実装できるjQueryプラグインいろいろ

admin — Mon, 14 Sep 2009 23:41:55 +0000

スペックやデータ、料金表などを表示するためには、テーブルコーディングは欠かせませんね。

テーブルにjQueryのプラグインを実装すると、ソートやページングなどなど、様々な機能を追加する事ができます。

今回は、テーブルに実装できるjQueryプラグインいろいろとまとめてみました。