田中 晶子

この授業では、Webデザインを未経験、あるいは一度挑戦しようとして、挫折した方を対象にして「HTML＋CSS」を学んでいただく授業です。 授業中では、実際に2カラムボックスモデルのWebページを、テキストエディタとWebブラウザを用いて、みなさんと一緒に制作します。 なんとなくコーディングに苦手意識があったり、自分の学びたいことと少し違うのではないかという方も、実際の作例を制作していただきながら、コーディング・Webデザインを好きになっていただければと思います！ 挫折した方にこそ受けていただきたい授業です！ ■ お話すること■ 1) 一分で分かるhtml構造の仕組み 2) 実は最新バーションのhtml5が一番簡単 3) タイピングが苦手な人ほど覚えるのが早い 4) 土台さえしっかり組めば何が起こっても大丈夫 5) cssは見た目担当 6) 「内面良し見た目良し」なら全て良し 7) ミスをしない魔法   ■ 必要なもの■   1）Sublimeのインストール（授業中コードを打つのに使います） 下記のURLからダウンロードしてください。 http://www.sublimetext.com/2 設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。 2）解凍ツール （授業中配布する教材の解凍に使います） 授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。（Mac OSXの場合はダブルクリックで展開します。windows7～の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK） 3）その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。 Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。 http://www7a.biglobe.ne.jp/~schezo/

レスポンシブデザインとはPC、スマートフォン、タブレットなど デバイスごとに異なるデザインを 同一htmlファイルで実現するマルチデバイス対応技術です。 授業中には、実際にデバイスごとにデザインを変える、 メディアクエリーというcssの技術を用いて レスポンシブデザインのページを完成させます！ ■ 必要なもの■ 1）Sublimeと解凍ツールのインストール 手順はこちらのページ参照。→http://schoo.jp/teacher/315 2)授業中ブラウザの開発ツールを使用します。 このページのスライドp30~34参照 3)エミュレーターのインストール（win・Mac共通） まずAdobe Airをインストールします。 http://get.adobe.com/jp/air/ つづいてMobilizerをインストールします。 http://www.springbox.com/mobilizer/

【html+cssを挫折した全ての人に贈るシリーズ 全5回】 このシリーズは1回で完結していますが、1回から5回まで同じサイトがどんどん完成して行く形になっています。1回づつ完結した出来上がり見本付きの演習ファイルがダウンロードできます。 ■ 必要なもの■ 1）Sublimeのインストール（授業中コードを打つのに使います） 下記のURLからダウンロードしてください。 http://www.sublimetext.com/2 設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。 2）解凍ツール （授業中配布する教材の解凍に使います） 授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。（Mac OSXの場合はダブルクリックで展開します。windows7~の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK） 3）その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。 Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。 http://www7a.biglobe.ne.jp/~schezo/

【WEBデザインに必要なワイヤーフレーム全３回】の１回目です。 「ワイヤーフレーム」とは、Webサイトを作成する前に制作する、コンテンツやレイアウト（配置）を確認して、整理するための構成図です。 この授業では、そんなWebサイトをデザインしていく際のとっかかりとしてワイヤーフレームを作成しながら、「Webサイトにはどのような要素が必要なのか」「Webサイトをデザインの準備をする」という事柄について学んでいければと思っています。 この授業で学べる事は、adobe Illusroratorを使用して、webページの設計図であるワイヤーフレームを設計する方法です。 （※ このシリーズは３回受講する事が前提になっています。） サイト制作の大まかな流れは、下記の様な物になります。 １）クライアント（お客様）へのヒヤリング ２）ターゲット設定 ３）サイト設計（ワイヤーフレーム） ４）制作仕様書策定（デザインルール、コーディングルール策定） ５）開発（デザイン＆コーディング） ６）ローカルテスト ７）テストサーバーレビュー（クライアントチェック） ８）リリース（本サーバーアップ） ９）ランニング（SEO解析） この演習では、３番のサイト設計を行います。 受講にあたって準備するもの １）adobe Illusrorator 下記のurlより、ダウンロードしてください。 https://creative.adobe.com/ja/products/illustrator Illusroratorを使うにはまず、Adobe Creative Stationをインストールします。上記のurlから案内に従ってインストールしてください。 体験版は１ヶ月無料で使用できます。 （このシリーズの「WEBデザインのためのPhotoshop」まで無料体験版を使用する為には、５月４日以降にインストールをして下さい。） ・容量が大きいのでダウンロードにかなり時間がかかります。 ・wiondowsでもMacでもインストールできますが、メモリ（Ram）は2GM以上入っている事が望ましいです。 ・初めてに触れる人は、以下のトレーニングビデオを全て見てIllustoratorの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。Illustoratorではどんな事ができるか知っておきましょう。 【Illustrator CC とは何ですか】 https://helpx.adobe.com/jp/creative-cloud/tutorials/video/what-is-illustrator.html 【独学でWebデザイン Illustrator 使い方 １回〜９回】 ・Illustrator CC 使い方講座(イラストレーターCC)中巻 第1章 パスの基本操作【動学.tv】 ・独学でWebデザイン Illustrator 使い方 第1回目 Illustratorの基本操作 ・独学でWebデザイン Illustrator 使い方 第2回目 図形の移動・複製、色の設定、線の設定 ・独学でWebデザイン Illustrator 使い方 第3回目 オブジェクトの前後関係 ・独学でWebデザイン Illustrator 使い方 第4回目 ペンツール・ベジェ曲線の引き方 ・独学でWebデザイン Illustrator 使い方 第5回目 イラストをトレースする ・独学でWebデザイン Illustrator 使い方 第6回目 線種の設定 破線や地図などで使う線 ・独学でWebデザイン Illustrator 使い方 第7回目 パスのアウトラインで簡単な地図作成 ・独学でWebデザイン Illustrator 使い方 第8回目 パスの連結で簡単イラスト ・独学でWebデザイン Illustrator 使い方 第9回目 グラデーションパレットとグラデーションツール ２）960 Grid System http://960.gs/ ダウンロードしたzipファイルを解凍しておきます。 また、このシリーズでは、ダウンロード・圧縮ファイルの解凍、文字入力などのPCの基本操作ができる事が前提です。 また、ファイル名に拡張子が表示されている事が前提ですので、表示されていない方は以下のurlにて拡張子の表示を行ってください。 ■ windows 全てのヴァージョンの拡張子の表示法 http://www.fmworld.net/cs/azbyclub/qanavi/jsp/qacontents.jsp?PID=8702-9695 ■ Macの場合 拡張子の表示法 http://hamachan.info/mac/kihon/kakutyosi.html

  「【WEBデザインに必要なワイヤーフレーム全３回】」にて制作したワイヤーフレーム（webページの設計図）通りにHTML文書をCSSを使ってレイアウトしていきます。   これからWebデザインを始めようと思っている方のために、「HTML／CSS」について簡単に説明してみましょう。   HTMLとCSSについて HTML：エイチティーエムエル、HyperText Markup Languageの頭文字を取ってHTMLと呼びます。Webページを作成するために必要となる言語です。世の中のほとんどのWebページはHTMLで作られていると言っても過言ではありません。HTMLはコンピューターに、文書の構造を指示したり、検索エンジンやインターネットブラウザがきちんと表示をするために必要な言語です。   CSS：カスケーディング・スタイル・シート、Cascading Style Sheetsと呼ばれます。その名の通り、Webページのスタイルを指示するための言語です。先ほどのHTMLと組み合わせることによって、Webページを装飾して、見栄えを良くしたりするといった、デザインをするときに必要になります。   小規模なWebサイトを作れるようになるための6回授業 この全6回シリーズは、3回連続授業の後、「WEBデザインのためのPhotoshop全3回」をはさみ、その後2回実施されます。その後「jQueryの基礎を理解する全6回」の6回目でweb制作ワークフロー全行程完了となります。シリーズを通して授業を受けると小規模なwebサイトを制作するスキルを身に付ける事ができます。   途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインに必要なワイヤーフレーム全３回】の事前受講をオススメします。   サイト制作の大まかな流れは、下記の様な物になります。 １）クライアント（お客様）へのヒヤリング ２）ターゲット設定 ３）サイト設計（ワイヤーフレーム） ４）制作仕様書策定（デザインルール、コーディングルール策定） ５）開発（デザイン＆コーディング） ６）ローカルテスト ７）テストサーバーレビュー（クライアントチェック） ８）リリース（本サーバーアップ） ９）ランニング（SEO解析）   この演習では、5番の開発の部分です。 ワイヤーフレームのレイアウト通りにコーディングするスキルを身につけます。   受講にあたって準備するもの １）adobe DreamWeaverCC 下記のurlより、ダウンロードしてください。 https://creative.adobe.com/ja/products/dreamweaver DreamWeaverを使うにはまず、Adobe Creative Stationをインストールします。上記のurlから案内に従ってインストールしてください。 体験版は１ヶ月無料で使用できます。(既に旧ヴァージョンのadobe DreamWeaverを使用して授業を受ける事も可能です。)   ・容量が大きいのでダウンロードにかなり時間がかかります。 ・wiondowsでもMacでもインストールできますが、メモリ（Ram）は2GM以上入っている事が望ましいです。 ・windowsXPをお使いの方はサービスパック３(SP3)までをインストールする事によって、adove CC Illustoratorをインストールできます。各ヴァージョンのwindowsの対応状況に付いては下記をご覧下さい。 http://helpx.adobe.com/jp/creative-cloud/kb/cpsid_93693.html   ・初めてDreamWeaverに触れる人は、以下の公式サイトのトレーニングビデオやチュートリアルをを見てDreamWeaverの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。DreamWeaverではどんな事ができるか知っておきましょう。   【DreamweaverでWebページを作成する方法】 https://helpx.adobe.com/jp/creative-cloud/learn/start/dreamweaver.html   【Learn Dreamweaver CC】（Adobe TVのDreamweaverチュートリアル） http://tv.adobe.com/show/learn-dreamweaver-cc/   【Dreamweaver ヘルプ】 https://helpx.adobe.com/jp/dreamweaver.html   【Dreamweaver CC の一般的なキーボードショートカット】 http://download.macromedia.com/pub/learn/start/jp/start_jp_dreamweaver_cheatsheet.pdf   ※このコースはスライド資料のダウンロードはできませんのでご了承ください。  

