「スマートフォン時代のWebコーディングスクール」は、これからWeb制作者になりたい方向けに以下の内容を動画で学べる社会人向けのスクールです。
現在、COVID-19感染拡大防止のため渋谷の教室での授業は休止しておりますが、ご自宅にて動画で受講頂くことが可能です。

Web制作は初めての方のための、最新のHTML・CSSの基礎知識
スマートフォン・タブレット・パソコンなどさまざまな端末で表示できるWebサイトの制作方法
1つのページをさまざまな端末で表示させるための「レスポンシブWebデザイン」の基礎知識
今時のWebコーディングに必須のCSS拡張言語「Sass」を使用したWebコーディング
JavaScript・jQueryの基礎実習
他のスクールでは学べない、効率の良いWeb制作の方法

【期間限定特典】5つの講座の動画を無料で視聴頂けます

コーディングスクールにお申し込みいただいたへの特典として、以下の講座の動画を無料で視聴いただけるようにします。

HTML5再入門講座
ドラッグ＆ドロップではじめるプログラミング入門講座
Web制作者のための黒い画面（ターミナル）入門講座
Web制作に役立つIllustrator入門講座
Photoshop・IllustratorユーザーのためのAffinity講座

※教室受講でお申し込みいただいた方・動画受講でお申し込みいただいた方どちらもこの特典を差し上げます。
※動画は生放送ではなく録画したものとなります。視聴期限はございません。
※初回体験ではなく、本編にお申し込みいただいた方限定の特典となります。

【期間限定特典】動画受講料金を割引いたします

「スマートフォン時代のWebコーディングスクール」本編の動画受講に2020年12月末までにお申し込みの方に限り、通常税別98,000円の受講料を2万円引きの税別78,000円といたします。

動画受講の場合、今すぐ本編を受講することが可能です。flexboxなどの新しい内容も含まれます。
ご自宅にいる時間を利用して新しい技術を身につけるために、ぜひご利用頂ければと思います。

※お申し込みフォームにて［動画受講］をご選択頂いた場合のみ、2万円引きの税別78,000円で受講頂けます。

新しいWeb技術、新しい制作手法、新しい端末などに対応するため、授業内容は毎年リニューアルしています。

他のスクールや書籍との違い

古いHTML5ではなく、最新のHTML Living Standard

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

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

そして、HTML・CSSだけでなく、Sass、BEM、Emmet、JavaScript、jQueryなどWeb制作の現場で必要とされる技術を一通り体験しながら学ぶことができます。

授業も「世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書」などのWebデザイン書籍を執筆している講師によるライブ授業+授業に出席できなかった場合や復習のため、授業の動画を視聴可能です。

授業テキスト（教科書）はこのスクールのために書き下ろしたもので、毎年最新の内容に書き直しています。
テキストはPCやスマートフォンなどからご覧いただけます。

Flexboxに対応

CSSによるWebページのレイアウトは長い間floatが使用されていましたが、現在はFlexboxやCSS Grid Layoutといった新しい手法も使われ始めています。

このスクールでは、floatだけでなくFlexboxを使用したレイアウトについても学ぶことができます。

iPhone X・iPhone 11にも対応

iPhone XやiPhone 11ではディスプレイが長方形ではなく複雑な形になっているため、従来のスマートフォン対応サイトでは重要なボタンや文字列などが欠けたり見えなくなってしまう場合がある ことが確認されています。

そこで、「スマートフォン時代のWebコーディングスクール」では授業の中でiPhone X・11に対応したスマートフォンサイトコーディングも解説することにいたしました。

現時点でiPhone X・11に対応したスマートフォンサイトコーディングを解説している本はなく、他のスクールでも学べない内容となっております。

この画像は、iPhone Xでメインビジュアルのような写真はデバイスの端まで表示、本文のようなテキストはセーフエリア内に表示するデモです。

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

約32時間のレッスンのうち、2時間半のレッスンを「初回体験レッスン」として~~1,000円~~ 期間限定で無料で視聴いただけます。

初回体験レッスンはHTML・CSSの基礎だけでなく、以下のことがわずか2時間半・~~1000円~~ 無料で学べます。

※12月末まで、初回体験レッスンの動画受講は無料とします。この機会にぜひどうぞ。

