Web制作の基礎から学べる「Webコーディングスクール」をオンラインと渋谷で開催します

Web制作の基礎から学べる「Webコーディングスクール」をオンラインと渋谷で開催します

こんな悩みはありませんか?

最新のHTML・CSSを学びたいが、どうすれば良いか分からない

WordPressや、AIを活用したプログラミングを学びたいが…

東京まで行けないが、オンラインでも学べるスクールはある?

当スクールをご体験ください!

期間限定で、初回体験レッスンの受講を無料としております(オンライン動画と、渋谷の教室の両方)。この機会にぜひご体験ください。

1
古いHTML5ではなく、最新のHTML Living Standardを学べます

多くのWebスクールや書籍では「HTML5」という勧告に基づいたHTMLを教えていますが、HTML5は2014年に勧告された古い仕様で、現在は廃止されています。

HTML5は廃止されました

当スクールでは、「HTML Living Standard」に基づいた最新のHTMLを教えています。

このスクールでは、単に見た目をそれっぽく作るのではなく、「セマンティックHTML」とよばれる文章の意味や構造を重視したHTMLを学ぶことができます。
それにより、アクセシビリティの向上やSEOがやりやすくなり、運用しやすいWebサイトを作ることができます。

古いCSSではなく、新しいCSS

授業で制作するWebページは、floatとよばれる古いCSSレイアウト手法ではなく、flexboxとよばれるモダンな手法でレイアウトします。

また、世界中で多くの方が使用しているCSS命名規則「BEM」や、最新のCSS拡張言語「Dart Sass」を使用したWebサイト制作実習も行います。

2
AIを活用した効率の良いコーディングやプログラミング

Web制作にご興味のある方であれば、「ChatGPT」、「GitHub Copilot」といったチャットAIやAI支援技術を耳にしたことのある方もいらっしゃるかもしれません。

これらを使用するとHTML・CSS・JavaScriptなどのコーディング速度を劇的に向上させるだけでなく、Web制作の勉強中に分からないことがあったときに手助けをしてもらったり、自分で書いたJavaScriptのコードが動かなかったときにどこに問題があるか教えてもらうこともできます。

ただし、多くのWeb制作者の方は残念ながらAIをあまり使いこなしているとは言いがたく、AIを活用する前提のプログラミングを教えているスクールは日本にはほとんど存在しません。

このスクールでは、他のスクールに先駆けて本格的にAIを活用したコーディング実習も行います。
ChatGPTのような有名なAIだけでなく、スクール独自の「Web制作初心者のために開発したAIアプリ」も使用します。

スクール独自のAIアプリについて

スクール独自のAIアプリは2つあります。1つめの「難しい概念を、理解できるまで分かりやすく解説するAI」は、学習者一人一人の理解度に合わせた、パーソナライズされた指導を提供することが可能です。これは、従来の一方通行の授業や教材では難しいことです。

2つめは「楽にプログラミングするためのAI」です。学習者は実際のコーディング作業をよりスムーズに進めることができるようになります。これは、プログラミング学習の初期段階で直面する壁を低減するのに役立ちます。

このスクールの講師はJavaScriptやPythonを使用したWebアプリ開発もしていますが、実際に使用しているAIアプリとほぼ同じものを受講生の皆様に提供します。
受講中は無料で利用でき、卒業後も月数百円程度で利用できるようにする予定です。

これからWeb制作を始めたい方、スクール卒業後に1人でプログラミングしなければならなくなった方などの強い味方になると確信しています。

WordPressを活用したWebサイト制作

これからWeb制作をはじめる方で、WordPressを活用したWeb制作をされたい方は、以下の順序で学ぶことをお勧めします。

Webコーディングスクール

HTMLとCSSを学ぶ

プログラミングを学ぶ

WordPress講座

WordPress開発について学ぶ

ゴール

WordPressで仕事をしたい方、WordPressでウェブサイト制作をしたい方は、まずHTMLとCSS、プログラミングの基礎を勉強することをお勧めします。このWebコーディングスクールでは、それらを効率よく学ぶことができます。
その後開催予定の「WordPress講座」でWordPressを使用したWebサイト制作について深く学ぶことができます。
「WordPress講座」はWebコーディングスクールとは別に開催されますが、Webコーディングスクールを受講された方は特別割引料金で受講することができます。