1回目の「HTMLとCSSって何？（概要理解とツール導入）」で概要を学んだHTML5の正しい文書構造に基づき、マークアップしていきます。   小規模なWebサイトを作れるようになるための6回授業 この全6回シリーズは、3回連続授業の後、「WEBデザインのためのPhotoshop全3回」をはさみ、その後2回実施されます。その後「jQueryの基礎を理解する全6回」の6回目でweb制作ワークフロー全行程完了となります。シリーズを通して授業を受けると小規模なwebサイトを制作するスキルを身に付ける事ができます。   途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインに必要なワイヤーフレーム全３回】の事前受講をオススメします。   サイト制作の大まかな流れは、下記の様な物になります。 １）クライアント（お客様）へのヒヤリング ２）ターゲット設定 ３）サイト設計（ワイヤーフレーム） ４）制作仕様書策定（デザインルール、コーディングルール策定） ５）開発（デザイン＆コーディング） ６）ローカルテスト ７）テストサーバーレビュー（クライアントチェック） ８）リリース（本サーバーアップ） ９）ランニング（SEO解析）   この演習では、5番の開発の部分です。 ワイヤーフレームのレイアウト通りにコーディングするスキルを身につけます。   受講にあたって準備するもの １）adobe DreamWeaverCC 下記のurlより、ダウンロードしてください。 https://creative.adobe.com/ja/products/dreamweaver DreamWeaverを使うにはまず、Adobe Creative Stationをインストールします。上記のurlから案内に従ってインストールしてください。 体験版は１ヶ月無料で使用できます。(既に旧ヴァージョンのadobe DreamWeaverを使用して授業を受ける事も可能です。)   ・容量が大きいのでダウンロードにかなり時間がかかります。 ・wiondowsでもMacでもインストールできますが、メモリ（Ram）は2GM以上入っている事が望ましいです。 ・windowsXPをお使いの方はサービスパック３(SP3)までをインストールする事によって、adove CC Illustoratorをインストールできます。各ヴァージョンのwindowsの対応状況に付いては下記をご覧下さい。 http://helpx.adobe.com/jp/creative-cloud/kb/cpsid_93693.html   ・初めてDreamWeaverに触れる人は、以下の公式サイトのトレーニングビデオやチュートリアルをを見てDreamWeaverの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。DreamWeaverではどんな事ができるか知っておきましょう。   【DreamweaverでWebページを作成する方法】 https://helpx.adobe.com/jp/creative-cloud/learn/start/dreamweaver.html   【Learn Dreamweaver CC】（Adobe TVのDreamweaverチュートリアル） http://tv.adobe.com/show/learn-dreamweaver-cc/   【Dreamweaver ヘルプ】 https://helpx.adobe.com/jp/dreamweaver.html   【Dreamweaver CC の一般的なキーボードショートカット】 http://download.macromedia.com/pub/learn/start/jp/start_jp_dreamweaver_cheatsheet.pdf

「HTML文書を正しい構文で組み立てる」必要スキル【HTML編】で完成した、html5文書にスタイルシートを当てていきます。 ■ 作成した「ワイヤーフレーム」HTMLとCSSでデザインを反映していきましょう   小規模なWebサイトを作れるようになるための6回授業 この全6回シリーズは、3回連続授業の後、「WEBデザインのためのPhotoshop全3回」をはさみ、その後2回実施されます。その後「jQueryの基礎を理解する全6回」の6回目でweb制作ワークフロー全行程完了となります。シリーズを通して授業を受けると小規模なwebサイトを制作するスキルを身に付ける事ができます。   途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインに必要なワイヤーフレーム全３回】の事前受講をオススメします。   サイト制作の大まかな流れは、下記の様な物になります。 １）クライアント（お客様）へのヒヤリング ２）ターゲット設定 ３）サイト設計（ワイヤーフレーム） ４）制作仕様書策定（デザインルール、コーディングルール策定） ５）開発（デザイン＆コーディング） ６）ローカルテスト ７）テストサーバーレビュー（クライアントチェック） ８）リリース（本サーバーアップ） ９）ランニング（SEO解析）   この演習では、5番の開発の部分です。 ワイヤーフレームのレイアウト通りにコーディングするスキルを身につけます。   受講にあたって準備するもの １）adobe DreamWeaverCC 下記のurlより、ダウンロードしてください。 https://creative.adobe.com/ja/products/dreamweaver DreamWeaverを使うにはまず、Adobe Creative Stationをインストールします。上記のurlから案内に従ってインストールしてください。 体験版は１ヶ月無料で使用できます。(既に旧ヴァージョンのadobe DreamWeaverを使用して授業を受ける事も可能です。)   ・容量が大きいのでダウンロードにかなり時間がかかります。 ・wiondowsでもMacでもインストールできますが、メモリ（Ram）は2GM以上入っている事が望ましいです。 ・windowsXPをお使いの方はサービスパック３(SP3)までをインストールする事によって、adove CC Illustoratorをインストールできます。各ヴァージョンのwindowsの対応状況に付いては下記をご覧下さい。 http://helpx.adobe.com/jp/creative-cloud/kb/cpsid_93693.html   ・初めてDreamWeaverに触れる人は、以下の公式サイトのトレーニングビデオやチュートリアルをを見てDreamWeaverの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。DreamWeaverではどんな事ができるか知っておきましょう。   【DreamweaverでWebページを作成する方法】 https://helpx.adobe.com/jp/creative-cloud/learn/start/dreamweaver.html   【Learn Dreamweaver CC】（Adobe TVのDreamweaverチュートリアル） http://tv.adobe.com/show/learn-dreamweaver-cc/   【Dreamweaver ヘルプ】 https://helpx.adobe.com/jp/dreamweaver.html   【Dreamweaver CC の一般的なキーボードショートカット】 http://download.macromedia.com/pub/learn/start/jp/start_jp_dreamweaver_cheatsheet.pdf

【WEBデザインのためのPhotoshop】全3回の1回目です。 【HTMLとCSSを使って、150分で簡単なWEBサイト制作】で完成した、webページに設置する画像を作っていきます。 WebデザインのためのPhotoshop Photoshopは、Adobe社が提供する、画像処理ソフトウェアです。Webデザインが初めてでも、写真やデザインに興味がある方であればその名前は一度は聞いたことがあるのではないでしょうか？ もしPhotoshopを使ったことがある方でもWebサイトをデザインする際には、Webデザインをするための設定をしていく必要があります。この授業では、WebデザインのためのPhotoshopの環境webページに設置する画像制作の技術をadobe Photoshopを使って習得します。 ■ 授業でデザイン〜コーディングしていっている仕様書 大きなトップ画像３枚は【jQueryの基礎を理解する】の授業で設置するカルーセル（画像がスライドする仕組み）になり、小さなサムネールは、同じく【jQueryの基礎を理解する】で設置するライトボックス（サムネール画像をクリックしたら大きな画像がポップアップする仕組み）のトリガーになります。 webデザイナー科目入門編は、この全3回シリーズの後、「jQueryの基礎を理解する全6回」を経て、最後にの【HTMLとCSSを使って、150分で簡単なWEBサイト制作全６回】の6回目で修了となります。その後「jQueryの基礎を理解する全6回」の6回目でweb制作ワークフロー全行程完了となります。シリーズを通して授業を受けると小規模なwebサイトを制作するスキルを身に付ける事ができます。 途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインに必要なワイヤーフレーム全３回】の事前受講をオススメします。 事前に予習しておくと良い授業 【HTMLとCSSを使って、150分で簡単なWEBサイト制作】 【WEBデザインに必要なワイヤーフレーム全３回】 をご覧になる事をオススメします。 サイト制作の大まかな流れは、下記の様な物になります。 １）クライアント（お客様）へのヒヤリング ２）ターゲット設定 ３）サイト設計（ワイヤーフレーム） ４）制作仕様書策定（デザインルール、コーディングルール策定） ５）開発（デザイン＆コーディング） ６）ローカルテスト ７）テストサーバーレビュー（クライアントチェック） ８）リリース（本サーバーアップ） ９）ランニング（SEO解析） この演習では、5番の開発の部分です。 ワイヤーフレームのレイアウト通りにコーディングするスキルを身につけます。 受講にあたって準備するもの １）adobe DreamWeaverCC 下記のurlより、ダウンロードしてください。 https://creative.adobe.com/ja/products/dreamweaver DreamWeaverを使うにはまず、Adobe Creative Stationをインストールします。上記のurlから案内に従ってインストールしてください。 体験版は１ヶ月無料で使用できます。(既に旧ヴァージョンのadobe DreamWeaverを使用して授業を受ける事も可能です。) ・容量が大きいのでダウンロードにかなり時間がかかります。 ・wiondowsでもMacでもインストールできますが、メモリ（Ram）は2GM以上入っている事が望ましいです。 ・windowsXPをお使いの方はサービスパック３(SP3)までをインストールする事によって、adove CC Illustoratorをインストールできます。各ヴァージョンのwindowsの対応状況に付いては下記をご覧下さい。 http://helpx.adobe.com/jp/creative-cloud/kb/cpsid_93693.html ・初めてDreamWeaverに触れる人は、以下の公式サイトのトレーニングビデオやチュートリアルをを見てDreamWeaverの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。DreamWeaverではどんな事ができるか知っておきましょう。 【DreamweaverでWebページを作成する方法】 https://helpx.adobe.com/jp/creative-cloud/learn/start/dreamweaver.html 【Learn Dreamweaver CC】（Adobe TVのDreamweaverチュートリアル） http://tv.adobe.com/show/learn-dreamweaver-cc/ 【Dreamweaver ヘルプ】 https://helpx.adobe.com/jp/dreamweaver.html 【Dreamweaver CC の一般的なキーボードショートカット】 http://download.macromedia.com/pub/learn/start/jp/start_jp_dreamweaver_cheatsheet.pdf

【HTMLとCSSを使って、150分で簡単なWEBサイト制作】全6回の4回目です。 【WEBデザインのためのPhotoshop】全3回で制作したカンプからビルボードとサムネールをスライスで切り出しました。これでサイトを制作する準備が整いました。 jQueryを設置してインタラクティブなサイトを完成させる前に、htmlとcssのコーディングルールについて詳しく勉強して行きましょう。 「Webデザインの骨組み「ワイヤーフレーム」を学ぼう」の生放送授業でadobe クリエイティブクラウドの体験版を使用してこられた方は、体験期間の１ヶ月が終了していますので、この授業ではコーディングツールはSublime Text2を使用していきます。 adobe クリエイティブクラウドは月単位の課金が可能です。既にDream Weaver（ヴァージョンは問いません）をお持ちの方、adobe クリエイティブクラウドに課金して利用を続行する方はDream Weaverを使用して頂いてかまいません。 サイト制作の大まかな流れは、下記の様な物になります。 １）クライアント（お客様）へのヒヤリング ２）ターゲット設定 ３）サイト設計（ワイヤーフレーム） ４）制作仕様書策定（デザインルール、コーディングルール策定） ５）開発（デザイン＆コーディング） ６）ローカルテスト ７）テストサーバーレビュー（クライアントチェック） ８）リリース（本サーバーアップ） ９）ランニング（SEO解析） この演習では、5番の開発の部分です。 完成した静的ページをユーザーさんのアクションでインタラクティブに動くページにブラッシュアップしていきます。 受講にあたって準備するもの 1）Sublimeのインストール（授業中コードを打つのに使います） 下記のURLからダウンロードしてください。 http://www.sublimetext.com/2 設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。 ※DreamWeaverが慣れている人は、こちらを使用されてもかまいません。 2）解凍ツール （授業中配布する教材の解凍に使います） 授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。（Mac OSXの場合はダブルクリックで展開します。windows7~の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK） 3）その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。 Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。 http://www7a.biglobe.ne.jp/~schezo/

「jQueryの基礎を理解する全6回」の授業です。 前回の授業(HTML＆CSSの特訓授業〜jQuery（プログラミング）に取り組む前にコーディングの復習〜)で学習したhtmlに、jQueryを実行するスクリプトを書いて行きます。 今回の授業は、「jQueryとはなにか？」という概要の理解です。簡単な説明は以下の通りです。 jQueryとは ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリです。Webデザインでは、Webサイトに動きをつけたい時などに用います。 このカリキュラムでは、「TOP画像を滑らかに横に動かす表示方法（カルーセル）」と「サムネイル画像をクリックするとホップアップ表示する方法（ライトボックス）」を学んでいきましょう。 jQueryに触れた事の無い方は、下記の授業も参考にして勉強しておきましょう。 ■レスポンシブなサイトにあっという間にjQueryを実装する ■挫折した人のための、初心者速習html+css【JQueryでTOP画像がクルクル動くようにしてみよう編】 ■挫折した人のための、初心者速習html+css【JQueryで商品画像をポップアップさせよう編】 途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインのためのPhotoshop】全3回の事前受講をオススメします。 サイト制作の大まかな流れは、下記の様な物になります。 １）クライアント（お客様）へのヒヤリング ２）ターゲット設定 ３）サイト設計（ワイヤーフレーム） ４）制作仕様書策定（デザインルール、コーディングルール策定） ５）開発（デザイン＆コーディング） ６）ローカルテスト ７）テストサーバーレビュー（クライアントチェック） ８）リリース（本サーバーアップ） ９）ランニング（SEO解析） この演習では、5番の開発の部分です。 完成した静的ページをユーザーさんのアクションでインタラクティブに動くページにブラッシュアップしていきます。 受講にあたって準備するもの 1）Sublimeのインストール（授業中コードを打つのに使います） 下記のURLからダウンロードしてください。 http://www.sublimetext.com/2 設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。 ※DreamWeaverが慣れている人は、こちらを使用されてもかまいません。 2）解凍ツール （授業中配布する教材の解凍に使います） 授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。（Mac OSXの場合はダブルクリックで展開します。windows7~の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK） 3）その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。 Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。 http://www7a.biglobe.ne.jp/~schezo/

「HTMLとCSSを使って、150分で簡単なWEBサイト制作全６回」の最終回です。 ワイヤーフレーム作りのサイト設計から始まり、カンプ制作、テンプレートコーディング、画像張り込み、jQuery設置とサイトの開発実習を行ってきました。本日は、提出いただいた完成サイトの添削と質疑応答です。 jQueryに触れた事の無い方は、下記の授業で勉強しましょう。 ■レスポンシブなサイトにあっという間にjQueryを実装する ■挫折した人のための、初心者速習html+css【JQueryでTOP画像がクルクル動くようにしてみよう編】 ■挫折した人のための、初心者速習html+css【JQueryで商品画像をポップアップさせよう編】 途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインのためのPhotoshop】全3回の事前受講をオススメします。 サイト制作の大まかな流れは、下記の様な物になります。 １）クライアント（お客様）へのヒヤリング ２）ターゲット設定 ３）サイト設計（ワイヤーフレーム） ４）制作仕様書策定（デザインルール、コーディングルール策定） ５）開発（デザイン＆コーディング） ６）ローカルテスト ７）テストサーバーレビュー（クライアントチェック） ８）リリース（本サーバーアップ） ９）ランニング（SEO解析）   この演習では、5番の開発の部分です。 完成した静的ページをユーザーさんのアクションでインタラクティブに動くページにブラッシュアップしていきます。 受講にあたって準備するもの 1）Sublimeのインストール（授業中コードを打つのに使います） 下記のURLからダウンロードしてください。 http://www.sublimetext.com/2 設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。 ※DreamWeaverが慣れている人は、こちらを使用されてもかまいません。 2）解凍ツール （授業中配布する教材の解凍に使います） 授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。（Mac OSXの場合はダブルクリックで展開します。windows7～の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK） 3）その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。 Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。 http://www7a.biglobe.ne.jp/~schezo/

「自作サイトのFTPサーバーアップロード編 全3回」 ここまでのカリキュラムでは、ビジュアルデザインのためのPhotoshop、WEBサイトに表示するためのHTML、デザインを反映するためのCSS、そして、WEBサイトサイト制作の設計・開発を学んできました。 ここまでで制作したWebサイトは、まだみなさんのパソコンのブラウザでしか見ることが出来ません。ここからは、いよいよ完成したサイトを実際にネットに上げてテスト運用していくための手順をひとつずつ進めていきます。 この授業では、どうやって世界中の人たちがWebサイトを見ることが出来るのか？サーバーって何？というような、インターネットについての基礎知識についてお話します。 また、授業の後半では「レンタルサーバーの借り方」も一緒にやっていきます。 ★授業中に使用するレンタルサーバー：http://lolipop.jp/ 【ロリポップ】 ※ レンタルするプランによってはサーバー会社にお金を払う必要があります サイト制作の大まかな流れは、下記の手順です １）クライアント（お客様）へのヒヤリング ２）ターゲット設定 ３）サイト設計（ワイヤーフレーム） ４）制作仕様書策定（デザインルール、コーディングルール策定） ５）開発（デザイン＆コーディング） ６）ローカルテスト ７）テストサーバーレビュー（クライアントチェック） ８）リリース（本サーバーアップ） ９）ランニング（SEO解析） このシリーズは7番のテストサーバーレビューの為、にレンタルサーバーを借りてサイトをアップロードする演習です。 テストサーバーレビューとは、ローカル（自分のPCの中）で完成したサイトがネット上でどのような動きをするのか検証する事です。自分でデバッグをして問題なければ、クライアント（サイトの発注者）さんにURLをお伝えしてチェックしてもらいます。 授業では、10日間の無料期間のあるレンタルサーバーを使用します。無料期間終了後は月払いだと300円、年払いだと月額250円が必要になってきます。また、すでにレンタルサーバーを借りている人は、次回の授業から参加されても大丈夫です。 今回は、レンタルサーバーに挫折した人でも何なく借りれる様に始終ハンズオンでゆっくり授業を進めていきます。

