企業サイトでは売上の推移や販売シェアなどグラフやチャートなどを使って分かりやすく表示したいといったニーズは結構あります。

エクセルで作成したグラフを貼り付けたりするのも可能ですが…。

今回は、JavaScriptやFlashなどを使って比較的、簡単にグラフやチャートを生成できるツールをいろいろまとめてみました。

Open Flash Chart

Flashをベースにしたオープンソースのチャートです。バージョン2も公開されて開発が継続されているようです。

flot

jQueryで動作するグラフ描画ライブラリです。

Highcharts – Interactive JavaScript charts for your webpage

こちらもJavaScriptを使って動作するチャートライブラリです。サンプルもとても美しくてチャートの種類も豊富です。

jQuery Sparklines

jQueryを使って、小さめのインラインチャートなどを生成することができます。

XML/SWF Charts

こちらはFlashをベースにしたチャート。その名の通りXMLでデータを取得してSWFで書き出してくれます。

PlotKit – Javascript Chart Plotting

MochiKitを使って動作するチャートライブラリです。

pChart | a PHP Charting library

PHPでグラフを生成してくれるライブラリです。デザイン的にもクールなチャートが作れそうですね。

Protovis

スタンフォード大学が開発しているチャート描画JavaScriptライブラリです。

Axiis : Data Visualization Framework

Flexを使ってチャートを生成するフレームワーク。サンプルの通り複雑なグラフを生成できます。

gRaphaël—JavaScript Library

カラフルで可愛らしいグラフが生成できるJavaScriptライブラリです。

JS Charts

JavaScriptを使って動作するチャートライブラリです。商用利用は有料になります。

jqPlot Charts and Graphs for jQuery

jQueryで動作するチャートプラグイン。

FusionCharts Free

Flashベースのチャートを生成できるオープンソースのコンポーネントです。Flashなので動きもなめらかで綺麗です。

Google Chart Tools

Googleから公開されているチャートツールは、画像チャートとJavaScriptを使って生成するインタラクティブチャートの2種類があります。

milkchart

MooToolsを使って動作するチャートプラグイン。

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

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

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

今回は、フォームのデザインや使い勝手を強化してくれる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

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

お問い合わせやログイン、アンケートなどなど、ウェブデザインには欠かせないフォーム。

今回は、そんなフォームをデザインする方法をいくつかまとめてご紹介します。

JavaScriptやCSSを使えば結構いろいろなことができそうです。

FancyForm

mootoolを使ってチェックボックスとラジオボタンををクールなデザインに変えてしまうことができます。

CRIR: Checkbox & Radio Input Replacement

こちらもチェックボックスとラジオボタンをスタイリッシュにする方法

prettyCheckboxes, a solution to checkboxes

こちらもJavaScriptを使って、チェックボックスとラジオボタンにデザインを組み込む方法です。

jQuery checkbox

JQueryを使ってチェックボックスやラジオボタンをファンシーにデザイン。

Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements

JavaScriptを使ってフォームのデザインをカスタマイズ。

DropDown – xHTML/CSS/Javascript replacement of classic selectbox

JavaScriptを使ってセレクトにデザインを組み込む方法が紹介されています。

Styling dropdown select boxes

ドロップダウンにスタイルをかける方法。

<select> Something New

セレクトをスタイリッシュにする方法。

jquery-asmselect

セレクトの中から選択したものを下に追加していくことができます。

Adelaide Web Designs Releases customselect with icons

セレクト内にアイコンを追加。

Form field hints with CSS and JavaScript

フィールドをクリックすると注釈を表示させることができます。

Masked Input Plugin

日付やクレジットカード番号など桁数のわかっているものに、テキストボックスの中に下線やダッシュなどを表示する方法。

Autotab: jQuery auto-tabbing and filter plugin

決まった文字数が入力されると自動的に次のボックスへカーソルを移動させることができます。

10 CSS Form Examples

10種類ものとってもきれいなCSSフォームのサンプルを見ることができます。これは参考になります。

Building a better web forms: Context highlighting using jQuery

選択している箇所をハイライトする事ができます。

Grow a textarea

テキストエリアのサイズをユーザーが変更することができます。

Password field with strength meter

パスワードを入力すると文字数に応じてメーターがアップしていきます。

Clean and pure CSS FORM design

Tableタグを使わず、CSSだけできれいなフォームデザインを組む方法が紹介されています。

Custom Form Elements in action

mootoolを使ってフォームのデザインをカスタマイズ。

Control.SelectMultiple

JavaScriptを使って複数選択を

