Web制作に関する体系的な知識が得られる『イラスト図解式 この一冊で全部わかるWeb制作と運用の基本』

　会社の同僚たちが、Web制作に関する本を執筆したので紹介します。
Web制作の過程で、複数のデザイン案を作った上で決めたのに、関係部署や上司に持っていくと何かイメージと違うと否定される。そういう経験ありませんか？Web制作の中心はデザインで、デザインは感覚の産物と諦めている人が多いですが、それは違います。デザインは日本語にすると設計で、論理的な検討の結晶です。本書はWeb制作の過程がどのように進められるのか、そのプロセスの一つ一つを解りやすく解説した入門書です。

イラスト図解式 この一冊で全部わかるWeb制作と運用の基本

　『イラスト図解式 この一冊で全部わかるWeb制作と運用の基本』という本で、私も企画の初期段階に、ほんの少しだけ噛ませて頂きました。そんな訳で少しバイアスがかかっているものの、とても良い本に仕上がっていると思います。企業内でWeb担当になってWeb制作を依頼する人や、Web制作会社の人には是非読んで欲しい一冊です。

Web制作に関わる登場人物と制作プロセス

　本書の対象読者は、冒頭に書いている通りWeb制作を依頼する方と、Web制作をする方の両方です。私もWeb系のシステムを作る事が多く、WebディレクターやWebデザイナーと呼ばれる人と一緒にプロジェクトに参画することが多いです。最初の方は、どのロールの人が何の役割をするのかよく解っておらず、適切なコミュニケーションを取ることが出来ないこともありました。
　また、最近では、フロントエンジニア/マークアップエンジニアや、Webマーケター、Webアナリストと役割の細分化や新たな役割も出来ています。また、動的なWebサイトを作る場合はシステムエンジニアというような職種の人も出てきます。初めて依頼者側のWeb担当者になった人や、WebデザイナーとしてWeb制作会社に入社してきた新人は、どういう役割で何をすればよいのかさっぱり解らんという状態になると思います。そんな時に、この本を読んでおくと頭の中がすっと整理されます。

　また、Web制作におけるプロセスも細分化しています。横から見ていると、デザインを決めてHTMLのコーディングをしてと見えるかもしれないのですが、実際はそんな単純なものではありません。もっと細かい工程に分かれていて、それぞれに検討する事項・意思決定が必要な場があります。本書では、そういったプロセスも整理されています。

Web制作における設計（デザイン）とは？

　そもそもWeb制作において重要な位置を占めるWebデザインとは何でしょうか？私も、昔はデザイナーと言われる人が感覚で作っているのだと思っていました。しかし、一緒に仕事をするようになって、それが違うというのがよく理解できました。感覚の産物ではなく、論理的に設計された成果物ということです。
　論理的に設計されたデザインは、極端にいえば引かれている線の一本一本、アイコンの色の意味の一つ一つを、なぜそうなっているのか説明できます。逆に言うと、それが出来ていないデザインは、説明ができません。なので、関係者にもっとこういう風にした方がいいんじゃないのという言葉に、反論することができません。また、デザインはシステムより、感覚で要望を言いやすいのも事実です。その結果、感覚やセンスで作られたWebサイトのプロジェクトは、いろいろな人の意見に左右されて迷走することになります。

　そうならないために本書では、Web制作のプロセスを一つ一つ分解し、それぞれの過程で何を考えないといけないか整理されています。例えば、サイト設計においては、サイト構造の検討プロセス、コンテンツ設計、ナビゲーション設計などで何をするのか。Webデザインにおいては、そもそもWebデザインとはから始まり、検討のプロセスやデザイナーの役割・検討事項、デザインの評価などです。それ以前の、Webサイトの目的の検討として、ビジネスゴール・ターゲットユーザー・ペルソナ・カスタマージャーニーの検討の仕方は元より、契約や運用・マーケティングまで網羅しています。

まとめ

　難しいテーマも扱っていますが、難しい文章のみで書いているのではなく、図解入りで解説されています。立ち読みページもあるので、ちょっと見てみてください。

