Web制作勉強方法

プロなら読んで当然!?Web制作で周りと差をつけられるおすすめ本解説【中級者向け】

プロなら読んで当然!?Web制作で周りと差をつけられるおすすめ本解説【中級者向け】
本ページにはプロモーションが含まれています。

今回紹介する本を読むことで、「周りと差がつけられる、一歩先を行くWeb制作者」になれるので、ぜひ最後まで見ていただきたいです。

私はフリーランスのWeb制作系エンジニアとして6年ほど働いているんですが、その過程で様々なスキルアップ系の本を読んできました。

皆さんも

エンジニアは一生勉強し続けなければならない

という言葉を聞いたことあるかも知れませんが、Web制作の分野も時代の流れが早い上に、学ぶべき分野が幅広いので、インプットを忘れてアウトプットばっかりしていると、

ありさちゃん

いつの間にか時代から取り残されていた!

ということになりかねません。

事実私の周りのコーダーを見ていると、仕事をして1~2年ぐらい経ったあたりで、

ありさちゃん

なんか最近できる範囲の業務しかしてないし、収入は安定してきたけど、スキルアップできてない気がする…

こんな悩みを持つ人が多いです。というか私がそうでした笑

Web制作はシステム開発などと比べて仕事にするハードルがそこまで高くない分、それなりにコーディングできれば最低限食べてはいけてしまうし、定型業務みたいなものも多いです。

しょーご

初期は飛ぶ鳥を落とす勢いで成長していた人が、数年後に停滞するケースが案外多いんですよね。

今回はそういったWeb制作中級者向けに、

更にレベルアップしてWeb制作を楽しめるようになる本

これを紹介していこうと思います。後半に行くほど難易度が高くなります。

今回紹介する本はどれも良書なのに、周りのフリーランスに聞いてみると読んでない人が意外に多かったので、差をつけられる本たちになっていると思います。

また、初学者の方も読んでおくと、今後の学習が楽になる本も紹介しているので、幅広いレベル帯の人に楽しんでいただけると思います。

ぜひ最後までご覧いただき、気になる本をピックアップしていただければと思います。

それでは見ていきましょう!

しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。2018年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。

\現役エンジニアのレビュー付き/

実践レベルのコーディング課題公開中

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
販売ページはこちら
  • デザインカンプからのコーディングを経験したい
  • 現役エンジニアのレビューを受けてみたい
  • 即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています!

コーディングを学習中の方はぜひご活用ください。

無料の入門編から本格企業サイトまで/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

コーディング課題 超実践編

超実践編をとりあえず見てみる

動画でもおすすめ本を紹介しました!

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

https://amzn.to/3tqvVS4

推しポイント:Web制作の流れ全体を分かりやすく復習できる

Web制作中級者の方に問いたいですが、今この場でITリテラシー0のお客さんに、

クライアント

Webサイト制作がどういった流れで進むのか、完結に教えてもらえますか?

と聞かれて、即答できますか?

実際に直接お客さんと向き合うエンド営業の際は、こういったやり取りは頻繁に行われます。相手も知識0ですし、不安ですからね。

イラスト図解式 この一冊で全部わかるWeb制作と運用の基本」では、意外と疎かにしがちな、制作の前の要件定義や権利関係、カスタマージャーニーやペルソナの設定から解説してくれているので、

自分の中の「Web制作の流れ」の知識をがっちり固めてくれます。

https://www.sbcr.jp/product/4815609559/

あと、初学者の人にもこの本はぜひ読んでほしくて、学習段階から本書を読んでおくことで、

まさひろくん

なるほど!自分が今学習しているデザインやコーディングはWeb制作全体の工程の中でこの部分なのか!

と自分の作業を俯瞰して見られるようになりますし、イラストが多めで意外にサラサラ読むことができるので、ぜひ学習中から読んでおいてほしいと思います。

https://www.sbcr.jp/product/4815609559/
しょーご

