はじめての著書 – 現場のワークフローで覚える Webサイト制作教室 – あとがき

Posted under - Misc

123

この度、本を執筆させていただきました。その本「現場のワークフローで覚える Webサイト制作教室」の紹介と、執筆をし終わってから思ったことを「あとがき」としてブログにしてみました。

現場のワークフローで覚える Webサイト制作教室

今日 4月20日、私のはじめての著書「現場のワークフローで覚える Webサイト制作教室」が発売になりました!久々のブログが、ちょっと宣伝ぽくなってしまってすいません … X( でも私にとっては初めて書いた本なので、一生の想い出になる大事件です。なのでブログに書くことにしました。

この本には「あとがき」というものがないので、本の紹介と共に、一冊の本を書き終わって思ったことを書きたいと思います。

1. はじめに

まずは本の中の「はじめに」を丸写しです。

私たち Webデザイナーの仕事をひとことで言ってしまうと「Webサイトを作成すること」です。でも、ひとつの Webサイトを完成させるまでには、本当にたくさんの準備と作業が必要になります。

本書では「そもそも、Webデザインってなに?」という基本的な確認からはじまり、実際の Web制作のワークフローに沿ってさまざまな技術や知識への理解を深めていきます。

ただし、Web制作の知識をまったくお持ちでない方へ向けられた本ではありませんから、HTML や CSS の初歩的な解説などは行っていません。すでに基本的なコーディングの文法は理解している方に役立つ点を重視して、手戻りの起こりにくいワークフローの進め方、つまずきやすいコーディングのポイント、近年の必須スキルともいえる jQuery や WordPress、スマートフォン対応サイトの作成手法などを中心に紹介しています。

仕事をもっとスムーズに進められないかとお悩みの方や、スキルアップを目指している方、将来 Webデザイナーを目標にしている方々に読んでいただければうれしく思います。

なお、本書を執筆するにあたり、都内で Webディレクターとして活躍している松本マサト氏Maka-Veli.com)、フロントエンジニアとして活躍している徳田和規氏5509)には、大変お世話になりました。この場を借りて御礼申し上げます。

それでは、これから本書を通じて、一緒に Webサイト制作を学んでいきましょう!

高橋のり

まず、この本を執筆しているとき、Maka-Veli.com のマサトさんには、Web 制作の作成フローについてアドバイスをいただきました。というのも、私はフリーランスで、主にひとりで Web制作をしています。

それに対してマサトさんは、都内で Webディレクターとして活躍されています。私のワークフローについて、Webディレクターの視点からのご意見、アドバイスをしていただきました。

それから 5509 の Nori さんには、本書の中で Noriさんの作成した jQuery のプラグインをふたつほど利用させていただきました。そのうちのひとつは、この本の執筆時に作っていただいたものです。

お二人にはあらためて、御礼申し上げます。ありがとうございました!

それからあともうひとり、心からありがとうって言いたい人がいるんですけど、その人はとっても恥ずかしがり屋で名前を出すのも NG って言われちゃいました。でも、本人には伝わると思うので、ここで改めて … 「ありがとうございました!」

そして「はじめに」にも書いたのですが、この本は HTML + CSS の基本的なことは分かっていることが前提で書かれています。なので Webサイトは HTML で書かれていて、タグを使って書くんだよーとか、CSS はこうやって書くんだよーなどの本当に初歩的なことは書いていません。HTML + CSS の基本的なことは分かるんだけど … という人へ向けた本になっています。

2. 目次の紹介

次に目次を紹介します!INTRODUCTION から始まり、CHAPTER 1 ~ 8 までに分かれています。

INTRODUCTION – Webデザインってなに?

イントロでは、Webデザインをする上での基本的な考え方や、デザインとWebサイトを閲覧する環境について紹介しています。Web制作をするときには、ターゲット、ユーザビリティ、そしてゴールを考えながら作成するということや、ブラウザと使える技術の関係、PC とスマートフォンの閲覧環境などについて書きました。

CHAPTER 1. サイトの設計図をつくる

どんなものを作るときも、欠かせないのが設計図。当然 Webサイトを作成するときも設計図は必要ですよね!この CHAPTER では、Webサイトの設計図作りのときの考え方、決めておかなくてはいけないことなどを紹介しています。最終的にはサイト全体のワイヤーフレーム(導線設計などを盛り込んだ詳細なサイトマップ)を作り、ページのワイヤーフレームを作るところまでのパートです。

CHAPTER 2. デザインモックアップをつくる

ワイヤーフレーム作りの後は、デザインカンプ作りです。この本では Photoshop を使って、サイトのモックアップを作っていきます。実際の Photoshop の使い方なども紹介しています。サンプルサイトのモックアップの PSD も用意してあります。最終的に、モックアップをスライスで画像として切り出すところまでのフローです。

CHAPTER 3. HTML のマークアップで気をつけたいこと

デザインができたら、いよいよマークアップですよね!この CHAPTER では、HTML のマークアップのときに気をつけたいことをメインに紹介しています。それから HTML5 のセマンティクスの部分についての解説などもしています。

CHAPTER 4. CSS で装飾する

マークアップの次はスタイルシート。主にレイアウトの作り方を紹介しているので、Tips 集などではありません。フロートや相対配置、絶対配置でのレイアウトや、z-index など、初心者の頃によく混乱する部分を解説してみました。また、CSS3 についても、簡単に紹介しています。

CHAPTER 5. jQuery でインタラクション