3
東京まで行けないが、オンラインでも学べるスクールはある?

昨年までは渋谷の教室に力を入れていましたが、動画受講を希望される方が多いため、現在はオンライン(動画)の授業にも力を入れております。
単に動画を観て終わりではなく、実際にテキストエディターを使用して制作したり、AIを使用して自分が内容を理解できているか確認したりといった授業もあります。
動画は撮って出しではなく、ノイズを減らす処理をして、余計な部分をカットするなど観やすく編集しております。
再生速度も0.75倍〜2倍など自由に変更できるため、「早いペースだとついていけない」「1.5倍速で早く観たい」といった方にもお勧めです。

今なら体験レッスン無料です。

期間限定で、初回体験レッスンの受講を無料としております(オンライン動画と、渋谷の教室の両方)。この機会にぜひご体験ください。

スクールの概要

開催テーマ Web制作の基礎から学べる「Webコーディングスクール」
対象者(どちらの方もOK) Web制作完全未経験、初心者の方 過去にWeb制作をしたことがあるが、最近の制作手法を知りたい方 AIを活用したコーディングやプログラミングに興味がある方
スクールの内容 Web制作は初めての方のための、最新のHTML・CSSの基礎知識
スマートフォン・iPadなどのタブレット・パソコンなどさまざまな端末で表示できるWebサイトの制作方法(レスポンシブWebデザイン)
コーディング規約「BEM」を使用したWebコーディング
CSS拡張言語「Sass」を使用したWebコーディング
Web制作に必須のJavaScriptの基礎実習
[今回から]当スクール独自のAIアプリを使用した「分からないことをわかりやすく教えてくれるAI」、「効率の良いコーディングやプログラミングAI」の利用権と使い方の解説
受講方法(2種類選べます) 渋谷の教室で受講 ご自宅などで動画で受講
参加枠 渋谷の教室は最大10名程度 動画受講は人数制限なし
参加費用 初回体験レッスン: 税込1,000円 期間限定で無料 (全1回 2.5時間) 本編: 税別 98,000円(税込 107,800円)(全6回 約35時間)
必要なもの 教室受講の場合、ノートPC(WindowsまたはMacBook)をご用意ください。動画受講の場合はデスクトップPCでも構いません。
必要な性能: VSCode、Chrome、YouTubeが動作するもの。現在販売されているほとんどのノートPCでは問題なく動作します。
レンタルノートPCでのご参加もOKです。
注意点 参加をご検討の方は、まず初回体験レッスンにご参加ください。初回体験レッスンのみの受講も可能です。
動画は生放送ではなく録画したものを、授業の翌日以降に視聴できるようにいたします。
教室受講の場合も動画の視聴は可能です。

スクールの詳細

以下の灰色の枠をタップすると、それぞれの項目の詳細を表示します。

授業内容と制作物について

授業内容

以下の内容を学ぶことができます。

  1. 最新のHTML・CSS入門
  2. 現在のWeb制作、スマートフォン対応事情
  3. レスポンシブWebデザインによるWebページ制作方法
  4. ブログ風のWebページコーディング
  5. CSSの命名規則による破綻しにくく運用しやすいWebサイトの作り方
  6. SassとBEMを使用して効率よくコーディングする方法
  7. 旅館風Webページコーディング
  8. JavaScriptの基礎
  9. [今回から]当スクール独自のAIアプリを使用した「分からないことをわかりやすく教えてくれるAI」、「効率の良いコーディングやプログラミングAI」

ブログ風Webページの制作

授業の前半には「ブログ風Webページ」を制作しながら、マークアップの基礎とHTML・CSSの書き方を学んでいきます。

ブログ風Webページ・PC版制作例
▲ブログ風Webページ・PC版制作例
ブログ風Webデザイン
▲ブログ風Webデザイン・スマートフォン版制作例

ブログ風のWebページは、文書構造とマークアップの学習のために制作します。
このWebページは、floatではなくflexboxとよばれるモダンな手法でレイアウトします。

実際にWordPressなどでブログとして動かすには、PHPを使用してWordPressテーマ形式にする必要があります。WordPressテーマの制作方法は、別途WordPressカスタマイズ講座でやります。