意外に学習中に知り合い経由でホームページ制作の話が急に舞い込むことも多いので、普段から流れを掴んでおけば急なチャンスもものにしやすくなると思います。

created by Rinker
¥1,782 (2024/07/11 21:23:36時点 Amazon調べ-詳細)

イラスト図解式 この一冊で全部わかるWeb技術の基本

https://amzn.to/3vgjfgV

推しポイント:Webの基礎を知ってWeb制作を楽しくできる!

先程の本に引き続き、分かりやすいイラスト図解式シリーズなんですが、ちょっとレベルが上がるので、対象読者としては「WordPressでサイト制作を行っている」ぐらいのレベル感です。

イラスト図解式 この一冊で全部わかるWeb技術の基本」では今までなんとなく触れていた多様なWeb技術、例えば

  • WebサーバーとHTTP
  • IPアドレスとポート番号
  • HTTPSの仕組み
  • Cookie、セッション
  • Ajax
  • WebAPI
  • DoS攻撃
  • 公開鍵証明書

こういったものをたっぷりのイラスト図解と共に、しっかり理解することができます。

https://amzn.to/487Qema
ありさちゃん

う〜ん、でもこんなの学んでもWeb制作には使わない知識なんじゃ?

と思いませんでしたか?確かにWeb制作だと、ここに載っている知識が無いとできない業務はそこまで多くないです。

ただ、知っていると業務が楽しくなるんですよね!

特に個人的にはHTTP周りの話が一番面白くて、その後の仕事にも活きてきてるので、ここだけでも読んでほしいと思います。

https://amzn.to/48uIavU

いくつか案件をこなした後に読むと、

コーダーさん

あーあれってそういうことだったのか!!

という楽しい気付きが多く、よりWeb制作を楽しめるようになります。

created by Rinker
¥1,663 (2024/07/11 21:23:36時点 Amazon調べ-詳細)

武器になるHTML

https://amzn.to/3NB0NpS

推しポイント:HTMLを”正しく”理解できる

この本の対称レベルとしては、既にデザインカンプからのコーディングを何件かこなされた方向けです。

HTMLは簡単」と言われることが多いですが、実はHTMLは「正しく書こう」とすると、結構難しいです。

  • アクセシビリティ配慮
  • スクリーンリーダー配慮
  • キーボードフォーカス配慮
  • テクニカルSEO

など配慮するべき点が多いです。皆さんはちゃんと配慮できていますか?

実際は、「初学者時代に学んだきり、後は実務で自分流で書き続ける人」が多いので、HTMLのタグが脳死でdivだけになるパターンが散見されます。

それを解決するのが、今紹介している「武器になるHTML」です。

ここでは分かりやすいように、学べることの中から2つ具体例を出そうと思います。

具体例❶altの使い方

altの役割、皆さん覚えていますか?復習すると、

  1. 検索エンジンにコンテンツの内容を正確に伝える→画像検索での流入が見込める
  2. 画像が表示されない場合、テキストで画像の内容を補完
  3. 音声読み上げ機能を使用した際の読み上げテキストとして使用

こうな感じかと思います。

これらを踏まえて、例えばこちらを見て、「からあげの画像」に対してどのようなaltを書きますか?ちょっと考えてみてください。

https://amzn.to/3ZjtLyG

答え合わせをすると、「武器になる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タグで囲んじゃって大丈夫そうですか?

https://amzn.to/3k6u0gx

答えは「figure要素で囲む」のが正解です。

<figure>
<img data-src="images/coffee.jpg"></figure><pre class="language-markup"><code><figure>
    <img src="images/coffee.jpg" width="480" height="320" alt="厳選したコーヒー豆を使った淹れたてのブレンドコーヒーをお召し上がり下さい。" loading="lazy">
    <figcaption>キミのブレンドコーヒー</figcaption>