最近では HTML + CSS に加え、jQuery も覚えたいなーという人も増えてきましたね!この CHAPTER では、jQuery の基本的な使い方から始まって、プラグインを使ったり、自分でコードを書きながら jQuery を学習する感じです。サンプルも公開していますので、ご覧いただけるとうれしいです。

CHAPTER 6. ソーシャルサービスと連携する

このCHAPTERでは、ツイッターや Facebookのプラグインの埋め込みや、いろんなソーシャルサービスの埋め込みなどを紹介しています。公式のボタンの埋め込みだけでなく、オリジナルデザインのボタンの作り方や、jQuery を使った Google Map や You tube の埋め込みも紹介しています。また、Google カスタム検索の使い方も書きました。

CHAPTER 7. スマートフォン対応サイト

スマートフォンサイトと PC サイトの違いや、作成時に気をつけたいポイントなどを紹介しています。ユーザーエージェントを使った振り分け、MediaQeries を使ったレスポンシブデザインについても書きました。また、jQuery Mobile の基本的な使い方も紹介しています。

CHAPTER 8. WordPress でサイト構築

最後の CHAPTER は、WordPress でのサイト構築についてです。実は以前公開した、WordPress で作成したコーポレートサイトのサンプルは、この書籍のために作ったものでした。WordPress でのサイト構築に必要な基本的な知識や、考え方、Tips などを紹介しています。


現場のワークフローで覚える Webサイト制作教室

現場のワークフローで覚える Webサイト制作教室

全部で 320ページです!内容は、「Webデザインレシピが本になった」という感じだったりします。

ずっとブログを読んでくれている人にとっては、「これ、ブログで読んだー!」という部分も何カ所かありますが、ブログに書いてないことの方が多いです。

ちなみに帯のデザインは「黒板とチョーク」です。フォントはブログで使っているフォントを使っていただいたりして、私的には帯もお気に入りです ;D

現場のワークフローで覚える Webサイト制作教室

現場のワークフローで覚える Webサイト制作教室

Amazon でも発売中です!ぜひ、読んでいただけるうれしいです ;D

3. あとがき

ここからは本を書き終えてから思ったこと … 私の「あとがき」です。

私は今まで、雑誌に執筆させていただいたことはあったけれど、一冊の本を書き上げたのは初めてのことでした。きっかけは … やっぱりブログだったと思います。ある日、出版元の MdN さんから、「執筆してみませんか?」というメールをいただいたのがきっかけです。

当然はじめてのことだったし、不安もいっぱいで、最初に思ったのは「私にできるかなー … 」でした。本の構成案作りから始まり、原稿を書きながらサンプルをつくり、慣れない作業で私なりに必死でした。原稿を書いては送り、書いては送り … はじめのうちは本の執筆をしているという実感も、なかなか湧かなかったように思います。

でも校正がはじまって、自分の書いた原稿が、本のページとしてデザインされPDF で送られてきたときには、かなり感動してしまいました。とてもうれしかったのは、担当の編集さんたち – K.Gさん(ふたりともイニシャルが K.Gさんなんです w)と、信頼関係を築けたこと。それから担当してくれたデザイナーのK.Sさんが、このブログで使っているフォントを使用してくれたり、とっても気遣っていただけたこと。

一冊の本を作り上げることは、私ひとりの力では到底できることではありません。編集さんやデザイナーさん、出版社のみなさんと「いい本を作るぞ!」という目標に向かって、みんなで力を合わせたからできたことなんです。最初は 240ページくらいの本のはずだったんですけど、私がいつもの調子の長文で、原稿書きすぎちゃって … 収まりきれないところを、予算を多く取り直してもらったりといろいろありました …。

担当の編集さん、私の長文を分かりやすくコンパクトにまとめてくれたり、印刷所にまで足を運んで印刷の色をチェックしてくれたりと、大変お世話になりました。

執筆という仕事から学んだこと

私は原稿を書きました。でも「一冊の本を作る」という仕事の中では、著者という歯車のひとつでしかありません。みんなが目標に向かって、力を合わせないとできないことだということを、とても強く思いました。

だから最終的な校正が終わったとき、私は編集さんにこう言いました。

「著者として名前が載るのは私かもしれないけれど、この本は編集さんやデザイナーさんたち MdN のみなさんと作り上げた本ですね!私の中では、特に K.Gさん(編集さん)の本だと思ってます。」

そしたら編集さんはこう言いました。

いいえ、これはあなたの本です。あなたもクライアントさんの Webサイトを作るでしょう?でもそれはあなたの Webサイトではないですよね?だからこれは私の本ではありません。あなたの本なんです。
編集の K.G さん

この言葉を聞いたとき、プロってこういう人なんだなーって思いました。そして、これがモノヅクリの心構えだと思いました。私たちは作り手で、作り手は主役ではないですものね。主役はやっぱり読者のみなさんだったり、Webサイトを訪れてくれるユーザーさんです。この本を通して、私の方こそいろいろ勉強させていただきました。

私の執筆という仕事は終わったけれど、今日が本の発売日で、ここからが本当のスタートです。この本を手に取って読んでくれた人にとって、少しでもお役にたてればうれしく思います。

4. P.S 読者のみなさんへ

私が執筆させていただけたのは、このブログがきっかけでした。そしてやっぱり、このブログを楽しみに読んでくれている、読者のみなさんのおかげです。

本当にありがとうございました!

最近なかなか更新できないでいますが、ブログを書くことをやめた訳ではないので、また近いうちに更新を再開したいと思っています。最後まで読んでくれてありがとうございました ;D

Comments

Thank you for the comment.