Webデザインレシピ

サンプルサイトとその中で使われているテクニックは、目次で紹介されているので、下記に転載させていただきます！

Webデザインテクニックブック 目次

1. 情報提供を重視したデザイン
2. 商品を魅力的に見せるデザイン

1. 写真を効果的に使うデザイン
2. インタラクティブ性の高いデザイン

1. 情報提供を重視したデザイン

1.1. シンプルなつくりでも人目を引くコーポレートサイト

制作・文 – 佐藤とも子さん・サチコさん（螺旋デザイン）

• マウスオーバーで波紋が広がる円形メニュー
• 軽快な動作を手軽に実装できるドロップダウンメニュー
• 画像を使わず実現するグラフィカルなパンくずリスト
• Googleマップをオリジナルにカスタマイズ

1.2. Webフォントを取り入れたテキスト主体のサイト

制作・文 – 高橋 のり（Webデザインレシピ）

• Webフォントで表現した画像を使わないタイポグラフィ
• CSSのテクニックを利用したリストや見出しの装飾
• CSS3を活用した角丸・ストライプのテーブル
• ラベルテキストを内包したユーザーフォーム
• Webフォントアイコンで装飾したフォーム
• ふわっと出現して消えるツールチップ

2. 商品を魅力的に見せるデザイン

2.1. 心地よいエフェクトでページの回遊を促すECサイト

制作・文 – 北川 貴清さん

• 折りたたみ自由なアコーディオンメニュー
• タブパネルで切り替えるフィーチャーリスト
• クリックで画像が切り替わるイメージビューア

2.2. 限られたスペースで多くの写真を見せるECサイト

制作・文 – 北川 貴清さん

• 複雑なメニュー情報を一度に見渡せるメガメニュー
• ズームインエフェクトを使った商品紹介
• スキンのカスタマイズ可能なセレクトメニュー
• 複数の画像をスライドさせるカルーセルパネル

2.3. コンパクトなスペースで商品の特長を伝えるスマートフォンサイト

制作・文 – 佐藤とも子さん・サチコさん（螺旋デザイン）

• JPEG画像を透過表示させたフリック機能
• クリックで開閉するアコーディオンメニュー

3. 写真を効果的に使うデザイン

3.1. エフェクトで優雅な雰囲気を演出したECサイト

制作・文 – 高橋 のり（Webデザインレシピ）

• フェードしながら段階的にコンテンツを表示
• フロートボックスを隙間なく敷き詰める
• マウスオーバー時にフェードで画像を切り替える
• 独自のカスタマイズができるフォームバリデーション
• jQuery UIを利用したログインフォーム

3.2. 写真をふんだんに使った商品カタログサイト

制作・文 – 佐藤とも子さん・サチコさん（螺旋デザイン）

• 画面全体に写真を表示したインパクトのあるトップページ
• マウスオーバー時に拡大させる画像のアニメーション
• スライダー式に遷移する商品写真のLightbox表示
• 商品情報を表示するツールチップ

3.3. 写真加工やレイアウトでナチュラル感を出したプロダクトサイト

制作・文 – 高橋としゆきさん（Graphic Arts Unit）

• パーツ類の透過画像をPhotoshopで作成
• 写真をネガティブ値で配置してインパクトを出す
• 要素をランダムに配置してデザインに動きを出す
• 掠れた角丸フレームとマスキングテープ風のパーツ

4. インタラクティブ性の高いデザイン

4.1. 動きのある仕掛けで世界観を表現したキャンペーンサイト

制作・文 – 高橋としゆきさん（Graphic Arts Unit）

• パララックス効果を用いた奥行きのある表現
• 最下部に固定された曲線のフッター
• ソーシャルサイトのシェア系ボタンを設置
• カスタマイズが簡単なスライド式フォトギャラリー
• nth-childを利用したデザイン性の高い表組み
• 独自スクリプトで実装する表組みの絞り込み機能

4.2. ユニークなインタラクションを実装した音楽系サイト

制作・文 – 山本圭助さん（株式会社ラナデザインアソシエイツ）

• シャッターが開くようにページがスライドするエフェクト
• 表示・非表示が切り替わる開閉式ナビゲーション
• ワンソースで手軽にスマートフォン表示に対応

---