インプレスダイレクトよりオンラインで購入できます。

インプレスダイレクト、電話、FAXでのご注文方法はこちらをご覧ください。

本書内で掲載している作例のデータをダウンロードできます。

分野別、アプリケーション別、シリーズ別に書籍・ムックの一覧を表示できます。

WEBレイアウトのネタ、ここにあります

Webレイアウトのプロのアイデアとテクニックを一挙公開!　テキストの表現に特徴をつけたもの、写真や図版を生かしたもの、JavaScriptと組み合わせたもの、さまざまなタイプのWebレイアウトの作例を紹介しています。ひとつひとつ丁寧に解説していますので、レイアウトをつくりながら、同時にWebデザインについても学べます。また、本書で紹介しているサンプルデータは、特設Webサイトからダウンロードが可能です。内容をより深く理解するための参考としてご活用ください。

chapter1「テキストに特徴のあるレイアウト」
テキストの配置を工夫したWebデザインに挑戦!

01　そろえる、均等に配置、繰り返す。法則性を感じさせるデザイン
02　柔らかな色彩と曲線をモチーフにしたホテルのサイト
03　グリッドシステムを利用した統一感と変化のあるレイアウト
04　グリッドシステムで構成された横方向にスクロールするデザイン
05　CSSを使ったリキッドデザインのブログ
06　日本語の特性を生かしたレイアウト
07　カラフルなタイポグラフィをメインビジュアルにしたデザイン
08　ラインと余白を生かしたストイックでシンプルなレイアウト
09　CSSを活用したワンソース・マルチユースなサイト
10　ストロークの長さを考慮した、読みやすいコラムページ
11　回り込みを使って、写真の位置に変化をもたせたデザイン
12　回り込み処理で、自由な文字組みを実現したコラムページ
13　リズムを感じさせるレイアウト

chapter2「写真や図版を生かしたレイアウト」
カッコいいビジュアルを自分でつくってみよう!

01　写真の色や形を生かした雰囲気あるデザイン
02　インフォメーショングラフィックスを活用したデザイン
03　プロダクトデザインのような凹凸感あるインターフェイス
04　Illustratorの3D機能を使ったポップなエントランスページ
05　文様をモチーフにして構成したデザイン
06　「方形」という枠組みから離れて六角形を基準としたデザイン
07　時計回りに料理手順を示したクッキングページ
08　和のイメージをもつ形をモチーフにしたレイアウト
09　写真のぶれを生かしたレイアウト
10　春らしい色合いの写真を使った、透明感のあるレイアウト
11　ぼかし、半透明を活用した奥行きを感じさせるデザイン
12　汚れやサビの写真を使って不規則さを取り入れたデザイン
13　ダンボールの写真からイメージを膨らませたデザイン
14　白と黒のコントラストを生かしたレイアウト

chapter3「動きを使ったレイアウト」
レイアウトにJavaScriptの動きをプラス!

01　写真を生かしながら多くの文章を表示できるレイアウト
02　フォーマットを瞬時に変更できるカレンダー
03　CSSを使って、写真に文章を重ねたレイアウト
04　パラパラと見える紙的なインターフェイス
05　JavaScriptによる動きを生かしたレイアウト
06　フロートで変化していくレイアウト
07　半透明なオブジェクトを活用したデザイン
08　グラデーションの重なりで見せるレイアウト
09　背景が刻々と変化するレイアウト