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でプリントするといくつかの要素を認識せず、ページが崩れてしまったりすることがあるようです。その問題を解決してくれるスクリプト。

ウェブサイトのリニューアルデザインビフォー・アフターいろいろ

admin — Tue, 22 Jun 2010 03:39:39 +0000

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

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

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

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

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などの人気サイトのこれまでのデザイン遍歴がまとめられています。

HTML5で構築されたテンプレート・フレームワークいろいろ

admin — Mon, 07 Jun 2010 21:47:54 +0000

現在、徐々に各ブラウザの対応が進められているHTML5。動画やオーディオ再生、アニメーションなどの要素が実装されていて、iPhoneやiPadがこのままFlashを採用しないままなのであれば、今後、HTML5が普及してしまえば、Flashは必要なくなる！？なんて意見もあるほどです。

ウェブデザインに関わる方々は、今のうちからちょっとした概要だけでも見ておいて損は無いのではないでしょうか。

というわけで、今回はHTML5で構築されているテンプレートやフレームワークなどをまとめてみました。

HTML5でコーディングされたサイトを見て、実際にどのように構築されているのか勉強してみてくださいね。

Coding A HTML 5 Layout From Scratch

おなじみSmashing Magazineさんから提供されている、スクラッチからコーディングするHTML5のチュートリアル。各ブラウザへの配慮などかなり詳しく解説されています。

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

HTML5とCSS3で構成されたテンプレートを構築するチュートリアル。CSSもしっかり解説してくれています。

52Framework – first ever html5 and css3 framework

52Frameworkは、HTML5とCSS3で構成されたフレームワーク。このファイルをもとにデザインを組み込んでもよさげですね。

Less Framework

こちらもHTML5で構築されたCSSフレームワーク。こちらのフレームワークもシンプルで使いやすそう。

Free HTML5 Templates | Bringing modern web standards to everyone

HTML5とCSS3のテンプレートをたくさん集めて掲載してくれているまとめサイト。ブラウザでそのまま確認できるデモとファイルのダウンロードが用意されています。

Design & Code a Cool iPhone App Website in HTML5

こちらはPhotoshopのデザイン作業からHTML5のコーディング作業までを紹介してくれているチュートリアル。初心者の方にはとても参考になるのではないでしょうか。

Build a HTML5/CSS3 Website Layout Without Images

画像を一切使わずに、HTML5とCSS3で構築されたレイアウトサンプル。こちらは、ファイルもまとめてダウンロードできるので、興味のある方はダウンロードして、コードの中身を研究してみてくださいね。

HTML5 Starter Pack – a sick freebie

HTML5のスターターパックとして公開されています。こちらのファイルをもとにデザインを進めてみてください。

Touch The Future: Create An Elegant Website With HTML 5 And CSS3

とっても洗練されたデザインのHTML5のファイルを無料でダウンロードできます。

Coding a CSS3 & HTML5 One-Page Website Template

メニューをクリックするとコンテンツまでスライドしてくれるエフェクトも備えたHTML5とCSS3のテンプレートです。

Gotta’ love HTML5 & CSS3

HTML5とCSS3で構築されたギャラリーページのテンプレートです。画像にマウスオーバーすると半透明のレイヤーで画像の説明文が表示されます。

A free HTML5 and CSS3 theme

ちょっぴりポップなHTML5とCSS3のテンプレート。こちらもファイルをまとめてダウンロードできます。

Free HTML5 template | Web design London

2カラムと3カラムバージョンの2種類のテンプレートが公開されています。

OWMX 1 – Free 2 Column HTML5 & CSS3 Website Template

一通りの要素を並べてくれているHTML5とCSS3のテンプレート。シンプルで、使いやすそうです。

HTML 5 Templates, HTML 5 canvas, HTML5 video, HTML 5 XHTML, HTML 5 tag

シンプルなデザインで、テンプレートが公開されています。

フォームの見栄え・使い勝手を強化する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

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