本授業のサンプルファイルが欠損しており、現在使用不可の状態になっております。ご不便をおかけしてしまい申し訳ございません。 代替授業として以下を準備しておりますので、こちらをご受講いただければ幸いです。 ■基礎からのWordPress https://schoo.jp/class/2442 ■ WordPress未経験でもOK。WordPressオリジナルテーマでサイトを作ろう！【全6回】 ブログツールとして開発されたWordPressは、今は商用サイト利用も盛んに行われ、小規模商用サイトのCMS（管理画面）を持つフレームワークとして大変重宝がられています。 ■ WordPressとは？ WordPress（ワードプレス）はデータベース管理システムにMySQLを利用し、PHPで書かれたオープンソースのブログソフトウェアである。b2/cafelogというソフトウェアの後継として開発された。GNU General Public License（GPL）の下で配布されている。（wikipediaより） 参考： WordPressで作られたサイト 難しい言葉が並んでいますが「ブログソフトウェア」です。同じWordPressでも、「WordPress.com」は、アメブロやはてなブログのように、ほとんどプログラミングの知識が必要ありません。一方、WordPressをインストールしていくには、少しのプログラミングの知識が必要です。（また、インストールに少しコツが必要です） 「WordPress」の魅力は、無料で使用でき、オープンソースのテーマが豊富な事、また、カスタマイズしてフォームやショッピングカートなども設置できる所にあります。また、プラグインを使えば、専門的なSEO対策があっという間にできてしまったり、メニューバー（グローバルナビゲーション）や各種ウィジェットの自動生成ができるなど、マッシュアップを簡単に行う事ができます。 こんな優れたWodrPressも、たった1文字のスペルミスでサイトが表示できなくなってしまったり、phpのコードの羅列が表示されてしまったりと、カスタマイズには挫折してしまった人も多いのではないでしょうか？そんな人に送る、安全で簡単なカスタマイズ法をこのシリーズでは学んで行きます。 ■ 受講にあたって準備するもの 1）ロリポップのアカウント ロリポップでレンタルサーバーの詳しい借り方は、こちらの授業をご覧下さい。授業中にハンズオンでロリポップのサーバーを借ります。 Webサイトをネットに上げるためのサーバーについての「超」基礎知識 授業を見ないでレンタルサーバーを借りる方は、こちらから、ロリポプランをお申込みください。 http://lolipop.jp/ 10日間のお試し期間中に演習します。WordPressのインストールを授業でやりますのでまだインストールはしないで下さい。10日後に入金しなければそのまま制作サイトは消滅します。独自ドメインを取る必要はありません。

■バナー制作習得はWebデザイナーへの第一歩！ デザイナー候補としてWeb制作会社に就職しても、いきなりサイトのデザインを任される事はありません！バナー制作が一人前になって初めてTOP画像や、ページのカンプ制作をまかされるようになります。しかしながら、小さな世界に飛び先の内容を凝縮する仕事ですから、実は大きなトップ画像をつくったり、ランディングページのグラフィックを作るよりむしろテクニックのいる仕事なのです。この授業では、小さな世界「バナー」で飛び先のページ全てを表現するテクニックを学びます。 ■バナーの種類 サイトの中でクリックをうながすために設置される場合と、別のサイトに貼ってもらって、本家サイトに誘致するための物があります。それぞれの場合の情報の選びかたを学びます。 ■バナー広告とは 別のサイトに張って、サイトに誘導する物です。色々な種類のバナー広告の仕組みやWeb広告のASP(アフィリエイトサービスプロバイダ)について学びます。バナー広告は広告の宿命で、嫌われ者になりやすいのです。ウザがられず、目に飛び込み、そして押してもらうためのテクニックを学びます。 ■バナーのサイズは決まっている！ バナー広告の出稿先によって、サイズが決まっています。一つのとび先に向うバナーは通常いくつかのサイズを制作します。それぞれのサイズのバナーの重さが決まっていますので、その重さの中でいかに画像を劣化させないで制作するかがポイントになってきます。 ■受講にあたって準備するもの adobe Photoshop （ヴァージョンは問いません） ・お持ちでない方は、下記のサイトに従って、30日間無料お試し版をダウンロードしてください。 https://creative.adobe.com/ja/products/download/photoshop ・WindowsでもMacでもインストールできますが、メモリ（Ram）は2GM以上入っている事が望ましいです。 ・初めてに触れる人は、以下のトレーニングサイトでチュートリアルやビデオを全て見てPhotoshopの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。Photoshopではどんな事ができるか知っておきましょう。 https://helpx.adobe.com/jp/photoshop.html ■バナー甲子園：関連授業一覧 ・PhotoshopでWebデザインするときの悩みに答えます ・バナーからはじめるクライアントワーク vol1 ・バナーからはじめるクライアントワーク vol2 ・クリックされるバナーをデザインする実践テクニック vol1 ・クリックされるバナーをデザインする実践テクニック vol2 ※バナー甲子園の案件はこちら http://crowdworks.jp/public/jobs/147765

こんなときに役立つ授業です ・パーツを作る毎日に不安を感じている ・会社のサイト担当で1人だけの制作部、我流アートディレクションに不安を感じている ・上司のアートディレクターからの依頼を巧くこなしたい パーツによりすぎて、サイト全体で見ると浮いているボタン、細部にこだわりすぎてレイアウトしにくいパーツなど、独りよがりなとんちんかんなデザインになっていませんか？ パーツ制作物で、接近レンズの視野になっているデザイナーさんに、細部を制作する時も常に広角レンズの目で全体を見渡せる視野を身につける授業です。 最初のコンセプトからかけ離れたオプションの依頼があった場合も、トータルデザインを損なわない手法で、アートディレクターの依頼の意図を的確に判断する手法を学びます。 この後続く、各パーツごとのデザインテクニックの勉強をする前にまず、サイト全体をデザインする手法を学びます。 ■受講にあたって準備するもの Adobe Photoshop （ヴァージョンは問いません） ・お持ちでない方は、下記のサイトに従って、30日間無料お試し版をダウンロー ドしてください。 https://creative.adobe.com/ja/products/download/photoshop ・WindowsでもMacでもインストールできますが、メモリ（Ram）は2GM以上入って いる事が望ましいです。 ・初めてに触れる人は、以下のトレーニングサイトでチュートリアルやビデオを全て見てPhotoshopの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。Photoshopではどんな事ができるか知っておきましょう。 https://helpx.adobe.com/jp/photoshop.html ▼本授業は全2回の連続授業です。両方受講することでより深く学ぶことができます。 ・とんちんかんなデザインにしないためのアートディレクション講座vol1 ・とんちんかんなデザインにしないためのアートディレクション講座vol2

この授業では、実際にサイトのデザインが仕上がり、コーダーやマークアップエンジニアに回す時にどのような事を気をつけなければならないかを細かく学んでいきます。 WEBデザイナー学部では、Webフロント開発全般のスキルを学べる授業が多く解説されています。 Webフロント開発の仕事はグラフィックを扱う「WEBデザイナー」html+cssを扱う「コーダー(マークアップエンジニア)」JavaScriptを扱う「フロントエンドプログラマ」に分かれます。 「#5 Webサイトでよく使うビジュアルデザインの作り方」では本来のWebデザイナーのロールに特化した授業を行ってきました。 アートディレクション講座vol1、アートディレクション講座vol2ではアートディレクターや先輩デザイナーから仕事を振られた時のワークフローについて、 ［押せる感のあるナビゲーションボタン/テイスト別ナビゲーションボタン/サイトトップ画像/ランディングページ］の作り方では各パーツ制作のスキルを実践で学びました。 デザイン倒れにならないWebデザイン術をこのシリーズの締めくくりに学びましょう。 仕上がり見本であるカンプと実際にできあがったサイトに違いがでてしまうのはプロの仕事とはいえません。フリーランスや少数精鋭の制作会社なら自身でコーディングする場合もあります。 コーディングする時になって、困ってコッソリデザインを変えてしまう事にならないようにWebデザインの特性をしっかり学んでいきましょう。