</figure></code></pre><p>珈琲の画像によってユーザーのイメージを具体的にする効果がありますが、仮に<strong>珈琲の写真がなくても、意味は成り立ちますよね</strong>?</p><p>では、こちらはどうでしょうか?テキストの途中に画像が差し込まれています。</p><figure class="wp-block-image size-large"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDI0IiBoZWlnaHQ9IjcyMiIgdmlld0JveD0iMCAwIDEwMjQgNzIyIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzdHlsZT0iZmlsbDojY2ZkNGRiO2ZpbGwtb3BhY2l0eTogMC4xOyIvPjwvc3ZnPg==" loading="lazy" decoding="async" width="1024" height="722" data-src="https://shogo-log.com/wp-content/uploads/2023/01/846df04a0c0725a444c1964e1c1130e5-1024x722.jpg" alt="" class="wp-image-10524" data-srcset="https://shogo-log.com/wp-content/uploads/2023/01/846df04a0c0725a444c1964e1c1130e5-1024x722.jpg 1024w, https://shogo-log.com/wp-content/uploads/2023/01/846df04a0c0725a444c1964e1c1130e5-300x212.jpg 300w, https://shogo-log.com/wp-content/uploads/2023/01/846df04a0c0725a444c1964e1c1130e5-768x542.jpg 768w, https://shogo-log.com/wp-content/uploads/2023/01/846df04a0c0725a444c1964e1c1130e5.jpg 1276w, https://shogo-log.com/wp-content/uploads/2023/01/846df04a0c0725a444c1964e1c1130e5-1024x722.jpg 856w" data-sizes="(max-width: 1024px) 100vw, 1024px" /></figure><p>こちらはfigureタグを適用した例ですが、ズバリ、これは間違った使い方ですね。</p><figure class="wp-block-image size-full"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4NDIiIGhlaWdodD0iMjU2IiB2aWV3Qm94PSIwIDAgODQyIDI1NiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" loading="lazy" decoding="async" width="842" height="256" data-src="https://shogo-log.com/wp-content/uploads/2023/01/2f0047fc8d033a0b0a8d1f1db5a0db9f.jpg" alt="" class="wp-image-10525"></figure><pre class="language-markup"><code><p>お客様には</p>
  <figure>
    <img src="images/coffee.jpg" width="480" height="320" alt="厳選したコーヒー豆を使った淹れたてのブレンドコーヒー" loading="lazy">
  </figure>
  <p>を召し上がっていただきます。</p></code></pre><p>今回のケースだと、「<strong>珈琲の写真が分の一部として成り立っている</strong>」ので、figureで囲むのは適さず、pタグで囲むのが正解になります。</p><p>なんとなく、figureとpの使い分けのニュアンスが伝わりましたかね?</p><p>ちなみに、私のWordPressブログ記事を見てみると、挿入画像の部分のソースコードは、</p><figure class="wp-block-image size-large is-resized"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDI0IiBoZWlnaHQ9IjEwMTQiIHZpZXdCb3g9IjAgMCAxMDI0IDEwMTQiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHN0eWxlPSJmaWxsOiNjZmQ0ZGI7ZmlsbC1vcGFjaXR5OiAwLjE7Ii8+PC9zdmc+" loading="lazy" decoding="async" width="1024" height="1014" data-src="https://shogo-log.com/wp-content/uploads/2023/01/71e66d21ec327b273c1b4248192a3665-1024x1014.jpg" alt="" class="wp-image-10552" data-srcset="https://shogo-log.com/wp-content/uploads/2023/01/71e66d21ec327b273c1b4248192a3665-1024x1014.jpg 1024w, https://shogo-log.com/wp-content/uploads/2023/01/71e66d21ec327b273c1b4248192a3665-300x297.jpg 300w, https://shogo-log.com/wp-content/uploads/2023/01/71e66d21ec327b273c1b4248192a3665-150x150.jpg 150w, https://shogo-log.com/wp-content/uploads/2023/01/71e66d21ec327b273c1b4248192a3665-768x761.jpg 768w, https://shogo-log.com/wp-content/uploads/2023/01/71e66d21ec327b273c1b4248192a3665-1536x1522.jpg 1536w, https://shogo-log.com/wp-content/uploads/2023/01/71e66d21ec327b273c1b4248192a3665.jpg 1696w, https://shogo-log.com/wp-content/uploads/2023/01/71e66d21ec327b273c1b4248192a3665-1024x1014.jpg 856w" data-sizes="(max-width: 1024px) 100vw, 1024px" /></figure><figure class="wp-block-image size-full"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDYiIGhlaWdodD0iNzAwIiB2aWV3Qm94PSIwIDAgNjA2IDcwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" loading="lazy" decoding="async" width="606" height="700" data-src="https://shogo-log.com/wp-content/uploads/2023/01/dd712d097faf37fea2f41d64ad6f90e6.jpg" alt="" class="wp-image-10553"></figure><p>このように問答無用でfigureで囲まれていました。WordPressの場合、自動でfigureでラップするようです。</p><p>とまぁこんな感じで、理解があやふやになりがちな部分を「<a href="https://amzn.to/3VIWb20" target="_blank" rel=" noopener">武器になるHTML</a>」では学ぶ直すことができるので、コーディングに慣れてきた方は一読をおすすめしたいです。</p><p>さらなる詳細については過去に記事にまとめているので、そちらを見てみてください。</p><div class="wp-block-jin-gb-block-box concept-box5"><figure class="wp-block-image size-large is-resized"><a href="https://shogo-log.com/html-weapon/" target="_blank" rel=" noopener"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDI0IiBoZWlnaHQ9IjU3NiIgdmlld0JveD0iMCAwIDEwMjQgNTc2Ij48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzdHlsZT0iZmlsbDojY2ZkNGRiO2ZpbGwtb3BhY2l0eTogMC4xOyIvPjwvc3ZnPg==" loading="lazy" decoding="async" width="1024" height="576" data-src="https://shogo-log.com/wp-content/uploads/2023/01/ee0e1b7f74fe82d37480f52135d348f3-1024x576.jpg" alt="【HTMLおすすめ本】武器になるHTMLはプロなら買うべき【中級者向け】" class="wp-image-10472" style="width:459px;height:auto" data-srcset="https://shogo-log.com/wp-content/uploads/2023/01/ee0e1b7f74fe82d37480f52135d348f3-1024x576.jpg 1024w, https://shogo-log.com/wp-content/uploads/2023/01/ee0e1b7f74fe82d37480f52135d348f3-300x169.jpg 300w, https://shogo-log.com/wp-content/uploads/2023/01/ee0e1b7f74fe82d37480f52135d348f3-768x432.jpg 768w, https://shogo-log.com/wp-content/uploads/2023/01/ee0e1b7f74fe82d37480f52135d348f3-320x180.jpg 320w, https://shogo-log.com/wp-content/uploads/2023/01/ee0e1b7f74fe82d37480f52135d348f3-640x360.jpg 640w, https://shogo-log.com/wp-content/uploads/2023/01/ee0e1b7f74fe82d37480f52135d348f3.jpg 1280w, https://shogo-log.com/wp-content/uploads/2023/01/ee0e1b7f74fe82d37480f52135d348f3-1024x576.jpg 856w" data-sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure><p><a href="https://shogo-log.com/html-weapon/" target="_blank" rel=" noopener">【HTMLおすすめ本】武器になるHTMLはプロなら買うべき【中級者向け】</a></p></div><div id="rinkerid19138" class="yyi-rinker-contents  yyi-rinker-postid-19138 yyi-rinker-img-m yyi-rinker-catid-45 yyi-rinker-catid-3 "><div class="yyi-rinker-box"><div class="yyi-rinker-image"> <a href="https://www.amazon.co.jp/dp/B0BL6R37BT?tag=samuraibrass-22&linkCode=ogi&th=1&psc=1" rel="nofollow"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjYiIGhlaWdodD0iMTYwIiB2aWV3Qm94PSIwIDAgMTI2IDE2MCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" loading="lazy" decoding="async" data-src="https://m.media-amazon.com/images/I/41xPjmt7RQL._SL160_.jpg" width="126" height="160" class="yyi-rinker-main-img" style="border: none;"></a></div><div class="yyi-rinker-info"><div class="yyi-rinker-title"> <a href="https://www.amazon.co.jp/dp/B0BL6R37BT?tag=samuraibrass-22&linkCode=ogi&th=1&psc=1" rel="nofollow">武器になるHTML</a></div><div class="yyi-rinker-detail"><div class="credit-box">created by <a href="https://oyakosodate.com/rinker/" rel="nofollow noopener" target="_blank" >Rinker</a></div><div class="price-box"> <span title="" class="price">¥2,932</span> <span class="price_at">(2024/07/11 21:23:37時点 Amazon調べ-</span><span title="価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点でAmazon.co.jpに表示されている価格および発送可能時期の情報が適用されます。">詳細)</span></div></div><ul class="yyi-rinker-links"><li class="amazonkindlelink"> <a href="https://www.amazon.co.jp/dp/B0BL6R37BT?tag=samuraibrass-22&linkCode=ogi&th=1&psc=1" rel="nofollow" class="yyi-rinker-link">Kindle</a></li><li class="amazonlink"> <a href="https://www.amazon.co.jp/dp/B0BL6R37BT?tag=samuraibrass-22&linkCode=ogi&th=1&psc=1" rel="nofollow" class="yyi-rinker-link">Amazon</a></li><li class="rakutenlink"> <a href="https://hb.afl.rakuten.co.jp/hgc/32a3d8c5.818dbb4f.32a3d8c6.0a238f28/Rinker_o_20231215165607?pc=https%3A%2F%2Fsearch.rakuten.co.jp%2Fsearch%2Fmall%2F%25E6%25AD%25A6%25E5%2599%25A8%25E3%2581%25AB%25E3%2581%25AA%25E3%2582%258BHTML%2F%3Ff%3D1%26grp%3Dproduct&m=https%3A%2F%2Fsearch.rakuten.co.jp%2Fsearch%2Fmall%2F%25E6%25AD%25A6%25E5%2599%25A8%25E3%2581%25AB%25E3%2581%25AA%25E3%2582%258BHTML%2F%3Ff%3D1%26grp%3Dproduct" rel="nofollow" class="yyi-rinker-link">楽天市場</a></li></ul></div></div></div><h2 id="rtoc-10"  class="wp-block-heading">確かな力が身につくJavaScript「超」入門 第2版</h2><figure class="wp-block-image size-full is-resized"><a href="https://amzn.to/3v6SxaG" target="_blank" rel=" noopener"><picture><source srcset="https://shogo-log.com/wp-content/uploads/2023/12/643732b8f873f7c7c721d67179050607.jpg.webp"  type="image/webp"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3ODAiIGhlaWdodD0iOTk4IiB2aWV3Qm94PSIwIDAgNzgwIDk5OCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" loading="lazy" decoding="async" width="780" height="998" data-src="https://shogo-log.com/wp-content/uploads/2023/12/643732b8f873f7c7c721d67179050607.jpg" alt="" class="wp-image-19228" style="width:402px;height:auto" data-eio="p"></picture></a><figcaption class="wp-element-caption"><a href="https://amzn.to/3v6SxaG" target="_blank" rel=" noopener">https://amzn.to/3v6SxaG</a></figcaption></figure><h3 id="rtoc-11"  class="wp-block-heading">推しポイント:Web制作レベルのJavaScriptが読めるようになる</h3><p>私がWeb制作の業界に入ってからずっと考えていたもやもやがあって、それは</p><div class="wp-block-jin-gb-block-box simple-box5"><p><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color">JavaScrtptが全然書けるようにならない!!</mark></strong></p></div><p>ということでした。定型的な実装であれば、ググれば先人たちの知恵で突破できることは多かったものの、これではコピペエンジニアで成長しているという実感が無かったんですよね。</p><p>ただ、この「<a href="https://amzn.to/48mFssd" target="_blank" rel=" noopener">確かな力が身につくJavaScript「超」入門</a>」を読んでからは、自分で一からは書けなくとも、</p><p>少なくともコピペで終わることは無くなって、ちゃんと書いてあるソースコードを目で追うことができるようになったのが大きかったです。</p><p>特に一番勉強になったのは、最後の<strong>Web API</strong>を利用した天気予報ページを作成するパートですね。</p><figure class="wp-block-image size-large"><picture><source srcset="https://shogo-log.com/wp-content/uploads/2023/12/010fb6247ab066935528d330627f8dc8-1024x962.jpg.webp 1024w, https://shogo-log.com/wp-content/uploads/2023/12/010fb6247ab066935528d330627f8dc8-300x282.jpg.webp 300w, https://shogo-log.com/wp-content/uploads/2023/12/010fb6247ab066935528d330627f8dc8-768x721.jpg.webp 768w, https://shogo-log.com/wp-content/uploads/2023/12/010fb6247ab066935528d330627f8dc8.jpg.webp 1056w, https://shogo-log.com/wp-content/uploads/2023/12/010fb6247ab066935528d330627f8dc8-1024x962.jpg.webp 856w" sizes=
