購入前に目次をご確認ください
インプレス［コンピュータ・IT］ムック 実例200に学ぶスマートフォンサイトデザインのアイデア帳
インプレス / 2013年03月25日 / 全144ページ
スマートフォンサイトの最新実例200点から導く、優れたレイアウトとユーザビリティーが両立できるデザインを「構造編」と「ビジュアル編」に分類して解説。今すぐ取り入れたい旬のデザインが学べます。
目次
- はじめに
- 著者紹介
- 目次
- 本書の読み方
- Chapter1 スマートフォンサイトの基本
- 1-01 スマートフォンサイトの現状
- 1-02 スマートフォンサイトの利用シーン
- 1-03 スマートフォンサイトへの最適化とは
- 1-04 スマートフォンブラウザの特徴
- 1-05 スマートフォンサイトの構築を支える技術
- Chapter2 スマートフォンサイト制作の基礎知識
- 2-01 スマートフォンサイト制作の流れ
- 2-02 現状分析とユーザー行動の仮説
- 2-03 スマートフォンサイトの画面設計
- 2-04 スマートフォンサイトの画面表示の振り分け
- 2-05 スマートフォンサイトデザインのポイント
- 2-06 スマートフォンサイトのUI
- 2-07 スマートフォンサイトの公開
- 2-08 スマートフォンサイトの改善
- Chapter3 構造編 小さな画面に最適化するデザイン
- はじめに
- 著者紹介
- 目次
- 本書の読み方
- Chapter1 スマートフォンサイトの基本
- 1-01 スマートフォンサイトの現状
- 1-02 スマートフォンサイトの利用シーン
- 1-03 スマートフォンサイトへの最適化とは
- 1-04 スマートフォンブラウザの特徴
- 1-05 スマートフォンサイトの構築を支える技術
- Chapter2 スマートフォンサイト制作の基礎知識
- 2-01 スマートフォンサイト制作の流れ
- 2-02 現状分析とユーザー行動の仮説
- 2-03 スマートフォンサイトの画面設計
- 2-04 スマートフォンサイトの画面表示の振り分け
- 2-05 スマートフォンサイトデザインのポイント
- 2-06 スマートフォンサイトのUI
- 2-07 スマートフォンサイトの公開
- 2-08 スマートフォンサイトの改善
- Chapter3 構造編 小さな画面に最適化するデザイン
- 3-01 直感的な操作を促すアイコンを配置したトップページ
- 3-02 横にスライドして切り替え多くの画像を見せる
- 3-03 縦方向にまっすぐ進ませるスクロールタイプのインターフェース
- 3-04 グリッド効果で多くの情報を整理する
- 3-05 常駐して展開させすばやくアクセスできるメニュー
- 3-06 PC、タブレット、スマートフォンでの閲覧を考慮したサイトの最適化
- Chapter4 構造編 指や手の動きに応じるデザイン
- 4-01 ドラッグやフリックで操作するインタラクティブなUI
- 4-02 横に進んでいく絵巻物風のデザイン
- 4-03 縦にスクロールして次々に変化する画面を楽しむ
- 4-04 フル画面で写真を見せるスライド式デザイン
- 4-05 タップ、セレクト、フォームなど指での操作がしやすいデザイン
- 4-06 自由な配置で、タップをエンターテインメント化
- 4-07 画面回転や加速度センサーを利用して内容を切り替える
- COLUMN1 スマートフォン特有のWeb クリップアイコンを取り入れる
- Chapter5 構造編 使いやすいデザイン
- 5-01 サイト全体で統一されたデザイン
- 5-02 目的に合わせたスマートフォンならではのUI 設計
- 5-03 デザインで実現する違和感のない操作
- 5-04 メタファーやイメージを利用して機能やコンテンツの理解を促す
- 5-05 ユーザーの導線を陰で支えるUI
- COLUMN2 スマートフォンアプリのノウハウをスマートフォンサイトデザインにも活かす
- Chapter6 ビジュアル編 画像で印象に残るデザイン
- 6-01 ポスター風の写真使いで世界観を伝える
- 6-02 リアルな手触りでアナログの暖かさを表現
- 6-03 質感の表現で商品をイメージさせる
- 6-04 たくさんの写真を組み合わせて豊富な情報をまとめる
- 6-05 写真を引き立てる余白の工夫
- 6-06 イラストでサイトを個性的に見せる
- 6-07 写真や柄を背景に敷いてアイキャッチに
- 6-08 インパクトのあるキャラクターを立てて内容を印象づける
- 6-09 個性を生み出すトリミング写真の活用
- 6-10 動きを感じる画像でダイナミックさを表現
- 6-11 共通了解を得やすいレトロな世界観でまとめる
- COLUMN3 押しやすく操作しやすいスマートフォンサイトのボタンデザイン
- Chapter7 ビジュアル編 画面を有効に使うレイアウト
- 7-01 ページを整理して見せる画面分割
- 7-02 奥行きや空間を感じさせて画面を狭く見せない工夫
- 7-03 動きのあるメニューのレイアウトでデザインに遊びを与える
- 7-04 要素を絞り込んだ象徴的なページデザイン
- 7-05 バラエティー豊かなアイコンをデザインの中心にする
- 7-06 しっとりとした落ち着きを感じる和のデザイン
- 7-07 ロゴやタイポグラフィなど文字要素をビジュアルの主役に
- Chapter8 ビジュアル編 配色効果でイメージを伝えるデザイン
- 8-01 にぎやかなイメージを伝えるカラフルな配色
- 8-02 強く注目を集める鮮やかなキーカラーと色の対比
- 8-03 彩度を抑えた暖色でリラックスしたやわらかい雰囲気に
- 8-04 情報を受け取りやすい色数を抑えたシンプルな配色
- 8-05 光沢感や高級感など要素を引き立てる黒を効果的に使う
- 8-06 清潔感、信頼感、可読性など白が与える印象を活用する
- 8-07 自然界の色を取り入れたオーガニックな配色
- 8-08 高彩度の強い色使いではつらつとした元気な印象に
- 本書への誌面掲載を許諾してくださった皆様のクレジット一覧
- 奥付
※このデジタル雑誌には目次に記載されているコンテンツが含まれています。それ以外のコンテンツは、本誌のコンテンツであっても含まれていません のでご注意ください。
※電子版では、紙の雑誌と内容が一部異なる場合や、掲載されないページがある場合があります。
