書籍「サイトのタイプ別につくる Webデザインテクニックブック」に執筆させていただきました

Posted under - Misc

13

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

この度、MdN さんから発売中の書籍「サイトのタイプ別につくる Webデザインテクニックブック – 仕事ですぐに役立つプロのアイデア」に執筆させていただきました。5組の Web制作者のみなさんが各パートで、デザイン/サンプル/執筆をされています!

この本は、タイトルにもあるように、いろんなタイプ別のサイトをサンプルで紹介しながら、そこで使われているテクニックを紹介していく … といった形の内容になっています。なので CSS3 だったり jQuery だったり、Photoshop や Fireworks のテクニックだったり、それぞれののサンプルの中でいろいろなことが解説されています。

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

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

  1. 情報提供を重視したデザイン
  2. 商品を魅力的に見せるデザイン
  1. 写真を効果的に使うデザイン
  2. インタラクティブ性の高いデザイン

Information

サンプルサイトは、MdNさんのサイトからダウンロードすることができます。

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

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

サンプルサイト1

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

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

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

サンプルサイト2

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

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

テキスト主体で、ガーリーっぽいデザイン … っていうご要望で、デザインも使うテクニックも、どんな風にしたらいいかなーとめちゃめちゃ苦労しました X(

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

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

サンプルサイト3

制作・文 – 北川 貴清さん

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

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

サンプルサイト4

制作・文 – 北川 貴清さん

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

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

サンプルサイト5

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

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

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

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

サンプルサイト5

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

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

フェードで画像を切り替えるのに、jQuery を使うパターンと、CSS3 を使うパターンをふたつ用意してみました。CSS3 対応ブラウザでは CSS3 を使って、それ以外は jQuery を使う … という出し分けをしてみました。

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

サンプルサイト7

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

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

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

サンプルサイト8

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

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

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

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

サンプルサイト9

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

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

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

サンプルサイト10

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

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

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

全部で 10個のサンプルサイトから、いろいろなテクニックが紹介されています。詳しくは、MdNさんのサイトでも紹介されているので、興味のある方はぜひご覧になっていただけると嬉しいです!

そんな「サイトのタイプ別につくる Webデザインテクニックブック 仕事ですぐに役立つプロのアイデア」、MdN さんから発売中です!読んでいただけるとうれしいです ;D

サイトのタイプ別につくる Webデザインテクニックブック 仕事ですぐに役立つプロのアイデア

サイトのタイプ別につくる Webデザインテクニックブック 仕事ですぐに役立つプロのアイデア

10個のサンプルサイトを例にして、CSS3、jQuery、Photohop などのテクニックを紹介しています。Kindle版も発売中です!

Comments

Thank you for the comment.