その後、旅館風Webサイト制作を行います。
ブログよりもやや難易度が高くなっています。
こちらはDart Sassと呼ばれる最新のCSS拡張言語を使用して制作します。

Webブラウザーの幅を変更すると、このように動作します。スマートフォンでご覧の方は、動画左下の再生ボタンを押してご覧ください。

リード文(「温かみのある建物…」のテキスト部分)は、普通にコーディングすると中途半端な位置で改行されてしまいますが、このサンプルでは読みやすい位置で改行されていることがお分かり頂けると思います。

写真が3つ並び、写真の上のキャプション(写真の説明文)が表示されている箇所はPCとスマートフォンでかなりレイアウトが異なりますが、1つのHTMLで対応しています。

Googleマップも、CSSを使用してレスポンシブに対応させています。

JavaScriptは基礎をしっかり

HTMLとCSSを学んだ後は、プログラミング言語(スクリプト言語ともいいます)のJavaScriptを学ぶことをお勧めします。
このスクールでは、全くプログラミング経験がない方でも理解できるように、JavaScriptの書き方を1から実習します。

開発環境は、Web開発で現在最も多くの方に使用されているVSCode(MicrosoftのVisual Studio Code)という無料のテキストエディターを使用し、Google Chromeの開発者ツールの使い方も初歩からお教えします。

モダンなJavaScriptの文法を学び、CSSのアニメーション機能とJavaScriptを連携したり、ボタンを押すと関数が実行されるといったWebページ制作でよくある処理の書き方を学びます。

その後、「スマートフォンサイトでメニューボタンをタップするとメニューがアニメーションしながら開く」「タブ切り替え」「一定時間ごとに画像が切り替わるスライダー(カルーセル)」をJavaScriptで制作する実習を行います。

制作物について、詳しくは以下の動画をご覧ください。

講師紹介

庄崎大祐

このWeb制作者向けブログを執筆している人です。

世界最大のWordPressのイベント「WordCamp」に登壇したり、写真撮影などのスタッフをしています。

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アプリケーションを制作する方法)
よくある質問

Web制作・Webデザインは全くの未経験ですが、受講できますか?

当スクールは「パソコンの基本操作はできるが、Web制作は初めて」でも受講頂けるレッスンですので、Windows や Mac の基本操作ができる方であれば大丈夫です。

※基本操作とは、文字入力や文字の編集(コピー、ペースト等)、ファイル操作(ファイルの移動、コピー、削除等)ができることを指します。

東京に住んでいない、授業時間に行くことができないのですが…

渋谷の教室にお越し頂くことが難しい場合、授業の動画で受講頂くことが可能です。
その場合、受講料は同じで、ご質問があった場合はメールにてご質問頂けます。

3回までの補講は、ZoomまたはGoogle Meetなどのビデオ通話アプリでも受講可能です。

Windowsのノートパソコン(またはMacBook)しか持っていませんが受講できますか?

授業で使用するテキストエディターは Windows・Mac どちらにも対応しており、それらを使用して授業をすすめますのでどちらでも受講可能です。

有料版のChatGPTや、GitHub Copilotなどの契約は必要ですか?

初回体験レッスンや授業本編の受講にあたり、ChatGPT Plus(有料版)や、GitHub Copilotの契約は「不要」ですのでご安心ください。
本編にお申し込みの方には、「Web制作初心者の方やプログラミング初心者の方が使いやすいようにスクール独自に開発したAI」を無料で利用できるようにします。
これは、ChromeなどのWebブラウザーで動作するWebアプリケーションです。

卒業後も、「APIキー」と呼ばれるものを使用することで、1日あたり10回利用した場合は月数百円程度で利用できるようにする予定です。(全く利用しなかった月は0円です)
もし、ChatGPT Plus(有料版)を契約されていれば、追加料金なしでご利用頂けます。

他のAIとしては、「Codeium」というプログラミング用の補完AIを使用する予定です。
CodeiumはGitHub Copilotと似ていますが、CSSなども補完できて、今登録すれば無料で使えます。
Codeiumについては、ちょうどブログトップページで使い方の動画を公開していますので、ご興味あればそちらをご覧ください。

