私はフリーランスのWeb制作系エンジニアとして6年ほど働いているんですが、その過程で様々なスキルアップ系の本を読んできました。
皆さんも
エンジニアは一生勉強し続けなければならない
という言葉を聞いたことあるかも知れませんが、Web制作の分野も時代の流れが早い上に、学ぶべき分野が幅広いので、インプットを忘れてアウトプットばっかりしていると、
いつの間にか時代から取り残されていた！
ということになりかねません。
事実私の周りのコーダーを見ていると、仕事をして1~2年ぐらい経ったあたりで、
なんか最近できる範囲の業務しかしてないし、収入は安定してきたけど、スキルアップできてない気がする…
こんな悩みを持つ人が多いです。というか私がそうでした笑
Web制作はシステム開発などと比べて仕事にするハードルがそこまで高くない分、それなりにコーディングできれば最低限食べてはいけてしまうし、定型業務みたいなものも多いです。
初期は飛ぶ鳥を落とす勢いで成長していた人が、数年後に停滞するケースが案外多いんですよね。
今回はそういったWeb制作中級者向けに、
更にレベルアップしてWeb制作を楽しめるようになる本
これを紹介していこうと思います。後半に行くほど難易度が高くなります。
今回紹介する本はどれも良書なのに、周りのフリーランスに聞いてみると読んでない人が意外に多かったので、差をつけられる本たちになっていると思います。
また、初学者の方も読んでおくと、今後の学習が楽になる本も紹介しているので、幅広いレベル帯の人に楽しんでいただけると思います。
ぜひ最後までご覧いただき、気になる本をピックアップしていただければと思います。
それでは見ていきましょう！
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
動画でもおすすめ本を紹介しました！
イラスト図解式 この一冊で全部わかるWeb制作と運用の基本
推しポイント：Web制作の流れ全体を分かりやすく復習できる
Web制作中級者の方に問いたいですが、今この場でITリテラシー0のお客さんに、
Webサイト制作がどういった流れで進むのか、完結に教えてもらえますか？
と聞かれて、即答できますか？
実際に直接お客さんと向き合うエンド営業の際は、こういったやり取りは頻繁に行われます。相手も知識0ですし、不安ですからね。
「イラスト図解式 この一冊で全部わかるWeb制作と運用の基本」では、意外と疎かにしがちな、制作の前の要件定義や権利関係、カスタマージャーニーやペルソナの設定から解説してくれているので、
自分の中の「Web制作の流れ」の知識をがっちり固めてくれます。
あと、初学者の人にもこの本はぜひ読んでほしくて、学習段階から本書を読んでおくことで、
なるほど！自分が今学習しているデザインやコーディングはWeb制作全体の工程の中でこの部分なのか！
と自分の作業を俯瞰して見られるようになりますし、イラストが多めで意外にサラサラ読むことができるので、ぜひ学習中から読んでおいてほしいと思います。
意外に学習中に知り合い経由でホームページ制作の話が急に舞い込むことも多いので、普段から流れを掴んでおけば急なチャンスもものにしやすくなると思います。
イラスト図解式 この一冊で全部わかるWeb技術の基本
推しポイント：Webの基礎を知ってWeb制作を楽しくできる！
先程の本に引き続き、分かりやすいイラスト図解式シリーズなんですが、ちょっとレベルが上がるので、対象読者としては「WordPressでサイト制作を行っている」ぐらいのレベル感です。
「イラスト図解式 この一冊で全部わかるWeb技術の基本」では今までなんとなく触れていた多様なWeb技術、例えば
- WebサーバーとHTTP
- IPアドレスとポート番号
- HTTPSの仕組み
- Cookie、セッション
- Ajax
- WebAPI
- DoS攻撃
- 公開鍵証明書
こういったものをたっぷりのイラスト図解と共に、しっかり理解することができます。
う〜ん、でもこんなの学んでもWeb制作には使わない知識なんじゃ？
と思いませんでしたか？確かにWeb制作だと、ここに載っている知識が無いとできない業務はそこまで多くないです。
ただ、知っていると業務が楽しくなるんですよね！
特に個人的にはHTTP周りの話が一番面白くて、その後の仕事にも活きてきてるので、ここだけでも読んでほしいと思います。
いくつか案件をこなした後に読むと、
あーあれってそういうことだったのか！！
という楽しい気付きが多く、よりWeb制作を楽しめるようになります。
武器になるHTML
推しポイント：HTMLを”正しく”理解できる
この本の対称レベルとしては、既にデザインカンプからのコーディングを何件かこなされた方向けです。
「HTMLは簡単」と言われることが多いですが、実はHTMLは「正しく書こう」とすると、結構難しいです。
- アクセシビリティ配慮
- スクリーンリーダー配慮
- キーボードフォーカス配慮
- テクニカルSEO
など配慮するべき点が多いです。皆さんはちゃんと配慮できていますか？
実際は、「初学者時代に学んだきり、後は実務で自分流で書き続ける人」が多いので、HTMLのタグが脳死でdivだけになるパターンが散見されます。
それを解決するのが、今紹介している「武器になるHTML」です。
ここでは分かりやすいように、学べることの中から２つ具体例を出そうと思います。
具体例❶altの使い方
altの役割、皆さん覚えていますか？復習すると、
- 検索エンジンにコンテンツの内容を正確に伝える→画像検索での流入が見込める
- 画像が表示されない場合、テキストで画像の内容を補完
- 音声読み上げ機能を使用した際の読み上げテキストとして使用
こうな感じかと思います。
これらを踏まえて、例えばこちらを見て、「からあげの画像」に対してどのようなaltを書きますか？ちょっと考えてみてください。
答え合わせをすると、「武器になるHTML」ではこのようになっています。
<h1>絶対に失敗しない架空のからあげ</h1>
<p><img src="../images/karaage.jpg" width="840" height="520" alt="揚げたてのからあげをお皿に盛り付けて、パセリを添えるとより美味しそうに見えますよ" ></p>もしかしたら、「からあげ」と入力してしまう人がいるかもしれません。
本書でも「明確な正解はない」としつつも、このような著者のコメントがあります。
「からあげ」だけだと、上の見出しを繰り返しているだけにも感じるね。代替テキストとしては情報が不足しているんじゃないかな。
前後の文とのつながりも考えて、この画像がなくても、代替テキストを読むだけで内容が成立するようにしよう。
とのことです。
ちなみに実案件ベースで話すと、altの文言まで指定されることはほぼないです。なので、自分で文脈を読み取って指定してあげる必要があります
具体例❷figureかpか
figure要素、みなさんはどういったときに使いますか？
”imgはfigureで囲むべし”とネットに書いてあったから、なんとなくimgをfigureでラップして書いてます
こういった人も多いんじゃないでしょうか？
「武器になるHTML」によれば、
「移動しても本文の流れに差し障りのないイラスト・図表・写真などをfigureで囲む」
とされています。
例えばこちらの珈琲の画像はどうでしょうか？figureタグで囲んじゃって大丈夫そうですか？
答えは「figure要素で囲む」のが正解です。
<figure>
<img src="images/coffee.jpg" width="480" height="320" alt="厳選したコーヒー豆を使った淹れたてのブレンドコーヒーをお召し上がり下さい。" loading="lazy">
<figcaption>キミのブレンドコーヒー</figcaption>
</figure>珈琲の画像によってユーザーのイメージを具体的にする効果がありますが、仮に珈琲の写真がなくても、意味は成り立ちますよね？
では、こちらはどうでしょうか？テキストの途中に画像が差し込まれています。
こちらはfigureタグを適用した例ですが、ズバリ、これは間違った使い方ですね。
<p>お客様には</p>
<figure>
<img src="images/coffee.jpg" width="480" height="320" alt="厳選したコーヒー豆を使った淹れたてのブレンドコーヒー" loading="lazy">
</figure>
<p>を召し上がっていただきます。</p>今回のケースだと、「珈琲の写真が分の一部として成り立っている」ので、figureで囲むのは適さず、pタグで囲むのが正解になります。
なんとなく、figureとpの使い分けのニュアンスが伝わりましたかね？
ちなみに、私のWordPressブログ記事を見てみると、挿入画像の部分のソースコードは、
このように問答無用でfigureで囲まれていました。WordPressの場合、自動でfigureでラップするようです。
とまぁこんな感じで、理解があやふやになりがちな部分を「武器になるHTML」では学ぶ直すことができるので、コーディングに慣れてきた方は一読をおすすめしたいです。
さらなる詳細については過去に記事にまとめているので、そちらを見てみてください。
確かな力が身につくJavaScript「超」入門 第2版
推しポイント：Web制作レベルのJavaScriptが読めるようになる
私がWeb制作の業界に入ってからずっと考えていたもやもやがあって、それは
JavaScrtptが全然書けるようにならない！！
ということでした。定型的な実装であれば、ググれば先人たちの知恵で突破できることは多かったものの、これではコピペエンジニアで成長しているという実感が無かったんですよね。
ただ、この「確かな力が身につくJavaScript「超」入門」を読んでからは、自分で一からは書けなくとも、
少なくともコピペで終わることは無くなって、ちゃんと書いてあるソースコードを目で追うことができるようになったのが大きかったです。
特に一番勉強になったのは、最後のWeb APIを利用した天気予報ページを作成するパートですね。
「Ajaxでデータを取得→加工→表示」の流れができるようになると、Web制作でもできることが増えますし、ライブラリも以前よりカスタマイズしやすくなった感じがします。
JavaScriptはコピペするか、ライブラリしか使えなくて悔しい！
こういったコーダーさんには、強くおすすめしたい本になっています。
ちなみに余談ですが、私も「【JavaScript,jQuery特訓編】web制作でよくあるパーツを実装しよう」というJavaScript関連の教材を出していますが、
この本を読んでから教材内のソースコードを見ると、一行一行しっかりと処理を追えるようになるので、ぜひ挑戦してみてください！
エンジニアのためのWordPress開発入門
推しポイント：WordPressの理解を中級者レベルに押し上げられる
WordPressは情報が多いのでググれば基本的な事象は解決できますが、もしググって情報がヒットしなかったらあなたはどうしますか？
WordPressの仕組みを知らないと、ググって情報が無い時に手も足も出なくなって絶望することになりますが、そんな時に少しでも足掻けるようになるのが、この本です。
「エンジニアのためのWordPress開発入門」の対象レベルとしては、何件かWordPressサイトの制作経験がある方向けになります。
簡単なWordPressサイトの制作であれば、私が出しているWeb制作独学ロードマップで示している学習手順をこなせば、実案件でも十分活躍できますが、
ただ、もし複雑なカスタマイズが必要になった際には、ググって答えが見つからないケースも多く、WordPressのコア機能への理解が無いと解決が難しいことが多いです。
例えばですが、皆さんWP_Queryについてどれぐらい理解できていますか？
WP_Queryを使うと、WordPressのループをより柔軟に制御できて、実務では
- 固定ページ内に記事一覧を表示する
- 投稿ページに関連記事を表示する
- カスタム投稿を一覧表示
こういった時に使うことが多いかもしれません。
カスタム投稿を一覧表示するぐらいなら、この程度のコードなので全然調べれば実装できるかもしれませんが、
$args = array(
'post_type' => 'products', // カスタム投稿タイプの指定
'posts_per_page' => -1, // 全ての投稿を取得
);
$query = new WP_Query($args);
if ($query->have_posts()) {
echo '<ul>';
while ($query->have_posts()) {
$query->the_post();
echo '<li>' . get_the_title() . '</li>'; // 投稿のタイトルを表示
// 必要に応じて他の内容もここに追加
}
echo '</ul>';
} else {
echo 'No products found';
}
wp_reset_postdata();実務ではもっともっと複雑な仕様を強いられるケースも多く、そんなときは調べても全然解決できないことも多いです。
そんな時に、「エンジニアのためのWordPress開発入門」を読んでると、WordPressのコア機能への理解が高まっているので、
多少複雑な条件が来ても対応できることが多くなります。
また、単純なコピペから脱却できると、WordPressサイト制作はとても楽しいものになるので、
WordPressがなんとなくできるようになってきたので、もっと高みを目指したいっす！！
こんな方にはぜひおすすめしたい本です。
よくわかるPHPの教科書
推しポイント：PHPで自分で色々できるようになる
Web制作を仕事にするとあるあるなのが、
あれ、思ってたよりPHPのスキルが上がらない、毎回ググってコピペしてるだけで、自分で書く能力が全然上がってない気がする…
というものです。
WordPressはPHPの能力が上がるとできることが増えますが、同時並行でPHPも学習するのは大変ということで、置き去りにされやすいです。
そうなると、Web制作者としてのスキルは頭打ちしてしまいます。
そんな人に、この「よくわかるPHPの教科書」はなんとか完走してほしいと思っています。これをやってから
WordPressで使われるPHPコードの意味が驚くほど読みとけるようになりました！
という人が多いです。
特にこの本の目玉は、「PHPとDBを使って掲示板サイトを作成する」所です。
この教材を終えてから、WordPressのデータベースを見てみると、
なるほど、ここにこういうデータが入っていて、これを毎回取り出していたのか〜
というのが実感を伴って分かるようになり、PHPを書いてサイトをカスタマイズすることが可能になるので、より柔軟にWordPressを扱えるようになります。
先程紹介した「エンジニアのためのWordPress開発入門」はある程度PHPを理解している人向けの本になるので、こちらと合わせて読んでもらうのがいいかと思いますね。
ちなみに、この教材の動画版である「ちゃんと学ぶ、PHP+MySQL（MariaDB）入門講座」がudemyの方で販売されているので、
動画の方が学びやすい方は、udemy版を購入されてもいいと思います。
「ちゃんと学ぶ、PHP+MySQL（MariaDB）入門講座」はこちらから
お金のこと何もわからないままフリーランスになっちゃいましたが税金で損しない方法を教えてください!
推しポイント：フリーランスや副業一年目はこれで乗り切れる
これはWeb制作スキルというより会計関連の話ですが、実際にフリーランスとして活動したり副業を行うと、「確定申告」という存在がのしかかってきます。
確定申告の経験が無くて、何をすればいいか全くわかりません！
という人を救うのが、この「お金のこと何もわからないままフリーランスになっちゃいましたが税金で損しない方法を教えてください!」になります。
とにかく、めっちゃくちゃ噛み砕いて、税金や帳簿付け、確定申告について教えてくれます。
これを見ると
これなら私でも確定申告乗り越えられそう！！
という勇気を貰えるのがいいですね。
私もフリーランス一年目の確定申告はこの本のお陰で、速攻で終わらせることができました。
確定申告は普段からの帳簿付けや、必要書類を揃えているかどうかで負担が大きく変わってくるので、ポツポツ案件が入ってきた段階から本書を読んで準備を進めておくことをおすすめします。
おわりに
インプットの手を止めるな！！
ここまで紹介した本をまとめます。
最後に重要なことをお伝えしたくて、それが、「インプットの手を止めるな！」ということです。
Web制作を仕事にするまでは多くの人はたくさん勉強をするんですが、その後実際に仕事にした後のインプットの時間は、仕事量に押されて全然できなくなるんですよね。
私自身も、独立後何回もスキルアップの限界を感じる機会がありましたが、そんなときは毎回インプットが足りていない時でした。
「仕事をしていれば勝手に成長する」というのは、自分がチャレンジングな環境にいるからであって、ある程度Web制作の経験をしてくると、定型業務のようなものも多くなってきます。
そんな時に、急に不安になって「最近あまりスキルアップできていないな」と思いがちなので、そんな悩める人に今回の内容が届けられれば、嬉しく思います。
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