https://amzn.to/3RSeUtr

Ajaxでデータを取得→加工→表示」の流れができるようになると、Web制作でもできることが増えますし、ライブラリも以前よりカスタマイズしやすくなった感じがします。

コーダーさん

JavaScriptはコピペするか、ライブラリしか使えなくて悔しい!

こういったコーダーさんには、強くおすすめしたい本になっています。

created by Rinker
¥2,455 (2024/07/11 21:23:37時点 Amazon調べ-詳細)

ちなみに余談ですが、私も「【JavaScript,jQuery特訓編】web制作でよくあるパーツを実装しよう」というJavaScript関連の教材を出していますが、

この本を読んでから教材内のソースコードを見ると、一行一行しっかりと処理を追えるようになるので、ぜひ挑戦してみてください!

エンジニアのためのWordPress開発入門

https://amzn.to/48oFrUy

推しポイント:WordPressの理解を中級者レベルに押し上げられる

WordPressは情報が多いのでググれば基本的な事象は解決できますが、もしググって情報がヒットしなかったらあなたはどうしますか?

WordPressの仕組みを知らないと、ググって情報が無い時に手も足も出なくなって絶望することになりますが、そんな時に少しでも足掻けるようになるのが、この本です。

エンジニアのためのWordPress開発入門」の対象レベルとしては、何件かWordPressサイトの制作経験がある方向けになります。