Adobe PhotoshopやDreamweaverなどを持っていませんが受講可能ですか?

受講可能です。授業では、Visual Studio Codeという無償のテキストエディターを使用します。

教室受講希望で、遅刻・欠席するかもしれませんが、受講可能ですか?

仕事の都合などで遅刻または欠席される方はいますが、ほとんどの方は最後まで受講されています。

受講生向けに授業の動画を用意しますので、受講できなかった部分も動画で復習可能です。分からないことがあればメールや、受講生向けAI回答サービスでもご質問いただけます。

また、どうしてもついて来られない方がいらっしゃった場合は、授業全体で最大2回まで無料の補習を開催しております。

授業を欠席された方は、まずは動画やテキストなどで復習いただき、分からないところがあればご質問ください。それでもついてこれない場合は補習を申請してください。

JavaScriptのみ、WordPressのみ受講したい方へ

既にモダンなHTML・CSSを書ける方は「SassとBEMのみ」「JavaScriptのみ」「WordPressのみ」といった受講も可能です。

新JavaScript基礎講座 は今すぐ動画受講が可能です。

Dart SassとBEM講座 も今すぐ動画受講が可能です。

WordPress講座 は今後リニューアルし、動画開催を予定しております。

HTML・CSSの知識に不安を感じる方や、スマートフォンにも対応した新しいHTML・CSSをこの機会に学びたい方、これからWeb制作業界で働きたい方は、この「Webコーディングスクール」で、HTML・CSSの基礎からSass、BEM、プログラミングの基礎、JavaScriptなど一通り学ぶことをお勧めします。

渋谷の教室での受講をご検討の方へ

初回体験レッスンについて

現在、初回体験レッスンの渋谷での開催日程は以下の通りです。

  • 3月14日(木)19:30-22:00
  • 3月23日(土)16:30-19:00

本編の開催曜日と時間について

現時点では、渋谷の教室の開催曜日と時間は以下の候補のうちどれかにする予定です。

  • 木曜 19:30-22:00(週1回)
  • 土曜日 14:00-19:00(週1回)
  • 月曜日と木曜日 20:00-22:30(週2回)

渋谷の教室での受講を希望される方は、体験レッスンお申し込みフォームのご質問欄に「希望する開催曜日と時間」をお書きください。複数回答OKです。

開催時期について

教室での授業は、3月下旬または4月上旬の開始を予定しております。

本編の開催形式について

同じ曜日と時間を希望される方が、複数いらっしゃる場合: 授業のほぼ全編を渋谷の教室で開催します。

複数いらっしゃらない場合: まずは動画で受講いただき、対面で学びたい箇所があればそこを渋谷で学ぶことができます。希望される場合は、メールやZoomなどのビデオミーティングも可能です。 動画受講の場合もビデオミーティングは可能です。(お一人につき最大3回まで)

受講者の皆様から頂いたご感想

最初の3つは初回体験レッスンのご感想、最後の1つは本編受講後に頂いたご感想です。

初心者でも大変わかりやすく、楽しく受講できる講座でした

コーディングは毎回挫折していますが、最新の情報をわかりやすく親切に教えていただけるのでもっと学びたいと思う気持ちになる講座でした。
少しでもわからないことがあれば、先生がすぐに対応してくださり、初心者でも不安なく受講できる講座だと思います。
コーディングを学ぶきっかけづくりに大変効果があります。

タグの基礎がまるっと学べる講座でした

タグの語源や意味などしっかり教えていただけるので、今までなんとなく覚えていた内容を深く理解することが出来ました。ちょっとした裏技などもためになりました!

短時間で効率良く、より必要なもの、ニーズの高いものが初心者からでも学べる講座

想定以上に入門ながらもより実践的で、活用可能な知識が短時間でコーディング初心者の私でも学べました。

私はもともと、Web制作が本業の職場に勤めていたわけではなかったので職場にHTMLやCSSに詳しい人もおらず、 ネットや本で情報を収集して独学でなんとかWeb制作業務に携わっていました。

独学での勉強にそろそろ限界を感じはじめていた頃、コーディングやデザインの参考にさせて頂いていたStocker.jpにてWebスクールの募集が開始されていました。

