MdNCORPORATION

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

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

秋元 英輔 著/森崎 嘉友 著/五十嵐 亮太 著/稲葉 聡 著/大串 肇 著/小見 祐介 著/日下部 忠之 著/倉持 友喜 著/小杉 厚太 著/後藤 寛一 著/シオミ ユタカ 著/菅原 のびすけ 著/清野 奨 著/高遠 和也 著/高橋 としゆき 著/中村 大騎 著/肥田 真紀子 著/松本 奈央 著/羽野 めぐみ 著/miccweb 著/宮崎 優太郎 著/安藤 真衣子 著
定価 3,080円
(本体 2,800円+税10%)
※電子書籍の価格は各販売ストアにてご確認ください。
発売日 2015-08-18
仕様 A5変形判/256P
ISBN 978-4-8443-6518-1
最近は、Webサイト制作で使用する技術が大きく様変わりしはじめています。“モバイルファースト”と呼ばれる考え方が広まっているように、PCよりもスマートフォンからのアクセスのほうが多いWebサイトはすでに珍しくありません。また、いわゆるレガシーブラウザも淘汰されつつあることから、現在はHTML5+CSS3に対応したモダンブラウザを前提に、多彩なデバイスに対応できるWebサイトづくりが主流になっています。 本書はこのような制作状況の進化を踏まえ、「これからのWeb制作のスタンダード」となる手法をまとめた解説書です。近年のWebサイトでよく見られるレイアウト・ナビゲーション・エフェクト・UIパーツをステップ・バイ・ステップ形式で紹介しています。ドロップダウンメニューやスライドショーといった頻出の基本から、背景全面動画やMasonryなどの流行の手法まで、いまのWebデザインに欠かせないテクニックを網羅しました。サンプルデータもダウンロードできるので、手を動かしながらコードの挙動なども確認できます。「これをやりたかった!」が必ず見つかる1冊です。


■ページ見本










目次

はじめに
本書の使い方

■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デザイン 新・スタンダードテクニック37」をご購入いただきまして、誠にありがとうございます。以下に本書の解説内容の理解を進める際の参照用として、サンプルデータをダウンロードにてご提供しております。


MdN_Web37.zip (約100MB)


■ダウンロードにあたってのご注意■


ダウンロードファイルは、ZIP形式で圧縮されています。Windows、Macそれぞれの解凍ソフトを使って圧縮ファイルを解凍してください。

ダウンロードファイルには「はじめにお読みください.html」が同梱されていますので、ご使用の前に必ずお読みください。


■ダウンロードファイル解凍時のご注意■


Windowsをご利用の場合は、ダウンロードファイルをダブルクリックしても正しく解凍できない場合があります。画像が表示されないなど、サンプルファイルの閲覧に問題がある場合は、次の手順でファイルの解凍をお試しください。

[1]ダウンロードしたファイルを右クリック
[2]表示されたメニューから[すべてを展開...]を選択
[3]ファイルを解凍するダイアログが表示されるので、保存場所を選択して実行
[4]指定した場所にファイルが解凍される


※弊社Webサイトからダウンロードできるサンプルデータを実行した結果につきましては、著者および株式会社エムディエヌコーポレーションは一切の責任を負いかねます。お客様の責任においてご利用ください。

制作の基本からデザイン業界の最新状況まで! MdNのデザイン・グラフィック書8選

デザイン・制作・マーケティング Webでもう困らない! わかりやすくて知識が身につく8冊