ホーム > タグ > WEBデザイン

WEBデザイン

jQueryでフォームをすっきりとしたウィザード化するチュートリアル

http://www.jankoatwarpspeed.com/post/2009/09/28/webform-wizard-jquery.aspx

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

長いフォーム、いやですねぇ。

jQueryでフォームをウィザード化して「次へ」ボタンで次のフォームへ、というデザインが可能になるチュートリアル。

デザインの参考になるだけじゃなく、勉強にもなるね！

WORDPRESSを見違えらせるjQueryイロイロ

http://www.designwalker.com/2009/08/wp-jquery.html

jQuery_ DesignWalker

こりゃ見違えるわ。

jQueryのUIイロイロ：TABSを使う。

昨日、TABの実装について１つのソースをメモったけど、このソース、なんか、デフォルトでスクリプトエラーでてるし；；；

ってことで、普通にjQueryのUIを使って、TABを実装することにした。

んで、その覚書。

jQueryのUIについては、いろんなサイトで紹介されているので、ぐぐって見るといい。とりあえず、みんな本家サイトの翻訳とか抽象的な同じようなネタが多いけども。。。（＾＾；

今回は、とりあえず、タブを使いたかったので、そのソースを紹介。てかメモ。

 

先に、jQuery本体とUIのソースをダウンロードしておく。

 

じゃあ、まずは、HTMLソース。
HTMLソースのHEAD内に、上記サイトで入手したjavascript２つとCSSへのリンクを貼っておく。それと、TABS用のJSソースも記述。

<head>
<script src=”js/jquery-1.3.2.min.js” type=”text/javascript”></script>
<script src=”js/jquery-ui-1.7.2.min.js” type=”text/javascript”></script>
<link type=”text/css” href=”css/custom.css” rel=”stylesheet” />

