目次
ブレイクスルーは、自己探求や最高の自分になるというテーマの情報発信ブログですが、著者平山が代表を務めるバスティル株式会社というWeb制作会社としてのブログの役割も果たしています。
そこで本日紹介したいのは最強のWeb制作者になるために知っておきたいWeb技術と知識です。
最強のWeb制作者と言っても業界的には普通なのかもしれませんが、著者が知っていて、日々の仕事をこなす上で必須だと思うWeb技術と知識です。
この記事を書いた理由
Web制作の仕事を始めてみたい人や、Web技術に興味があるけど、実際にどんな知識を身に着けたら良いかが分からない人が多いのではと思ったからです。
Web制作はデザインからプログラミング、サーバー設定まで、様々な知識が必要なお仕事で、ただデザインが出来る、ただプログラミングが出来るだけでは戦力としては不十分です。
その反面、Web制作技術を様々な角度から分解した仕事紹介は少ないため、Web制作者として10年間働いてきた自分が持ち合わせている技術を紹介できれば、これからWeb制作を目指す人の役に立つのでは、と思い記事にまとめてみました。
ゼロから始める人のために、私の知っている全てのWeb制作スキルをゆっくり少しずつにはなりますが、公開していきます。
この記事の読み方
本記事の目的は全体像を把握することです。 各項目ごとの詳細については今後作成予定です。
Web制作の知識を、まず大きく7つのカテゴリーに分けています。
- 基礎知識
- フロントエンド周り
- ブラウザ周り
- デザイン周り
- サーバー周り
- バックエンド周り
- WordPress周り
そしてカテゴリーごとに、仕事をこなすために必要な技術と知識を、項目に分けて紹介しています。
基礎知識
- Webサイトの仕組みを理解し、Webサイト表示や機能の説明ができる
- Web制作に必要なツールの理解
フロントエンド周り
- HTMLとCSSを用いてどんなデザインやレイアウトでも苦なく構成することが出来る
- Media Queriesを理解し、多様化するデバイスに対応するレスポンシブCSSを構築することが出来る
- JavaScriptの仕組みを最低限理解し、jQueryプラグインなどを導入・実装することが出来る
- JavaScriptを用いてインタラクティブな機能を構築することが出来る
- PugやSass, Stylusなどのプリプロセッサを駆使したコーディングが出来る
- BootstrapやTailwindCSSなどのCSSフレームワークを駆使したコーディングが出来る
- Webフォントの仕組みを理解しサイト制作に活用できる
ブラウザ周り
- インスペクターツールを使ったHTML/CSSの調査が出来る
- インスペクターツールを使ったレスポンシブデザインの確認
- インスペクターツールを使ったJSのデバッグやアニメーションの調査が出来る
デザイン周り
- FigmaやAdobe XDなどのプロトタイピングツールを使ってデザインを制作することが出来る
- Photoshopを使って簡単な画像編集や合成写真を制作することが出来る
- Illustratorを使ってベクター画像の処理やSVGの編集をすることが出来る
- タイポグラフィ（文字やフォント）の基本を理解し、サイトのテーマに合ったフォント選択が出来る
- デザインデータのスライスを理解し、コーディング用に画像パーツを出力できる
- 解像度を理解し、デバイスに適した画像を出力できる
サーバー周り
- ドメインとサーバーの仕組みを理解し、独自ドメインでWebサーバーを構築できる
- ネームサーバーとDNSレコードの仕組みを理解し、細かいサーバー設定が出来る
- サーバーのディレクトリの仕組みを理解し、FTP操作が出来る
- コマンドラインツールの仕組みを理解し、SSHを使ったサーバー操作が出来る
- 開発環境やバーチャルマシンの仕組みを理解し、仮想サーバー環境を要件に合わせて構築できる
バックエンド周り
- PHPやRubyなどのWeb言語の基本を理解し、簡単なロジックを開発、修正できる
- データベースの仕組みや種類、SQLを理解し、LaravelやWordPressなどのWebアプリの操作が出来る
- Ajax通信やAPI、JSONの仕組みを理解し、サーバーとのデータ通信プログラムをJSで記述出来る
WordPress周り
- WordPressの基本操作から設定、プラグインのインストールから設定までを一通りこなせる
- WordPressテーマの仕組みを理解し、HTMLデータを元にWordPressテーマを開発できる
- タクソノミーや投稿の仕組みを理解し、独自のカスタム投稿を構築できる
- カスタムフィールドの仕組みを理解し、テキストタイプからリピーターフィールド、条件分岐他、高度なカスタムフィールド機能を構築出る
- REST APIの仕組みを理解し、別サーバーにWordPressシステムを設置したWordPressサイトを構築することが出来る
項目名は「〇〇を理解し、〇〇をすることが出来る」というような、学校の成績表スタイルの書き方にしており、どのようなスキルであるかがひと目で分かるようにしました。
項目ごとに、それは何をどうするスキルで、何を理解する必要があるのかを説明しています。関連する技術があれば、それらも載せていますが、本記事はあくまでも知っておきたい知識の紹介記事です。詳細は各自勉強してください。
また、全項目を説明するととてつもなく長い記事になってしまうので、本記事ではまず下記のカテゴリーのみの解説とします。別カテゴリーの解説は順次アップしていきます。
- 基礎知識
- フロントエンド周り
スキルを活用できる仕事の紹介
また、各技術ごとに、その技術を駆使してどのような仕事を受けられるようになるのか、という架空の案件名も載せることにしました。もしあなたにその技術があったら、お仕事の依頼を受けられるであろう案件の名前です。（基本カテゴリーを除く）
こうすれば、習得した技術をどのような案件に繋げられるのかを理解できます。
技術をただ身につけるだけでなく、その技術を使ってどのような仕事ができるのかが分かったほうが、実用的にWeb制作技術と向き合えるようになるのです。
さぁまえがきが長くなりましたが解説に進みましょう。
これが全部分かったら即戦力！即採用！（うそ、採用していません！） いや、フリーのWeb制作者として余裕で食っていけるでしょう。
基礎知識
Webサイトの仕組みを理解し、Webサイト表示や機能の説明ができる
Web制作者になるためにはWebサイトの仕組みを知らなければ始まりません。
- ブラウザでWebサイトにアクセスした時に何が起こっているのか。
- 表示されているWebサイトはどのように描写されているのか。
- なぜリンクをクリックすると別ページに飛ぶのか。
- フォームで送信を押した時に何が起こっているのか。
何も考えずにWebサイトを使っていると、クリックして別ページに移ったり、フォームの送信などは普通に感じることですが、これらは全てWebサイトに埋め込まれた機能。
普段使っているサイトをただ見るだけ、使うだけではなく、実際にどのように構成されているのか、どのように動作しているかに意識を向けて見てみてください。そうすると今までは気づかなかったWebサイトの仕組みや仕様に気づくことができると思います。
全てのジェスチャー（動作）にはカラクリ（仕組み）があります。
これはリンク、これは太文字、画像、これはタブ、これはボタン、これはスライドショー。スマホサイトだったら、これを押したら何かが現れた！とか、スワイプでスライドショーをコントロールできた等など、Webサイトの細かな部分に意識して使ってみてください。
よりWebサイトの仕組みを理解できるようになると思います。
知っておきたいもの
- Webサイトが表示される仕組み
- Webサイトにおける各名称（ヘッダー、フッターなど）
- HTMLの仕組み
- CSSの仕組み
- HTMLとCSSの関連性
- JSの役割
- サーバーとドメインの仕組み
Web制作に必要なツールの理解
Webサイトの仕組みが理解できたら、Webサイト制作のお仕事で使うツール（アプリ）を把握しておきましょう。
Web制作に必要なツール
- Webブラウザ（Webサイトを表示するもの）
- テキストエディタ（HTML/CSS/JSなどをコーディングするもの。VS Code, Atom, Novaなど）
- FTPクライアント（サーバーにファイルをアップロードするもの。FileZilla, Transmitなど）
- Adobe Photoshop（画像を処理するもの）
- Adobe Illustrator（ベクター画像やSVGを処理するもの）
- FigmaまたはAdobe XD（デザインやプロトタイピングを行うもの）
いずれ必要になるツール
- コマンドラインツール（サーバーを操作するもの）
- Git（コードを共有するもの）
フロントエンド周り
HTMLとCSSを用いてどんなデザインやレイアウトでも苦なく構成することが出来る
いわゆるコーディングのお仕事をするために必要な知識がHTMLとCSSです。
コーディングとは、WebサイトのデザインをWebブラウザで使えるように、Webサイト言語（HTML/CSS）に変換するお仕事です。
コーディングの仕事をするにはWebデザインのノウハウを知らなくて良いように思いがちですが、これは大きな間違いで、Webデザインとコーディングは表裏一体。
Webデザインは上手でなくても良いので、Webデザインの基本は抑えておかないと効率の良いコーディングはできません。
知っておきたいもの
- WebデザインをHTMLコードに変換する思考回路
- CSSを使ってHTMLコードを装飾（デザイン）していく知識
- テキストエディタの使い方
- デザインデータのスライス（デザインデータからパーツを画像データとして出力すること）
あなたに依頼できる案件
- コーポレートサイトHTML/CSSコーディング15ページ
- ランディングページHTML/CSSコーディング
Media Queriesを理解し、多様化するデバイスに対応するレスポンシブCSSを構築することが出来る
HTML/CSSコーディングの一部でもありますが、レスポンシブの知識はさらに奥が深いため別の項目にしました。
昨今のWeb制作はスマートフォンやタブレットなど、画面サイズに応じてデザインを変える必要があります。それを実現するのがレスポンシブCSSです。
CSSにおける@media（メディアクエリ）の仕組みを理解して、画面幅や画面の高さに応じてデザインを変更できるようになりましょう。
知っておきたいもの
- CSSのメディアクエリ（@media）の使い方
- デバイスのウィンドウ幅の理解（スマホ（sm）、タブレット（md）、小デスクトップ（lg）、大デスクトップ（xl））
あなたに依頼できる案件
- スマートフォン対応コーポレートサイトHTML/レスポンシブCSSコーディング15ページ
- タブレット対応ランディングページHTML/レスポンシブCSSコーディング
JavaScriptを用いてインタラクティブな機能を苦なく構築することが出来る
ブラウザ上で表示されるものインタラクティブ（動的）にする言語がJavaScriptです。
インタラクティブな機能を取り入れるためにはまず、ブラウザ上で行われるイベント（ロードやクリック、スクロールなどのブラウザ上の出来事）の種類を理解する必要があります。
イベントを理解したら、今度は指定したイベントごとにDOM（ドキュメント・オブジェクト・モデル）を自由自在に操作できるようになればOK。これらの理解がJavaScriptプログラマーとしての基本となります。
知っておきたいもの
- JavaScriptの基本
- JSを使ったHTMLエレメント（DOM）操作の理解（要素を追加したり削除したり、属性を追加したり削除したり）
- jQueryの基本
- JS/jQueryプラグインの導入と実装（サードパーティ製のプラグインを使ってサイト機能を拡張すること）
あなたに依頼できる案件
- HTML/CSSにアニメーションを実装するJavaScriptコーディング
- JSを使ったフォームのバリデーション（検証）機能実装
- JSを使ったスマートフォンメニューの実装
- jQueryプラグインカスタマイズ・実装
Sass（SCSS）, Stylus, Pugなどのプリプロセッサを駆使したコーディングが出来る
プリプロセッサがあればコーディングの効率が大幅にアップ！知らなければ是非活用してください。
StylusとPugはさておき、Sass（サス）と呼ばれるCSSのプリプロセッサは業界のスタンダードとなりつつあります。Sassで書かれたCSSのことをSCSSと言うのですが、書き方は通常のCSSとあまり変わりませんので、是非習得していただきたいです。
必須ではないので、ちょっと難しそうと感じる場合はスキップしていただいて大丈夫です。ここではプリプロセッサが一体何なのかは割愛させていただきます。
知っておきたいもの
あなたに依頼できる案件
これらはコーディングを効率化させる技術であるため、依頼できる案件はHTML/CSS欄を参照
BootstrapやTailwindCSSなどのCSSフレームワークを駆使したコーディングが出来る
ゼロからHTMLやCSSをコーディング出来るようになるのはもちろんですが、プロジェクトによってはフレームワークと呼ばれるHTMLとCSSのテンプレートを使ってサイトを構築した方が効率が良かったり、チームの連携が上手くいく場合があります。
フレームワークの内容の全てを知る必要はありませんが、ある程度は使えるようになりたいです。HTML/CSSの知識が増えれば、フレームワークは余裕で使えるようになるでしょう。
知っておきたいもの
あなたに依頼できる案件
- Bootstrapを使ったコーポレートサイトHTML/CSSコーディング
- Bootstrapを使ったWebアプリHTML/CSSコーディング
TailwindCSSは日本ではあまり有名ではありませんが、通常のHTML/CSSコーディングの効率を上げることが出来るフレームワークです。
Webフォントの仕組みを理解しサイト制作に活用できる
フォントや文字はWebサイトにおける重要な要素です。フォントデザインの基本（大きさ、太文字、斜体文字、下線文字）や、よく使われる日本語フォントの名前（メイリオ、ヒラギノフォントなど）、そしてゴシック体と明朝体、Serif体とSans-Serif体の違いなども理解しておきましょう。
また、サイトのタイポグラフィ（フォントデザイン）はもちろんのこと、アイコンもWebフォントでまかなえる時代です。Webフォントなくして現代のWeb制作はありません。WebフォントをHTML/CSSに埋め込み、使えるようになっておきましょう。
知っておきたいもの
- よく使われる日本語フォントの種類
- Serif体とSans Serif体の違い
- WebフォントのHTML埋め込み方法
- Webフォントサービス（FontAwesome, Google Fonts, Adobe Typekitなど）
以上が「基本」と「フロントエンド周り」の知識紹介となります。次の記事では「ブラウザ周り（主にインスペクターツールの使い方）」の知識について紹介していきます。
