スマフォ向けサイトの実装アイデアがぎっしり詰まったオススメの一冊 -スマートフォンサイトデザインのアイデア帳
Post on:2013年5月10日
書店で見かけた時は表紙にピンとくるものがなかったので手に取らなかったのですが、今回献本という形で読んでみたら、これが良書でびっくり!
現場の制作者をはじめ、ディレクター・プロデューサーも企業担当者にもオススメの本「実例200に学ぶスマートフォンサイトデザインのアイデア帳」を紹介します。

実例から学ぶ本と言えば、「世界の「最先端」事例に学ぶCSSプロフェッショナル・スタイル 」がかなりの良書でしたが、同様に今回紹介する「スマートフォンサイトデザインのアイデア帳」も数多くの実例を元にした実用的なアイデアだけでなく、スマフォサイト制作の必須となる基礎知識や制作フローも網羅されています。
Kindle版だと、なんと34%オフの1,524円!
勉強系の本はまだKindleで購入したことないけど、魅力的な価格ですね。
※Kindleのオフは2013/5/9現在のものです。
スマフォ向けのデザインとユーザビリティに重点をおいた内容となっています。

目次の概要
紙面のキャプチャで、中身を少しだけご紹介。
基礎知識は最初の30ページくらい、残り110ページくらいがアイデア満載となっています。

著者はiPhoneデザインボックスと面白法人カヤックの中の人たちです。

まずは、スマフォ向けサイトを制作する上で必要な情報から。

デスクトップ向けからスマフォ向けへ最適化とはどういうことか。

スマフォ向けサイトでのゴールを考えた制作の流れ。

サイト構築の手順も分かりやすく解説。

打ち合わせやプレゼンでどのように提案すべきかも。

基礎知識は30ページくらいで、あとは実例200から学ぶアイデアの宝庫です!

操作した時の驚き、そして喜びを与えるUI設計のヒント。

静的なアイデアも満載、狭い画面での余白の使い方。

バラバラの写真でもまとまりのあるデザインにするこつ。

章の終わりにはコラムがいくつかあり、制作のヒントが詳しく解説されています。
上は、押しやすく操作しやすいボタンデザインのお話し。
スマートフォンサイトデザインのアイデア帳の紹介
目次をベースに内容を簡単に紹介します。
-
- スマートフォンサイトの基本
- スマフォサイトの利用シーンなどの現状
- ブラウザの特徴、実装に必要な技術
-
- スマートフォンサイト制作の基礎知識
- 制作担当者をはじめ、ディレクターやデザイナーも要チェック
- 制作フロー、デザインのポイント、UIの特徴
- 公開後のよくある改善点のまとめ
-
- 【構造編】小さな画面に最適化するデザイン
- スマフォらしいデザインとは
- それぞれのデザインの好まれる理由、使いやすい秘密、採用される理由
-
- 【構造編】指や手の動きに応じるデザイン
- ユーザビリティに焦点をあてたデザイン
- 見た目、操作感、使った時の喜びや驚きなど、楽しみを与える工夫
-
- 【構造編】使いやすいデザイン
- スマフォならではの使いやすいデザイン
- 気持ちよく感じる画面設計
-
- 【ビジュアル編】画像で印象に残るデザイン
- 視覚的にインパクトを与える画像の使い方
- 画像の組み合わせ方、画像と文字のバランス、画像の最適な加工処理方法
-
- 【ビジュアル編】画面を有効に使うレイアウト
- スマフォの小さな画面で効果的に情報を見せる
- レイアウトによる情報整理、狭い画面でも立体感と奥行きを活用
- 実用的で楽しいメニュー、分かりやすくするアイコンの使い方、縦長の画面を活かした縦組みレイアウト
-
- 【ビジュアル編】配色効果でイメージを伝えるデザイン
- 狭い画面での効果的な配色設計
- 信頼感を与えるシンプルな配色方法
- 小さいサイズでも可読性が高い配色方法
1,2章の基礎知識も面白く、3章からの実例アイデア集もそこに書いてあることだけでなく、更にいろいろ膨らませることができるので読んでてワクワクしました。
Kindle版は34%オフの1,524円!
※Kindleのオフは2013/5/9現在のものです。
献本の御礼
最後に、献本いただいたインプレスジャパンの担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors