「スマートフォン時代のWebコーディングスクール」は、これからWeb制作者になりたい方向けに以下の内容を全6回で学べる社会人向けのスクールです。
- Web制作は初めての方のためのHTML 5.2・CSSの基礎知識
- スマートフォン・タブレット・パソコンなどさまざまな端末で表示できるWebサイトの制作方法
- 1つのページをさまざまな端末で表示させるための「レスポンシブWebデザイン」の基礎知識
- 今時のWebコーディングに必須のCSS拡張言語「Sass」を使用したWebコーディング
- JavaScript・jQueryの基礎実習
- 他のスクールでは学べない、効率の良いWeb制作の方法
新しいWeb技術、新しい制作手法、新しい端末などに対応するため、授業内容は毎年リニューアルしています。
他のスクールや書籍との違い
多くのWebスクールや書籍では「HTML5」という勧告に基づいたHTMLを教えていますが、HTML5は2014年に勧告されたもので現在は廃止されています。
当スクールでは、2017年12月に勧告された「HTML 5.2」および、日々更新されている「HTML Living Standard」に基づいた最新のHTMLを教えています。
そして、HTML・CSSだけでなく、Sass、BEM、Emmet、JavaScript、jQueryなどWeb制作の現場で必要とされる技術を一通り体験しながら学ぶことができます。
授業も「世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書」などのWebデザイン書籍を執筆している講師によるライブ授業+授業に出席できなかった場合や復習のため、授業の動画を視聴可能です。
授業テキスト（教科書）はこのスクールのために書き下ろしたもので、毎回最新の内容に書き直しています。
テキストはPCやスマートフォンなどからご覧いただけます。
iPhone X対応について
iPhone X（XS, XR含む）ではディスプレイが長方形ではなく複雑な形になっているため、従来のスマートフォン対応サイトでは重要なボタンや文字列などが欠けたり見えなくなってしまう場合がある ことが確認されています。
そこで、「スマートフォン時代のWebコーディングスクール」では授業の中でiPhone Xに対応したスマートフォンサイトコーディングも解説することにいたしました。
現時点でiPhone Xに対応したスマートフォンサイトコーディングを解説している本はなく、他のスクールでも学べない内容となっております。
この画像は、iPhone X, XS, XRでメインビジュアルのような写真はデバイスの端まで表示、本文のようなテキストはセーフエリア内に表示するデモです。
ご自宅での動画受講について
渋谷まで通うことが難しい方、時間や日程が合わない方はご自宅で動画+授業テキスト（Webブラウザーで見れる教科書）で受講が可能です。受講料は通常と同額（98,000円）で、分からないことがあればメール等でご質問いただけます。
初回体験レッスンも、ご自宅にて動画で初回体験レッスンの受講が可能です。初回体験レッスンへのお申し込みで［ご希望日時］欄で［動画受講］を選択してください。
※動画受講は生放送ではなく録画した動画となります。通常は授業翌日から、期間制限なしでいつでも視聴頂けます。
初回体験レッスンについて
全7回のレッスンのうち、1回目のレッスンを「初回体験レッスン」として1,000円でご参加いただけます。
以下のうち、どれか1つの日程にご参加ください。
- 4/20（土）17:00-19:30
- 5/4（土）14:00-16:30
- 5/11（土）14:00-16:30
- 動画受講
※初回体験レッスンは終了しましたが、ご興味ある方は初回体験レッスンを動画受講頂き、5/18からの授業にご参加頂くことができます。
初回体験レッスンはHTML・CSSの基礎だけでなく、以下のことがわずか2時間半・1000円で学べます。
- スマフォ対応に欠かせない viewport 指定の意味
- -webkit-text-size-adjust とは？なぜ必要なの？
- 自分が持っていないスマフォやタブレットの表示確認はどうする？
- Chrome開発者ツールの使い方
- レスポンシブWebデザインとは
- Fluid Images（サイズ可変な画像・動画）の使い方
- CSS3 Media queries（メディアクエリ）の記述方法
本編について
本編は 5/18〜6/22の毎週土曜 14:00〜19:00 開催予定です。本編6回・初回体験レッスンとあわせて全7回です。
開催場所は、渋谷駅より徒歩7分の Stocker.jp / Space です。
Web制作は完全未経験の方でもHTML・CSSの基礎から、スマートフォンに対応したレスポンシブWebデザインがしっかり学べる内容になっております。
料金も入学金なしで税別 ¥98,000 と、一般的なWebスクールよりもかなり低価格です。
教室での授業は、動画などではなく セミナー形式のライブ授業 となっています。
授業に出席できなかった方、遅刻した方などのために動画も配布します。
※渋谷までお越し頂くのが難しい方は、本編も最後まで動画受講可能です。本編の動画受講料金は通常受講と同じく98,000円（税別）です。動画受講の場合は生放送ではなく、録画された動画で、お申し込み後いつでもご視聴いただけます。
対象となる方について
このWebコーディングスクールは、以下のような方の受講を想定しています。
- Web制作の経験は全くなく、これからWeb制作を始めたい方
- 会社のWebページを作らなければいけなくなり、どうすれば良いかわからない方
- これからWeb制作会社に転職したい方
- Web制作の仕事をしていてHTML・CSSの基礎は学んだことがあるが、スマートフォンにも対応したWeb制作や、Sassを使用したモダンなコーディング手法についても知りたい方
- Web制作の仕事をしていて基礎から学び直したい方、これまでPCサイトばかり制作していてスマートフォン対応などどうすれば良いかわからないので学びたい方
受講生の方は、Web制作未経験でWeb制作会社等への転職を考えている方、将来独立を考えてスキルアップのために通われる方、趣味でWeb制作を始めてみたい方など様々な方がいらっしゃいます。
少人数制（生徒10名〜20名程度に対し講師1名、受講生の方が多い場合は講師2名を予定）なので、わからないところがあった場合は授業中や授業前後に個別対応でお教えします。
もし欠席された場合や、授業外でわからないことがあった時は、PCでもスマートフォンでもご覧いただける授業テキスト（教科書）や授業動画をご覧いただいて復習したり、Facebook グループやメールにて質問することができます。
万一、動画やテキストで復習されてもついてこれない方がいらっしゃった場合は、無料の補講レッスンを最大2回まで開くことも可能です。
（昨年のスクールでは途中お休みされた方もいらっしゃいましたが、特にその後授業について来れないという方はおりませんでした。）
ご興味ある方は初回体験レッスンをどうぞ
4月下旬〜5月上旬に、このスクールの初回体験レッスンを開催します。
初回体験レッスンでは以下の内容を予定しております。
- スライド: 「文章をマークアップする」とはどういうことか
- スライド: HTML・CSSの役割
- スライド: 「レスポンシブWebデザイン」とは何か
- 実習: HTML・CSSを書いて、Google Chromeでライブプレビューしてみよう
- 実習: PCだけでなくスマートフォンにも対応した「レスポンシブWebデザイン」のページをコーディングしよう
- 実習: メディアクエリとFluid Images（サイズ可変な画像）の使い方
初回体験レッスンは1,000円です。↓の「初回体験レッスンお申し込み」フォームよりお申し込みいただけます。
Webコーディングスクール「初回体験レッスン」お申し込み
このWebコーディングスクールの目的
このWebコーディングスクールの目的は、Web制作の第一線で活躍するためのスキルを身につける ことにあります（昨年までの卒業生の方も、Web制作の第一線で活躍している方がたくさんいます）。
単にアプリケーションの操作方法を学ぶだけでなく、以下のようなことが学べます。
- パソコンだけでなく、スマートフォン・タブレットなどさまざまな端末で表示できるWebサイトの制作方法
- 2019年にふさわしい、モダンな（現代的な）コーディング手法の概要
- JavaScript・jQueryの基礎
- 多くのWeb制作の現場で必須になった Sass の基礎
- 効率よく、修正に強いWebサイトを作るための考え方と具体的な手法
受講に必要なスキル
受講の際は、以下のことができる必要があります。
- Windows または Mac の基本的な操作（文字入力、記号の入力、文字列のコピーやペースト、ファイルのコピー、移動、削除など）ができる方
できない方は、パソコン入門書を読むなどして必ず事前に基本操作ができるようになっておいてください。
Macの基本操作は、このブログの以下の連載記事に掲載していますので、こちらをお読みください。
※Web制作・Webデザイン制作の経験のない方、HTMLやCSSを知らない方もご参加いただけます。
授業内容
以下の内容を学ぶことができます。
- 最新のHTML・CSS入門
- 2019年の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デザインスクール」を開催いたします。
次回は2019年7月頃初回体験レッスン開催予定です。
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などのコーディングの際は、オープンソースで無償のテキストエディターを使用します。
場所
渋谷駅より徒歩7分の Stocker.jp / Space にて行います。
住所: 東京都渋谷区桜丘町11-11 ライオンズマンション桜丘 403号室（Google マップ）
室内完全リフォーム済みで、50㎡以上あります。
スクール形式で最大30名座ることができます。
奥のスクリーンは、約150インチのワイドスクリーンです。
これは、奥から入口側を撮影した写真です。入口側はカフェスペースとなっており、色々なドリンクが飲めるほか、Web関係の書籍を読んだり、講師に1対1で質問したり相談するときなど、ゆっくり話せるようにしています。
募集人数
10名〜20名程度を予定
料金
受講料は以下の通りです。入学金等はありません。
基本的に銀行振込でのお支払いをお願いしております。希望される方はクレジットカードでのお支払いも可能です。
- 最初にまとめて支払った場合: 税別 ¥98,000（税込 ¥105,840）
- 分割払いの場合: 受講前に 税別 ¥55,000、6回目の授業の前に 税別 ¥55,000 合計 税別 ¥110,000（税込 ¥118,800）
授業時間は、初回体験レッスン2時間半+本編30時間（1回あたり5時間x6回）を予定しております。
ご興味ある方は初回体験レッスンをどうぞ
4月下旬〜5月上旬に、このスクールの初回体験レッスンを開催します。
初回体験レッスンは1,000円です。↓の「初回体験レッスンお申し込み」フォームよりお申し込みいただけます。
Webコーディングスクール「初回体験レッスン」お申し込み
受講者特典
どこでも読めるテキスト（教科書）無料
授業内容や制作手順などを書いたテキストはWebブラウザーで見れるようになっており、パソコンだけでなくスマートフォンやタブレットなどでも見ることができます。
▲テキストをPCで表示したところ
▲テキストをiPhoneで表示したところ
これにより、自宅だけでなく電車やカフェなど、あらゆる場所で復習がしやすくなります。
初回体験レッスンにお越しいただいた方は、初回体験レッスンのテキストをご覧いただくことができます。
授業の動画の提供
このスクールでは、授業の動画（PC画面+講師の音声）を提供します。
ご自宅での復習の際などにご活用ください。
遠方にお住まいの方、日程が合わない方などは初回体験レッスンから本編すべて、動画受講することが可能です。
初回体験レッスンの動画受講をご希望の方は、初回体験レッスンお申し込みフォームにて［日程］から［動画受講］をお選びください。
サポート用Facebookグループ
受講生専用の Facebook グループを用意します。このグループに参加していることは、ほかの Facebook ユーザーからはわかりません。
例えば遅刻して途中から参加された場合、途中まで制作した Photoshop データなどを Facebook グループにアップロードし、続きから参加できるようにします。
欠席された場合も授業テキストとデータを使用して、ご自宅で復習いただけます。
もしわからないことがあった場合は、メールまたは Facebook グループなどでご質問いただくか、次回の授業前後などに教室でご質問いただけます。
無料の補講レッスン
補講レッスンは、授業についてこられない方がいらっしゃる場合、合計2回まで開催します。
授業でわからないことがあった場合、まずは授業前後や Facebook グループなどでご質問いただくか、授業の動画をご覧いただいて復習していただき、それでもついてくることが難しい場合は補講を申請してください。
補講は2回まで無料で受講頂けます。
卒業後のサポート
卒業後にWeb制作関連でご質問があった場合、半年間は専用の Facebook ページやメール等でサポートいたします。
よくある質問
Web制作・Webデザインは全くの未経験ですが、受講できますか？
「スマートフォン時代のWebコーディングスクール」は、「パソコンの基本操作はできるが、Web制作は初めて」でも受講頂けるレッスンですので、Windows や Mac の基本操作ができる方であれば大丈夫です。
※基本操作とは、文字入力や文字の編集（コピー、ペースト等）、ファイル操作（ファイルの移動、コピー、削除等）ができることを指します。
Windowsのノートパソコン（またはMacBook）しか持っていませんが受講できますか？
授業で使用するテキストエディターは Windows・Mac どちらにも対応しており、それらを使用して授業をすすめますのでどちらでも受講可能です。
Adobe Photoshop CCやDreamweaver CCなどを持っていませんが受講可能ですか？
受講可能です。授業では、オープンソースで無償のテキストエディターを使用します。
遅刻・欠席するかもしれませんが、受講可能ですか？
仕事の都合などで遅刻または欠席される方はいますが、ほとんどの方は最後まで受講されています。
受講生向けに授業の動画や Facebook グループを用意しますので、受講できなかった部分も動画等で復習可能です。分からないことがあれば Facebook グループやメールでもご質問いただけます。
遅刻された方がいる場合は、休憩時間までに制作したデータを Facebook グループで共有し、その続きから制作できるようにしています。
また、どうしてもついて来られない方がいらっしゃった場合は、授業全体で最大2回まで無料の補習を開催しております。
授業を欠席された方は、まずは動画やテキストなどで復習いただき、分からないところがあればご質問ください。それでもついてこれない場合は補習を申請してください。
未成年でも受講できますか？
当スクールは社会人向けですので、未成年者の方の受講はお断りさせていただいております。
東京に住んでいない、授業時間に行くことができないのですが…
渋谷の教室にお越し頂くことが難しい場合、授業の動画+授業テキスト（PCやスマートフォンでご覧いただける教科書）で受講頂くことが可能です。
その場合、受講料は同じで、ご質問があった場合はメールにてご質問頂けます。
ご興味ある方は、初回体験レッスンお申し込みフォームにて［日程］から［動画受講］をお選びください。
