2015年のWebデザインのスタンダードテクニック総まとめ


現場のプロが教えるWEBデザイン 新・スタンダードテクニック

Webデザインは、技術や閲覧環境が日々進化しています。その中で、Webサイト運営で成果をあげるために最新の知識を持ち、実装することが重要になります。

2015年8月現在における、最新のWebデザインのスタンダードテクニックがまとめられた「現場のプロが教える WEBデザイン 新・スタンダードテクニック37」が発売され、早速購入したのでレビューします!

スポンサーリンク

本の内容

近年のWebデザインのトレンドの解説からはじまり、Webサイトで地味に重要なメニューなどのナビゲーションのデザインテクニック、ちょっとしたことでページをリッチに見せたり分かりやすくするためのエフェクトやインタラクション、自己満足のWebサイトではなく、ユーザーの使いやすさを追求するユーザビリティの考え方など、Web制作に関わる人やブロガーにとって知っておかなければならない情報が網羅されている。

スマートフォンのデザインを第一に考えるモバイルファーストの考えが定着している昨今において、実用的なレスポンシブデザインのテクニックも書かれている。

このブログのアクセスの75%はモバイル端末からのアクセスなので、紹介されているテクニックのレスポンシブ対応方法も書かれているのは有難い。

本の良いとこ

この本を読んで良かったとこを紹介。

読みやすいレイアウト

レイアウトが見やすい

Webデザインテクニックを紹介する本だけあって、紙のレイアウトも整理されていて、とても読みやすい。

文章も短く要点をまとめてあるのでサクサク読める。

解説が丁寧

この手のテクニック本で多いのが、コードだけ書いてそのコードの解説が中途半端になっていること。

この本では、JavaScriptの処理の流れや該当部分でどのようなことを行っているかの解説や、なぜこのスタイルを適用しているのか、などの解説がしっかりされているので、理解しやすく応用しやすい。

オプションも紹介されている

オブション

コードと共にオプションも書かれているので、どのようなオプションを指定できるのか、どのような値があるのかなどが分かり、自分好みにカスタマイズしやすい。

オプションがしっかり書かれていない書籍もあり、その場合はネットで調べたりライブラリを読んだりしないといけないので、オプションも書かれているのは助かる。

複数の方法を紹介している

ある機能を実装しようとした時、複数の選択肢を持っていると柔軟に対応できる。

この書籍では機能について一通りの技術を紹介しているので、自分の知らない方法が見つかるかもしれない。

例えば、アニメーションを表現する方法には、

・GIFアニメーション
・連番画像/スプライトシート
・動画
・Flash
・CSS3
・Javascriptアニメーション
・jQuery
・SVG
・Canvas
・WebGL

などがあると紹介されている。

ひとつひとつの方法に対しても、どのようなシーンで使われたり、現在どのような立場にあるのかなど、大まかな情報が分かるのでいざ実装する際の参考になる。

サンプルをダウンロードして動かせる

本の中で紹介されているサンプルは、本書に書かれているULRからダウンロードして自分の環境で動かすことができる。

ただしjQueryやBootstrapなどは外部から読み込んでいるため、実際に動かすにはインターネットに接続している必要がある。

動きのあるテクニックは写真と文章だけだとよくわからないが、サンプルで実際に動くのを見るとよく分かる。

紹介されているテクニックには番号が振られていて、ダンロードしたファイルと対応しているので簡単に見つけることができる。
ダウンロードファイルのフォルダ構造

本書に書かれているテクニック

本書に書かれているテクニックの一覧を紹介。

■Chapter1 デザイン&レイアウト
近年のWebデザインのトレンド
001 レスポンシブなマルチカラムレイアウトの実装
002 レスポンシブに対応したシングルページレイアウト
003 メディア風に見せるページレイアウト
004 背景の全面に画像や動画を配置するテクニック
005 背景に配置した画像や動画をトリミングする
006 自動的に次ページのコンテンツを読み込むInfinite Scroll
007 フレームワークを利用したレスポンシブなWebサイト
008 Masonryを利用したPinterest 風レイアウト
009 チャットツールのように吹き出しで会話を表現する

■Chapter2 ナビゲーション
ユーザーを導くナビゲーション
010 アコーデオン式の折りたためるメニュー
011 様々なドロップダウンするメニュー
012 上部固定のナビゲーションメニュー
013 画面全体に表示されるポップアウト式メニュー
014 レスポンシブデザインに対応したページネーション
015 アニメーションして切り替わるレスポンシブなタブメニュー
016 オフキャンバスのメニュー

■Chapter3 エフェクト&インタラクション
Webエフェクトのトレンド
017 ページを賑やかにするスライドショー
018 様々な手法を使ったマウスホバー時のアニメーション
019 スクロールに応じたアニメーション
020 アニメーション効果をつけてページ単位でスクロール
021 様々なエフェクトで表示するLightbox
022 CSS3を使った各種ボタンデザイン
023 マウスホバーでコンテンツの表示を切り替える
024 テキストの注目ポイントをアニメーションさせて目立たせる

■Chapter4 ユーザビリティ
ユーザビリティの考え方
025 吹き出しでヘルプなどが表示されるツールチップ
026 ユーザーを退屈させないNow Loadingの表現
027 Googleマップの埋め込みとカスタマイズ
028 ユーザビリティに配慮したお問い合わせフォーム
029 検索フォームとユーザビリティ
030 マルチデバイスに対応したレスポンシブな表組み
031 アイコンの表示にWebフォントを利用する
032 各種SNSボタンを設置して拡散をうながす
033 FacebookやTwitterタイムラインをWebサイトに表示
034 トップへ戻るボタンを設置して画面のトップへスクロール
035 スクロールした現在位置の表示
036 マルチデバイスに対応するレスポンシブな画像出力
037 ドラッグ&ドロップによるファイルアップローダ

スポンサーリンク

おわりに

現場のプロが教える WEBデザイン 新・スタンダードテクニック37」は、今のWebデザインに取り入れたいテクニックが詰まった本です。

全部を使う必要はありませんが、こういうテクニックがあることを知っていると、顧客からの要望や自分がやりたいことが出てきた時に役立つはずですので、Web制作関係者やブロガーは一読の価値ありだと思います。


タグ:

スポンサーリンク



この記事が役に立ったらシェアして頂けると嬉しいです!
このブログをフォロー・RSS購読もお願いします!

スポンサーリンク