Webデザイナーやフロントエンドが「独り立ち」できるビジネス向け技術書11選

• 作成：2015/05/25
• 更新：2018/11/18
• Web制作

今後のWeb制作では受託だけじゃなくて販売できるレベルの商品を作りたい。上から指示された分業だけでなく、一人でも一貫して制作できる技術を知っておきたい。

実際にどういった本がおすすめ？と聞かれることも多いので、会社と自宅に常備してあり、実際に筆者がサイト構築する際に参考にした本を中心に書いておきます。今回は多くの書籍の中から特にビジネスで使えそうなものを絞りに絞ってピックアップしました。少人数での起業や一人でサービスを開発したい人に。

もくじ

フルスタックエンジニア（入門編）

• webエンジニアの教科書
• フロントエンドエンジニアの教科書
• HTML5 インタラクティブ表現ガイド
• CSS3 逆引きデザインレシピ

WordPress （ビジネス向け）

• WordPressプラグイン開発のバイブル
• PHPによるWordPressカスタマイズブック
• WordPress高速化＆スマート運用
• レスポンシブWebデザイン入門

Webデザイン（基礎知識）

• ノンデザイナーズ・デザインブック
• レイアウト基礎講座
• ウェブ配色

フルスタックエンジニア（入門編）

フルスタックエンジニアとはフロント（JavaScript、jQuery、CSSなどクライアントサイド）の他、サーバサイド、インフラ、デザイン、などひと通りの流れを一人で開発や運用ができる技術者のことを指します。少人数で起業する場合や、数人もしくは一人でサイトやサービス開発をしなくてはならない時に一読しておきたいものをご紹介します。

１．Webエンジニアの教科書

フロントエンド（P156からAngularJSの導入・操作）の他、サーバサイド（Ruby、PHP、Python）など幅広くこなせるエンジニアを対象にしています。Webエンジニアが必要とする最新の技術動向や習得しておきたい技術などが広義にて書かれているので、フルスタックを目指しているエンジニアにおすすめです。

２．フロントエンドエンジニアの教科書

お次は少しだけ掘り下げてフロントエンドのみ。フロントエンドが求められる役割や技術を知ることが出来ます。API、CMS、CSS3、JavaScriptなど最適なWebサイトを構築する上で必要なことが学べます。

３．HTML5 インタラクティブ表現ガイド

もう少し掘り下げて動きに関する技術。HTML5（video audio SVG）だけでなく、CSSアニメーション、Three.jsによる3D表現、Canvas CreateJS によるグラフィック表現など最近のトレンドであるインタラクティブな動きを学べます。ちょっとした動きをサイトに取り入れたい時に読むべき本。

４．CSS3 逆引きデザインレシピ

今度はスクリプトを使わずに、CSSのみで自動再生やクリックによる動きを制御できるようになりたい。そう思うようになったらこちら。CSS技術書の中でも、アニメーションやUIパーツ、数字のカウントなどCSSのみで図形や動きを描写する方法が満載です。

P241のカウントダウンされていくアニメーション、P251のクリックでスライドメニューを搭載する方法など、画像やjsを使わずにここまで出来るんだと勉強になります。また基礎的なことも掲載されてますので、意外とこの１冊でCSS3は事足りるかもしれません。

WordPress （ビジネス向け）

以下でご紹介する書籍は「販売用のWordPressテーマを自作」したり、「クライアントの希望する機能をプラグイン自作で実現」するなどWordPressを趣味ではなく、ビジネスとしてガンガンカスタマイズしたい人へオススメの本を厳選してピックアップしました。

５．WordPressプラグイン開発のバイブル

現実的な話をするとビジネスでWPを扱う場合、オシャレな自作テーマを組めるだけでは他と差別化できず強みになりません。VPSへの移行、高速化、負荷分散やセキュリティ対策の他、クライアントさんの要望や、既存プラグインでないような機能も再利用しやすくするために、サクサクと自作プラグインなどで対応できるようになりたいところ。

こちらの書籍は、プラグイン開発はもとよりセキュリティやエラー処理など、作って終わりにしないための技術が書かれています。他にはテーマ販売において気になるGPLライセンス、フィルターフック、アクションなど基礎的なことも充実。気になる収益モデルについてはP28に書かれています。

６．PHPによるWordPressカスタマイズブック

関数やテンプレート・テーマカスタマイズはネットに情報沢山あるし、それ以外が学べる貴重な情報を読みたいときはこちら。初版は2010年ですが、ありきたりな内容ではなく、今も使えるテクニカルな内容多めなのであえて紹介しました。

本書の中で特に有用だと思うのがP132の「データベースに直接アクセスする」とP192の「プラグインを開発する」です。SQLを作り集計期間を調べたり、処理速度を高めるためにDBに直接アクセスして操作する方法など、関数だけでは処理が難しい部分に対応するために知っておきたいこと。