STYLING FILE INPUTS WITH CSS AND THE DOM

参照ボタンをスタイリッシュに

今回は、JQueryを使って簡単に導入できるドロップダウンメニューをいろいろとご紹介。

ブログなどでも利用できるシンプルなものをなるべくピックアップしてまとめてみました。

初心者の方には、マウスオーバー時のメニューのでかたがそれぞれ微妙に違っていたりするので、好みのエフェクトを見つけて使ってみてもいいかもしれませんね。

Simple jQuery Dropdowns

デモ | ダウンロード
シンプルで、簡単に使えそうですね。

droppy – Nested drop down menus

デモ | ダウンロード
マウスオーバーでメニューが上から下にピロっとでます。

Create a multilevel Dropdown menu with CSS and improve it via jQuery

デモ | ダウンロード
こちらのメニューもいい感じのエフェクトがかかってます。

Superfish

デモ | ダウンロード
アルファがかかったエフェクトがいい感じです。

SuckerFish Style

デモ
こちらもアルファがかかったエフェクトです。

jQuery & CSS Example – Dropdown Menu

デモ
こちらは、シンプルなドロップダウンメニュー

jQuery Simple Drop-Down Menu Plugin

デモ | ダウンロード

Drop down menu with jquery

デモ

mcDropdown jQuery Plug-in

デモ | ダウンロード
セレクトボックスも、JQueryでカスタマイズできます。

jquery.combobox.example.alternatestyle

デモ
こちらもなかなかいい感じ。

300+ Jquery, CSS, MooTools and JS navigation menus

JQueryだけでなく、MooToolsや他のJavaScriptなどでつくられたナビゲーションメニューが300種類以上もまとめられています。

今回は、ウェブデザインのレイアウトに役立つサイトをいくつかご紹介します。

そのまま使えるレイアウトのサンプルや、いい感じのスクリプト、レイアウトの参考になりそうなインスピレーション系などを集めてみました。

CSS Layouts: A collection of 168 Grid and CSS Layouts

100%のリキッドレイアウト、950ピクセル、750ピクセルの３パターンの横幅で、合計168種類のCSSレイアウトが公開されています。ファイルのダウンロードもできるので、そのまま使えます。

Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!

こちらも有名４０種類のCSSパターン。ダウンロードも可能です。

Little Boxes

一つのボックスから、徐々にレイアウトされていく過程が確認できるので、初心者の方には、分かりやすいかもしれません。

jQuery UI.Layout Plug-in

jQueryを使ったレイアウト・マネージャーです。ヘッダーとサイドバーのみの簡単なものから、ツールバー、メニュー、ヘルプパネル、ステータスバーなど複雑なレイアウトまでカバーできます。まずは、デモページでどんな事ができるのか確認してみてください。

dfFlexiGrid

ユーザーがレイアウトを変更できるスクリプトです。こちらのデモページの上部のメニューをクリックすると、レイアウトがアニメーションで切り替わります。

Setting Equal Heights with jQuery

各カラムのボックスの高さを合わせてくれるスクリプトです。こちらのデモページからどうぞ。

HOKYPOKY. | MULTICOL. jQuery Plugin

MULTICOL. はHTMLで雑誌のような美しい段組みレイアウトを実現するだけのシンプルなjQueryプラグインです。もちろん、日本製のプラグインなので日本語もきれいに段組みにします。

footerStickAlt

フッターをブラウザの最下部、もしくはコンテンツの最下部に表示させるCSSのテクニック。デモページはこちらから。

How a Simple Layout Can Be Mixed ‘n’ Matched with Patterns, Photos and Backgrounds

Photoshopのチュートリアルです。ロゴやメニュー、テキストなどの配置と余白の取り方などが説明されています。

960 Grid System

960ピクセルを基準にサイトサムネイルの右上に配置されているボタンをクリックすると、12もしくは16本のカラムを表示してくれるインスピレーションサイトです。

Grid and Column Designs

美しいグリッドデザインをたくさん集められているサンプル集です。どのサイトもとってもきれいなサイトばかりです。

料金表やスペック表などに使えそうなTableのデザインを探してみるといろいろと見つかりました。

以前にもこのブログで「TableとCSSいろいろ」でもご紹介しましたが、

今回はTableのデザインパート２と言う事で、いろいろとまとめてみました。サンプルやダウンロードページが別に分かれているところは、そちらのリンクも記載しておきましたので、参考にどうぞ。

dhtmlxGrid

ダウンロード

Unobtrusive Table Sort Script

A CSS styled table version 2

デモ

Designing Tables for Usability