<script type=”text/javascript”>
   $(function(){
    // Tabs
    $(‘#tabs’).tabs();
   });
  </script>
</head>

そして、BODY内に、タブのソースを記述。

 <!– Tabs –>
<h2>TABSの実装サンプル</h2>
<div id=”tabs”>
<ul>
 <li><a href=”#tabs-1″>タブ1</a></li>
 <li><a href=”#tabs-2″>タブ2</a></li>
 <li><a href=”#tabs-3″>タブ3</a></li>
</ul>
<div>
<div id=”tabs-1″>タブ１の内容。jQueryUIでは、色々とオプションも使える。例えば、ソース内の、
$(‘#tabs’).tabs();
この部分を、
$(‘#tabs’).tabs({selected:1});
とすると、2番目のタブがアクティブになった状態でページが開かれる。（※番号は、0から順番にインデックスを振っていくので、1番目のタブなら0、3番目のタブなら2ということになる）。いろんなことができますね～。　</div>
<div id=”tabs-2″>各コンテンツの中身は、こんな感じで適宜作成します。</div>
<div id=”tabs-3″>いろんなことができますね～。　</div>
 </div>

そして、実装した画面イメージがこれです。（タブ１が開かれています）
jQuery-UI-Example-Page

そのほかのオプションとしては、タブのコンテンツの大きさを固定にするとか。色々。THEMEROLLERを使うと、適したCSSをWEB画面上で作成して、ダウンロードすることもできる。

 

参考サイト：

http://jqueryui.com/download

http://jqueryui.com/themeroller/

http://docs.jquery.com/UI/Tabs#option-selected

webデザインイロイロ。マウスオーバー効果もイロイロ。

http://www.designwalker.com/2009/08/hover.html

moused

CSSやjQueryを使ったマウスオーバーの効果がイロイロ紹介されてた。

マウスオーバーってデザイン中には、忘れがち。最後のコーディングのところになって、う～ん、どうしよ？ってことが多いもの。。。

デザインのアイデアフラッシュとして◎デスネ。

ブラウザのパーツを集める

http://www.designerstoolbox.com/designresources/elements/

Designers Toolbox_ OS Form Elements

WEBページのデザインをしたり、WFを作成するときに、ラジオボタンやテキストエリアのパーツが必要なことって意外とある。

そういうときのために、ブラウザごとのパーツを公開しているサイト。

一度DLしておけば、ブラウザのバージョンアップまでは使えるので、暇なときに集めておくのも手。

AJAXでLIGHTBOX的に美しく写真を表示するCOLORBOX

http://colorpowered.com/colorbox/

要は、LIGHTBOXなのだけど、おしゃれ。

バリエーションのサンプルが色々あって、使いやすいです。

colorbox-customizable-lightbox-plugin-for-jquery

ビューティフルなフラッシュサイト50選

http://www.smashingmagazine.com/2009/06/07/50-beautiful-flash-websites/

50-beautiful-flash-websites-_-design-showcase-_-smashing-magazine

フラッシュの動きやデザインの参考になる海外サイトがいっぱい。

フリーのサイトデザインPSDとXHTMLテンプレートがダウンロードできる

http://www.smashingmagazine.com/2009/06/04/6-free-psdxhtml-templates/

6-free-psd_xhtml-templates-_-freebies-_-smashing-magazine

ここで公開されている6つのサイトデザインが、テンプレートとPSDとどちらもDLできる。

サイトデザインの勉強にもいいだろうと思う。

オンライン・グリッドレイアウトツールその２

http://mdaines.com/plumb/

plumb

こちらは、グリッドを見ながら、直感的にレイアウトブロックを作成して、ＣＳＳとHTMLを描きだせるツールplumb。

オンライン・グリッドレイアウトツール

オンラインでグリッドレイアウトのためのカラムを作成するサイトGRID DESIGNER。

grid-designer-2

グリッドの幅やマージンを調節しながら、ベースグリッドを作成できる。

WEBデザインのテンプレートとフォトショップのチュートリアル

http://www.cleardetails.com/templates-tutorials.php

clear-details-web20-premium-website-templates

テンプレートをリーズナブルな価格で販売している。フォトショップでページを作成するチュートリアルがあり、なかなか面白い。

WEBページ＆バナーデザイン色々ネタ帳

http://www.designlinkdatabase.net/

http://yutaka.blush.jp/bannerworld/index.html

http://creativezone.eyeblaster.com/Default.aspx

すごくかっこいいサイトもいっぱい。

参考になる。

50の美しくてユーザーフレンドリーなナビゲーションメニュー選

http://www.smashingmagazine.com/2009/02/04/50-beautiful-and-user-friendly-navigation-menus/

相変わらず、SMASHING MAGAZINEはネタが豊富。

CSSやJSを利用したナビゲーションの面白いアイデアが掲載されています。
どれも個性的で、デザインだけでなく動作も洗練されているので、応用しだいで素敵なナビゲーションデザインができそう。

ten

ph

nopoko

かっこいいjQueryコンテンツスライダー

http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider

jquery-plugin-easy-image-or-content-slider-_-css-globe

動きがカッコイイ。

jQueryを利用していて、コンテンツがすす～っとスムーズにスライドしていく。

例えば商品ページで

WORDPRESS2.7にもOKなブログテーマ10

http://mashable.com/2009/01/07/wordpress-2-7-themes/

10-of-the-best-wordpress-27-compatible-themes

なかなか使いやすいテーマが揃っている。

ブログというよりもコーポレートサイトやポータルに使えそう。

モノクロ☆シンプルでカッコイイアイコン集

http://picol.org/icon_library.php

icon-library

全部シンプル。

だけどカッコイイ。

クリエイティブでイケてるポートフォリオデザイン集50選

http://www.smashingmagazine.com/2008/11/26/50-beautiful-and-creative-portfolio-designs/

確かにイケとります。

カッコエエです。

美しいグランジWEBデザイン30選

http://sixrevisions.com/web_design/30-beautiful-examples-of-grunge-in-web-design/

どれも、完成度が高くとても美しいサイトばかりです。

デザイン・レイアウトの参考に。

美しい！サイトのナビゲーションデザイン色々50選

http://vandelaydesign.com/blog/galleries/inspirationalnavigation-menus/

洗練された美しいナビゲーションがいっぱい♪

デザインの参考に。

プレミアムな7WORDPRESSテーマ

http://www.noupe.com/wordpress/the-top-7-premium-wordpress-themes-for-free.html

WORDPRESSのテーマ集。完成度の高いテーマが7つ公開されている。

でも有償・・・

参考にはなるかも。

カテゴリごとにイケてるデザインが多数！WORDPRESSのテーマ集

http://www.revolutiontwo.com/

WORDPRESS用のテーマ集。

CSSでデザインするスタイリッシュなフォームデザイン

http://www.webmonkey.com/tutorial/Stylize_Forms_With_CSS

フォームをデザインする際の汎用的なマークアップ、CSSの記述の仕方がチュートリアルとしてまとまっている。

細部まで手を抜かない。洗練されたデザインのフッター集

http://vandelaydesign.com/blog/galleries/blog-footers/

フッターデザイン集。

どのデザインもきれいに作ってあって、すばらしい！

フッターっていうと、最後にユーティリティを記することが多いのだけど、カテゴリの多いサイトなんかはこういう感じでデザインされていると、ページのアクセントにもなっていいな、と思う。

45のきれいなイラストレーターブラシ集

http://designm.ag/resources/adobe-illustrator-brushes/

掲載されているどのブラシもきれいで完成度も高い。

WEBにも使えそうなものがいっぱい。

イラレで作るWEBデザイン20選

http://sixrevisions.com/graphics-design/20-exceptional-websites-for-learning-adobe-illustrator/

ブログのデザインなど、adobeイラストレーターでのデザインチュートリアルが掲載されている。

WEB上で操作できるイケてるイメージエディタ6選

http://sixrevisions.com/tools/web-based-image-editors/

いまや、ユーザーはフォトショップなんか使いません；

PICASAを初めとしてWEBベースのイメージエディタが次々公開されていますね。

青をベースにした30のWEBデザイン事例集

http://sixrevisions.com/web_design/30_beautifully_blue_web_designs/

いずれも、美しいデザインばかりで、パーツやレイアウトの参考になる。

広告バナーのデザイン色々

【色々サンプル】

 【チュートリアルとか】

参考：http://www.designwalker.com/2008/05/banner-design.html

LIGHTBOX2.0で、かっこよく画像をポップアップする！

LIGHTBOXというのはJAVASCRIPTで、要は画像のポップアップとかに使うわけだけども、クールなインターフェイスでなかなかカッコイイのですな。複数画像をグループ化して、フォトギャラリーみたいなスライドも出来る。

  1. 『ゼロからはじめるLightbox 2.0 – 簡単にWebで写真アルバム機能を
    http://journal.mycom.co.jp/articles/2007/06/14/lightbox/
    LIGHTBOXの概要と使い方が分かりやすくまとまっている。
  2. 『Lightboxスクリプトいろいろ』
    http://www.designwalker.com/2008/01/lightbox.html
    スクリプトサンプルとか。
  3. Ｌｉｇｈｔview
    http://www.nickstakenburg.com/projects/lightview/
    デザインが素敵なブランチ版
  4. 2.0をちょっと改造したひと。
    http://www.fsiki.com/jet/css-xhtml/lightbox-js-v2.html

こういうのが、色々あると、WEBのデザインインターフェイスもたのしいですね。

マウスくりっくでイメージがくるっと回転する視覚効果の高い『Flip!』

http://lab.smashup.it/flip/

画像が、上下左右にクルンと回転します。
jQueryプラグイン。

WORDPRESSで構築されたかっこいいWEBサイトデザイン４５選

http://sixrevisions.com/wordpress/beautiful_wordpress_designs/

どれも個性的で美しいサイトばかりなので、デザインの参考になります。

制作者のためのデザインジェネレーター色々

Web 2.0 Design Generators For Developers

インタラクティブでかっこいいフォームのインターフェイス

http://nettuts.com/javascript-ajax/build-a-top-panel-with-jquery/

ｄｅｍｏ：http://web-tan.forum.impressrd.jp/e/2008/08/22/3516

普段隠れているフォームがクリックすると、びよ～んと展開するという楽しいインターフェイス。
なんかのコンバージョンは、下がりそうだけど、ログインとかしてもらうには、楽しくていいかな。

チュートリアルにもなっているので、勉強するのもいいかも。

WEBデザイナー必見！かっこいいWEBサイトを１からデザインするチュートリアル(サイトデザイン60選!)

http://www.photoshoptalent.com/blog/2008/08/11/the-60-best-photoshop-tutorials-to-design-your-own-amazing-site/

WEBページの色々なデザインを１から作り上げていくチュートリアルですが、どのデザインも極めてWEBらしい、ということと、バリエーションが豊かであるということで、かなり楽しいサイトです。

美しく完成度の高いタイポグラフィ集

http://www.smashingmagazine.com/2008/05/12/sexy-bold-and-experimental-typography/

どのタイポも高度に作りこまれていて、完成度の高い美しいものばかりです。

タイポグラフィの投稿サイトですので、チュートリアルとかではなく、見るだけですが、良い刺激が得られます。

CSSで作るテーブルレイアウトトップ１０

http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/

CSSベースなので、応用して使えそうです。

JSでインタラクティブにグラフ表示『ProtoChart』

http://www.deensoft.com/lab/protochart/index.php

JavaScript（PROTOTYPE.JS）で図のようにグラフィカルでインタラクティブなグラフが描けます。

オープンソースのコードがダウンロードできます。

STUDIO7DESIGNSのオープンソーステンプレート

http://www.opensourcetemplates.org/

デザインも洗練されていて美しいものばかりです。

サンプルからCSSレイアウトを選んでカスタマイズできるdo template

http://www.dotemplate.com/

サンプルのテンプレートがプロ仕様で画像もついているのでイメージしやすい。
サイト内のフォームから入力指定でカスタマイズできるので◎

Nice and Free CSS Templates

http://mycelly.com/

2カラムからセンター配置まで、シンプルだけど使い勝手の良いCSSレイアウト集。
12種のサムネイルから好きなCSSテンプレートをDLできる。

フォーム入力していくと、CSSレイアウトが作成できるサイト

http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php

使える！42のCSSレイアウトベース集

http://www.code-sucks.com/css%20layouts/faux-css-layouts/

 

42種ものレイアウトベースがあるので、WEBデザインで使用するおよそのパターンに対応可能です。

WEBデザインのツール&リンク集

WEBデザインをするのに役に立つツールやサイトへのリンク集。カテゴライズされた情報が大変みやすく、どちらも情報も豊富。

サイトは英語。

Movable Typeのオープンソース

最近WORDPRESSに完全に市場を奪われてしまっているMTにも実はMOTSというオープンソースの無償プロジェクトがあります。
開発版のMTという感じで、中身もほぼ製品版のMTと同様です。（ベータ版とはまたちょっと違うのですね）

http://www.movabletype.org/

は、オープンソースプロジェクト用のURLで（MT製品版は.com）日本語サイトに行ってもほとんど情報は載っていませんが、実は、サイトもちゃんと独立していて、情報もしっかりありますから、これを使わない手はありません。

WORDPRESSテーマ

http://themes.wordpress.net/

http://www.valentinaolini.com/wordpress_themes.htm

http://coliss.com/articles/blog/wordpress/802.html
ワードプレスのブログテーマがDLできるサイト。
ワードプレスは無料のかっこいいテーマがたくさんあります。

商用ベースのMTは、色々と独自のタグが出来てきて、それを覚えるのが面倒、、、という人が皆ワードプレスに流れているようなイメージでしょうか。

3Dイメージがくりくり回るJS　その２：VIRTUAL GADJO

http://www.virtual-gadjo.com/mooVRotatingMenu.php

マウスカーソルを合わせるとクルクル回転するメニューが作れます。
こちらの動きも洗練されていて美しいです。

くりくりイメージが回る&クリックで拡大3D Image Carousel

http://www.coswest.com/c/jquery/carousel3d/

様々なFORMの雛形を公開しているサイト『Wufoo FORM Gallery』

http://wufoo.com/gallery/

『Wufoo FORM Gallery』

きれいなCSSレイアウトのサンプル集『CSS 4 Free』

http://css4free.com/

『CSS 4 Free』

フリーで素敵なCSSレイアウトのテンプレートを入手できる。

レイアウトの完成度が高いので、ビジネスブログやコーポレートサイトにも使えそう。

PHPSPOTの関連エントリ

CSSレイアウトのチート集12

http://www.zachgraeve.com/css-cheats/

汎用レイアウトのHTML&CSSソースが公開されています。

これを元に使えば、制作作業が効率かできます。
使いたいレイアウトをクリックして選んだ後、左上の「View Souce」でソースを表示させ、コピペします。HTMLとCSSは1つのソースになっているので、CSSを別ファイルにして、リンクを貼ればＯＫ！

Home > Tags > WEBデザイン

Pages
Recent Entries
Categories
Archives
Tag Cloud
Search
Feeds
Meta

Return to page top