ウープスデザインブログ (デザイナーまめこ)

東京都でフリーランスデザイナーをしているイシジマミキのブログです。制作実績やその作り方とか。あと運営しているコワーキングスペース「こけむさズ」に関して。書評などのレビューもします。

トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。

2013年1月22日

1月29日に「スマートフォンデザインでラクするためには」という本を技術評論社さんにて書かせていただきました。

NewImage

表紙カッコイイ!!!

いつも書いているブログ記事の豪華版

NewImageNewImageNewImageNewImage

このブログではよく作ったアイコンやロゴ、Webサイトの製作過程を紹介しています。

なぜそれをするのかというとデザインでは「何を考え、どう決断し、どう表現したか」が大切だからです。

「スマートフォンデザインでラクするために」はその「何を考え、どう決断し、どう表現したか」をより掘り下げて232ページ、6万文字弱使って書いています。

いやー豪華ですねー。死ぬかと思った!

画面に向かうな

「画面に向かうな」とはわたしがよく行うデザインの模索方法です。これまでに書いてきたロゴデザインの制作過程を紹介する記事でも、まずは手で書くところからはじめていると思います。それだけでなく、観察したり資料を漁ったり考察したり仮説を立てることがデザインではとっても重要。それだけで出来上がるものがかなり変わるのです。

この本には10年、デザインの現場に関わってきて得た私の経験をもとにさまざまな視点からデザインの話を書いています。いわばまめこ理論な訳で…。これを先輩に読んでもらうのは本当に恥ずかしいわけです。すべてをさらけ出しているのに「こんなコトしか書けないの?」と言われたらどうしよう!こわいいいいいい!

ソフトやサービスの使い方は、絶対同じ操作をすれば同じ結果になるので誰がやっても同じです。だけどデザインは人によって出来上がるものが違うので、いわばその人が丸裸になるんですよね。臆病なハートがむき出しなんですよ…。なので生ぬるい目で見てやってください。

本の構成

第1章 案件の前提条件

01 01

まずは様式美とも言える仕様の確認からはじまります。 既存のコンテンツを再利用していくのか、それともフルスクラッチで作るのかも悩みの種です。 それらを決めるのにはどうしたらいいのか?を解説しつつ、URL設計はどうするかなど実際に運用した案件で困った箇所などを取り上げています。

例えば

・exsample.comとs.exsample.comという風にURLを分けたときの問題点は?

・スマートフォンサイトってSEOどうすればいいの?

とか。

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

02 02

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

デザインってなんだろう?という話をしています。 「みんなでするデザイン」「自分ひとりでするデザイン」の話など。そして、それには何が必要なんだろう?と書いています。

デザインはセンスじゃない

よく「センスないから〜」と言われますがセンスが発揮されるのは、かなり後の話なので大部分の人にはセンスうんぬんの話は関係なかったりします。 まずは、

  • 掲載する情報が不足していないか。
  • 間違いがないか。
  • ちゃんと読めるか。
  • 重要なものが強調されているか。

ここら辺を見ていけばいいのです。

センス云々はこれらがちゃんとできた上での最後のエッセンス。

「神は細部に宿る」という言葉が本当に使われるべきタイミングのときに発揮されるのが「センス」だと思ってください。

デザインが評価できない原因

02 08

デザインが評価できない原因は「指針」がないからです。コンテストでも評価基準とかありますよね。ああいったものが無ければ「良い」「悪い」の判断しようがないのです。

ラーメン屋の美味いマズイと似ています。自分は好きだけど、連れてった友達は好きじゃなかった…。とかはデザインの現場でもよくあります。自分は好きなテイストなんだけど上司にNOと言われてしまったり。

それを摺り合わせるのはとても面倒だから、評価基準つくっとくとラクですよね。

デザインには推理力も必要

02 09

分業ですとクライアントと直接話せないことも多いです。営業さんからの言葉をどう読み取るか。それにはコナンほどでなくても、ある程度、推理力を発揮すれば分かることがたくさんあります。

フリーランスでも代理店さんが入るとクライアントの心理が見えなかったりなのでここは磨いておきたいスキルだと思っています。

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

03 01

神様に頼らなくてもいいものが作れるようになりたい!

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

ヒアリングした内容をどう汲み取るか、実際にわたしがやった案件のヒアリングシート(ただの汚いメモですが…)を解説しています。 クライアントの抱える問題。

・そしてWebサイトで解決できる問題ってその中だと、どれなのかな?

