表紙

「HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門」発売!

2019年5月1日「HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門」を技術評論社より発売しました!

2019/04/27追記:書籍内容に関する補足、お知らせはこちら↓

一言でいうと、どんな本?

軽い&速く表示されるウェブサイトを作るための「きほんのき」と作業手順をステップバイステップでまとめた本です。

章ごとに「入門編」と「実践編」に分かれており、入門編では章の概要や高速になるしくみを解説し、実践編では実際にファイルやソフトウェアを操作して高速化に取り組めるようになっています。
PageSpeed InsightsやChrome DevToolsを使用して、どれぐらい速くなったかを調べることができるようになります。

出版社による紹介ページはこちら:
https://gihyo.jp/book/2019/978-4-297-10580-8
書籍のサンプルPDFもご確認いただけます。

だれに向けて?

ウェブサイトが遅い気がする…でも具体的に何をすればいいんだろう?と思っている方。付加価値として高速化のスキルを身につけたい方。
初心者のHTMLコーダー(マークアップエンジニア)、そしてウェブ担当者、ウェブディレクターやコーディング兼業のウェブデザイナーの方々に向けて書きました。

今までにもウェブ高速化を目的とする素敵な書籍が何冊か出版されていますが、どれも、ある程度の知識や経験のあるプロフェッショナル向けの本でした。
「HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門」では、できる限り難解な専門用語を使わずに、使う場合は解説を入れて、前知識がなくても理解できるように工夫しました。
テクニックも絞り込み、できる限り簡単、かつ、無料で実践できる方法を紹介しています。

逆に言えば、最先端の(次世代の)まだ広まっていない高速化テクニックや裏技だけを知りたい方には向いていない本かもしれません。

ネット情報となにが違うの?

検索エンジンで高速化について調べると、新しい情報も古い情報も、そして多様な立場の方が執筆した情報がまぜこぜになって出てきます。
それがウェブ検索のよいところでもあるのですが、(特に初心者の方にとって)その中から自分で実行できる方法や、いま現在でも有効なテクニックを選別して取り入れていくのは、大変ではないでしょうか。
そもそも、どんな言葉で検索すればよいのかも分からないことがありますよね。

「HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門」では、まず取り組むべき基本のテクニックをコンパクトな1冊(208ページ)に、効果を見込める順にまとめています。
自力でウェブ検索しながら探していくよりも短い時間で、いま使えるテクニックを身につけられます。

ネット検索を否定するつもりはまったくありません!むしろ、文中で気になるキーワードをみつけたら、どんどん検索していただきたいです。この本が次のステップへの足がかりになればと考えています。

書籍の目次でひとこと

※ページ数は私が目次を見ながらカウントした「およそ」ですm(_ _)m
このページ数なら読める!読み切れる!!と感じていただければ幸いです。

第1章 Webページが遅いのはなぜか?(22ページ)
なぜWebページの表示が遅くなってしまうのか、考えられる理由について。

