ツクロアのロゴマーク画像

「Webデザイン・コミュニケーションの教科書」の表紙カバーの画像

Webデザイン・コミュニケーションの教科書

ツクロアのオモイってヤツが一冊の本になりました!

これからWebデザインをはじめる方、DTPなど紙媒体を主に活動されているデザイナーさんや、会社転属や独立を希望されている方を対象にした、Webデザイナーのワークスタイルや考え方について執筆しました。

大型本: 194ページ、出版社: SBクリエイティブ、本体価格: 2,400円、著者: 株式会社ツクロア 秋葉秀樹+秋葉ちひろ

「Webデザイン・コミュニケーションの教科書」の紹介ページ

「Webデザイン・コミュニケーションの教科書」をAmazon.co.jpで購入する

2014年9月15日、発売。

インタビュー

本書を執筆するにあたって8人による現場のワークスタイルを参考にさせていただいたインタビュー記事を順次紹介していきます。(敬称略)

こんな感じの本です

こんな働き方もあるよ、という著者の感じたままに書いた本です。

HTMLなどのソースコードや、IllustratorやPhotoshopなどのグラフィックツールの使い方などには触れていません。

エンジニアとの協業というテーマについて、参考になったら幸いです。

できるだけパソコンから離れて読んでください。

本書で紹介したサンプル

書籍で取り扱った技術的なデモのサンプルコードがダウンロードできます。

目次

本書の目次です。

はじめに

第0章 本書について

  • 0-1 本書について
    • ケースバイケースとルール
    • Web デザインはブラウザを使うということ
    • デザインリニューアルの本質
    • 技術だけで勝負しないスキルを身につける
  • 0-2 対象となる読者
    • 会社に入って1 〜2 年目のWeb デザイナー
    • DTP やグラフィック関連など紙媒体を主としたデザイナー
    • 会社勤めだが、他の会社に転職を考えているWeb デザイナー
    • 独立を考えているWeb デザイナー

第1章 デザイナーの役割とは?

  • 1-1 Webサイトをつくる、はじめの一歩
  • 1-2 問題解決に参加しよう

第2章 Web デザインをコミュニケーションと考える

  • 2-1 伝える
    • 2-1-1 人が目で見て理解しやすいことが大事
    • 2-1-2「 ユーザーがいまいちばん必要としている情報はなにか?」を考えよう
    • 2-1-3「 なぜこのレイアウトになったの?」に迷わない正しい根拠を持とう
  • 2-2 ユーザーとコミュニケーションをとる
    • 2-2-1 紙とWeb の2 つの大きな違い
    • 2-2-2 不動産物件検索を例に見た2 つのダイナミックポイントとユーザー行動の流れ
    • 2-2-3 ユーザーとのコミュニケーション
  • 2-3 コミュニケーションをデザインに落とし込む
    • 2-3-1 なぜ紙のデザインをWeb ではそのまま使えないのか?
    • 2-3-2 一覧ページを見る人の心理を考えてみよう
    • 2-3-3 フラットデザインとの向き合い方
    • 2-3-4 企業こそ「顔が見える安心感」をアピールしよう

第3章 人と人とのコミュニケーション

  • 3-1 発注者とのコミュニケーション
    • 3-1-1 なにごとにもコミュニケーション 〜発注者とのすり合わせで品質を高める〜
    • 3-1-2 発注者の中に、「答えはない」
    • 3-1-3 発注者の要望を引き出すためのヒアリング術
  • 3-2 チーム内でのコミュニケーション
    • 3-2-1 デザイナーとエンジニアのコミュニケーション

第4章 視覚とデザインの実践

  • 4-1 ナビゲーションを考える
    • 4-1-1「 押したくなるボタン」とは「主張しないボタン」
  • 4-2 文字を考える
    • 4-2-1 Web フォントの活用
    • 4-2-2 画像文字のほうが見栄えがよいというのはRetina で覆された!?
    • 4-2-3 テキストリンクの表現を考える
  • 4-3 アイコンを考える
    • 4-3-1 アイコン・ピクトグラムについて
    • 4-3-2 アイコンの配置を考える
  • 4-4 視覚に訴える
    • 4-4-1 メインビジュアルを改善する
    • 4-4-2 Flash への偏見とリッチコンテンツへの正しい理解

第5章 ユーザーが使いやすい実装を考える

  • 5-1 ユーザーが使いやすいフォームとは?
    • 5-1-1 フォーム入力が好きな人はいない
    • 5-1-2 フォームエラー表示のデザインサンプル
    • 5-1-3 選択しやすいのはどんなインターフェイス?

第6章 スマートフォン編

  • 6-1 スマートフォンは本来は電話である
    • 電話番号が画像だったら
    • aタグで電話をかけられる
    • PCではどうするか?
    • 通話ができるという気づきを与える
  • 6-2 横1列か横2列か?
  • 6-3 設計で注意すること
    • 6-3-1 テキストリンクが密集しすぎている
    • 6-3-2 スマホでのhover は、ヒントがないのでPCよりも気づかれにくい
    • 6-3-3 意外と注意したい、展開リスト(アコーディオン)
    • 6-3-4 狭い領域ならではの表現方法を考える
  • 6-4 スマートフォンのことを考えた実装の例
    • 6-4-1 スマホサイトでの製品比較表をどう見せるか?
    • 6-4-2 Web サイトからマップアプリへうまく連携しよう
    • 6-4-3 スマホだって攻めのアピール!

第7章 Web デザイナーこそ技術を幅広く理解しよう

  • 7-1 HTML5にデザイナーはどう向き合うか
  • 7-2 便利なデータ形式、JSON ってなに?
  • 7-3 デザイナーも理解しておきたいAjaxのキホン
  • 7-4 現在地から探す
  • 7-5 ユーザーの好みを記憶する
  • 7-6 待ち時間に配慮するデザイン

おわりに