・ターゲットにはこんな導線を用意したらどうだろう?

などです。

そこまで専門的でなく、それらを考えるのにどうしたらいいかな。というキッカケにしてもらえればなーと思います。

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

04 01

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

ここはユーザーインターフェースについて考える章です。

・前次問題

・送信ボタン横のキャンセルボタンの役割

など

昔からよくある、UIあるあるネタを交えながら。わたしの作ったサンプルサイトをもとに解説しています。

テキストリンクとボタンってどう使い分ける?

個人的なハイライトはここです。情報を無意識に整理していると、なぜここはボタンのような見た目で他はテキストリンクなの?という時がありませんか?

たくさんページを作っていると訳が分からなくなります。そんなときにどんなルールを作ったか。そんなのをいろいろ書いています。自分ならどうするかを考えて読んでいただきたい章です。

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

05 01

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

サイトが大規模になればなるほど、モジュールを作っていくことは必要です。数日かけると、すぐに考えが変わってしまうので自分は絶対1日で作るようにしています。終わるまで寝ない。36時間経過したとしてもわたしの中では1日として計算しちゃう。 寝ると忘れちゃうんですよね。

いちおう設計思想はメモしておきますが、言語化をしておかないと社内で議論するときにもあやふやになっちゃうのでこれは重要。

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

06 01

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

ここは、セミナーでもよくお話させていただいているんですが効率的なソフトの使い分けをスクリーンショットたくさん使いながら解説しています。よくブログでも紹介しているような操作方法ですね。 ちなみにここの扉絵は自信作なのでぜひ立ち読みしてください。気に入ったら買ってやってください。

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

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

第1章ぶりのスマートフォンデザインらしい章です。ほとんどデザインの話ばっかりでしたからね。ここでは3キャリア全機種検証したときに、出てきたさまざまな問題を取り上げてその時の解決策や失敗談などを書いています。

知ってます? Androidでborder-radius使うとたまにジャギジャギになるんですよ。 そういうのとか。

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

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

最後の章はタブレットです。この本を書いているときはまさかwindows 8がこんなことになるとは思っていませんでした…。本当にWebの流れは速いですねー。 画面サイズはもちろん、用途の異なるデバイスを同時進行で作るときのポイントを解説しています。

地方やひとりで仕事している人に読んでもらいたい。

この本はプロジェクトマネジメントに共通している内容がいくつかでてきたりします。

しかし、地方で仕事したり、フリーランスで仕事したりするデザイナーにとっては、大企業の人の仕事の仕方に見えてしまい、自分ごとに置き換えづらい気がするのです。やりたい意識があってもどこから手をつけていいか困ってしまう。

そんな人たちに同じような境遇である自分の失敗談や体験をもとに、デザイナーが見える範囲、考えられる範囲の内容を書いてみました。

ラクするためには

タイトルは出版社さんが考えてくださいました。めんどうくさがりの自分にピッタリのタイトルで感激です!最初は「マルチデバイスのデザインルール」とかだったのですが、もっと噛み砕かれて親しみやすくなりましたね。

ぜひ書店で手にとってみてくださいー。

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

posted with amazlet at 13.01.22
石嶋 未来
技術評論社
売り上げランキング: 174,350

少しでも役だったらシェアしたり、コメントもらえると記事を書くモチベーションが跳ね上がります!

▲ ページ上部へ戻る