７．WordPress高速化＆スマート運用

ビジネスでWordPress高速化を請け負うなら既存のプラグインを使わない方法を取りたいところ。この本はフロントエンドだけでなく、バックエンドでの改善方法も書いてあり、ターミナルを使ったコマンド使用例なども、とても理解しやすいので初心者でもガンガン読めます。実際にさくらVPSでWPを導入する際に熟読しました。

しっかり読んでおきたいページは、P128からのVPSの初期設定とssh接続する際のVPSサーバのセキュリティ設定、P202からのサーバサイドで行う高速化対策は、Expriresヘッダ、Nginx、PHPやMySQLのチューニングカスタマイズなどのパフォーマンス改善が分かりやすく記載されています。

８．レスポンシブWebデザイン入門

経験上そこらに落ちているフリーのテンプレートをいじっても全く身になりませんでした。どういった理由があってマークアップされているかを知り、できれば何も見ずにエディタにゴリゴリ書けるようになりたい。こちらはWPテーマやレスポンシブ対応の雛形を準備する前に読んでおきたい本。ブレークポイント、レスポンシブのレイアウトパターン７つ、プロトタイプから本サイトへの実装方法など実践的。

とはいえ基本的なマークアップやスタイルが多いので、この本に記載してあるコードをエディタ（Emmet無し・予測変換無しが好ましい）に打ち込んで反復していくと、自然とコーディングの力がつきます。イチからレスポンシブ対応のテンプレートを作ってWPテーマに落としこむ前などに役立つ書籍です。

Webデザイン（基礎知識）

技術はそこそこOK、あとはWebデザインだけ勉強してるけどセンス上がらないなぁと感じたら絶対読んで欲しい。直感ではなく基本原則でレイアウトを改善させるための知識が学べるので、センスがなくても見やすく美しいレイアウトを設計することができます。Webだけでなく、デザイン全般に関する基本原則が学べるので様々な分野に応用できます。以下は知識が無くても比較的カンタンに読める入門編です。

９．ノンデザイナーズ・デザインブック

自分で名刺のデザインをやった時に、何度も繰り返して読んだ本。Webサイトだけじゃなく、名刺・チラシ・ニュースレターなどを制作する前にも読んでおきたい。基本原則（近接・整列・反復・コントラスト）の目的が詳しく書かれてます。109ページからは宣伝販促物の作成チップスになります。

気になる箇所といえばほとんど欧文フォント例なので和文フォントの実例が少ない・・・けどしっかりと基礎が身につく書籍です。211ページから和文フォントの補足が少しだけあります。ウェブだけじゃなくて資料やリーフレット作成する前などにも活用できます。

１０．レイアウト基礎講座

白黒で写真などの参考例が90年代の雰囲気でしたが、内容を見てみると読みやすく、レイアウトの基礎知識がしっかりと身につきます。配色に関する情報はないけど、視覚度や図版率・ジャンプ率や版面率などウェブ制作ではあまり聞き慣れない「様式の８要素」が書いてあります。センスではなく知識でレイアウトの能力を上げる感じ。この本を読んだあとは名刺をじっくり観察するようになりました。

１１．ウェブ配色

テキストリンクの色やテキストを読ませるためにどういった配色をするのかなど仕事で使えそうなことが書かれてあります。ウェブにない情報があるので◎。クライアントさんに「この色を使いたい」と言われたときにどうやって話を進めたらよいのか、色を増やしたいと言われたときにどう解決するかなどクライアントとの「コミュニケーション部分」が書いてある127ページからの応用編が買う動機となりました。

以上、少人数での起業や一人でサービスを開発したい人に熟読して欲しい本でした。

• 1

2016/07/4

意外と盲点だったCSS3の役立つ小技まとめ

リニューアルを行った時に、CSS3で気づいたことや次回もまた使いそうなものなどを備忘録として書いておきます。基本的なものから見慣れないものまで。 CSS3 オートフ

2014/03/10

何でも制作できる！色々なサイトの「つくりかた」と知識まとめ

慣れていないジャンルのサイトを制作するときに素早く構築できるよう、コーポレート・ペライチ・通販・ポートフォリオ・サービス系ページなどジャンルごとに「つくりかた」や、簡単にシステ

2014/12/8

綺麗な動きになった！Web制作前に見ておきたいjQueryプラグインまとめ

比較的最近のjQueryプラグインやプロフェッショナルな方々が作成されたスクリプトの中から、サイト制作時に取り入れてみたいエフェクトを厳選してご紹介。今風の見え方を実現できそう

2016/04/25

これは凄い！Web制作が捗るモーフィング系の最新スニペットまとめ

ある形から別の形に連続で変化をかけていくモーフィングのような、視覚的な変化を表現できるスニペットをまとめました。トレンドをおさえた最新スニペットを厳選してピックアップ。