スマフォ対応に欠かせない viewport 指定の意味
-webkit-text-size-adjust とは？なぜ必要なの？
自分が持っていないスマフォやタブレットの表示確認はどうする？
Chrome開発者ツールの使い方
レスポンシブWebデザインとは
Fluid Images（サイズ可変な画像・動画）の使い方
CSS3 Media queries（メディアクエリ）の記述方法

初回体験レッスンへのお申し込みは以下のリンクからどうぞ。
Webコーディングスクール「初回体験レッスン」お申し込み

※本編の受講をご検討頂いているにもかかわらず初回体験レッスンの日程が合わない方、渋谷までお越し頂くのが難しい方は、ご自宅にて動画で初回体験レッスンの受講が可能です。初回体験レッスンへのお申し込みで［ご希望日時］欄で［動画受講］を選択してください。

本編について

本編は動画で受講頂けます（今期は渋谷の教室での開催はありません）。

Web制作は完全未経験の方でもHTML・CSSの基礎から、スマートフォンに対応したレスポンシブWebデザインがしっかり学べる内容になっております。
料金も入学金なしで~~税別 98,000円~~ 期間限定で税別 78,000円と、一般的なWebスクールよりもかなり低価格です。

対象となる方について

このWebコーディングスクールは、以下のような方の受講を想定しています。

Web制作の経験は全くなく、これからWeb制作を始めたい方
会社のWebページを作らなければいけなくなり、どうすれば良いかわからない方
これからWeb制作会社に転職したい方
Web制作の仕事をしていてHTML・CSSの基礎は学んだことがあるが、スマートフォンにも対応したWeb制作や、Sassを使用したモダンなコーディング手法についても知りたい方
Web制作の仕事をしていて基礎から学び直したい方、これまでPCサイトばかり制作していてスマートフォン対応などどうすれば良いかわからないので学びたい方

受講生の方は、Web制作未経験でWeb制作会社等への転職を考えている方、将来独立を考えてスキルアップのために通われる方、趣味でWeb制作を始めてみたい方など様々な方がいらっしゃいます。

分からないことがあった場合は、メールにてご質問頂くことが可能です。
メールで解決しなかった場合やご相談したいことがある場合は、2回までSkype等のビデオ会議にてご質問頂けます。

ご興味ある方は初回体験レッスンをどうぞ

ただいま、このスクールの初回体験レッスンを動画で受講できます。
初回体験レッスンは以下の内容を学ぶことができます。

スライド: 「文章をマークアップする」とはどういうことか
スライド: HTML・CSSの役割
スライド: 「レスポンシブWebデザイン」とは何か
実習: HTML・CSSを書いて、Google Chromeでライブプレビューしてみよう
実習: PCだけでなくスマートフォンにも対応した「レスポンシブWebデザイン」のページをコーディングしよう
実習: メディアクエリとFluid Images（サイズ可変な画像）の使い方

初回体験レッスンは~~1,000円~~です。↓の「初回体験レッスンお申し込み」フォームよりお申し込みいただけます。

※12月末まで、初回体験レッスンの動画受講は無料とします。この機会にぜひどうぞ。

初回体験レッスンも、ご自宅にて動画で初回体験レッスンの受講が可能です。初回体験レッスンへのお申し込みフォームの［ご希望日時］欄は［動画受講］を選択してください。

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

このWebコーディングスクールの目的

このWebコーディングスクールの目的は、Web制作の第一線で活躍するためのスキルを身につける ことにあります（昨年までの卒業生の方も、Web制作の第一線で活躍している方がたくさんいます）。

単にアプリケーションの操作方法を学ぶだけでなく、以下のようなことが学べます。

パソコンだけでなく、スマートフォン・タブレットなどさまざまな端末で表示できるWebサイトの制作方法
2020年にふさわしい、モダンな（現代的な）コーディング手法の概要
JavaScript・jQueryの基礎
多くのWeb制作の現場で必須になった Sass の基礎
効率よく、修正に強いWebサイトを作るための考え方と具体的な手法

受講に必要なスキル

受講の際は、以下のことができる必要があります。

Windows または Mac の基本的な操作（文字入力、記号の入力、文字列のコピーやペースト、ファイルのコピー、移動、削除など）ができる方

