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

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

出版社 エムディエヌコーポレーション
著者 秋元 英輔/安藤 真衣子/五十嵐 亮太/稲葉 聡/大串 肇 ほか
対応デバイス
PC対応 Android対応

この本の内容

【いまWebでよく見るデザイン手法が勢ぞろい!】

最近は、Webサイト制作で使用する技術が大きく様変わりしはじめています。“モバイルファースト”と呼ばれる考え方が広まっているように、PCよりもスマートフォンからのアクセスのほうが多いWebサイトはすでに珍しくありません。また、いわゆるレガシーブラウザも淘汰されつつあることから、現在はHTML5+CSS3に対応したモダンブラウザを前提に、多彩なデバイスに対応できるWebサイトづくりが主流になっています。

本書はこのような制作状況の進化を踏まえ、「これからのWeb制作のスタンダード」となる手法をまとめた解説書です。近年のWebサイトでよく見られるレイアウト/ナビゲーション/エフェクト/UIパーツを、ステップ・バイ・ステップ形式で紹介しています。ドロップダウンメニューやスライドショーなどの基本から、背景全面動画やMasonryなどの流行の手法まで、いまのWebデザインに欠かせないテクニックを網羅しました。サンプルデータもダウンロードできるので、手を動かしながらコードの挙動なども確認できます。「これをやりたかった!」が必ず見つかる1冊です。

この書籍の目次

はじめに
目次
本書の使い方
■Chapter1 デザイン&レイアウト
近年のWebデザインのトレンド
001 レスポンシブなマルチカラムレイアウトの実装
002 レスポンシブに対応したシングルページレイアウト
003 メディア風に見せるページレイアウト
004 背景の全面に画像や動画を配置するテクニック
005 背景に配置した画像や動画をトリミングする
006 自動的に次ページのコンテンツを読み込むInfinite Scroll
007 フレームワークを利用したレスポンシブなサイト
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 ドラッグ&ドロップによるファイルアップローダ
目的別索引
用語索引
著者プロフィール
奥付