他のWebスクールなども検討していたのですが、ブログの執筆者である庄崎大祐さんから直接ご指導頂ける機会ということだったので、思い切ってこちらを選ばさせて頂きました。

授業の内容としては、HTMLやAdobe製品を全く触ってことない人でも十分ついていけるくらい丁寧でわかりやすいものでした。少人数なので、わからないことがあったらその場で質問することができますし、授業前、あるいは授業後に直接質問することもできます。
もし気になることがあったらメールにて質問を投稿することもできます。

独学でもある程度学ぶことはできますが、どうしても知識が偏りがちなのでその部分はスクールに通うことによって改善することができました。

自分の例でいえば、HTMLとCSSは独学で普通の人よりは書けるつもりでいましたが、そもそもHTMLは論理的な記述のみで装飾に関するコードはCSSで行うという基本思想をスクールに通うまで知らずに書いていました。
趣味レベルならいいかもしれませんが、実務レベルでサイトを作るならこの認識の欠如は致命的です。庄崎先生のスクールではそのへんも踏まえた、実務レベルでの記述方法を教えて頂くことができます。

初回体験レッスンについて

Web制作の基礎から学べる約2時間半のレッスンを、体験レッスンとしてご参加いただけます。

初回体験レッスンの内容と受講特典

初回体験レッスンでは、以下の内容を予定しております。

  • スライド: HTML・CSSの基礎
  • スライド: 「レスポンシブWebデザイン」とは何か
  • 実習: HTML・CSSを書いて、Google Chromeでライブプレビューしてみよう
  • 実習: PCだけでなくスマートフォンにも対応した「レスポンシブWebデザイン」のページをコーディングしよう
  • 実習: メディアクエリとFluid Images(サイズ可変な画像)の使い方
  • スライド: ChatGPTをWeb制作やプログラミングにどう活かすか

受講特典として、授業の動画をご覧いただけるようにいたします。

体験レッスンに必要なもの

  • Windows PCまたはMacBook

初回体験レッスンのお申し込み

体験レッスンのお申込は、以下のフォームからお願い致します。
本編に正式お申込みされる方は、必ず初回体験レッスンにもお申込みください。

体験レッスンへのお申し込みではなくご質問のみある場合や、初回体験レッスンにお申し込み頂いたにもかかわらず自動返信メールが届かない場合などは、お問い合せフォーム にて「Webコーディングスクールについて」という旨書いた上でお問い合わせください。

Webコーディングスクール「初回体験レッスン」お申し込み

期間限定で、初回体験レッスンの参加費用を無料としております。この機会にぜひご視聴ください。

ご希望日時と受講方法(動画受講をご希望の方は[動画で受講]を選択

※必ずパソコンのメールアドレスをご登録ください。ドコモ・ソフトバンク・auのメールアドレスは不可です。
※Hotmail、Outlook.comなど、Microsoftのメールサービスでは自動返信メールが届かないことがあります。お手数ですが他のメールアドレスでお申し込みください。
※メールアドレスの間違いでメールが届かないことが非常に増えています。メールアドレスを再度ご確認ください。

正式なお申込みはこちら

初回体験レッスンではなく本編に正式お申し込みはこちらからどうぞ。
正式お申込みされる方は、必ず↑のフォームから初回体験レッスンにもお申込みください。

お申し込みではなくご質問のみある場合は、お問い合せフォーム にて「Webコーディングスクールについて」という旨書いた上でお問い合わせください。

Webコーディングスクールお申し込み

※必ずPCのメールアドレスをご登録ください。ドコモ・ソフトバンク・auのメールアドレスは不可です。
※メールアドレスの間違いでメールが届かないことが非常に増えています。メールアドレスを再度ご確認ください。

希望する受講方法

最近の記事

Web制作関連動画

メルマガ会員向けの「コーダーにも役立つ補完AI『Codeium』の使い方」の動画を期間限定で公開しています。
CodeiumはGitHub Copilotと似ていますが、CSSなども補完できて、今登録すれば無料で使えます。

メルマガでは、Web制作者のためのAI活用やWordPress関連の動画など、さまざまな特典があります。ご興味ある方は、ぜひメルマガにご登録ください。
Index