r.binb.jp

　私も改めてじっくり読んで、最新の情報にキャッチアップしていきたです。また、周りの若者に勧めていきたいです。

以下、目次です

第1章 はじめてのWebサイト
　1-1 Webサイトって何？
　1-2 Webサイトの種類
　1-3 Webサイトの目的と施策
　1-4 Web担当者が知っておくべきこと
　1-5 Webサイトの開発の流れ
　1-6 Webサイトの改善
　1-7 UXとUIとは
　1-8 ユーザビリティとは
　1-9 セキュリティとプライバシー
　1-10 Webサーバーの構築とドメインの取得

第2章 準備をしよう
　2-1 Webサイトを作り始める前に
　2-2 社内検討チーム体制と、その役割
　2-3 制作会社の選定
　2-4 RFP（提案依頼書）の書き方
　2-5 準委任契約、請負契約について
　2-6 著作権、知的財産権について
　2-7 プロジェクトの流れ
　2-8 コミュニケーションルールを考える
　2-9 社内承認フローを考える
　2-10 ウォーターフォール、アジャイルって何？

第3章 Webサイトの目的を考える
　3-1 Webサイトの目的を整理する
　3-2 ビジネスゴールを考える
　3-3 ターゲットユーザーを考える
　3-4 ペルソナを作る
　3-5 カスタマージャーニーを考える
　3-6 ユーザー中心のデザイン手法

第4章 開発方法を考える
　4-1 開発手法を検討するために
　4-2 動的と静的の違い
　4-3 ターゲットOS、ターゲットブラウザ
　4-4 レスポンシブWebデザイン
　4-5 CMS（コンテンツ・マネジメント・システム）
　4-6 Webガバナンス
　4-7 ウェブアクセシビリティ
　4-8 Web制作会社・システム開発会社は何を作っているのか
　4-9 Webサイト開発における標準化

第5章 ユーザーとの接点を考える
　5-1 ユーザー接点、チャネル
　5-2 動画
　5-3 メールマガジン
　5-4 Web広告
　5-5 SNS（ソーシャルネットワーキングサービス）
　5-6 LP（ランディングページ）
　5-7 Webと別のチャネルのユーザー接点をつなげる

第6章 Webサイトの構造を考える
　6-1 サイト構造の検討のプロセス
　6-2 コンテンツ設計
　6-3 ナビゲーション設計
　6-4 詳細サイトマップ
　6-5 ワイヤーフレーム
　6-6 よく使われる機能の導入方法
　6-7 動的要素の導入と注意点

第7章 Webサイトを作る（デザイン編）
　7-1 Webデザインとは
　7-2 Webデザインの目的
　7-3 デザイン検討のプロセス
　7-4 デザイナーがやっていること、考えていること
　7-5 デザインを評価する
　7-6 CI、VIについて
　7-7 画像（イラスト、写真）の正しい使い方
　7-8 取材・撮影
　7-9 Webライティング
　7-10 UIの種類

第8章 Webサイトを作る（コーディング・開発編）
　8-1 コーディング・開発のプロセス
　8-2 HTML、CSS、Javascriptとは
　8-3 JavaScriptの発展
　8-4 便利な機能 リダイレクト、インクルード
　8-5 入力フォーム、EFO（EntryForm Optimisation）
　8-6 Web制作会社とのコミュニケーション
　8-7 モックアップ制作時の注意点
　8-8 Webアプリケーションの基本

第9章 Webサイトを公開・運用・改善する
　9-1 公開・運用・改善のプロセス
　9-2 Webサイトの検証
　9-3 Webサイトの公開
　9-4 運用設計
　9-5 評価指標の設計と運用
　9-6 PDCAサイクル
　9-7 Webサイトの評価方法
　9-8 アクセス解析
　9-9 ユーザビリティ評価
　9-10 SEO（サーチエンジン最適化）
　9-11 サーチコンソールって何？
　9-12 Webパフォーマンス
　9-13 障害発生時の対応