Web制作の基礎から学べる「Webコーディングスクール」は、これからWeb制作者になりたい社会人向の方に向けたスクールです。
動画受講（ご自宅等でお好きなタイミングで動画をご覧頂く）であれば、今すぐ受講可能です。初回体験レッスンも動画受講可能です。
この写真は、会場となる渋谷駅から徒歩5分の「HIDAMARI」とよばれる教室の写真です。
渋谷にお越し頂くことが難しい場合も、ご自宅等で動画（録画）をご覧頂くことで受講可能です。
スクールの概要
| 開催テーマ | Web制作の基礎から学べる「Webコーディングスクール」 | |
|---|---|---|
| 対象者（どちらの方もOK） | Web制作完全未経験、初心者の方 | 過去にWeb制作をしたことがあるが、最近の制作手法を知りたい方 |
| スクールの内容 | Web制作は初めての方のための、最新のHTML・CSSの基礎知識 スマートフォン・iPadなどのタブレット・パソコンなどさまざまな端末で表示できるWebサイトの制作方法（レスポンシブWebデザイン） コーディング規約「BEM」を使用したWebコーディング CSS拡張言語「Sass」を使用したWebコーディング Web制作に必須のJavaScriptの基礎実習 他のスクールでは学べない、AIを活用した効率の良いWeb制作の方法、AIを活用して卒業後に分からないことを質問するコツ |
|
| 受講方法（2種類選べます） | 渋谷の教室で受講（次回は2024年春開催予定） | ご自宅などで動画で受講（今すぐ受講可能） |
| 参加枠 | 渋谷の教室は最大12名程度 | 動画受講は人数制限なし |
| 参加費用 | 初回体験レッスン: 税込1,000円（全1回 2.5時間） | 本編: 税別 98,000円（税込 107,800円）（全6回 約30時間） |
| 必要なもの | 教室受講の場合、ノートPC（WindowsまたはMacBook）をご用意ください。動画受講の場合はデスクトップPCでも構いません。 必要な性能: VSCode、Chrome、YouTubeが動作するもの。現在販売されているほとんどのノートPCでは問題なく動作します。 レンタルノートPCでのご参加もOKです。 |
|
| 注意点 | 参加をご検討の方は、まず初回体験レッスンにご参加ください。初回体験レッスンのみの受講も可能です。 動画は生放送ではなく録画したものを、授業の翌日以降に視聴できるようにいたします。 教室受講の場合も動画の視聴は可能です。 |
他のスクールや書籍との違い
最新のWeb制作について学ぶために、今回から授業内容を大幅に書き直しています。
このスクールではHTML・CSSだけでなく、Sass、BEM、Emmet、JavaScript、AI支援技術などWeb制作の現場で必要とされる技術を一通り体験しながら学ぶことができます。
授業も「世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書」などのWebデザイン書籍を多数執筆している講師本人による授業の動画を視聴可能です。
（授業の動画はPCやスマートフォンなどからご覧いただけます。生放送ではなく録画です）
古いHTML5ではなく、最新のHTML Living Standard
多くのWebスクールや書籍では「HTML5」という勧告に基づいたHTMLを教えていますが、HTML5は2014年に勧告された古い仕様で、現在は廃止されています。
当スクールでは、「HTML Living Standard」に基づいた最新のHTMLを教えています。
すでにHTMLを学んだことがある方へ
このスクールでは、単に見た目をそれっぽく作るのではなく、「セマンティックHTML」とよばれる文章の意味や構造を重視したHTMLを学ぶことができます。
それにより、アクセシビリティの向上やSEOがやりやすくなり、運用しやすい（後から修正しやすい）Webサイトを作ることができます。
古いCSSではなく、新しいCSS
授業で制作するWebページは、floatとよばれる古いCSSレイアウト手法ではなく、flexboxとよばれるモダンな手法でレイアウトします。
また、最新のCSS拡張言語「Dart Sass」を使用したWebサイト制作実習も行います。
JavaScriptは基礎をしっかり
HTMLとCSSを学んだ後は、プログラミング言語（スクリプト言語ともいいます）のJavaScriptを学ぶことをお勧めします。
このスクールでは、全くプログラミング経験がない方でも理解できるように、JavaScriptの書き方を1から実習します。
今回から、JavaScript基礎の実習内容を全面改定しました。
開発環境は、Web開発で現在最も多くの方に使用されているVSCode（MicrosoftのVisual Studio Code）という無料のテキストエディターを使用し、Google Chromeの開発者ツールの使い方も初歩からお教えします。
モダンなJavaScriptの文法を学び、CSSのアニメーション機能とJavaScriptを連携したり、ボタンを押すと関数が実行されるといったWebページ制作でよくある処理の書き方を学びます。
その後、「スマートフォンサイトでメニューボタンをタップするとメニューがアニメーションしながら開く」「タブ切り替え」「一定時間ごとに画像が切り替わるスライダー（カルーセル）」をJavaScriptで制作する実習を行います。
制作物について、詳しくは以下の動画をご覧ください。
JavaScript基礎講座の内容は、すべて「Webコーディングスクール」に含まれています。
AIを活用した効率の良いコーディング
Web制作にご興味のある方であれば、ChatGPT、GPT-4といったチャットAIやAI支援技術を耳にしたことのある方もいらっしゃるかもしれません。
これらを使用するとHTML・CSS・JavaScriptなどのコーディング速度を劇的に向上させるだけでなく、Web制作の勉強中に分からないことがあったときに手助けをしてもらったり、自分で書いたJavaScriptのコードが動かなかったときにどこに問題があるか教えてもらうこともできます。
ただし、多くのWeb制作者の方は残念ながらAIが向いている用途と向いていない用途を知らず、向いていない用途で使おうとしている方が多いです。
そこでこのスクールでは他のスクールに先駆けて、WebコーディングにおけるAIの活用方法と注意点についてお話しして、AIを活用したコーディング実習も行います。
対象となる方について
このWebコーディングスクールは、以下のような方の受講を想定しています。
- Web制作の経験は全くなく、これからWeb制作を始めたい方
- 会社のWebページを作らなければいけなくなり、どうすれば良いかわからない方
- これからWeb制作会社に転職したい方
- Web制作の仕事をしていて昔のHTML・CSSは学んだことがあるが、スマートフォンにも対応したWeb制作や、モダンなコーディング手法について知りたい方
- Web制作の仕事をしていて基礎から学び直したい方、これまでPCサイトばかり制作していてスマートフォン対応などどうすれば良いかわからないので学びたい方
受講生の方は、Web制作未経験でWeb制作会社等への転職を考えている方、将来独立を考えてスキルアップのために通われる方、趣味でWeb制作を始めてみたい方など様々な方がいらっしゃいます。
分からないことがあった場合は、メールにてご質問頂くことが可能です。
メールで解決しなかった場合やご相談したいことがある場合は、2回までZoomやGoogle Meet等のビデオ会議にてご質問頂けます。
受講に必要なスキル
受講の際は、以下のことができる必要があります。
- Windows または Mac の基本的な操作（文字入力、記号の入力、文字列のコピーやペースト、ファイルのコピー、移動、削除など）ができる方
できない方は、パソコン入門書を読むなどして必ず事前に基本操作ができるようになっておいてください。
Macの基本操作は、このブログの以下の連載記事に掲載していますので、こちらをお読みください。
※Web制作、Webデザイン制作、プログラミングの経験のない方、HTMLやCSSを知らない方もご参加いただけます。
料金
受講料は以下の通りです。入学金等はありません。
本編の授業時間は約30時間です。
基本的に銀行振込でのお支払いをお願いしております。希望される方はクレジットカードやPayPalでのお支払いも可能です。
- 最初にまとめて支払った場合: 税別 ¥98,000（税込 ¥107,800）
- 分割払いの場合: 受講前に 税別 ¥55,000、4回目の授業の前に 税別 ¥55,000 合計 税別 ¥110,000（税込 ¥121,000）
会場
教室受講の場合、渋谷駅から徒歩5分の「HIDAMARI」とよばれる会場にて開催します。
12名程度着席できる綺麗な教室です。
住所: 東京都渋谷区桜丘町29-35
会場への詳しい行き方は、お申し込みの方にメールでご連絡いたします。
動画受講の場合は、YouTubeなどの動画が閲覧できる端末（スマートフォン、iPad、パソコン）があればどこでもご覧頂けます。
ご興味ある方は初回体験レッスンをどうぞ
初回体験レッスンでは、Web制作未経験の方もご理解頂けるように、最新のHTMLとCSSの基礎とVSCodeの使い方を学びます。
その後、スマートフォンにも対応したHTMLとCSSの書き方の実習で、Wikipedia風のページを作ります。
初回体験レッスンは1,000円です。↓の「初回体験レッスンお申し込み」フォームよりお申し込みいただけます。
初回体験レッスンは渋谷での受講が可能です。渋谷にお越し頂くことが難しい方は、ご自宅にて動画で初回体験レッスンの受講が可能です。
動画受講をご希望の場合、初回体験レッスンへのお申し込みフォームの［ご希望日時］欄は［動画受講］を選択してください。
授業内容
以下の内容を学ぶことができます。
- 最新のHTML・CSS入門
- 現在のWeb制作、スマートフォン対応事情
- レスポンシブWebデザインによるWebページ制作方法
- ブログ風のWebページコーディング
- CSSの命名規則による破綻しにくく運用しやすいWebサイトの作り方
- SassとBEMを使用して効率よくコーディングする方法
- 旅館風Webページコーディング
ブログ風Webページの制作
授業の前半には、シンプルなブログ風Webページを制作しながらマークアップの基礎とHTML・CSSの書き方を学んでいきます。
▲ブログ風Webページ・PC版制作例
▲ブログ風Webデザイン・スマートフォン版制作例
ブログ風のWebページは文書構造、マークアップの学習のために制作します。
このWebページは、floatではなくflexboxとよばれるモダンな手法でレイアウトします。
ただし、古い案件の改修などでfloatを使用することもあるかと思いますので、ブログ風サイトに関しては最初にfloatでレイアウトしてからflexboxでレイアウトをやり直すことで、どちらにも対応できるように学びます。
実際にWordPressなどでブログとして動かすには、PHPを使用してWordPressテーマ形式にする必要があります。WordPressテーマの制作方法は、別途WordPressカスタマイズ講座でやります。
旅館風Webページの制作
その後、旅館風Webサイト制作を行います。
ブログよりもやや難易度が高くなっています。
こちらはDart Sassと呼ばれる最新のCSS拡張言語を使用して制作します。
▲旅館風Webページ・PC版制作例
▲旅館風Webページ・スマートフォン版制作例
動画
Webブラウザーの幅を変更すると、このように動作します。
スマートフォンでご覧の方は、動画左下の再生ボタンを押してご覧ください。
リード文（「温かみのある建物…」のテキスト部分）は、普通にコーディングすると中途半端な位置で改行されてしまいますが、このサンプルでは読みやすい位置で改行されていることがお分かり頂けると思います。
写真が3つ並び、写真の上のキャプション（写真の説明文）が表示されている箇所はPCとスマートフォンでかなりレイアウトが異なりますが、1つのHTMLで対応しています。
Googleマップも、CSSを使用してレスポンシブに対応させています。
講師紹介
庄崎大祐
このブログを執筆している人です。Adobe 公式サイトにWebデザイナー向けに Photoshop の新機能を紹介する記事を書いたりしています。
以下の本の執筆もしています。
書籍「プロになるためのWebデザイン入門講座」は、いくつかの専門学校でWebデザインコースの教科書として採用されています。
しかし、発売が2013年で内容が古くなっているため、Web制作の基礎から学べる「Webコーディングスクール」では全く新しい内容となっています。
過去には、以下の雑誌にWebデザインに関する記事を執筆しています。
- Web Designing
- MdN（デザイン情報誌）
Schoo（スクー）という社会人向けオンライン学習コミュニティでは、Webデザイン、WordPress、CSS命名規則などのオンライン講座の講師をしています。
以下のイベントでも講演しています。どれも現役Web制作者向けのセミナーとして人気のあるものです。
- CSS Nite（テーマ: Webデザインで使うPhotoshop）
- WordCamp（テーマ: WordPressでブログをデザインするときに気をつけていること、WordPressでWebアプリケーションを制作する方法）
必要なもの
- ノートパソコン（Windows PC または MacBook）
※Adobe CC（Creative Cloud）は不要です。 HTML・CSS・JavaScriptなどのコーディングの際は、オープンソースで無償のテキストエディターを使用します。
受講者特典
授業の動画の提供
このスクールでは、授業の動画（PC画面+講師の音声）を提供します。
ご自宅での復習の際などにご活用ください。
遠方にお住まいの方、日程が合わない方などは初回体験レッスンから本編すべて、動画受講することが可能です。
初回体験レッスンの動画受講をご希望の方は、初回体験レッスンお申し込みフォームにて［日程］から［動画受講］をお選びください。
無料の補講レッスン
補講レッスンは、授業についてこられない方がいらっしゃる場合、合計2回まで開催します。
授業でわからないことがあった場合、まずは授業前後の時間にご質問頂くか、メール等でご質問頂き、それでもついてくることが難しい場合は補講を申請してください。
補講は2回まで無料で受講頂けます。
補講は渋谷近辺のコワーキングスペースまたはカフェ、動画受講の方の場合はZoomまたはGoogle Meetなどのビデオ通話アプリなどを使用してリモートで受講頂けます。
卒業後のサポート
本編受講後にWeb制作関連でご質問があった場合、半年間はメール等でサポートいたします。
よくある質問
Web制作・Webデザインは全くの未経験ですが、受講できますか？
当スクールは「パソコンの基本操作はできるが、Web制作は初めて」でも受講頂けるレッスンですので、Windows や Mac の基本操作ができる方であれば大丈夫です。
※基本操作とは、文字入力や文字の編集（コピー、ペースト等）、ファイル操作（ファイルの移動、コピー、削除等）ができることを指します。
Windowsのノートパソコン（またはMacBook）しか持っていませんが受講できますか？
授業で使用するテキストエディターは Windows・Mac どちらにも対応しており、それらを使用して授業をすすめますのでどちらでも受講可能です。
Adobe Photoshop CCやDreamweaver CCなどを持っていませんが受講可能ですか？
受講可能です。授業では、オープンソースで無償のテキストエディターを使用します。
遅刻・欠席するかもしれませんが、受講可能ですか？
仕事の都合などで遅刻または欠席される方はいますが、ほとんどの方は最後まで受講されています。
受講生向けに授業の動画を用意しますので、受講できなかった部分も動画で復習可能です。分からないことがあれば受講生向けAI回答サービスやメールでもご質問いただけます。
また、どうしてもついて来られない方がいらっしゃった場合は、授業全体で最大2回まで無料の補習を開催しております。
授業を欠席された方は、まずは動画やテキストなどで復習いただき、分からないところがあればご質問ください。それでもついてこれない場合は補習を申請してください。
東京に住んでいない、授業時間に行くことができないのですが…
渋谷の教室にお越し頂くことが難しい場合、授業の動画で受講頂くことが可能です。
その場合、受講料は同じで、ご質問があった場合はメールにてご質問頂けます。
2回までの補講は、ZoomまたはGoogle Meetなどのビデオ通話アプリでも受講可能です。
未成年でも受講できますか？
当スクールは社会人向けですので、未成年者の方の受講はお断りさせていただいております。
初回体験レッスンについて
Web制作の基礎から学べる2時間半のレッスンを、体験レッスンとしてご参加いただけます。
初回体験レッスンの内容と受講特典
初回体験レッスンでは、以下の内容を予定しております。
- スライド: 「文章をマークアップする」とはどういうことか
- スライド: HTML・CSSの役割
- スライド: 「レスポンシブWebデザイン」とは何か
- 実習: HTML・CSSを書いて、Google Chromeでライブプレビューしてみよう
- 実習: PCだけでなくスマートフォンにも対応した「レスポンシブWebデザイン」のページをコーディングしよう
- 実習: メディアクエリとFluid Images（サイズ可変な画像）の使い方
受講特典として、授業の動画をご覧いただけるようにいたします。
体験レッスンに必要なもの
- 筆記用具
- Windows PCまたはMacBook
初回体験レッスンのお申し込み
体験レッスンのお申込は、以下のフォームからお願い致します。
本編に正式お申込みされる方は、必ず初回体験レッスンにもお申込みください。
体験レッスンへのお申し込みではなくご質問のみある場合や、初回体験レッスンにお申し込み頂いたにもかかわらず自動返信メールが届かない場合などは、お問い合せフォーム にて「Webコーディングスクールについて」という旨書いた上でお問い合わせください。
Webコーディングスクール「初回体験レッスン」お申し込み
Webコーディングスクール体験レッスンへのお申込みはこちら。
正式お申込みはこちら
初回体験レッスンではなく本編に正式お申し込みはこちらからどうぞ。
正式お申込みされる方は、必ず↑のフォームから初回体験レッスンにもお申込みください。
お申し込みではなくご質問のみある場合は、お問い合せフォーム にて「Webコーディングスクールについて」という旨書いた上でお問い合わせください。
Webコーディングスクールお申し込み