書籍概要

スマートフォンデザインでラクするために

著者
発売日
更新日

概要

iPhone,Androidケータイなどのスマートフォン,そしてiPadやAndroidタブレット……。
次々出てくる新デバイスに対応したWebサイトにするために,制作工数は増える一方。

そんな中,できるだけ効率的にマルチデバイスに対応したサイトをデザインするためにはどんな考え方が必要なのでしょう?

「手順がわかる本は読んだ」
「テクニックはたくさん知ってる」
でも,なぜかちっともラクにならない!

そんなあなたを助ける,シンプルだけど本当にラクするための考え方がわかります。

こんな方におすすめ

  • iPhone,Androidケータイなどのスマートフォン,iPadやAndroidタブレットなど,マルチデバイスに対応サイトを効率的にデザインしたいと考えているWebデザイナー,ディレクターの方

著者から一言

スマートフォンやタブレット用のサイトデザインは,PCサイトと同じようで違います。
たとえばモニタサイズ。スマートフォンは手のひらに収まるサイズが多く,余白や文章をシンプルにしなければ情報が入りきりません。タッチパネルでのユーザインターフェースは,これまでどおりに作るとリンクが小さく,ミスタップが増えてしまいます。押しやすい大きなサイズと配置にする工夫が大切です。
外出先では公衆回線(3G)を利用するので,Webサイトを表示するだけでも時間がかかることがあります。回線速度を意識した容量の調整が欠かせません。ざっと挙げただけでもこれほど違いがあります。
制作者にとって,要件定義から納品までの流れがPCと変わらないのでいつもの流れで作ってしまいがちです。その感覚のままでは,マルチデバイスならではの手戻りや見落としが多くなります。
また,「現在のPCサイトをスマートフォンでも見られるように」と依頼されることが多いので,100ページにも及ぶ大規模なサイトになりがちで,作業は長期間にわたります。ところが,丸1日集中してデザインした後,時間を置いてしばらくぶりに再開すると,テイストが微妙に変わってきたりしませんか?
マルチデバイス対応と大規模なWebサイト構築。どちらかだけでも大変なのに,組み合わせることで厄介さが倍増します。自然と着手する手も遠のいていき,締め切りギリギリに。それだけならまだしもスケジュールに遅れを出して納期に間に合わないなんてこともあるのではないでしょうか。
本書では,その2つの問題について,デザイナーができる対策を解説していきます。
もちろん,冒頭から最後まで全部読んでいただくのが一番うれしいのですが,つまずきがちなポイントを見出しにしています。パラパラとめくって,知りたい箇所をつまみ読みしてください。
この本には密かな野望があります。デザイナーに向けた本にも関わらず,画面に向かって作業する章が中盤まで出てきません。「ソフトを使ってiPhoneのようなボタンを作る」といった内容はいっさい出てきません。「こう考えて作る」とか「こうすると効率的」などについて多く書いているのです。冒頭にはとくにふんだんに。なぜなら,ソフトの使い方や見た目の作り方を知るだけでは足りないと思っているからです。
手っ取り早くカッコイイデザインの作り方を教えてくれればいいのに「考え方」だなんて,なぜそんなまどろっこしいことをするのでしょう?
デザインの勉強は,模倣からすべてが始まります。ソフトを使ってステキな見た目を作る方法を教えるのが良いのかもしれません。最初はそれで十分です。しかし実力が付いてきて独り立ちできるようになった時が重要です。
それで培ったデザイン力は,真似できるものがゼロの場所で発揮することができるのでしょうか?
マルチデバイスの潮流もそうでしたが,スマートフォンが発売されて間もないころ,多くのデザイナーが自分の積み上げてきた理論でデザインやインターフェースを作ってきました。それは後から道をなぞるデザイナーたちの大きな道しるべになりました。私も道しるべを作るデザイナーでありたい。この道を志すものなら皆そう思うのではないでしょうか。
そのためには「考え方」を知ることが大切なのです。
「なぜこのデザインなのか」
人の考え方を知ることで,自分を知ることができます。自分だけでなく,他人を知ることで自分の強みや足りないところがより明確になります。
「自分だったらこうする」
「そんな風に考えるのか,自分もやってみよう」
常にこう考えることで自分の考え方と向き合い,ブラッシュアップし,自分なりの理論が作れるのです。
そうなればこっちのもの。また新しい潮流が来たときに,道しるべを作るのはアナタかもしれません。
「効率化」は「考え方」に向きあう時間を作るために活躍します。デザインにおけるページ展開などは,用意された部品を組み立ていく,言わば「作業」です。いかにこなすかで,今日の残業だけでなく来週の残業も回避することができ,その時間をまた「考え方」にあて,案件の精度を高めていくことができます。
Web制作の入り口にいる人にはこの本の考え方や効率化を参考にしてもらえたら,また熟練者の方にはこういったサンプルケースがあるという事例の1つとして見てもらえたらと思います。
マルチデバイスに見られる代表的なチェックポイントに触れ,「考え方」ばかりだからといって薄ぼんやりせず,実際に制作して得たノウハウを入れて詳細に解説していきます。
ごちゃごちゃ言うのもここまで。ページをめくって目次を見てみましょう。

それでは『スマートフォンデザインでラクするために』,はじまりです。

目次

第1章 案件の前提条件

  • 適したアプローチを選択するには
  • 対応するOSについて考える
  • サイトの設計を検討する

第2章 作る前に8割が決まる

  • 良いデザインとは
  • チームで良いデザインをする
  • 決定権と判断基準を決める
  • 良いデザインのためにできること
  • もやもやを共有する

第3章 デザイン前の下準備

  • アプローチを考える
  • 要素を洗い出す
  • 導線をもう一度見直してみる

第4章 理由を考えたデザイン

  • サンプルサイトのデザインをみる
  • 自分のために,チームのために

第5章 モジュールの作り方

  • モジュール化のコツ
  • 文脈と文章構造,両方の視点を持つ

第6章 最適なソフトはどれ?

  • 使い分けから始める効率化
  • Fireworksを使ってみよう
  • 拡大・縮小で劣化しないデータを作る

第7章 スマートフォンならではのデザイン

  • 画面サイズと情報整理のコツ
  • スマートフォンだから気をつけたい画面の作り方
  • 最適なUIを模索する
  • 画像は鬼門?
  • 覚えておくと役に立つ小ネタ

第8章 タブレットならではのデザイン

  • スマートフォンとタブレットの違い
  • 利用シーンから使い方を考える
  • タブレットならではのデザインとは?
  • マルチデバイスを同時進行でデザインする

サポート

ダウンロード

本書で使用するサンプルファイルはダウンロードできます。圧縮ファイルをダウンロードしていただき,適宜解凍してご利用ください。

ダウンロード
sample.zip

商品一覧