ITニュース

デザインが魅力的なスライドショーJavaScript (Lightview)

スライドショーを設置しているサイトを目にする機会が多くなってきた。他のサイトと少しでも違いを出したいときに是非検討したいのがLightview。基本的なユーザーインターフェースはLightboxと非常に似ている、細かな部分のデザインに丸みがあるので、角丸を多く採用しているサイトデザインとの相性が良い。続きを読む...

楽にフォーム入力チェックを実装するJavaScript （JSValidate）

サイト上に入力フォームを設置する場合注意したいのは、ユーザーが入力する際に迷わずに必要な項目を入力できるかといった内容になる。多くの場合、入力フォームを経由することで離脱率が上がり、コンバージョン率低下の要因となる。「フォーム入力のしやすさ」以外にも様々なケースがあるが、入力ミスなどを適切に表示するJavaScriptライブラリがJSValidate。続きを読む...

CSSデザインレイアウトをオンラインで簡単に作成する （YAML）

WebコンテンツをCSSレイアウトで作成する場合、非常に便利なのが Yet Another Multicolumn Layout (YAML)。必要なレイアウトをドラッグで変更できるなど、直感的に目的のレイアウトを作成することができる。続きを読む...

ユーザーが再配置可能なWedgetを実装するJavaScript （Prototype Portal Class）

ナビゲーション項目やコンテンツをユーザーが自由にドラッグ移動できるようにしたい場合など便利なのがPrototype Portal Class（protal.js）。Wedgetを作成配置するとドラッグ移動・配置の調整など可能なコンテンツが表示される。続きを読む...

フォームボタンCSSデザインするテクニック （Rediscovering Button Element）

Webコンテンツにフォームボタンを設置すると、ブラウザ標準のボタンが表示される。画像イメージなどでボタンの代替として利用することができる。buttonタグとCSSの組み合わせでアイコンを表示するテクニックなど、Rediscovering Button Elementで具体的な解説をしている。続きを読む...

半透明の角まるツールチップを表示するJavaScript （CoolTips）

JavaScriptでツールチップを表示するライブラリは比較的多く存在する。ライブラリ選択の基準にデザインが重要になってくる。シンプルなデザインの角まるツールチップで使いやすいのがCoolTips。ライブラリも軽量になっている点もうれしい。続きを読む...

JavaScriptでプログレスバーを簡単に実装する （jsProgressBarHandler）

Ajaxなど非同期処理などプログレスバーを表示させたいと思うことがある。しかし、実装の手間や開発期間を考えると、進行状況を表示するだけのプログレスバーに時間をかけたくない。簡単にプログレスバーを実装できるのがjsProgressBarHandler。続きを読む...

JavaScriptコード圧縮して盗用から守る （packer）

JavaScriptコードはHTMLタグのように、ブラウザ側で受信できるためコードを完全に保護する方法が限られている。その為、JavaScript経由でデータ処理プログラムなど呼び出す場合、注意する必要がある。続きを読む...

iTuneのようにカバーアートを表示するFlash （iTunes Coverflow）

iTuneの機能にCoverFlowがある。カバーアートが横にスライドするメニューだが、量が多い場合や写真などイメージから選択する際に、優れたインターフェースになっている。同様のメニューをWebコンテンツに実装することが出来るのがiTunes Coverflow。続きを読む...

画像をサムネイルのサイズで表示するJavaScript （jQuery Thumbs）

画像イメージをコンテンツに表示する場合、毎回サムネイル用の画像を作成してアップロードしている場合に、簡単にサムネイルサイズで表示してくれるのが、jQuery Thumbs。jQueryのプラグインとして動作する。続きを読む...

Ajaxでサクサク動くWebファイルマネージャ （Relay）

サイト用のコンテンツには画像、JavaScript、CSSなどいろいろなファイルをアップロードしている場合が多い。FTPで接続できれば問題ないが、Webサーバでファイルを共有したい場合や、ブラウザ経由でファイルの管理などを行いたい場合便利なのが、Relay。続きを読む...