デモページ

MOOTOOLS JAVASCRIPT TABLE ROW & COLUMN HIGHLIGHTING

tablesorter 2.0

デモ | ダウンロード

jQuery plugin: Tablesorter 2.0

デモ | ダウンロード

GridView3

ダウンロード

phatfusion : sortableTable

ダウンロード

TableKit

ダウンロード

Data Tables and Cascading Style Sheets Gallery

一番左のカラムのDesign Nameをクリックするとデザインが切り替わります。気に入ったデザインは、一番右のカラムのDownloadからCSSファイルをダウンロードすることが出来ます。

Replicating a Tree table

Normal Table Test

Vertical scrolling tables

Brett asks the CSS Guy if the Row Locking with Checkboxes is fixed

デモ

how to create a table like Orbitz’s airline flights scheduling and pricing matrix

デモ

Pure CSS Scrollable Table with Fixed Header

Tablecloth

ダウンロード

mootable

ダウンロード

Creating a table with dynamically highlighted columns like Crazy Egg’s pricing table

Crazy Egg’sのサイトのような、飛び出すカラムのデザインチュートリアル。

Stripe your tables the OO way

デモ

CSS-Based Tables: Modern Solutions

CSSを使ったきれいなTableのデザインサンプル集です。

Pricing Tables: Examples And Best Practices

こちらは料金表のデザインのまとめです。きれいな料金表がたくさんまとめられております。

JavaScriptを使って、ダイナミックな動きのあるサイトがたくさんありますね。

今回は特にスライドに注目していろいろなスクリプトとスライドを上手く利用したウェブサイトをまとめてみました。

サンプルのスクリプトと、インスピレーションサイトを参考にして、かっこいい動きのあるサイト作りに挑戦してみてはいかがでしょうか？

jQuery pageSlide

ページ右側からスライドしてきます。

Slider Gallery

アップルのサイトでも使われていた、商品画像のスライド

デモページ

BarackSlideshow – An elegant, lightweight slideshow script

オバマ氏のサイトで使われていたスライドショースクリプト

デモページ

Accessible News Slider

矢印ボタンをクリックすると、記事リストがスライドします。

Start/Stop Slider

画像は上下に、テキストは左右にスライドします。

デモページ

mooSlide

上から、もしくは下からコンテンツがスライド

Coda Slider Effect

コンテンツ上部のタブ、もしくは左右の矢印ボタンをクリックするとコンテンツがスライド

デモページ

Sliding Tabs

左右の矢印ボタンをクリックするとコンテンツがスライドします。

デモページ

Coda-Slider

コンテンツ上部のタブ、もしくは左右の矢印ボタンをクリックするとコンテンツがスライド

Creating a Slick Auto-Playing Featured Content Slider

サムネイルクリックでスライド

デモページ

Build An Incredible Login Form With jQuery

ログインフォームのスライド

デモページ

Carousel

左右の矢印ボタンでスライド

デモページ

jCarousel

左右の矢印ボタンでスライド

Scroll your HTML with jquery scrollable

左右の矢印ボタンでスライド

インスピレーションサイト

これらのスライドスクリプトをうまく使うと、以下のようなかっこいいサイトがつくれますよ。ご参考にどうぞ。

youlove.us

tap tap tap ~ tasty bits for your iPhone

Viget Labs Is Hiring

Panic – Coda – One-Window Web Development for Mac OS X

IL FRUTTETO

Lucuma | Audiovisual

Engage Interactive

Goodworks Media

Danny Blackman // est. 1985

NOFRKS.design

Qlear Interaction Design

Ann Arbor Web Design and Ann Arbor Graphic Design, by 3.7 Designs Interactive

Web Design Belgrade

www.MelissaHie.com

volll

CSS Brigit | Fuente de Inspiración

IJsfontein

sourcebits

VivaViralVideo.com

Hotel Oxford – Timisoara

The portfolio of Bryan Katzel

パララックス効果って、あまり聞き慣れない言葉ですが…。

初期の横スクロール型のテレビゲームなどでよく使われていた視差効果を使って奥行きを出す技法だそうです。

いくつかのレイヤーを、それぞれ違った速度でスクロール（奥にあるレイヤーはゆっくり、手前にあるレイヤーは早くスクロール）させる事で、視差効果を与えて奥行きがあるように見えるのだそうです。

今回は、このパララックス効果を上手にウェブデザインに応用サイトをいくつかまとめてみました。

How to recreate Silverback’s parallax effect