第2章 Webページ画像を最適化していますか?(34ページ
画像形式の選び方や圧縮方法について。

第3章 テキストファイルをどこまで圧縮できる?(24ページ
テキストファイル(HTML/CSSなど)のMinifyやgzip配信について。

第4章 Webページをさらに速くする方法(38ページ
ファーストビュー範囲内の表示を速くする方法について。

第5章 キャッシュの有効活用をしていますか?(12ページ
.htaccessでブラウザキャッシュを設定する方法について。

第6章 コンテンツのダイエットをしていますか?(8ページ
そもそもそのコンテンツは必要?不要な情報を減らすことでページを軽くすることについて。

第7章 ストーリーで読む、既存サイトの高速化(8ページ
とあるウェブ担当者が、1〜6章のテクニックを使って自社サイトを高速化したら…というストーリーです。

第8章 Web担当者・HTMLコーダーのためのGit超入門(39ページ
なぜGit!?と思われるかもしれませんので、こちらだけ厚く補足します。

ふだん、ウェブ担当者(兼コーダー)の方と接すると、「バックアップとってません」という声がチラホラ聞こえてきます。
高速化は何かを「削る」作業が中心になりますので、バックアップは必須です。高速化でなくとも、バックアップは絶対にしてほしい!超大事。

また、バックアップがとられていても、サーバ上に無数の「○○_BK20171210.html」などの複製ファイルが増殖しており、DreamWeaverでテンプレート更新をかけると膨大な量の書き換えが始まって一晩かかったり(笑)、見通しが悪くて困ることが多くありました。

そこで、効率よく差分バックアップをとれるバージョン管理ツール、Git(BitBucket+Sourcetree)の使い方を載せることにしました
といっても、全てを伝えようとするとGitの本になってしまいますので、Gitの中でもファイルの追加(add)、コミット(commit)とプッシュ(push)と いう3つの機能だけを紹介しています。
※ブランチ(branch)、マージ(merge)、プル(pull)は解説していません。

そしてもう一つ。Gitを使えるようになると、HTMLコーダーの場合は、請けられる案件や仕事の幅が広がってきます。
ウェブ制作会社ではGitやSVNを使用していることが多く、スキルとして身につけておいてもソンはありません。
フリーの場合、ウェブアプリのモックアップ作成など、プログラムと関連する仕事も請けやすくなります。
この本は最初の一歩(半歩かも…)のみ触れていますので、興味があればぜひぜひ学んでほしいスキルです。

付録 PageSpeed Insights「改善できる項目」対応表(2ページ
PageSpeed Insightsの分析結果で「改善できる項目」に現れる項目と、本書のテクニックの対応表です。

著者はどんな人?

(写真撮影:イイダ マサユキ)

プロフィール:

・佐藤あゆみ
・フリーランスHTMLコーダー
・Twitter: @PentaPROgram

1985年ニューヨーク生まれ。まもなく東京に移住し、1994年から2年間のオーストラリアでの生活を経て、ふたたび東京へ。
1997年頃より、趣味としてWeb制作を開始。コーディングに英語力を活かしながら、以降も独学で学ぶ。

音楽専門学校中退後、音楽活動での成功を夢見ながら、PCパーツショップやバイク輸出入会社、楽器店など様々な業種でのアルバイトを重ねる。
日々の業務の中で、EC サイトの運営管理や自社サーバの管理、プログラミングなども学ぶ。音楽活動を展開する中で、集客やフライヤー制作、プロモーションビデオ制作を自ら行い、コーディング外の技術を身につけるきっかけとなるも、2011年頃に区切りをつけ、ウェブ制作で生計を立てることを決意する。

その後は画廊やウェブ制作会社など、中小企業を中心に社員として勤め、2014 年12 月より、屋号「PentaPROgram(ペンタプログラム)」にてフリーランスとして独立。
ウェブ専業ではない多様な業界の実情を見ながら、中小企業で「ウェブ担/パソコン担当さん」として業務を続けてきた経験を活かし、その後の運用を見据えたECサイトやコーポレートサイトの構築、技術サポートを行う。

2018年、初心者のためのウェブサイト高速化をテーマとしてismおよびCSS Niteにて講演。
座右の銘は「できるまでやればできる」。

どこで買える?

「HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門」
著者:佐藤あゆみ/出版:技術評論社/定価:2580円

【書籍】
Amazon.co.jp
紀伊國屋書店ウェブストア
セブンネットショッピング

【電子版書籍】
Gihyo Digital Publishing(PDF/EPUB配信予定)
※他電子書籍配信サイトでも販売中ですが、Gihyo Digital PublishingはDRMフリーのため、リーダーを選ばない点からおすすめです。

さいごに

いままで生きていて、これほどまでにたくさんの方に「応援してもらえている」と思ったことはありませんでした。一方的にお世話になってしまって、これからどうやって恩を返したものかと途方に暮れる面も…!

ismやCSS Niteで私のセミナーをご覧頂いたみなさん、共演者のみなさんからのご意見やご感想は大きなヒントとなりました。ディスカッションやアンケートから得たものはとても大きかったです。CSS Niteの鷹野雅弘さんには、セミナーのみならず、本書へのアドバイスもいただき、よりよい本になりました。
ウェブコンサルタント協会の権成俊さんには多方面からご協力いただき、ゴメス・コンサルティングの森澤正人さんには査読、そして推薦文を寄せていただきました。
私の言葉だけではなく、みなさんの経験、疑問やアドバイスが詰まった本になりました。

そして、もし「HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門」に興味を持っていただけたら、このページを(できれば優しい言葉で…笑)シェアしていただけると嬉しいです!


この記事が気に入ったらサポートをしてみませんか?