できない方は、パソコン入門書を読むなどして必ず事前に基本操作ができるようになっておいてください。
Macの基本操作は、このブログの以下の連載記事に掲載していますので、こちらをお読みください。

Macの基礎 | Stocker.jp / diary

※Web制作・Webデザイン制作の経験のない方、HTMLやCSSを知らない方もご参加いただけます。

授業内容

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

最新のHTML・CSS入門
2020年のWeb制作、スマートフォン対応事情
レスポンシブWebデザインによるWebページ制作方法
ブログ風のWebページコーディング
CSSの命名規則による破綻しにくく運用しやすいWebサイトの作り方
SassとBEMを使用して効率よくコーディングする方法
旅館風Webページコーディング

ブログ風Webページの制作

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

▲ブログ風Webページ・PC版制作例

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

※ブログ風のWebページは文書構造、マークアップの学習のために制作します。実際にWordPressなどでブログとして動かすには、PHPを使用してWordPressテーマ形式にする必要があります。WordPressテーマの制作方法は、別途PHP・WordPress講座でやります。

旅館風Webページの制作

授業後半には、旅館風Webサイト制作を行います。
ブログよりもやや難易度が高くなっています。
こちらはSassというCSS拡張言語を使用して制作します。

▲旅館風Webページ・PC版制作例

ページ全体のイメージはこちらをクリックしてご覧ください。

▲旅館風Webページ・スマートフォン版制作例

動画

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

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

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

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

JavaScript・jQuery実習

こちらは JavaScript・jQuery 実習で制作するもののデモ動画です。

一定時間ごとに写真を切り替える
タブをクリックするとコンテンツの内容を切り替え
スマートフォンでメニューボタンをクリックするとメニューを開く

Webデザインについて学ぶには

Adobe PhotoshopやIllustratorなどを使用したWebデザイン制作については、別途「スマートフォン時代のWebデザインスクール」を開催いたします。

HTML・CSSコーディングだけでなく、Webデザイン制作についても知りたい方は、「スマートフォン時代のWebコーディングスクール」受講後に「スマートフォン時代のWebデザインスクール」を受講されることをおすすめします。

「スマートフォン時代のWebコーディングスクール」のみの受講: OKです
「スマートフォン時代のWebコーディングスクール」受講後に「スマートフォン時代のWebデザインスクール」を受講: OKです
「スマートフォン時代のWebデザインスクール」のみの受講: OKです

すでにHTML・CSSが書ける方は

すでにHTML・CSSコーディングができる方向けに、別途「1日で分かるSassとBEM講座」、「1日で分かるJavaScript・jQuery講座」もあります。どちらも全1回の講座となります。

「1日で分かる講座」はHTML・CSSは書ける前提の講座ですので、自信が無い方は「スマートフォン時代のWebコーディングスクール」の受講をおすすめします。
「スマートフォン時代のWebコーディングスクール」には、「1日で分かる講座」の内容もすべて含まれます。

講師紹介

庄崎大祐

このブログを執筆している人です。Adobe 公式サイトにWebデザイナー向けに Photoshop の新機能を紹介する記事を書いたりしています。
以下の本の執筆もしています。

書籍「プロになるためのWebデザイン入門講座」は、いくつかの専門学校でWebデザインコースの教科書として採用されています。
しかし、発売が2013年で内容が古くなっているため、この「スマートフォン時代のWebコーディングスクール」では全く新しい内容に書き直した授業テキスト（教科書）を使用します。こちらはこのスクールを受講された方のみ閲覧可能です。

過去には、以下の雑誌にWebデザインに関する記事を執筆しています。

Web Designing
MdN

以下のイベントで講演しています。どれも現役Web制作者向けのセミナーとして人気のあるものです。

CSS Nite（テーマ: Webデザインで使うPhotoshop）
WordCamp（テーマ: WordPressでブログをデザインするときに気をつけていること、WordPressでWebアプリケーションを制作する方法）

必要なもの・場所・料金等

ノートパソコン（Windows PC または MacBook）

※Adobe CC（Creative Cloud）は不要です。 HTML・CSS・JavaScriptなどのコーディングの際は、オープンソースで無償のテキストエディターを使用します。

料金

