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

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

ここまでできる！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 — Sun, 25 Apr 2010 23:08:22 +0000

みなさんツイッター楽しんでますか？

最近では様々な高機能ツイッター・クライアントが無料で公開されていて、どのクライアントを使おうか迷ってしまいますね。

今回は、英語版のツイッター・クライアントをまとめてみました。もちろん日本語もちゃんと入力出来るものばかりですよ！

いろいろ試してみて自分のツイッター生活にマッチしたクライアントを見つけてみてはいかがでしょうか。

無料で使えるWordPressテーマ 2009年厳選100+

admin — Mon, 14 Dec 2009 22:46:34 +0000

え！？こんなにレベルの高いテーマが無料で使えるの！？と思ってしまうほど、年々レベルが上がっていく無料で使えるWordPressテーマ。

2009年、総まとめシリーズです。今回は無料で使えるWordPressのテーマを100種類とおもったら、少し多めに集めてしまいました。

ダウンロードしてそのまま使用するだけでなく、デザインのアイデアやコーディングの参考などにも使えそうですね。

DesignWalker » サイトを紹介する男

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

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

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

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

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

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

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

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

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