簡単なWordPressサイトの制作であれば、私が出しているWeb制作独学ロードマップで示している学習手順をこなせば、実案件でも十分活躍できますが、

【2023年版】Progateから実務までにやるべきことと具体的手順【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がなんとなくできるようになってきたので、もっと高みを目指したいっす!!

こんな方にはぜひおすすめしたい本です。

created by Rinker
¥3,278 (2024/07/11 21:23:38時点 Amazon調べ-詳細)

よくわかるPHPの教科書

https://amzn.to/3TCmjyo

推しポイント:PHPで自分で色々できるようになる

Web制作を仕事にするとあるあるなのが、

まさひろくん

あれ、思ってたよりPHPのスキルが上がらない、毎回ググってコピペしてるだけで、自分で書く能力が全然上がってない気がする…

というものです。

WordPressはPHPの能力が上がるとできることが増えますが、同時並行でPHPも学習するのは大変ということで、置き去りにされやすいです。

そうなると、Web制作者としてのスキルは頭打ちしてしまいます。

そんな人に、この「よくわかるPHPの教科書」はなんとか完走してほしいと思っています。これをやってから

コーダーさん

WordPressで使われるPHPコードの意味が驚くほど読みとけるようになりました!

という人が多いです。

特にこの本の目玉は、「PHPとDBを使って掲示板サイトを作成する」所です。