アンカータグを利用してスムーススクロールを実装する　（df Smooth Scroll）

コンテンツの内部リンクを利用すると、ページが長い場合など見出しを設けたりして、ユーザーが簡単に目的の文章にたどり着くことが出来る。しかし、アンカータグをクリックした場合、瞬間的に移動が行われるためページ遷移した場合との差別化が難しい。そこで利用される手法がスムーススクロール。続きを読む...

MacでもFlashでホイール操作が出来るようにする （SWFMacMouseWheel）

Flashコンテンツでマウスのホイールイベントを利用する場合、そのままではMacでイベントが受信できない。Macでもホイールイベントの実装を楽にしてくれるのが、SWFMacMouseWheel。利用する際は、SWFObject.jsのアドオンとして利用する。続きを読む...

HTMLなどタグ編集を楽にするエディタ機能JavaScript （jTagEditor）

HTMLやWikiなどタグを入力するするのが、意外と面倒になる。こうした手間を改善してくれるのが、jTagEditor。WYSIWYGとは異なり、コードを編集する事に特化したエディタインターフェースを実装することが出来る。

利用するには、jQueryも必要になる。HTML、Wiki、Textile、BBcodeなどのコードにはデフォルトで対応している。別のフォーマットに対応したい場合は、拡張することが出来るようになっている。続きを読む...

使いやすいYUIライブラリのWYSIWYGエディタ （Rich Text Editor）

Yahoo!のフレームワーク（YUI）には便利な機能が多い。CSSやJavaScriptライブラリなどを組み合わせて利用する。中でも注目したいのがWYSIWYGのRich Text Editor。動作も比較的軽く、インターフェースも使いやすく仕上がっている。そのままでも十分に利用価値があるが、ツールバーにボタンを追加するプラグインを自作して利用することもできる。続きを読む...

フォトショップで作る80種類のテキストエフェクト集 （photoshoproadmap.com）

ロゴやタイトルテキストなどデザインが良いと、デザイン全体が生きてくる。良く目にするデザインから斬新なものまでをネット上に散らばったチュートリアルを紹介しているのが、photoshoproadmap.com。80種類のエフェクト実践方法へのリンクを一気に確認できるようになっている。続きを読む...

Flashで便利なTweenクラスのわかりやすい解説 （Ｔween Class Easing）

Flashでアニメーションを実装する際、タイムラインで作成する方法と、ActionScriptで作成する方法がある。タイムラインでアニメーションを作成するよりも、Tweenクラスを利用すればもっと楽に高度なアニメーションを実装できる。続きを読む...

CSSレイアウト情報をレイヤー表示するブックマーク （XRAY）

CSSのレイアウトなど気になる部分をサッと確認したいときに便利なのが、XRAY。普段利用しているブラウザでも利用でき、利用する準備も非常に簡単。ソフトウェアなどのインストールは必要ない。

利用するには、レイアウト情報を確認したいサイトで、事前にブックマークしておいたXRAYを呼び出すだけで利用できる。対象の部分をクリックすると、サイズや位置の情報をレイヤー表示してくれる。続きを読む...

Lightboxのような透過レイヤー表示の実装サンプル （Lightbox Effect）

スライドショー表示JavaScriptとして有名なLightbox。ナビゲーションや表示エフェクトなどスライドショーの定番になりつつある。Lightboxがスライドを表示する際に、濃いグレーの透過レイヤーなどエフェクトを作成する方法を紹介しているのが、PJ Hyett。続きを読む...

CSSデザインで綺麗なボタンを作成する （How to make sexy buttons with CSS）

コンテンツにボタンを用意する際、フォームのボタン以外にもさまざまな場面で利用する。例えば、ダウンロードリンクをボタンデザインに変更するだけで、ユーザービリティが改善される。綺麗なボタンをCSSとイメージ画像でデザインする方法がoscaralexander.comで解説されている。続きを読む...