受講料は以下の通りです。入学金等はありません。
基本的に銀行振込でのお支払いをお願いしております。希望される方はクレジットカードやPayPalでのお支払いも可能です。

最初にまとめて支払った場合: ~~税別 ¥98,000（税込 ¥107,800）~~ 12月末まで税別 ¥78,000（税込 ¥85,800）
分割払いの場合: 受講前に税別 ¥55,000、6回目の授業の前に税別 ¥55,000　合計税別 ¥110,000（税込 ¥121,000）

※12月末まで、最初にまとめて払った場合のみ2万円引きで動画受講することが可能です。分割払いの場合は割引はございません。

特定商取引法に基づく表示

授業時間は、初回体験レッスン2時間半+本編約27時間30分です。

ご興味ある方は初回体験レッスンをどうぞ

このスクールの初回体験レッスンは動画で受講できます。
初回体験レッスンは ~~税込み1,000円~~ ただいま期間限定で無料で受講可能です。
↓の「初回体験レッスンお申し込み」フォームよりお申し込みいただけます。

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

受講者特典

どこでも読めるテキスト（教科書）無料

授業内容や制作手順などを書いたテキストはWebブラウザーで見れるようになっており、パソコンだけでなくスマートフォンやタブレットなどでも見ることができます。

▲テキストをPCで表示したところ

▲テキストをiPhoneで表示したところ

これにより、自宅だけでなく電車やカフェなど、あらゆる場所で復習がしやすくなります。
初回体験レッスンにお越しいただいた方は、初回体験レッスンのテキストをご覧いただくことができます。

授業の動画の提供

このスクールでは、授業の動画（PC画面+講師の音声）を提供します。
ご自宅での復習の際などにご活用ください。

遠方にお住まいの方、日程が合わない方などは初回体験レッスンから本編すべて、動画受講することが可能です。
初回体験レッスンの動画受講をご希望の方は、初回体験レッスンお申し込みフォームにて［日程］から［動画受講］をお選びください。

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

【今回限定特典】5つの講座の動画を無料で視聴頂けます

2020年8月から開催のコーディングスクールにお申し込みいただいた方のみの限定特典として、以下の講座の動画を無料で視聴いただけるようにします。

HTML5再入門講座
ドラッグ＆ドロップではじめるプログラミング入門講座
Web制作者のための黒い画面（ターミナル）入門講座
Web制作に役立つIllustrator入門講座
Photoshop・IllustratorユーザーのためのAffinity講座

※動画は生放送ではなく録画したものとなります。視聴期限はございません。
※初回体験ではなく、本編にお申し込みいただいた方限定の特典となります。

卒業後のサポート

本編受講後にWeb制作関連でご質問があった場合、半年間はメール等でサポートいたします。

よくある質問

渋谷の教室での開催はありますか？

COVID-19（新型コロナウイルス）感染防止のため、当面の間このスクールはご自宅での動画受講のみでの開催となります。

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

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

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

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

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

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

受講可能です。授業では、オープンソースで無償のテキストエディターを使用します。

未成年でも受講できますか？

当スクールは社会人向けですので、未成年者の方の受講はお断りさせていただいております。

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

約30時間のレッスンのうち、初回（2時間半）のレッスンを、体験レッスンとして ~~1,000円~~ 期間限定で無料でご参加いただけます。

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

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

スライド: 「文章をマークアップする」とはどういうことか
スライド: HTML・CSSの役割
スライド: 「レスポンシブWebデザイン」とは何か
実習: HTML・CSSを書いて、Google Chromeでライブプレビューしてみよう
実習: PCだけでなくスマートフォンにも対応した「レスポンシブWebデザイン」のページをコーディングしよう
実習: メディアクエリとFluid Images（サイズ可変な画像）の使い方

受講特典として、動画とWebブラウザーで見ることができる制作方法のテキスト（教科書）をご覧いただけるようにいたします。

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

筆記用具
Windows PCまたはMacBook

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

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

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

Webコーディングスクール体験レッスンへのお申込みはこちら。
初回体験料金は~~税込 1,000円~~ 期間限定で無料です。

ご希望日時（動画受講をご希望の方は［動画受講］を選択してください）

お名前

PCのメールアドレス（携帯不可）

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

ご質問等

正式お申込みはこちら

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

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

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

今期は動画受講のみ開催します。