連載
Webデザイン最新トレンド ～イマドキUIのつくりかた
“今っぽいWebサイト”を作るには何が大切か？ Webデザインのポイントと実際の作り方をサンプルをまじえて紹介します。
- 第13回 フルスクリーンで背景画像を表示するには
- Webでも裁ち落としでインパクトを出せる
- Supersized.jsでオプションを指定する
- 画像の表記領域やテキストを指定する
- フルスクリーン表示される画像の詳細を指定する
- スライドショーも実装できる
2011年2月8日
- 第12回 ふわっと色が変わるボタンを作るには
- CSS3＋IE対策にJavaScriptを併用
- CSS3で実装するには
- jQueryのfadeTo()メソッドで透過度を変化させる
2010年12月9日
- 第11回 CSS3でアニメーションするメニューを作る
- インタラクティブな反応で操作をよりわかりやすいものに
- 実装のポイント
2010年11月11日
- 第10回 CSS3で自由なボーダーデザインを実現する
- 神は細部に宿る
- CSS3なら簡単に実現できる
- CSS3 Generatorで発想を試してみよう
2010年10月19日
- 第9回 ページ内リンクをスムーズにスクロールさせるには
- ease系のJavaScriptプラグインで気持ちいい動きを演出
- jQuery・プラグインをダウンロードする
- ファイルを読み込みリンク先を指定する
- 動きがもっと自然になるようカスタマイズする
2010年9月28日
- 第8回 適切な説明を加えたデザインにするには
- ツールチップでさりげなく情報を伝える
- tipsyとDD_belatedPNG.jsを準備する
- フェードインの動きと透過PNGを取り入れる
- ツールチップに表示するテキストを指定する
- クラス分けしたdiv要素をjquery.tipsy.js」に追記
- CSS3でも表現可能
2010年9月7日
- 第7回 静的なサイトでローディング時の表示をコントロールするには
- 美しさのために読み込みもコントロールしたい
- サンプルの3つのポイントとファイル構成
- jQueryのfadeInメソッドとdelayメソッドで速度を指定
- ID指定で表示時間を分ける
- CSSで対象のdiv要素を非表示に
2010年8月24日
- 第6回 裁ち落としてインパクトのあるデザインを作る
- ユーザビリティを落とさずインパクトを出すには
- jquery.backstretch.jsで背景画像が伸縮するUIに
- IE6対策はどうする？
- CSS3でも実装可能
2010年8月10日
- 第5回 タブ切り替えで快適に読めるインターフェースを作るには
- 見せたいもののメリハリをつけるのがコツ
- Ajaxで待ち時間をなくして快適に
- 切り替えるコンテンツを指定するには
- CSSでタブの詳細を指定する
- より多彩で自然な動きを
2010年7月27日
- 第4回 画像をきれいに見せるギャラリーのつくりかた
- lightbox系ライブラリなら手軽で更新しやすい
- Flashにはない3つの問題
- 動きの気持ちいい「prettyPhoto」
- 複数の画像を使ったギャラリー
- API，ライブラリ，CSSを読み込む
- 画像と表示するテキストを指定する
- デザインテーマを自由に変える
- 今後はHTML5を使ったギャラリーに注目
2010年7月13日
- 第3回 トップページを彩るスライドショーのポイント
- 「jQuery Cycle Plugin」で簡単に実装
- トランジションの効果を指定する
- スライドのコンテンツとナビゲーションを指定する
- 魅力的な有料ライブラリも要チェック
2010年6月29日
- 第2回 アクションを起こしてもらえるフォームのポイントは？
- 使いやすいフォームをデザインする6つのポイント
- ポイント1 要素を整列させる
- ポイント2 適度な余白をつくる
- ポイント3 ディテールを作り込む
- ポイント4 デザインされたボタンを使う
- ポイント5 住所を自動入力できるようにする
- ポイント6 エラー表示をわかりやすくする
- サンプル全体のソースを見てみる
- 今後は「より動きのある，反応の速いフォーム」を
2010年6月16日
- 第1回 使いやすいメニューはどう作る？ ～水平メニュー
- 「使いやすいメニュー」に必要な3つのこと
- 使いやすい水平メニューをデザインする
- XHTMLではメニューをリストタグで作成
- CSS spritesで1つの背景画像の位置をずらす
- 今後のポイントは「よりリッチに，インタラクティブに」
2010年6月1日
著者プロフィール
川下城誉（かわしもくにたか；CREAMU）
Web制作・ブランディングを主軸とした（株）CREAMU 代表取締役。海外のWeb情報を紹介するblog「CREAMU」を運営中。