まずは、パララックス効果をウェブデザインに応用する方法から。ブラウザの横幅を変えてみると、４つのレイヤーに配置されているPNG画像がそれぞれスクロールの速度が違って奥行きがあるように見えます。サンプルコードも公開されているので、挑戦してみてはいかがでしょうか。CSSのbackground-positionのプロパティを%で指定して、各レイヤーのパーセントを変えるのがミソ。

Silverback — guerrilla usability testing

↑のサイトで説明されていたサイトがこちら。とっても良くできていますね。

Креативная разработка

こちらは、ロシアのサイトです。中央の男性と、右上の木、背景のバランスがいい感じです。

We All Hate Quickbooks, Do You?

ブラウザの横幅を変更すると、ページ下部の炎の部分がスクロールします。

Dromaeo

ヘッダーのかわいい恐竜がスクロール。

Percentage Backgrounds — Large numbers do interesting things

とっても楽しいスクロールですね。ブラウザの横幅を変えて遊んでみてください。

A parallax optical illusion with CSS: The Horse in Motion

これはすごい！馬が走ってます。

Dumago: Be carefree what you wish for

シンプルですが、とってもきれいな視差効果が出ています。

Starry Night by CSS-Tricks

ブラウザの縦や横にリサイズしてみると奥行きを感じます。

JavaScript系

jParallax

マウスの動きに反応してレイヤー画像をスクロールしてくれるスクリプトです。サンプルもよくできています。

jParallax Demos

jParallaxを使ったデモです。とってもいい感じですね。

40 JAAR SIRE – U mag het zeggen

オランダのサイトです。こちらもスクリプトを使って、マウスが動くと、それに合わせて背景が動きます。

jQuery Parallax Scrolling – Build your own 1980′s video game! : Locomotivation

jQueryを使って、自動でスクロールさせる方法が紹介されています。

Parallax Demo

こちらは、最初にご紹介したSilverbackのデザインに、prototypeを使ったアニメーションのサンプルです。ページ中央のShrink!のリンクをクリックするとスクロールします。

Parallax Background with Javascript and CSS

縦のスクロールに対応しているスクリプトです。背景のチェック画像と、雲、ページ枠のスクロールに視差効果が出ていて、不思議な感じです。

JavaScript Example: Fly + Parallax Scrolling Effect

こちらもスクリプトを使った星空のサンプルです。

Flash系

Flash Kit

Flashを使ったサンプルです。Flashファイルもダウンロードできるので、参考になります。

Javier Ferrer Vidal

先ほどのFlashのサンプルをうまく利用すれば、こちらのサイトのような視差効果が作れるのではないでしょうか。

みなさんもパララックス効果をうまく利用してサイトをデザインしてみると、他のサイトと差別化が図れるのではないでしょうか。

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

前回は、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

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

ブログのサイドバーはどのようにデザインされていますか？

カテゴリや最新の記事、コメントのリストなどのナビゲーションや、アフィリエイトをやっているブロガーの方々などは広告枠として使ったり。

flicrやlastfmなどを使われている方は、ウィジェットを追加したり。

サイドバーのコンテンツを充実させていくのも、なかなか楽しそうですね。

今回は、ブログのサイドバーに使えそうなScriptやナビゲーションの見せ方、アイデアなどをまとめてみました。

Sideblog Plugin

人気ブログSmashing Magazineはじめ、その他多くの人気ブログでよく見かける、サイドバーにつけられているミニブログ的なsideblogを簡単に設置できるwordpress用のプラグイン。

最近、めっきり更新が滞っているDesignWalkerのタネもSideblogに切り替えようかと思ってます。MovableTypeをお使いの方は、こちらの記事でSideblogの設定方法が解説されていました。

WordPressとTwitterをお使いの方はプラグインもいろいろ公開されているので、いろいろ試せそう。

Create a Slick Tabbed Content Area using CSS & jQuery

こちらも近々このブログにも設置しようと思っている、タブ切り替えの枠。

Sexy sliding JavaScript side bar menu using mootools

ブラウザの端っこにタブだけ出ていて、クリックするとする〜っとメニューが出てきます。

Mootools animated sidebar menu

メニューにマウスオーバーすると、右に少しスライドしてくれるアニメーション。

Conditionally Sticky Sidebar

ブラウザをスクロールしても、サイドのブロックがついてきます。好き嫌いが分かれそうですが…

PBB SideBar

キーボードのA,B,Cをたたくと、サイドバーがスライドして表示されます。

jQuery File Tree

jQueryを使ったファイルツリー表示。

Free Menu Designs

無料のCSSメニュー

まだまだアイデアはいろいろとありそうですね。