この度、MdN さんから発売中の書籍「サイトのタイプ別につくる Webデザインテクニックブック – 仕事ですぐに役立つプロのアイデア」に執筆させていただきました。5組の Web制作者のみなさんが各パートで、デザイン/サンプル/執筆をされています!
この本は、タイトルにもあるように、いろんなタイプ別のサイトをサンプルで紹介しながら、そこで使われているテクニックを紹介していく … といった形の内容になっています。なので CSS3 だったり jQuery だったり、Photoshop や Fireworks のテクニックだったり、それぞれののサンプルの中でいろいろなことが解説されています。
サンプルサイトとその中で使われているテクニックは、目次で紹介されているので、下記に転載させていただきます!
Webデザインテクニックブック 目次
Information
サンプルサイトは、MdNさんのサイトからダウンロードすることができます。
1. 情報提供を重視したデザイン
1.1. シンプルなつくりでも人目を引くコーポレートサイト
制作・文 – 佐藤とも子さん・サチコさん(螺旋デザイン)
- マウスオーバーで波紋が広がる円形メニュー
- 軽快な動作を手軽に実装できるドロップダウンメニュー
- 画像を使わず実現するグラフィカルなパンくずリスト
- Googleマップをオリジナルにカスタマイズ
1.2. Webフォントを取り入れたテキスト主体のサイト
制作・文 – 高橋 のり(Webデザインレシピ)
- Webフォントで表現した画像を使わないタイポグラフィ
- CSSのテクニックを利用したリストや見出しの装飾
- CSS3を活用した角丸・ストライプのテーブル
- ラベルテキストを内包したユーザーフォーム
- Webフォントアイコンで装飾したフォーム
- ふわっと出現して消えるツールチップ
制作してみて …
テキスト主体で、ガーリーっぽいデザイン … っていうご要望で、デザインも使うテクニックも、どんな風にしたらいいかなーとめちゃめちゃ苦労しました X(
2. 商品を魅力的に見せるデザイン
2.1. 心地よいエフェクトでページの回遊を促すECサイト
制作・文 – 北川 貴清さん
- 折りたたみ自由なアコーディオンメニュー
- タブパネルで切り替えるフィーチャーリスト
- クリックで画像が切り替わるイメージビューア
2.2. 限られたスペースで多くの写真を見せるECサイト
制作・文 – 北川 貴清さん
- 複雑なメニュー情報を一度に見渡せるメガメニュー
- ズームインエフェクトを使った商品紹介
- スキンのカスタマイズ可能なセレクトメニュー
- 複数の画像をスライドさせるカルーセルパネル
2.3. コンパクトなスペースで商品の特長を伝えるスマートフォンサイト
制作・文 – 佐藤とも子さん・サチコさん(螺旋デザイン)
- JPEG画像を透過表示させたフリック機能
- クリックで開閉するアコーディオンメニュー
3. 写真を効果的に使うデザイン
3.1. エフェクトで優雅な雰囲気を演出したECサイト
制作・文 – 高橋 のり(Webデザインレシピ)
- フェードしながら段階的にコンテンツを表示
- フロートボックスを隙間なく敷き詰める
- マウスオーバー時にフェードで画像を切り替える
- 独自のカスタマイズができるフォームバリデーション
- jQuery UIを利用したログインフォーム
制作してみて …
フェードで画像を切り替えるのに、jQuery を使うパターンと、CSS3 を使うパターンをふたつ用意してみました。CSS3 対応ブラウザでは CSS3 を使って、それ以外は jQuery を使う … という出し分けをしてみました。
3.2. 写真をふんだんに使った商品カタログサイト
制作・文 – 佐藤とも子さん・サチコさん(螺旋デザイン)
- 画面全体に写真を表示したインパクトのあるトップページ
- マウスオーバー時に拡大させる画像のアニメーション
- スライダー式に遷移する商品写真のLightbox表示
- 商品情報を表示するツールチップ
3.3. 写真加工やレイアウトでナチュラル感を出したプロダクトサイト
制作・文 – 高橋としゆきさん(Graphic Arts Unit)
- パーツ類の透過画像をPhotoshopで作成
- 写真をネガティブ値で配置してインパクトを出す
- 要素をランダムに配置してデザインに動きを出す
- 掠れた角丸フレームとマスキングテープ風のパーツ
4. インタラクティブ性の高いデザイン
4.1. 動きのある仕掛けで世界観を表現したキャンペーンサイト
制作・文 – 高橋としゆきさん(Graphic Arts Unit)
- パララックス効果を用いた奥行きのある表現
- 最下部に固定された曲線のフッター
- ソーシャルサイトのシェア系ボタンを設置
- カスタマイズが簡単なスライド式フォトギャラリー
- nth-childを利用したデザイン性の高い表組み
- 独自スクリプトで実装する表組みの絞り込み機能
4.2. ユニークなインタラクションを実装した音楽系サイト
制作・文 – 山本圭助さん(株式会社ラナデザインアソシエイツ)
- シャッターが開くようにページがスライドするエフェクト
- 表示・非表示が切り替わる開閉式ナビゲーション
- ワンソースで手軽にスマートフォン表示に対応
全部で 10個のサンプルサイトから、いろいろなテクニックが紹介されています。詳しくは、MdNさんのサイトでも紹介されているので、興味のある方はぜひご覧になっていただけると嬉しいです!
そんな「サイトのタイプ別につくる Webデザインテクニックブック 仕事ですぐに役立つプロのアイデア」、MdN さんから発売中です!読んでいただけるとうれしいです ;D
サイトのタイプ別につくる Webデザインテクニックブック 仕事ですぐに役立つプロのアイデア
10個のサンプルサイトを例にして、CSS3、jQuery、Photohop などのテクニックを紹介しています。Kindle版も発売中です!
Comments
Thank you for the comment.