■スマホ経由のWebサイト閲覧頻度はPCの約2倍！ スマホ対応サイトといえども、開発はPCでするもの。タッチパネルでデザインする訳にはいきません。だからと言って、PCのディスプレイで開発し完成したモックを実機デバイスで見るととんでもない事に！文字が小さすぎて全く読めなかったりします。それは、タッチデバイスの解像度がPCの2倍~4倍だからです。つまり、PCで見ている大きさの1/2~1/4に見えてしまうという事です。 Photoshopではレイヤーを沢山重ねたpsdファイルで作業しています。実機検証のために、jpgやgifの1枚画像にしてスマホに送っていたのでは、オンタイムでの確認ができません。スピードが命の現場ですとそんな事を悠長にやっている時間がないので、UIはコーディングとインタラクションでモックを作ってしまい、画像はバラバラにどこかから持ってきてパーツで使っていくというやり方をしてしまう事も多いと思いますが、そんな事をしていてはデザイン以前のUIにしかなりません。 この授業ではスマホサイトを多く手がけている制作会社の現場で行われているUIデザイナーの開発方法を学び、本格的なUIデザインを実践できるスキルを学びます。 ※photoshopがインストールされている事を前提に授業が進んでいきます。 photoshopを使用したWebデザイン制作未経験の方はhttp://schoo.jp/design/「#5:Webサイトでよく使うビジュアルデザインの作り方」の録画授業を受講されると、より理解が深まります。 ※この授業はスマートフォンをご用意していただくことでより理解が深まります。 ダウンロード参考：Skala Preview Ps Play ■2回目の授業で使用するもの ・リンクボタン制作にAdobe CC photoshopを使います。 http://www.adobe.com/jp/products/photoshop.html Adobe CCのアセットを使います。 ・psdからのcss3抽出にAdobe CC DreamWeaverのExtract機能を使います。 https://helpx.adobe.com/jp/dreamweaver/how-to/extract-photoshop-design-code.html ・コーディングにSublimeText3を使います。 http://www.sublimetext.com/3 ・UIのインタラクションにWOWフレームワークをつかいます。 http://mynameismatthieu.com/WOW/

いよいよカリキュラム授業も大詰め これまで、Web制作に関わるさまざまな授業を受けてきたみなさんに、最後はフリーになるために必要なこと・スムーズなプロジェクト進行のための授業です！ フリーランスなら押さえておきたい 「どんな仕事のうけ方をしたらいいの？」 「バックエンド側の人とどうプロジェクト進行していったらいいの？」 制作会社は分業なので、デザインに特化したスキルを掘り下げる力が必要とされますが、フリーなら全部一人でやらなきゃいけない！もしかしたら、そのプロジェクトは自分ひとりではオーバースキルな依頼かもしれません。仕事の依頼が来たら自分の担当箇所を確認しよう！ クラウドソーシングはドラクエで言えばルイーダの酒場。有象無象の衆が駆け出し（Webの）冒険者に仕事を回してくれる場所だけど発注側も発注初心者の事が多い！ どこまでが自分のロールか確認し、開発に入る前にしっかりと納期から逆算してガントチャートを組み立てよう！ また、フリーランスならコーダー、エンジニアなどのロールとチームを組む可能性もある！チームで請け負う仕事の仕方も合わせて学んでいきます。

最新の開発環境をSublimeTextで整える フロントエンドのパフォーマンスを上げタスクを自動化するGruntやYeomanなどを導入するフロントエンドデベロッパー環境が増えてきました。その第一歩となるのが、SublimeTextの導入です。SublimeTextの優れたプラグインを導入し、マルチデバイス対応サイト制作のためのフロントエンドのコーディング開発環境をSublimeTextで整えていくという授業です。 html4またはxhtml1.0のコーディングは分かるので、最新の環境を整えたい方におすすめの授業です。 ※Subulime Textがインストールされている事を前提に授業が進んでいきます。 photoshopを使用したWebデザイン制作未経験の方はhttp://schoo.jp/design/「#2:簡単なWebサイト作りながら学ぶ、HTMLとCSSコーディング（前編）」「#4:簡単なWebサイト作りながら学ぶ、HTMLとCSSコーディング（後編）」の録画授業を受講されると、より理解が深まります。 1）Sublimeのインストール（授業中コードを打つのに使います） 下記のURLからダウンロードしてください。 http://www.sublimetext.com/2 設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。 2）解凍ツール （授業中配布する教材の解凍に使います） 授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。 （Mac OSXの場合はダブルクリックで展開します。windows7~の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK） 3）その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。 Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。 http://www7a.biglobe.ne.jp/~schezo/

この授業では、Webサイトという平面を構成するグラフィックデザインについて、その言葉の意味、タイポグラフィ、SVGを使ったロゴやフォントの作り方、ポートフォリオサイトの制作方法まで学べます。

この授業では合計8回で一通りのWebデザイン制作方法を学びます。 Webサイトを制作する流れを知り、全行程を把握する授業で、Web制作の全てを理解することができます。

この授業では、サイトデザインについて、ロゴマークからファーストビュー、インタラクションデザインまで網羅的に学べます。 良質なサイトデザインを実現したい方におすすめの授業です。

この授業では0から自分でコーディングを行い、一つのスマホサイトを完成させます。 google推奨のモバイルフレンドリーな開発環境を整え、Web制作に欠かせないHTML/CSSのコーディングを学びましょう。 はじめてコーディングを学ぶ方から、HTML入門（全3回）を見て少しコーディングに触れた方など、コーディング初心者を対象としています。 シリーズ7回通してできるようになる事はgoogle推奨のモバイルフレンドリーな開発環境を整え、スマホサイトを完成させる事です。 なお、このシリースで制作したスマホサイトは次のシリーズでtabletやPCなどデバイズごとにデザインが切りかわるレスポンシブサイト制作実践へと続きます。 『Webデザイン入門 0から自分でコーディング！ ~スマホサイト編~』第1回目は、Webフロントエンドの開発環境を自分のPCに作ってしまうという授業です。 授業に臨むPCに以下のご準備をお願いします。 【拡張子の表示】 拡張子とは、ファイルの種類（画像ファイル、テキストファイル、htmlファイルなどを拡張して識別します）を識別するための符号です。これが表示されていなければWebページを構成している各種ファイルの識別ができません。以下リンクを参照されて拡張子を表示しておいてください。 Windows 7の場合 Windows 8の場合 Mac の場合 【使用エディターのインストール】 この授業ではSublimeTextというエディターを使用します。最新版はSublimeText3ですがOSのバーションによってはSublimeText2しかインストールできません。どちらでも構いませんので授業に使用するPCにインストールをしておいてください。 http://www.sublimetext.com/ このエディタはパッケージコントロールをインストールする事により、数々の便利な拡張機能やプラグインを導入する事ができますが、このシリーズでは使用しません。パッケージコントロールやプラグインのインストールしたい場合は以下の授業を見ながら慎重に行ってください。（高度な授業になりますのでこのシリースでは不要です） https://schoo.jp/class/1665

CSSの中でも特に重要なレイアウトやアニメーション効果に関する技術を集めました。 1限1テーマ、float、position、animationなどについて極めていきましょう。 ■ 第2回の授業で使用するテンプレート http://behomazn.com/schoo/20150627/