37 Responses トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。to “”

  1. @kuteken より:

    スマートフォンデザインでラクするために、読んでみたいな。 http://t.co/8bzGI6sn @woopsdezさんから

  2. @masapon49 より:

    φ(`д´)メモメモ… / “トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。 | ウープスデザインブログ (デザイナーまめこ)” http://t.co/Bd8ldiQ8

  3. @WebDevelopBot より:

    トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。 | ウープスデザインブログ (デザイナーまめこ) http://t.co/zWC0M93H

  4. @bitgleams より:

    “トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。 | ウープスデザインブログ (デザイナーまめこ)” http://t.co/O9YAKe5G

  5. @glowoka より:

    見てる→ トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。 http://t.co/JdX4FZxk @woopsdezさんから

  6. @kickabout28 より:

    トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。 | ウープスデザインブログ (デザイナーまめこ) http://t.co/3jNPEHVC

  7. @cutmailbot より:

    トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。 | ウープスデザインブログ (デザイナーまめこ)
    http://t.co/yl3tzx6W

  8. @fujys より:

    トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。 | ウープスデザインブログ (デザイナーまめこ) – http://t.co/fdegFTzS

  9. @takashi0319 より:

    考える工程を細かく書いてくれてる→トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。 http://t.co/KX8ZbI9O @woopsdezさんから

  10. @polistes より:

    “トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。 | ウープスデザインブログ (デザイナーまめこ)” http://t.co/aiOEJqf4

  11. @sgtakeru より:

    “トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。 | ウープスデザインブログ (デザイナーまめこ)” http://t.co/5q5zm3fO

  12. @Izupyo より:

    見てる→ トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。 http://t.co/DV4RUkTF @woopsdezさんから

  13. @bethbeth321 より:

    “トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。 | ウープスデザインブログ (デザイナーまめこ)” http://t.co/pNAutT4d

  14. @t_fukui より:

    [後読] トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。 | ウープスデザインブログ (デザイナーまめこ): http://t.co/v2qK2eMw

  15. トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。 | ウープスデザインブログ (デザイナーまめこ) http://t.co/iTtc7ZsQ

  16. @daisuke より:

    “トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。 | ウープスデザインブログ (デザイナーまめこ)” http://t.co/jZ2Cq2Ig

  17. @kjtweb より:

    “トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。 | ウープスデザインブログ (デザイナーまめこ)” http://t.co/q6bhuznz

  18. @gabu より:

    [Design]絵がカワイイから予約ぽちった。内容も楽しみ。 / “トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。 | ウープスデザインブログ (デザイナーまめこ)” http://t.co/z86URsHL

  19. @_erisan_ より:

    ほしい| 見てる→ トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。 http://t.co/3AwyE0Co @woopsdezさんから

  20. @g08m11 より:

    トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。 | ウープスデザインブログ (デザイナーまめこ) http://t.co/CdVQLNys

  21. @itog より:

    “画面に向かうな”これはプログラムでさえそう思う。 // トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。 | ウープスデザインブログ (デザイナーまめこ) http://t.co/Jw2TNwO2

  22. @hyougen より:

    [design] / “トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。 | ウープスデザインブログ (デザイナーまめこ)” http://t.co/f9HZCAD8

  23. @sayaponponh より:

    見てる→ トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。 http://t.co/v5yzUXn6 @woopsdezさんから

  24. @iczerone より:

    お、よさそうな感じ。ほしい物リストに追加! RT @f_sugar: “トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。 | ウープスデザインブログ (デザイナーまめこ)” http://t.co/k4Qznu5A

  25. @Luz_Network より:

    あとで読む / RT @f_sugar: “トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。 | ウープスデザインブログ (デザイナーまめこ)” http://t.co/vz1n8Lhx

  26. @homaresan より:

    “トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。 | ウープスデザインブログ (デザイナーまめこ)” http://t.co/xY9x8Bzr

  27. @miwo_k より:

    トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。 | ウープスデザインブログ (デザイナーまめこ) http://t.co/rEzc4vQ6 @woopsdezさんから

  28. @asaasa21 より:

    “トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。 | ウープスデザインブログ (デザイナーまめこ)” http://t.co/jviS9Wrt

  29. @tyamaz より:

    こういうのプログラミングでもやりたい、、 トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。 | ウープスデザインブログ (デザイナーまめこ) http://t.co/w1wscgqd

  30. @200hatebu より:

    トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました… http://t.co/FVWksK3l http://t.co/N96SKHcX

  31. @research_man より:

    “トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。 | ウープスデザインブログ (デザイナーまめこ)” http://t.co/doeC5IRX

  32. 人はどうしたって目が津者に目がいきがち。でも流行を追うだけでは何も残らない。個人的には読書をすることが一番ぶれない自分の作り方だと思う。/トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。http://t.co/qKcCY5ZL

  33. @NagomiYutaka より:

    見てる→ トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。 http://t.co/2YJ0gIUB @woopsdezさんから

  34. @wild_bunch_55 より:

    見てる→ トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。 http://t.co/67DDPQuy @woopsdezさんから

  35. @ysfm より:

    絵がかわいい! #fb

    RT トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。 | ウープスデザインブログ (デザイナーまめこ) http://t.co/SJBJOODV

  36. @bacchi_guu より:

    トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。 | ウープスデザインブログ (デザイナーまめこ) http://t.co/brmj182I @woopsdezさんから

Leave a Reply