Web制作の上達は「作る時間」が主役ですが、どこで調べ、どこで新しい情報に出会うかで伸びる速さが変わります。この記事は、初心者のうちから知っておくと得する定番の情報サイトを、日本語から海外まで13個まとめました。役割ごとに分けてあるので、まずは「辞書」の2つだけブックマークすれば十分です。
困ったとき引く「辞書」
MDN Web Docs
HTML・CSS・JavaScriptの公式に最も近いリファレンス。ブラウザを作っているMozillaが運営していて、タグやプロパティの正確な仕様・使えるブラウザ・実例がすべて載っています。検索で「mdn flexbox」のように調べる使い方が定番。日本語版も充実しています。
サルワカ
図解たっぷりの日本語解説マガジン。HTML/CSS入門やCSSデザインの実例集など、初心者がつまずく場所を先回りして図で説明してくれます。MDNが硬くて難しく感じたら、まずサルワカで感覚をつかんでからMDNに戻る、という使い方が効きます。
みんなの知見が集まる投稿サイト
Qiita
日本最大級のエンジニア向け記事投稿サイト。エラーメッセージで検索すると、同じ場所でつまずいた誰かの解決記事が高確率で見つかります。トレンドを眺めるだけでも「いま何が話題か」の空気がつかめます。
Zenn
Qiitaと並ぶ人気の技術情報共有サービス。比較的新しいぶん、モダンな技術の記事が集まりやすい傾向があります。無料で読める「本」形式の入門コンテンツもあり、体系的に学びたいときにも使えます。
プロの現場から学ぶ
LIGブログ
Web制作会社LIGが運営する名物ブログ。現役のデザイナー・エンジニアが、実際の案件で使っているテクニックや道具を発信しています。おもしろ記事と技術記事が混ざった独特の空気も含めて、Web業界の雰囲気を知るのにぴったりです。
ICS MEDIA
Webのインタラクション・アニメーションに強い制作会社ICSの技術メディア。動きのあるWeb表現の記事の質は国内随一で、デモつきで仕組みまで踏み込んでくれます。CSSやJavaScriptの基本を覚えたあと、「かっこいい動き」に進みたくなったら必読です。
コリス
海外のWeb制作情報をいち早く日本語で紹介してくれる老舗ブログ。新しいCSSの機能・無料素材・ツールの紹介が中心で、「そんなことができるようになったのか」という発見を毎週くれます。
海外の一次情報にふれる
英語圏は情報の量もスピードも桁違い。ブラウザの翻訳機能を使えば日本語とほぼ同じ感覚で読めるので、こわがらずにブックマークだけしておきましょう。
web.dev
Googleが運営する、Web開発のベストプラクティス集。ブラウザを作っている側からの公式ガイドなので、パフォーマンスやアクセシビリティの「正解」を知りたいときに頼りになります。Learnシリーズ（Learn CSS・Learn HTML）は無料の教科書として世界中で使われています。
CSS-Tricks
その名のとおりCSSの技を積み上げてきた老舗メディア。FlexboxやGridの図解ガイドは世界標準の教科書と呼べる出来で、翻訳して読む価値が十分あります。最新のCSS機能の解説も速くて深いです。
Smashing Magazine
Webデザインとフロントエンドの老舗マガジン。デザイン・UX・アクセシビリティ・コーディングまで、じっくり読ませる長文記事に強く、1本の密度が高いのが特徴です。
freeCodeCamp
無料でプログラミングを学べる非営利プラットフォームのブログ。チュートリアル記事の量が圧倒的で、「〇〇のやり方」を英語で検索するとかなりの確率でここに当たります。丁寧で初心者向けの書き口が多いのも安心です。
DEV Community
世界中の開発者が集まる投稿コミュニティで、雰囲気は「世界版Qiita」。初心者の学習記録から現役エンジニアの知見までが混ざっていて、敷居が低いのが持ち味です。英語アウトプットの練習の場としてもよく使われます。
Codrops
ハイエンドなWeb表現のデモとチュートリアルを発信し続ける伝説的サイト。正直、初心者にはまだ難しい内容が多いですが、「Webってここまでできるのか」という驚きをくれる場所として、たまに眺めるだけで創作意欲が湧いてきます。
情報収集を続けるコツ
- 辞書と読み物を分ける——MDN・サルワカは「困ったとき引く」、残りは「たまに眺める」。全部を毎日追う必要はありません
- 英語は翻訳で読む——ブラウザの右クリック→「日本語に翻訳」で十分読めます。原文と見比べれば英語の勉強にもなって一石二鳥
- 公開日を確認するクセをつける——Web技術は進化が速いので、古い記事の書き方が今の非推奨のことも。迷ったらMDNで現在の仕様を確認
- インプット過多に注意——記事を10本読むより、1本読んで手を動かすほうが確実に力になります
まとめ
- まずは辞書の2つ（MDN・サルワカ）をブックマーク——困ったとき戻る場所があるだけで安心感が違う
- Qiita・Zennはエラー検索の強い味方、企業メディア（LIG・ICS・コリス）は現場の空気とテクニックをくれる
- 海外サイトは翻訳機能で普通に読める——web.devとCSS-Tricksから始めると世界が広がる
お気に入りを2〜3個決めたら、あとは作る時間へ戻りましょう。情報は、手を動かす人のところでいちばん役に立ちます。