※ この授業の最新版は https://schoo.jp/class/2770 になります。そちらを御覧ください。 WebサイトはHTML(文章構造)、CSS(視覚構造)、JavaScript(インタラクション)の組み合わせでできています。その中でも、Webサイトの土台となるHTMLを学んでいきましょう。 この授業では、W3C（Web技術の標準規格化非営利団体）で2014年10月28日に勧告となった標準規格のHTML5を書く方法をハンズオンで1から学んでいきます。1回づつ完結していますが、シリーズを通して受講されるとHTMLに対する理解が深まります。 今回の授業では、HTMLの構造である、ネスト構造をわかりやすく学んでいきます。マークアップのルールと書き方を理解し、タグ固有の役割と意味を理解していきます。 ■ 事前準備 テキストエディタをご用意下さい。既にお使いのものが無ければ https://atom.io/ がオススメです。

WebサイトはHTML(文章構造)、CSS(視覚構造)、JavaScript(インタラクション)の組み合わせでできています。その中でも、Webサイトの土台となるHTMLを学んでいきましょう。 この授業では、W3C（Web技術の標準規格化非営利団体）で2014年10月28日に勧告となった標準規格のHTML5を書く方法をハンズオンで1から学んでいきます。1回づつ完結していますが、シリーズを通して受講されるとHTMLに対する理解が深まります。 ■ 事前準備 テキストエディタをご用意下さい。既にお使いのものが無ければ『テキストエディタ入門 Atom基本編 (https://schoo.jp/class/2646)』を参考にご準備下さい。

WebサイトはHTML(文章構造)、CSS(視覚構造)、JavaScript(インタラクション)の組み合わせでできています。その中でも、Webサイトのデザインを担当するCSSを学んで行きましょう。 この授業では、W3C（Web技術の標準規格化非営利団体）で勧告となった最新情報に基づいてCSS2とCSS3を書く方法をハンズオンで1から学んでいきます。1回づつ完結していますが、シリーズを通して受講されるとCSSに対する理解が深まります。 ■ 事前準備 テキストエディタをご用意下さい。既にお使いのものが無ければ https://atom.io/がオススメです。 参考ファイル: 「webデザイナーのためのcss入門」のコード一式のURL http://behomazn.com/schoo/css_Introduction/

スマホサイトの特性と振る舞いを学び、完成予想図通りにHTMLとCSSでコーディングして完成させるまでを学んでいきます。Googleアルゴリズムがスマホ対応サイトを優先するようになり、ますますWebサイトはスマホUIが重要になってきました。コーディングは初めてという方はもちろん、PCサイトは作ったことがあるがスマホサイトは未経験という方にオススメの授業です。 この授業ではスマホサイトの特性と振る舞いを学び、完成予想図通りにHTMLとCSSでコーディングして完成させるまでを学んでいきます。 Googleアルゴリズムがスマホ対応サイトを優先するようになり、ますますWebサイトはスマホUIが重要になってきました。コーディングは初めてという方はもちろん、PCサイトは作ったことがあるがスマホサイトは未経験という方にオススメの授業です。 ■ 事前準備 この授業はテキストエディタとブラウザ(GoogleChrome)を使用します。またHTML／CSSの基本を理解している方を対象としています。自信の無い方は、下記授業をご受講ください。 WebデザインのためのHTML入門 WebデザインのためのCSS入門   この授業では素材ファイルを使用します。事前に第1回の教室（動画ページ）内スライド資料下の「ファイル」ボタンより下記素材ファイルをダウンロードしておいて下さい。 ［2799_downloads］ ファイル内にはjs./css/imagesの他、デザインカンプ画像/遷移図/Webライティング/完成イメージが含まれていますので、都度完成イメージを確認しながら進めましょう。   ※ 授業中では0からコーディングを行っていきますので、可能な方は先生と一緒にコーディングしてみましょう。  

Web制作に欠かせないjQueryの基本を、スマホUIにおけるインタラクションの実装を通じて学んでいきます。 ■ jQueryとは 皆さんは、Webサイトの画像がスライドしたり、ページがスムーズにスクロールしたり、画像をクリックしたらライトボックの中に画像が美しく表示されるのをご覧になったことがあると思います。そのようなサイトのインタラクションを実装するためのものとしてjQueryは人気を誇ってきました。 jQueryはJavaScriptのライブラリです。JavaScriptにはブラウザによって動作が異なるという弱点がありましたが、jQueryを使う事によって、IE6等のレガシーブラウザから最新のブラウザまで、ブラウザの違いを気にせずにインタラクションが実装できるようになりました。 ■ 事前準備 公式サイトからjQueryをダウンロードしておいてください。 https://code.jquery.com/ 【ダウンロード方法】 リンク先の『jQuery 1.x』下にあるminifiedを右クリックしてファイル保存します。 または左クリックをして表示されるscriptタグをHTMLに貼り付けてお使いください。 jQuery 2.x以降はIE6〜8に対応していません。 この授業ではテキストエディタとブラウザを使用します。お手持ちのエディタ、ブラウザで構いませんが、授業では下記を用います。 テキストエディタ Atom https://atom.io/ Webブラウザ Google chrome https://www.google.co.jp/chrome/browser/desktop/index.html

◆授業概要 この授業は、Webデザイナーを目指す方を対象に、Webデザイナーの田中晶子先生が皆さんの制作物の講評と添削、およびWebデザインに関する悩み相談に答えて頂く授業です。Webデザイナールートを受講された方が主な対象となりますが、それ以外の方もぜひご参加下さい。 ※講評対象者は、ルート受講者且つプレミアム学生の作品のみとなります（先着順） 制作物講評だけでなく、Webデザインにおいて皆さんがつまづいている箇所、お悩みなどに田中先生が出来る限りお答えします。 ◆ルート最終課題 本授業ではWebデザイナールートの最終課題を講評対象とします。制作方法がわからない方はルートの授業で学びましょう。 課題内容 カフェのスマートフォン向けサイトデザインを行って下さい。 Shibu Cafe Webサイト制作　デザイン指示書 instruction.pdf 作成のポイント ① 依頼主の要求を満たしている事 ② ワイヤーを元に要素を正しくコーディングできている事 ③ HTMLの要素が適切に割り当てられている事 ④ デザインカンプの作成能力（グラフィックソフト利用力） ⑤ 完成されたサイトが美しい事（粗が無いこと） 提出条件・方法 必須： ・完成作品のスクリーンショット画像（PNG又はJPEG形式推奨） ・完成作品ソースのZipファイル ・作品名 ・作品に対するコメント（サイトテーマと工夫した所は必ずご記入下さい） オプション： ・完成作品が動作するサイトURL ・ソースコードをアップロードしたGithubのURL ・サイト設計時に作成した中間成果物(仕様書、プロトタイプ、ワイヤーフレーム、デザインカンプなど) 作品提出と悩み相談は「kadai@schoo.jp」宛にお送りください。 （※作品は上記のものでなくご自身で制作したサイトでも構いません） 提出期限：2015/11/27(金) 23:59まで   ◆本授業のアジェンダ Webデザイナールートの概要紹介 Webデザインレビュー：先生評価により、ルート最終課題で一番良かった作品を表彰します。 Webデザイン悩み相談 (事前応募あり)

Skala PreviewやSketchなど、iPhoneとミラーリングして常にレビューしながら制作できる機能は、WebやアプリのUIデザイナーにとって欠かせないものになってきました。 この授業はPhotoshop画面をミラーリングできるAdobe公式アプリAbobe Previewや、タッチデバイズのUIのためのPhotoshopCCの進化した機能を使ってデザインカンプを制作する手法を学びます。 コーダーやデベロッパーに喜ばれるデザインをしたいデザイナーの方にオススメです。

「PCサイトコーディング入門」ではPCサイトの特性と振る舞いを学び、デザインカンプ通りにCSSコーディングしてシングルページのPC用UIを完成させるまでを学びます。難易度はターミナルのWebデザイナールート、「A-1 WebデザインのためのHTML入門」（https://schoo.jp/course/276）「A-2 WebデザインのためのCSS入門」（https://schoo.jp/course/285）をご受講済みの方、または同程度のレベルの方に合わせてあります。 ■ 事前準備 この授業はテキストエディタとブラウザ(GoogleChrome)を使用します。 またHTML／CSSの基本を理解している方を対象としています。自信の無い方は、下記授業をご受講ください。 ・WebデザインのためのHTML入門 ・WebデザインのためのCSS入門

■ これからWebデザイナーを目指す人のためのWebデザイン座談会 プロのWebデザイナーに必要なスキルを身につける「マスタープラン」の受講をご検討されている方向けのオンライン説明会です。 今回は特別編として、Webデザイナールートの授業を担当される田中晶子先生をお招きし、Webデザイナーとしての経歴をインタビュー形式でお尋ねしながら、Webデザイナーとして働く意義を考えます。インタビューアーは、マスタープランのサポートを務める岩田宇史講師です。 マスタープランをご検討される方はもちろん、これからWebデザイナーを目指す方にも有意義な内容となっていますので、お気軽にご参加ください。 ■ アジェンダ ・田中晶子先生 自己紹介 ・Webデザイナーになられた経緯 ・Webデザインを学ぶ意義 ・Webデザインとグラフィックデザインの違い ・マスタープランの授業内容について ・これから受講される方へのアドバイス ・質疑応答 ※ 内容は予告なく変更される可能性がございます。予めご了承ください。 通常の説明会も下記日程で行われております。 マスタープランの内容により焦点を当てた内容となっていますので、ぜひあわせてご受講下さい。 【マスタープラン説明会】 ・5/11(水) 20:00~20:30 https://schoo.jp/class/3314 ・5/25(水) 21:00~21:30 https://schoo.jp/class/3315 ■ マスタープランとは？ マスタープランとは、プロを目指す方向けのオンラインサポートプランです。 個別指導とプロのサポートで確かなスキル習得に繋げます。資料請求及びマスタープランの詳細は以下URLからご確認ください。 https://schoo.jp/route/masterplan ■ お問い合わせ スクー「マスタープラン」事務局 メール：route-support@schoo.jp お電話：03-6869-0919 ※電話受付時間：土日祝日・年末年始を除く 11:00〜18:00

Webページの閲覧は、サイトによってはスマートフォン（以降、スマホ）での閲覧が90％を超える時代になりました。スマホがWeb閲覧の主流となりつつある今、UIのデバイス切り替えは欠かせない手法です。 数年前までは、大規模サイトにおいてはPCサイトに付加されるされる形で、スマホ専用サイトを後付けで作るのが通常でした。それがいまでは大手企業のサイトでも一からレスポンシブサイトにリニューアルするところが多くなってきています。 デバイス毎のUIを実装する方法は、MediaQueryを用いてCSSをデバイス幅で切り替えるレスポンシブサイトと、.htaccess（ApacheなどのWebサーバで使用できる、Webサーバの動作をディレクトリ単位で制御するためのファイル）を用いてデバイスによって表示サイトを切り替える手法があります。 この授業では前者のMediaQueryを用いたCSSのコーディング方法を学んでいきます。

この授業は、サポート講師の手厚いフォローが受けられる”マスタープラン”のWebデザイナールートの方を対象に、ルートの授業を多数担当された田中晶子先生と、日頃皆さんのサポートをしているサポート講師岩田宇史先生が、受講生の作成した最終課題「カフェサイトのデザイン」を講評する授業です。 また、就職活動の際、採用担当者は、どのような視点でポートフォリオを見るのか、またWeb業界の職種についての簡単な講義も行います。 最終課題をすでに提出し、今後就職活動が控えている方も、これから最終課題を制作される方も必見の内容です。 この授業は、マスタープランを受講された方が主な対象となりますが、それ以外の方も、受講いただけます。 ※講評対象者は、マスタープラン受講生かつ受講完了生の作品のみとなります。 （課題の提出方法については、別途対象者のみにメールでご連絡させていただいております。）

この授業では、サポート講師の手厚いフォローが受けられる“マスタープラン”のWebデザイナールートおよびWordPresssスペシャリストルートの受講生、受講完了生を対象に、就職活動に役立つ業界研究、失敗しない就転職のコツを学習していきます。 また授業後半は、質問会を開催。マスタープランの授業を受けて分からない点や、課題制作を進める中でお困りの点や悩んでいる点などを、受講生の皆さんと共有して、一緒に解決していきましょう。 ​この授業はマスタープランを受講された方が主な対象となりますが、それ以外の方も受講いただけますので、ぜひご受講ください。 ※本コースは放送当時マスタープランとして開講しておりました ※元のコースタイトル「 マスタープランWebデザイナー/WordPressスペシャリストルート受講生向け特別授業 Web業界に就職するために知っておくべきこと」

Sublime Text はクロスプラットフォーム対応の高機能エディタです。 2008年1月18日に初版Sublime Textが発表、2013年7月8日にSublime Text 2が公開され、 ついにSublime Textの最新版Sublime Text 3が2017年9月13日に正式公開されました。 Sublime Text 3では、定義へ移動する機能、新しい構文強調エンジン、拡張されたAPIが導入されました。またロゴも一新され、インターフェイスが新しくなり、パフォーマンスはSublime Text 2からさらに向上しています。 このコースは、フロントエンドコーディング環境をSublime Text 3とビルドツールで整えていくという授業です。   ※本授業では、Sublime Textがインストールされている事を前提に授業が進んでいきます。    事前に下記URLからダウンロードして準備していただくと、よりスムーズにご受講することができます。   (授業内で設定を一緒に学んでいきますので、授業前に各種設定することは不要です)   https://www.sublimetext.com/3 ※この授業はHTML+CSSコーディングの基礎スキルを習得された方向けです。    HTML+CSSコーディング基礎スキル未習得の方は、下記の授業を先に受講される事をおすすめします。  ・HTML入門  ・WebデザインのためのHTML入門  ・CSS入門  ・WebデザインのためのCSS入門   田中先生の自己紹介や、コース全体についてはこちらからご覧ください。     【ソフトウェア情報】 名称：Sublime Text 3 著作権者：Sublime HQ Pty Ltd（オーストラリア） 対応OS：Windows、Mac、Linux シェアウェア 80米ドル Build 3143（17/09/13） Sublime Textは、無料で試用できますがプロプライエタリですので継続して使用する場合はライセンス（80米ドル）の購入が必要です。 2013年2月以降にライセンスを購入した場合は、「Sublime Text 3」でもそのライセンスを利用することができます。 また、「Sublime Text 1」「Sublime Text 2」の利用者向けには低価格なアップグレードライセンスが提供されています。