この教材を終えてから、WordPressのデータベースを見てみると、

コーダーさん

なるほど、ここにこういうデータが入っていて、これを毎回取り出していたのか〜

というのが実感を伴って分かるようになり、PHPを書いてサイトをカスタマイズすることが可能になるので、より柔軟にWordPressを扱えるようになります。

先程紹介した「エンジニアのためのWordPress開発入門」はある程度PHPを理解している人向けの本になるので、こちらと合わせて読んでもらうのがいいかと思いますね。

created by Rinker
¥1,364 (2024/07/12 20:25:42時点 Amazon調べ-詳細)

ちなみに、この教材の動画版である「ちゃんと学ぶ、PHP+MySQL(MariaDB)入門講座」がudemyの方で販売されているので、

動画の方が学びやすい方は、udemy版を購入されてもいいと思います。

「ちゃんと学ぶ、PHP+MySQL(MariaDB)入門講座」はこちらから

お金のこと何もわからないままフリーランスになっちゃいましたが税金で損しない方法を教えてください! 

https://amzn.to/3NEeYud

推しポイント:フリーランスや副業一年目はこれで乗り切れる

これはWeb制作スキルというより会計関連の話ですが、実際にフリーランスとして活動したり副業を行うと、「確定申告」という存在がのしかかってきます。