無料でダウンロードできるiPadの壁紙いろいろ

admin — Tue, 01 Jun 2010 07:43:39 +0000

先日、日本でも、ついに発売されたiPad。このブログの読者の方々でも購入された方もちらほらいらっしゃるのではないでしょうか？

わたくしもちゃっかり購入しちゃいました…。購入した感想は、これまで以上に雑誌や本を読む機会が増えそうだな。って感じです。

こちらアメリカでは、普通に雑誌はめちゃめちゃ安いのですが、iPad用に販売されている雑誌などは、さらにお安くなって、年間の定期購読で一冊あたり1〜２ドル程度になっちゃうのです。

これまで、わざわざ本屋に行って立ち読みしてた雑誌が、いつでもどこでも読めてしまうのはかなり魅力ですね。

もちろん、本だけじゃなくてアプリも既にいろいろ充実しているので、楽しみはつきませんね。

そして、iPadの9.7インチの美しいディスプレイ。これを見るとやっぱり壁紙も気に入った壁紙に変えたくなっちゃいますよ！

というわけで、今回は無料でダウンロードできるiPadの壁紙サイトをいろいろとまとめてみました。

みなさんも是非、お気に入りの壁紙を見つけて設定してみてくださいね。

Super Cool & Artistic iPad Wallpapers

人気ブログabduzeedoさんがピックアップしたとってもクールでアーティスティックな壁紙がいくつか紹介されています。

Granimator™ by ustwo™

とってもおしゃれなイラスト系の壁紙がたくさんあります。アプリも公開されていますよ。

iPad Wallpapers That Don’t Suck

渋めの壁紙がたくさんまとめられていますね。

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

iPhoneの壁紙でもおなじみのpoolga。可愛らしい壁紙がたくさんあります。

iPadVision

日本のクリエイターさんたちが公開されているiPad用の壁紙です。どれもクオリティが高いです！

iPad Walls

クールな写真系の壁紙を中心に沢山まとめられています。

iPad Decór

ちょっぴりレトロな感じの写真の壁紙がたくさんあります。

fiftyfootshadows.net

うつくしい写真がiPadとiPhone用に公開されています。

Mantia » Wallpaper

カッコいい壁紙がいろいろありますね

Ipad Wallpaper Gallery – Premium iPad Wallpapers For Free

とってもうつくしい写真の壁紙がいろいろあります。

iPad Wallpapers by bay

まだ数はそれほど多くはありませんが、うつくしい写真の壁紙が公開されています。

iPad Wallpapers by 3n

渋めの写真がいっぱいありますね。

iPad Wallpaper Today

カテゴリに分けられた、たくさんの壁紙がまとめられています。

InterfaceLIFT

かなりの数の壁紙が掲載されています。クオリティも高くて、お気に入りの壁紙がきっと見つかるはずです。

iPad-Wallpapers

セレブや映画の壁紙などエンターテイメント系のものが多いです。

ipadwallpaper.org | Free iPad Wallpapers

イラストや風景写真、アップル系などなど様々なジャンルの壁紙が集められています。

55 Stunning Free WallPapers For Apple iPad

Save DeleteがまとめたiPad用の壁紙が55枚まとめられています。

A Collection of Free iPad Wallpapers

こちらは、blueblotsがまとめたiPad壁紙まとめです。

ここまでできる！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

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

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

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

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

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

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

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

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

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

DesignWalker

無料でダウンロード出来るiPhone4に対応した高画質な壁紙サイトまとめ

ウェブデザインに使えるチャート・グラフツールいろいろ

印刷用に使えるツールやブックマークレットいろいろ

ウェブサイトのリニューアルデザイン ビフォー・アフターいろいろ

HTML5で構築されたテンプレート・フレームワークいろいろ

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

無料でダウンロードできるiPadの壁紙いろいろ

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

ウェブサイトのリニューアルデザインビフォー・アフターいろいろ