ようこちゃん

確定申告の経験が無くて、何をすればいいか全くわかりません!

という人を救うのが、この「お金のこと何もわからないままフリーランスになっちゃいましたが税金で損しない方法を教えてください!」になります。

とにかく、めっちゃくちゃ噛み砕いて、税金や帳簿付け、確定申告について教えてくれます。

https://amzn.to/48LAF3R

これを見ると

一年目さん

これなら私でも確定申告乗り越えられそう!!

という勇気を貰えるのがいいですね。

私もフリーランス一年目の確定申告はこの本のお陰で、速攻で終わらせることができました。

確定申告は普段からの帳簿付けや、必要書類を揃えているかどうかで負担が大きく変わってくるので、ポツポツ案件が入ってきた段階から本書を読んで準備を進めておくことをおすすめします。

おわりに

シャッター

インプットの手を止めるな!!

ここまで紹介した本をまとめます。

最後に重要なことをお伝えしたくて、それが、「インプットの手を止めるな!」ということです。

Web制作を仕事にするまでは多くの人はたくさん勉強をするんですが、その後実際に仕事にした後のインプットの時間は、仕事量に押されて全然できなくなるんですよね。

私自身も、独立後何回もスキルアップの限界を感じる機会がありましたが、そんなときは毎回インプットが足りていない時でした。

仕事をしていれば勝手に成長する」というのは、自分がチャレンジングな環境にいるからであって、ある程度Web制作の経験をしてくると、定型業務のようなものも多くなってきます。

そんな時に、急に不安になって「最近あまりスキルアップできていないな」と思いがちなので、そんな悩める人に今回の内容が届けられれば、嬉しく思います。

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

初級編」は初めてデザインからコーディングする方向け
中級編」はJavaScriptやjQueryの練習
上級編」はWordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

基本的に「まとめて購入」していただくとかなりお得になります↓

コーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

応援して頂ける方へ

ご寄付を頂けると今後の更新の励みになります!

🍺 ビールをプレゼントする

あなたに是非読んでほしい記事です!
});