たなか あきこ

田中 晶子

webデザイナー

広告(LouisVuittonなどファッション、CBS Sonyなど音楽)、出版(カドカワ) web(富士通、IBM)でのデザイナー・アートディレックションを経てwebフロントエンドの企業研修・個人研修講師をしています。 WEB塾超現場主義では、業務で必要なWEBスキル、WEB業界への転職またはWEB担当部署への配属のためフロントエンド全般のプライベート・スキルトランスファーを担当しています。 WEB塾超現場主義 講師プロフィール WEB塾超現場主義 

田中 晶子

登壇している授業のカテゴリ

担当のコース

この授業では、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デザインに必要なワイヤーフレーム全3回】の1回目です。 「ワイヤーフレーム」とは、Webサイトを作成する前に制作する、コンテンツやレイアウト(配置)を確認して、整理するための構成図です。 この授業では、そんなWebサイトをデザインしていく際のとっかかりとしてワイヤーフレームを作成しながら、「Webサイトにはどのような要素が必要なのか」「Webサイトをデザインの準備をする」という事柄について学んでいければと思っています。 この授業で学べる事は、adobe Illusroratorを使用して、webページの設計図であるワイヤーフレームを設計する方法です。 (※ このシリーズは3回受講する事が前提になっています。) サイト制作の大まかな流れは、下記の様な物になります。 1)クライアント(お客様)へのヒヤリング 2)ターゲット設定 3)サイト設計(ワイヤーフレーム) 4)制作仕様書策定(デザインルール、コーディングルール策定) 5)開発(デザイン&コーディング) 6)ローカルテスト 7)テストサーバーレビュー(クライアントチェック) 8)リリース(本サーバーアップ) 9)ランニング(SEO解析) この演習では、3番のサイト設計を行います。 受講にあたって準備するもの 1)adobe Illusrorator 下記のurlより、ダウンロードしてください。 https://creative.adobe.com/ja/products/illustrator Illusroratorを使うにはまず、Adobe Creative Stationをインストールします。上記のurlから案内に従ってインストールしてください。 体験版は1ヶ月無料で使用できます。 (このシリーズの「WEBデザインのためのPhotoshop」まで無料体験版を使用する為には、5月4日以降にインストールをして下さい。) ・容量が大きいのでダウンロードにかなり時間がかかります。 ・wiondowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入っている事が望ましいです。 ・初めてに触れる人は、以下のトレーニングビデオを全て見てIllustoratorの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。Illustoratorではどんな事ができるか知っておきましょう。 【Illustrator CC とは何ですか】 https://helpx.adobe.com/jp/creative-cloud/tutorials/video/what-is-illustrator.html 【独学でWebデザイン Illustrator 使い方 1回〜9回】 ・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回目 グラデーションパレットとグラデーションツール 2)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デザインに必要なワイヤーフレーム全3回】」にて制作したワイヤーフレーム(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デザインに必要なワイヤーフレーム全3回】の事前受講をオススメします。   サイト制作の大まかな流れは、下記の様な物になります。 1)クライアント(お客様)へのヒヤリング 2)ターゲット設定 3)サイト設計(ワイヤーフレーム) 4)制作仕様書策定(デザインルール、コーディングルール策定) 5)開発(デザイン&コーディング) 6)ローカルテスト 7)テストサーバーレビュー(クライアントチェック) 8)リリース(本サーバーアップ) 9)ランニング(SEO解析)   この演習では、5番の開発の部分です。 ワイヤーフレームのレイアウト通りにコーディングするスキルを身につけます。   受講にあたって準備するもの 1)adobe DreamWeaverCC 下記のurlより、ダウンロードしてください。 https://creative.adobe.com/ja/products/dreamweaver DreamWeaverを使うにはまず、Adobe Creative Stationをインストールします。上記のurlから案内に従ってインストールしてください。 体験版は1ヶ月無料で使用できます。(既に旧ヴァージョンのadobe DreamWeaverを使用して授業を受ける事も可能です。)   ・容量が大きいのでダウンロードにかなり時間がかかります。 ・wiondowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入っている事が望ましいです。 ・windowsXPをお使いの方はサービスパック3(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デザインに必要なワイヤーフレーム全3回】の事前受講をオススメします。   サイト制作の大まかな流れは、下記の様な物になります。 1)クライアント(お客様)へのヒヤリング 2)ターゲット設定 3)サイト設計(ワイヤーフレーム) 4)制作仕様書策定(デザインルール、コーディングルール策定) 5)開発(デザイン&コーディング) 6)ローカルテスト 7)テストサーバーレビュー(クライアントチェック) 8)リリース(本サーバーアップ) 9)ランニング(SEO解析)   この演習では、5番の開発の部分です。 ワイヤーフレームのレイアウト通りにコーディングするスキルを身につけます。   受講にあたって準備するもの 1)adobe DreamWeaverCC 下記のurlより、ダウンロードしてください。 https://creative.adobe.com/ja/products/dreamweaver DreamWeaverを使うにはまず、Adobe Creative Stationをインストールします。上記のurlから案内に従ってインストールしてください。 体験版は1ヶ月無料で使用できます。(既に旧ヴァージョンのadobe DreamWeaverを使用して授業を受ける事も可能です。)   ・容量が大きいのでダウンロードにかなり時間がかかります。 ・wiondowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入っている事が望ましいです。 ・windowsXPをお使いの方はサービスパック3(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デザインに必要なワイヤーフレーム全3回】の事前受講をオススメします。   サイト制作の大まかな流れは、下記の様な物になります。 1)クライアント(お客様)へのヒヤリング 2)ターゲット設定 3)サイト設計(ワイヤーフレーム) 4)制作仕様書策定(デザインルール、コーディングルール策定) 5)開発(デザイン&コーディング) 6)ローカルテスト 7)テストサーバーレビュー(クライアントチェック) 8)リリース(本サーバーアップ) 9)ランニング(SEO解析)   この演習では、5番の開発の部分です。 ワイヤーフレームのレイアウト通りにコーディングするスキルを身につけます。   受講にあたって準備するもの 1)adobe DreamWeaverCC 下記のurlより、ダウンロードしてください。 https://creative.adobe.com/ja/products/dreamweaver DreamWeaverを使うにはまず、Adobe Creative Stationをインストールします。上記のurlから案内に従ってインストールしてください。 体験版は1ヶ月無料で使用できます。(既に旧ヴァージョンのadobe DreamWeaverを使用して授業を受ける事も可能です。)   ・容量が大きいのでダウンロードにかなり時間がかかります。 ・wiondowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入っている事が望ましいです。 ・windowsXPをお使いの方はサービスパック3(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を使って習得します。 ■ 授業でデザイン〜コーディングしていっている仕様書 大きなトップ画像3枚は【jQueryの基礎を理解する】の授業で設置するカルーセル(画像がスライドする仕組み)になり、小さなサムネールは、同じく【jQueryの基礎を理解する】で設置するライトボックス(サムネール画像をクリックしたら大きな画像がポップアップする仕組み)のトリガーになります。 webデザイナー科目入門編は、この全3回シリーズの後、「jQueryの基礎を理解する全6回」を経て、最後にの【HTMLとCSSを使って、150分で簡単なWEBサイト制作全6回】の6回目で修了となります。その後「jQueryの基礎を理解する全6回」の6回目でweb制作ワークフロー全行程完了となります。シリーズを通して授業を受けると小規模なwebサイトを制作するスキルを身に付ける事ができます。 途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインに必要なワイヤーフレーム全3回】の事前受講をオススメします。 事前に予習しておくと良い授業 【HTMLとCSSを使って、150分で簡単なWEBサイト制作】 【WEBデザインに必要なワイヤーフレーム全3回】 をご覧になる事をオススメします。 サイト制作の大まかな流れは、下記の様な物になります。 1)クライアント(お客様)へのヒヤリング 2)ターゲット設定 3)サイト設計(ワイヤーフレーム) 4)制作仕様書策定(デザインルール、コーディングルール策定) 5)開発(デザイン&コーディング) 6)ローカルテスト 7)テストサーバーレビュー(クライアントチェック) 8)リリース(本サーバーアップ) 9)ランニング(SEO解析) この演習では、5番の開発の部分です。 ワイヤーフレームのレイアウト通りにコーディングするスキルを身につけます。 受講にあたって準備するもの 1)adobe DreamWeaverCC 下記のurlより、ダウンロードしてください。 https://creative.adobe.com/ja/products/dreamweaver DreamWeaverを使うにはまず、Adobe Creative Stationをインストールします。上記のurlから案内に従ってインストールしてください。 体験版は1ヶ月無料で使用できます。(既に旧ヴァージョンのadobe DreamWeaverを使用して授業を受ける事も可能です。) ・容量が大きいのでダウンロードにかなり時間がかかります。 ・wiondowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入っている事が望ましいです。 ・windowsXPをお使いの方はサービスパック3(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 クリエイティブクラウドの体験版を使用してこられた方は、体験期間の1ヶ月が終了していますので、この授業ではコーディングツールはSublime Text2を使用していきます。 adobe クリエイティブクラウドは月単位の課金が可能です。既にDream Weaver(ヴァージョンは問いません)をお持ちの方、adobe クリエイティブクラウドに課金して利用を続行する方はDream Weaverを使用して頂いてかまいません。 サイト制作の大まかな流れは、下記の様な物になります。 1)クライアント(お客様)へのヒヤリング 2)ターゲット設定 3)サイト設計(ワイヤーフレーム) 4)制作仕様書策定(デザインルール、コーディングルール策定) 5)開発(デザイン&コーディング) 6)ローカルテスト 7)テストサーバーレビュー(クライアントチェック) 8)リリース(本サーバーアップ) 9)ランニング(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回の事前受講をオススメします。 サイト制作の大まかな流れは、下記の様な物になります。 1)クライアント(お客様)へのヒヤリング 2)ターゲット設定 3)サイト設計(ワイヤーフレーム) 4)制作仕様書策定(デザインルール、コーディングルール策定) 5)開発(デザイン&コーディング) 6)ローカルテスト 7)テストサーバーレビュー(クライアントチェック) 8)リリース(本サーバーアップ) 9)ランニング(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サイト制作全6回」の最終回です。 ワイヤーフレーム作りのサイト設計から始まり、カンプ制作、テンプレートコーディング、画像張り込み、jQuery設置とサイトの開発実習を行ってきました。本日は、提出いただいた完成サイトの添削と質疑応答です。 jQueryに触れた事の無い方は、下記の授業で勉強しましょう。 ■レスポンシブなサイトにあっという間にjQueryを実装する ■挫折した人のための、初心者速習html+css【JQueryでTOP画像がクルクル動くようにしてみよう編】 ■挫折した人のための、初心者速習html+css【JQueryで商品画像をポップアップさせよう編】 途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインのためのPhotoshop】全3回の事前受講をオススメします。 サイト制作の大まかな流れは、下記の様な物になります。 1)クライアント(お客様)へのヒヤリング 2)ターゲット設定 3)サイト設計(ワイヤーフレーム) 4)制作仕様書策定(デザインルール、コーディングルール策定) 5)開発(デザイン&コーディング) 6)ローカルテスト 7)テストサーバーレビュー(クライアントチェック) 8)リリース(本サーバーアップ) 9)ランニング(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/ 【ロリポップ】 ※ レンタルするプランによってはサーバー会社にお金を払う必要があります サイト制作の大まかな流れは、下記の手順です 1)クライアント(お客様)へのヒヤリング 2)ターゲット設定 3)サイト設計(ワイヤーフレーム) 4)制作仕様書策定(デザインルール、コーディングルール策定) 5)開発(デザイン&コーディング) 6)ローカルテスト 7)テストサーバーレビュー(クライアントチェック) 8)リリース(本サーバーアップ) 9)ランニング(SEO解析) このシリーズは7番のテストサーバーレビューの為、にレンタルサーバーを借りてサイトをアップロードする演習です。 テストサーバーレビューとは、ローカル(自分のPCの中)で完成したサイトがネット上でどのような動きをするのか検証する事です。自分でデバッグをして問題なければ、クライアント(サイトの発注者)さんにURLをお伝えしてチェックしてもらいます。 授業では、10日間の無料期間のあるレンタルサーバーを使用します。無料期間終了後は月払いだと300円、年払いだと月額250円が必要になってきます。また、すでにレンタルサーバーを借りている人は、次回の授業から参加されても大丈夫です。 今回は、レンタルサーバーに挫折した人でも何なく借りれる様に始終ハンズオンでゆっくり授業を進めていきます。

■ 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入門 この授業では素材ファイルを使用します。事前に下記素材ファイルをダウンロードして置いて下さい。 http://behomazn.com/schoo/20150928/images.zip また以下サンプルファイルも適時参考になさって下さい。 デザインカンプ画像: http://behomazn.com/schoo/20150928/images/design.png 遷移図: http://behomazn.com/schoo/20150928/link.jpg Webライティング: http://behomazn.com/schoo/20150928/writing.txt 本日の完成イメージ: http://behomazn.com/schoo/20150928/ ※ 授業中では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スペシャリストルートの受講生、受講完了生を対象に、就職活動に役立つ業界研究、失敗しない就転職のコツを学習していきます。 また授業後半は、質問会を開催。マスタープランの授業を受けて分からない点や、課題制作を進める中でお困りの点や悩んでいる点などを、受講生の皆さんと共有して、一緒に解決していきましょう。 ​この授業はマスタープランを受講された方が主な対象となりますが、それ以外の方も受講いただけますので、ぜひご受講ください。

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」の利用者向けには低価格なアップグレードライセンスが提供されています。

担当の授業一覧 全136授業

Sublime Text入門 -第4回-【npmで構築する開発環境Gulp編】

第4回 Sublime Text入門 -第4回-【npmで構築する開発環境Gulp編】(45分)

2018年1月13日放送

ウェブフロントエンド開発では「タスクランナー」や「ビルドツール」と呼ばれる必要な処理を自動化してくれる システムを挿入し、それらで作られた環境内に必要なツールをセットアップした環境で開発する事が多くなりました。 Grunt、 webpackなどがありますが、第3回では、今フロントエンドで最も多く使われているツールの一つ、 Gulpでの開発環境構築を学んでいきましょう。 GulpはNode.jsをベースとしたビルドツールです。 さまざまな作業を自動化することができます。 Gulpの特徴はファイルの処理をストリームで行うというところです。この事により複雑なタスクも細かく カスタマイズする事ができます。   ※第4回ではコマンドラインを使います。Windowsでは「コマンドプロンプト」、 MacOSでは「ターミナル」が授業中に直ぐに起動できる様にしておいてください。   ※受講前に最新のNode.jsのインストールをお願いします。 https://nodejs.org/ja/ ・nvm(Node.jsのパッケージ管理ツール)を導入している場合は最新バージョンのNode.jsを使えるようにしておいてください。 ・必ずコマンドプロンプト(Windows)かターミナル(Mac)で  node -v  と打ち、ストールがされている事を確認してから授業に臨んでください。  インストールされている場合は、下記の様にヴァージョンが表示されます。  v8.8.1   ※Gulpについては以下の授業も参考にしてください。 Gulp入門  

Webデザイン座談会 田中晶子先生 ✕ 岩田宇史サポート講師 【マスタープラン説明会特別編・生放送限定】

第1回 Webデザイン座談会 田中晶子先生 ✕ 岩田宇史サポート講師 【マスタープラン説明会特別編・生放送限定】(30分)

2016年5月15日放送

■ これから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デザイナーを目指す人のための、Webデザインレビュー授業

第1回 Webデザイナーを目指す人のための、Webデザインレビュー授業(60分)

2015年12月1日放送

◆授業概要 この授業は、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デザイン悩み相談 (事前応募あり)

WebデザインのためのjQuery入門 -フォーム入力チェックの実装-

第6回 WebデザインのためのjQuery入門 -フォーム入力チェックの実装-(60分)

2015年11月14日放送

Web制作に欠かせないjQueryの基本を、スマホUIにおけるインタラクションの実装を通じて学んでいきます。最終回はフォームで入力漏れがあった場合に送信できない仕組みをjQueryで実装していきます。 ■ 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デザインのためのjQuery入門 -モーダルウィンドウの実装-

第5回 WebデザインのためのjQuery入門 -モーダルウィンドウの実装-(60分)

2015年11月7日放送

Web制作に欠かせないjQueryの基本を、スマホUIにおけるインタラクションの実装を通じて学んでいきます。5限目は、サムネイル画像やボタンをクリックしたらポップアップするモーダルウィンドウをjQueryのコードを書いて実装していきます。 ■ 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デザインのためのjQuery入門 -アコーディオンの実装-

第4回 WebデザインのためのjQuery入門 -アコーディオンの実装-(60分)

2015年10月31日放送

Web制作に欠かせないjQueryの基本を、スマホUIにおけるインタラクションの実装を通じて学んでいきます。4限目は、クリックすると畳まれている内容が表示される、アコーディオンのようなUIをjQueryのコードを書いて実装していきます。 ■ 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デザインのためのjQuery入門 -ドロワーメニューの実装-

第3回 WebデザインのためのjQuery入門 -ドロワーメニューの実装-(60分)

2015年10月24日放送

Web制作に欠かせないjQueryの基本を、スマホUIにおけるインタラクションの実装を通じて学んでいきます。 3限目は、ドロワーメニューのコードをjQueryで書いていきます。 ■ 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デザインのためのjQuery入門 -スムーズに上にもどるボタンの実装-

第2回 WebデザインのためのjQuery入門 -スムーズに上にもどるボタンの実装-(60分)

2015年10月17日放送

Web制作に欠かせないjQueryの基本を、スマホUIにおけるインタラクションの実装を通じて学んでいきます。 2限目は、クリックするとスムーズに上に戻ってくれるボタンをjQueryのコードを書いて実装していきます。 ■ 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デザインのためのjQuery入門 -スマホサイトのためのjQuery-

第1回 WebデザインのためのjQuery入門 -スマホサイトのためのjQuery-(60分)

2015年10月10日放送

Web制作に欠かせないjQueryの基本を、スマホUIにおけるインタラクションの実装を通じて学んでいきます。 1限目は、jQueryの概要とその使い方について学んでいきましょう。 ■ 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

スマホサイトコーディング入門 -メインコンテンツのUIを作る-

第4回 スマホサイトコーディング入門 -メインコンテンツのUIを作る-(60分)

2015年9月21日放送

この授業ではスマホサイトの特性と振る舞いを学び、完成予想図通りにHTMLとCSSでコーディングして完成させるまでを学んでいきます。 Googleアルゴリズムがスマホ対応サイトを優先するようになり、ますますWebサイトはスマホUIが重要になってきました。コーディングは初めてという方はもちろん、PCサイトは作ったことがあるがスマホサイトは未経験という方にオススメの授業です。 今回のアジェンダアジェンダ ・メインコンテンツのコーディング ・文字のデザイン指定 ・エミュレーターチェック ・実機検証 ■ 事前準備 この授業はテキストエディタとブラウザ(GoogleChrome)を使用します。またHTML/CSSの基本を理解している方を対象としています。自信の無い方は、下記授業をご受講ください。 WebデザインのためのHTML入門 WebデザインのためのCSS入門 はじめて受講される方は、前回までの演習素材を下記URLからダウンロードしておいて下さい。 http://behomazn.com/schoo/20150921/schoo_kids.zip サイトの完成図です。サイズが全て%表記されています。制作のヒントにして下さい。 http://behomazn.com/schoo/20150921/size.jpg CSSの完成見本です。CSSはこちらを手本にコーディングしてみてください。 http://behomazn.com/schoo/20150921/schoo_kids/css/style.css

スマホサイトコーディング入門 -ファーストビューのUIを作る-

第3回 スマホサイトコーディング入門 -ファーストビューのUIを作る-(60分)

2015年9月21日放送

この授業ではスマホサイトの特性と振る舞いを学び、完成予想図通りにHTMLとCSSでコーディングして完成させるまでを学んでいきます。 Googleアルゴリズムがスマホ対応サイトを優先するようになり、ますますWebサイトはスマホUIが重要になってきました。コーディングは初めてという方はもちろん、PCサイトは作ったことがあるがスマホサイトは未経験という方にオススメの授業です。 今回のアジェンダアジェンダ ・スマホにフィットするファーストビューの作り方 ・レビュー/実機検証 ■ 事前準備 この授業はテキストエディタとブラウザ(GoogleChrome)を使用します。またHTML/CSSの基本を理解している方を対象としています。自信の無い方は、下記授業をご受講ください。 WebデザインのためのHTML入門 WebデザインのためのCSS入門 はじめて受講される方は、前回までの演習素材を下記URLからダウンロードしておいて下さい。 http://behomazn.com/schoo/20150921/20150921.zip サイトの完成図です。サイズが全て%表記されています。制作のヒントにして下さい。 http://behomazn.com/schoo/20150921/size.jpg CSSの完成見本です。CSSはこちらを手本にコーディングしてみてください。 http://behomazn.com/schoo/20150921/schoo_kids/css/style.css ■ そのリンク スライドP4: Page Ruler(chromeの拡張機能)  https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn スライドP9: html-5-reset-stylesheet http://html5doctor.com/html-5-reset-stylesheet/

スマホサイトコーディング入門 -スマートフォンUIの特徴とCSSコーディング-

第2回 スマホサイトコーディング入門 -スマートフォンUIの特徴とCSSコーディング-(60分)

2015年9月14日放送

この授業ではスマホサイトの特性と振る舞いを学び、完成予想図通りにHTMLとCSSでコーディングして完成させるまでを学んでいきます。 Googleアルゴリズムがスマホ対応サイトを優先するようになり、ますますWebサイトはスマホUIが重要になってきました。コーディングは初めてという方はもちろん、PCサイトは作ったことがあるがスマホサイトは未経験という方にオススメの授業です。 今回のアジェンダアジェンダ ・スマホUIの仕組み ・スマホUIに必要な物 ・モバイルフレンドリーなUIを実現する方法 ■ 事前準備 この授業はテキストエディタとブラウザ(GoogleChrome)を使用します。またHTML/CSSの基本を理解している方を対象としています。自信の無い方は、下記授業をご受講ください。 WebデザインのためのHTML入門 WebデザインのためのCSS入門 この授業では素材ファイルを使用します。事前に下記素材ファイルをダウンロードして置いて下さい。 http://behomazn.com/schoo/20150928/images.zip   また以下サンプルファイルも適時参考になさって下さい。 デザインカンプ画像: http://behomazn.com/schoo/20150928/images/design.png 遷移図: http://behomazn.com/schoo/20150928/link.jpg Webライティング: http://behomazn.com/schoo/20150928/writing.txt 本日の完成イメージ: http://behomazn.com/schoo/20150928/ ※ 授業中では0からコーディングを行っていきますので、可能な方は先生と一緒にコーディングしてみましょう。

スマホサイトコーディング入門 -構造設計とHTMLコーディング-

第1回 スマホサイトコーディング入門 -構造設計とHTMLコーディング-(60分)

2015年9月14日放送

この授業ではスマホサイトの特性と振る舞いを学び、完成予想図通りにHTMLとCSSでコーディングして完成させるまでを学んでいきます。 Googleアルゴリズムがスマホ対応サイトを優先するようになり、ますますWebサイトはスマホUIが重要になってきました。コーディングは初めてという方はもちろん、PCサイトは作ったことがあるがスマホサイトは未経験という方にオススメの授業です。 今回のアジェンダ ・スマホ用UIが必要とされる理由 ・制作現場での制作手順 ・コーディング ■ 事前準備 この授業はテキストエディタとブラウザ(GoogleChrome)を使用します。またHTML/CSSの基本を理解している方を対象としています。自信の無い方は、下記授業をご受講ください。 WebデザインのためのHTML入門 WebデザインのためのCSS入門 この授業では素材ファイルを使用します。事前に下記素材ファイルをダウンロードして置いて下さい。 http://behomazn.com/schoo/20150928/images.zip   また以下サンプルファイルも適時参考になさって下さい。 デザインカンプ画像: http://behomazn.com/schoo/20150928/images/design.png 遷移図: http://behomazn.com/schoo/20150928/link.jpg Webライティング: http://behomazn.com/schoo/20150928/writing.txt 本日の完成イメージ: http://behomazn.com/schoo/20150928/ ※ 授業中では0からコーディングを行っていきますので、可能な方は先生と一緒にコーディングしてみましょう。  

Webデザイン入門 初めてのコーディング 〜マルチデバイスへの対応方法〜

第8回 Webデザイン入門 初めてのコーディング 〜マルチデバイスへの対応方法〜(60分)

2015年6月13日放送

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

Webデザイン入門 初めてのコーディング 〜細部のcssを組み立てよう!〜

第7回 Webデザイン入門 初めてのコーディング 〜細部のcssを組み立てよう!〜(60分)

2015年6月6日放送

■ Webデザイン入門 0から自分でコーディング!~スマホサイト編~(全7回)7回目 はじめてコーディングを学ぶ方から、HTML入門(全3回)を見て少しコーディングに触れた方など、コーディング初心者を対象としています。 シリーズ7回通してできるようになる事はgoogle推奨のモバイルフレンドリーな開発環境を整え、スマホサイトを完成させる事です。 なお、このシリースで制作したスマホサイトは次のシリーズでtabletやPCなどデバイズごとにデザインが切りかわるレスポンシブサイト制作実践へと続きます。 『Webデザイン入門 0から自分でコーディング! ~スマホサイト編~』最終回目は、6回までで形作られたWebページを、より操作性を上げ魅力的にブラッシュアップしていく手法を学びます。 この授業は第4回目の授業を受講している事を前提に授業が進みます。未受講の方は、あらかじめ受講されるとより理解が深まります。 授業に臨むPCに以下のご準備をお願いします。 本時限までで出来るサイトサンプル http://behomazn.com/schoo/201506062/ 【拡張子の表示】 拡張子とは、ファイルの種類(画像ファイル、テキストファイル、htmlファイルなどを拡張して識別します)を識別するための符号です。これが表示されていなければWebページを構成している各種ファイルの識別ができません。以下リンクを参照されて拡張子を表示しておいてください。 Windows 7の場合 Windows 8の場合 Mac の場合 【使用エディターのインストール】 このコースではSublineTextというエディターを使用します。最新版はSublineText3ですがOSのバーションによってはSublineText2しかインストールできません。どちらでも構いませんので授業に使用するPCにインストールをしておいてください。 http://www.sublimetext.com/ このエディタはパッケージコントロールをインストールする事により、数々の便利な拡張機能やプラグインを導入する事ができますが、このシリーズでは使用しません。パッケージコントロールやプラグインのインストールしたい場合は以下の授業を見ながら慎重に行ってください。(高度な授業になりますのでこのシリースでは不要です) https://schoo.jp/class/1665 ■ 授業内容内容の補足 タイムラインの【後半】質疑応答で Q:ナビが開かないのですが、どうしたら良いでしょうか? (30:05) というご質問がありました。 原因をスクー学生のTakahiro Natsume氏が解明してくださいました。ありがとうございました。 Navの右側の開閉ボタンの左にあるSNSボタンのulが無駄に長く、余った部分がボタンの上に被さっているため、「押せな状態になっている」とご指摘いただきました。 授業中のプロパティ#snsに対する90行目の辺りの、width: 15rem;の指定を8remに変更してください。半分弱にする事によってボタンの上に重ならなくなります。なお、スライドp13に書かれているサンプルの方は修正済みです。

Webデザイン入門 初めてのコーディング 〜コンテンツでページを埋めていこう!②〜

第6回 Webデザイン入門 初めてのコーディング 〜コンテンツでページを埋めていこう!②〜(60分)

2015年6月6日放送

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

Webデザイン入門 初めてのコーディング 〜コンテンツでページを埋めていこう!①〜

第5回 Webデザイン入門 初めてのコーディング 〜コンテンツでページを埋めていこう!①〜(60分)

2015年5月30日放送

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

Webデザイン入門 初めてのコーディング 〜スケルトンを作ろう!〜

第4回 Webデザイン入門 初めてのコーディング 〜スケルトンを作ろう!〜(60分)

2015年5月30日放送

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

Webデザイン入門 初めてのコーディング 〜プロトタイピングを作ろう!〜

第3回 Webデザイン入門 初めてのコーディング 〜プロトタイピングを作ろう!〜(60分)

2015年5月23日放送

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

Webデザイン入門 初めてのコーディング 〜モバイルフレンドリーなサイトとは〜

第2回 Webデザイン入門 初めてのコーディング 〜モバイルフレンドリーなサイトとは〜(60分)

2015年5月16日放送

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

Webデザイン入門 はじめてのコーディング 〜全7回で制作するサイトのコーディング工程確認〜

第1回 Webデザイン入門 はじめてのコーディング 〜全7回で制作するサイトのコーディング工程確認〜(60分)

2015年5月9日放送

■ Webデザイン入門 0から自分でコーディング!~スマホサイト編~(全7回)1回目 はじめてコーディングを学ぶ方から、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

Sublime Text+Sassで爆速コーディング【インストール編】

第5回 Sublime Text+Sassで爆速コーディング【インストール編】(60分)

2015年2月14日放送

cssはネストの構造を記述する事ができないため、うまく優先順位を考慮しなければ指定できなかったり、後で書いた記述に上書きされてしまったりします。CSSプリプロセッサ(CSS拡張メタ言語)を使えばhtmlのネスト構造のままスタイルを設定できるようになります。大規模なサイトになるほどネストの階層は深まって行きますが、そのままの構造でスタイルが当てられるのでセレクタが被る事がありません。また、ナビボタンに一つづつ違う画像を指定するなどの連番のクラス名をつける、4〜5個のベンダープレフィックスをつけるなどを、一発指定するという神業をやってのけます。 この授業はCSSプリプロセッサSassをSublimeTextに導入して操作する方法を学びます。 CSSプリプロセッサにはBootstrapで採用されているLessなどがありますが、Sassはcssに近いScss記法で親しみやすいため、最もユーザー数の多いCSSプリプロセッサです。 Rubyをインストールする必要があります。MacはRubyが標準装備されています。Windowsの方は、下記のサイトを参照にしてRubyのインストールをしてください。 http://www.rubylife.jp/install/install/index1.html ※Subulime Textがインストールされている事を前提に授業が進んでいきます。 1)Sublimeのインストール 下記のURLからダウンロードしてください。 http://www.sublimetext.com/2 2) Sublimeの設定 下記の授業を見て、必要な設定をしておく事をお勧めします。 ・マルチデバイス対応コーディングのためのSublimeText【環境整備編】 3) 以下の授業を受講するとより理解が深まります。 ・コーディング時間を1/3にするSublimeTextだからできるemmet連動 ・SublimeTextだからできるFTP連動と正しいディレクトリ管理

Sass導入に必須!SublimeTextで黒い画面(コマンドライン)と仲良くなる

第4回 Sass導入に必須!SublimeTextで黒い画面(コマンドライン)と仲良くなる(60分)

2015年1月31日放送

フロントエンドの開発にはプログラムを制御・統合するビルドツール、処理を自動化し結果を出すタスクランナー、CSS拡張メタ言語からCSSをコンパイルするCSSプリプロセッサなどが導入されるようになり、それらの使用には「黒い画面」と呼ばれているコマンドラインが必要不可欠になってきました。 1回目は、その中でも定番と言っていいほど導入の進んでいるSassを導入するためのコマンドラインを使った設定を学んでいきます。 コマンドラインはMacでは「ターミナル」、Windowsには「コマンドプロンプト」がデフォルトで用意されています。Windowsではもう一つのコマンドラインツールであるPowerShellがあり、SublimeTextを中心に構築していくフロントエンド開発環境ではPowerShellを使用します。初めて名前を聞く人もいると思いますので、 標準装備されているのを確認してください。 Windws 7 スタートメニュー>すべてのプロラム>「Windows PowerShell」と入力すると確認できます。 Windws 8 スタート画面>すべてのアプリ>「Windows システムツール」の項目にあります。 ※Subulime Textがインストールされている事を前提に授業が進んでいきます。 1)Sublimeのインストール 下記のURLからダウンロードしてください。 http://www.sublimetext.com/2 2) Sublimeの設定 下記の授業を見て、必要な設定をしておく事をお勧めします。 ・マルチデバイス対応コーディングのためのSublimeText【環境整備編】 3) 以下の授業を受講するとより理解が深まります。 ・コーディング時間を1/3にするSublimeTextだからできるemmet連動 ・SublimeTextだからできるFTP連動と正しいディレクトリ管理

SublimeTextだからできるFTP連動と正しいディレクトリ管理

第3回 SublimeTextだからできるFTP連動と正しいディレクトリ管理(70分)

2015年1月24日放送

SublimeTextを使用した完璧なディレクトリ管理を学ぶ 1回目・2回目で、SublimeTextを使用したフロントエンドコーディングの開発環境が整いました。 この授業ではローカル作業からネット上へファイルの更新・新規追加をしていく作業を学びます。 またSublimeTextを使用した完璧なディレクトリ管理を学んでいきます。 FFFTPやサイバーダックなどを使用している方、ディレクトリ管理がいまいちよくわかれず、先祖がえりを起してしまう方は必見です。 ※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/    

コーディング時間を1/3にするSublimeTextだからできるemmet連動

第2回 コーディング時間を1/3にするSublimeTextだからできるemmet連動(70分)

2015年1月17日放送

コーディングを爆速にしてくれるemmetの導入 cssコーディングの効率化のためにsassなどコンパイルが必要な技術を使うことが多くなってきました。その導入として、コーディングを爆速にしてくれるemmetをSublimeTextに導入していきます。 emmetは以前はZen-Codingと言う物でした。HTML/CSSをショートカット+スニペットで簡略化してコードを書くことができるライブラリです。このライブラリがSublimeTextのプラグインとして導入されて、コーディングは慣れれば約1/3の時間で出来るようになりました。これを覚えない手はありません!この授業でしっかり導入方法を、使用方法を学んでいきましょう。 ※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/  

マルチデバイス対応コーディングのためのSublimeText【環境整備編】

第1回 マルチデバイス対応コーディングのためのSublimeText【環境整備編】(70分)

2015年1月10日放送

最新の開発環境を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デザイナーの役割【タッチデバイス時代のUIデザイン】

第3回 開発現場でのWebデザイナーの役割【タッチデバイス時代のUIデザイン】(70分)

2014年12月20日放送

■Webディレクター・フロントエンドデベロッパーとの共同開発でデザイナーがすべき事とは? この授業では、モバイルファースト時代のWebサイト制作において、Webディレクター・フロントエンドデベロッパーとの共同開発でデザイナーがすべき事を学んでいきます。 タッチデバイス対応サイトはUXと言われているように、UI自体がエクスペリエンス(体験)を内包しています。見るだけのサイト(PC)から体験するサイト(タッチデバイス)へ。熟練したデザイナーこそ2次元の中でデザインをしてしまいがち。 タッチデバイス対応サイトやアプリ開発では、Webディレクターはエクスペリエンスを考えたワイヤーを作ってきますので、インタラクション担当のフロントエンドデベロッパーとの共同作業でモックを作っていくワークフローになります。PCサイトの手法で、Webディレクターが持ってきたワイヤーからデザイナーが一枚絵のカンプを起こし、コーダーさんに渡してスライスに切ってもらう、という流れでは表現できないからです。これからますますWebへのアクセス比重がスマホへシフトしていく中、フロントエンドデベロッパーとUIデザイナーはますます連携を深めて開発して行く事になるでしょう。少数精鋭の制作現場においては、フロントエンドデベロッパーがUIデザイナーを兼ねている事も少なくありません。そんな今時のフロント開発現場でのお役立ち情報をお伝えします。 ※photoshopがインストールされている事を前提に授業が進んでいきます。 photoshopを使用したWebデザイン制作未経験の方はhttp://schoo.jp/design/「#5:Webサイトでよく使うビジュアルデザインの作り方」の録画授業を受講されると、より理解が深まります。 ■第1回、第2回の授業はこちら 第1回 タッチデバイス時代のUIデザインの極意 Photoshopと連携したデザイン実践スキル 第2回 タッチデバイス時代のUIデザインの極意 脱静止画で体験するサイトへ

脱静止画で体験するサイトへ【タッチデバイス時代のUIデザイン】

第2回 脱静止画で体験するサイトへ【タッチデバイス時代のUIデザイン】(70分)

2014年12月13日放送

■タッチデバイスにはインタラクションが必要です。 UIを静止画で考えてはいけません! 見てるだけのサイトに人は飽きてしまう時代になりました。ユーザーの指先とコミニュケーションをとれるサイトを作る必要があります。つまり、タッチデバイスには指先でなぞった時反応するインタラクションが必要不可欠です。マウスオーバーで反応するPCサイトから、縦×横×時間で作るタッチデバイスのサイトへ思考を変換していきましょう。 この授業では「見ているだけのサイトから体験するサイトへ」。 時間軸のあるサイトを作る極意を学び、あなたのスキルの幅を広げていきます。これまで多くPCサイトを手がけてきたベテランデザイナーにこそ受けていただきたい授業です。   ■授業で使用するもの ・リンクボタン制作に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/   ■第1回、第3回の授業はこちら 第1回 タッチデバイス時代のUIデザインの極意 Photoshopと連携したデザイン実践スキル 第3回 タッチデバイス時代のUIデザインの極意 Webデザイナーの開発現場での役割

Photoshopと連携したデザイン実践スキル【タッチデバイス時代のUIデザイン】

第1回 Photoshopと連携したデザイン実践スキル【タッチデバイス時代のUIデザイン】(80分)

2014年12月6日放送

■スマホ経由の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回、第3回の授業はこちら 第2回 タッチデバイス時代のUIデザインの極意 脱静止画で体験するサイトへ 第3回 タッチデバイス時代のUIデザインの極意 Webデザイナーの開発現場での役割

フリーWebデザイナーの役割とバックエンドとの良好なプロジェクト進行

第1回 フリーWebデザイナーの役割とバックエンドとの良好なプロジェクト進行(70分)

2014年12月1日放送

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

コーディングでのトラブルを無くすカンプの作り方

第3回 コーディングでのトラブルを無くすカンプの作り方(60分)

2014年11月29日放送

「#5 Webサイトでよく使うビジュアルデザインの作り方」で一通りWebデザインの手法を学んできました。 次はいよいよサイトデザインをまるごと任せられた時に、何からどう進めるのかです。 「まるごとサイトデザインを任せられるデザイナーになる(全2回)」の授業ではサイト全体のデザインを構築できるフロントエンド開発のメインデザイナーを目指すスキルを身に付けていきます。 第1回で学んだサイトの全体デザインから、各パーツのデザイン設定をし、各ページのデザインのカンプ作りを学びます。 その際に大事なポイントは、コーディングに落とし込めるカンプになっているかです。 コーディングしやすい、スライスしやすいPSDになっているのかを意識しながらつくることで最終カンプのイメージが違ってきます。 ■受講にあたって準備するもの Adobe Photoshop (ヴァージョンは問いません) ・お持ちでない方は、下記のサイトに従って、30日間無料お試し版をダウンロードしてください。 https://creative.adobe.com/ja/products/download/photoshop ・WindowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入って いる事が望ましいです。 ・初めてに触れる人は、以下のトレーニングサイトでチュートリアルやビデオを全て見て、Photoshopの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。Photoshopではどんな事ができるか知っておきましょう。 https://helpx.adobe.com/jp/photoshop.html      ▼「#5 Webサイトでよく使うビジュアルデザインの作り方」の全8回授業を事前に受講しておくと、より理解が深まります。 5-1 とんちんかんなデザインにしないためのアートディレクション講座vol1 5-2 とんちんかんなデザインにしないためのアートディレクション講座vol2 5-3 【パーツ制作実践】押せる感のあるナビゲーションボタンの作り方 5-4 【パーツ制作実践】テイスト別ナビゲーションボタンの作り方 5-5 【パーツ制作実践】テイスト別サイトトップ画像の作り方 5-6 【パーツ制作実践】パーツを組み立てる!ランディングページの作り方 5-7 デザイン脳は作れる!感覚ではなく、理論を伝えるデザインの話 5-8 書体や色のイメージで表現!「Webデザインアイデア」の膨らませ術  

デザインガイドラインの設定と基本となるデザイン構築

第2回 デザインガイドラインの設定と基本となるデザイン構築(60分)

2014年11月22日放送

「#5 Webサイトでよく使うビジュアルデザインの作り方」で一通りWebデザインの手法を学んできました。 次はいよいよサイトデザインをまるごと任せられた時に、何からどう進めるのかです。 「まるごとサイトデザインを任せられるデザイナーになる(全2回)」の授業ではサイト全体のデザインを構築できるフロントエンド開発のメインデザイナーを目指すスキルを身に付けていきます。 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      ▼「#5 Webサイトでよく使うビジュアルデザインの作り方」の全8回授業を事前に受講しておくと、より理解が深まります。 5-1 とんちんかんなデザインにしないためのアートディレクション講座vol1 5-2 とんちんかんなデザインにしないためのアートディレクション講座vol2 5-3 【パーツ制作実践】押せる感のあるナビゲーションボタンの作り方 5-4 【パーツ制作実践】テイスト別ナビゲーションボタンの作り方 5-5 【パーツ制作実践】テイスト別サイトトップ画像の作り方 5-6 【パーツ制作実践】パーツを組み立てる!ランディングページの作り方 5-7 デザイン脳は作れる!感覚ではなく、理論を伝えるデザインの話 5-8 書体や色のイメージで表現!「Webデザインアイデア」の膨らませ術  

コーダーさんに苦笑されないための「Web特性を理解した」デザイン術

第1回 コーダーさんに苦笑されないための「Web特性を理解した」デザイン術(60分)

2014年11月1日放送

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

【パーツ制作実践】パーツを組み立てる!ランディングページの作り方

第6回 【パーツ制作実践】パーツを組み立てる!ランディングページの作り方(90分)

2014年10月25日放送

サイトをマルッと任されるようになるまで、後もう一歩です。この授業では、パーツをどう組み立てたらよいのか、組み立て方を学びます。 「押せる感のあるボタン」「グローバルナビゲーション」「サイトトップ画像」など全てのパーツが作れるようになったデザイナーは、1ページをまかされるようになります。まずは、イベントページやキャンペーンページのようなイレギュラーなページで力量を試される事でしょう。 クラウドソーシングでWebパーツやロゴなどを受注しているフリーランスのデザイナーの方も、ランディングページ制作まで受注できるようにスキルアップしましょう。仕事の幅が広がります。 ■受講にあたって準備するもの ・授業中先生が制作する画像素材 http://behomazn.com/schoo/lp_work.zip ・その他 Adobe Photoshop (ヴァージョンは問いません) お持ちでない方は、下記のサイトに従って、30日間無料お試し版をダウンロー ドしてください。 https://creative.adobe.com/ja/products/download/photoshop WindowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入って いる事が望ましいです。 初めてに触れる人は、以下のトレーニングサイトでチュートリアルやビデオを全て見て、Photoshopの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。Photoshopではどんな事ができるか知っておきましょう。 https://helpx.adobe.com/jp/photoshop.html   ▼【パーツ制作実践】の全4回授業です。4回を通してWebサイト制作に必要な技術を身につけることができます。 ・押せる感のあるナビゲーションボタンの作り方 ・テイスト別ナビゲーションボタンの作り方 ・テイスト別サイトトップ画像の作り方 ・パーツを組み立てる!ランディングページの作り方

【パーツ制作実践】テイスト別サイトトップ画像の作り方

第5回 【パーツ制作実践】テイスト別サイトトップ画像の作り方(90分)

2014年10月18日放送

「もらった素材がこれじゃあ…」 こんな言い訳はプロには通用しません。もらった素材を使わなければならない時に、どうやったらテイストを演出できるのか。またその素材を生かしてどう加工したらサイトイメージにマッチするのか。 全く同じ素材を用いて、様々なテイストを演出する手法を学びます。クライアントが用意する素材はいつも完璧とは限りません。その中で、状態の悪い素材でも極上のトップ画像を制作する手法を学びます。 サイトトップ画像は、サイトの印象を決める大きな要素で、制作するサイトの業種やコーポレイトカラーによってテイストを変える必要があります。 どんな素材やオーダーがきても見せ方の引き出しがあると、仕上がりに自信が持てるようになります。 ■授業内容 ・テイストの引き出しを増やす→テイストって何? ・テイスト別TOP画像の制作実践5種類→(ナチュラル志向女子大生・主婦/エグゼクティブ・ビジネスマン/デベロッパ・デザイナー/ファーリーファッション大好きJK/飲食店・ショップオーナー) ■受講にあたって準備するもの ・その他 Adobe Photoshop (ヴァージョンは問いません) お持ちでない方は、下記のサイトに従って、30日間無料お試し版をダウンロー ドしてください。 https://creative.adobe.com/ja/products/download/photoshop WindowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入って いる事が望ましいです。 初めてに触れる人は、以下のトレーニングサイトでチュートリアルやビデオを全て見て、Photoshopの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。Photoshopではどんな事ができるか知っておきましょう。 https://helpx.adobe.com/jp/photoshop.html      ▼【パーツ制作実践】の全4回授業です。4回を通してWebサイト制作に必要な技術を身につけることができます。 ・押せる感のあるナビゲーションボタンの作り方 ・テイスト別ナビゲーションボタンの作り方 ・テイスト別サイトトップ画像の作り方 ・パーツを組み立てる!ランディングページの作り方

【パーツ制作実践】テイスト別ナビゲーションボタンの作り方

第4回 【パーツ制作実践】テイスト別ナビゲーションボタンの作り方(90分)

2014年10月11日放送

「押せる感」のあるグローバルナビゲーション制作の基礎スキルは前回の授業で学びました。 この授業では更なるテクニックを身に付けていきましょう! 既存サイトのパーツを製作する場合は、サイトのデザインガイドやレギュレーションを理解した上で、テイストを把握してから製作に取り掛かります。テイストが揃っていないちぐはぐなサイトを作らない為にどのようなワークフローが大切かを学びます。 ■受講にあたって準備するもの Adobe Photoshop (ヴァージョンは問いません) ・お持ちでない方は、下記のサイトに従って、30日間無料お試し版をダウンロー ドしてください。 https://creative.adobe.com/ja/products/download/photoshop ・WindowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入って いる事が望ましいです。 ・初めてに触れる人は、以下のトレーニングサイトでチュートリアルやビデオを全て見て、Photoshopの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。Photoshopではどんな事ができるか知っておきましょう。 https://helpx.adobe.com/jp/photoshop.html      ▼【パーツ制作実践】の全4回授業です。4回を通してWebサイト制作に必要な技術を身につけることができます。 ・押せる感のあるナビゲーションボタンの作り方 ・テイスト別ナビゲーションボタンの作り方 ・テイスト別サイトトップ画像の作り方 ・パーツを組み立てる!ランディングページの作り方

【パーツ制作実践】押せる感のあるナビゲーションボタンの作り方

第3回 【パーツ制作実践】押せる感のあるナビゲーションボタンの作り方(90分)

2014年10月4日放送

サイト制作は各パーツの組み合わせでできています。まずはボタン。 ページ内にあるボタンは、ぱっと見て押せるものだとわかる必要があります。いくら素敵なボタンを制作しても、ページ内で埋もれてしまっては意味がありません。 これを「押せる感」といいますが、スキューモフィック(現実にあるボタンに似せる)に攻める、フラットデザインでデフォルメして攻める方法があります。 一つボタンができたら、次は複数。ナビゲーションは押せるボタンが並んだ物のことです。シンプルでスタイリッシュ、なおかつ「押せる感」のあるナビゲーション制作の手法を学びましょう。 スマホサイトやスマホアプリはデザイナーの作ったカンプを元にコーダーさんがcss3で再現する事ができます。css3のドロップシャドー、グラデーション、アニメーションで動くボタンのグラフィック、フラットなテイストやゴーストボタンの作成の手法を学びます。   ■受講にあたって準備するもの Adobe Photoshop (ヴァージョンは問いません) ・お持ちでない方は、下記のサイトに従って、30日間無料お試し版をダウンロー ドしてください。 https://creative.adobe.com/ja/products/download/photoshop ・WindowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入って いる事が望ましいです。 ・初めてに触れる人は、以下のトレーニングサイトでチュートリアルやビデオを全て見て、Photoshopの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。Photoshopではどんな事ができるか知っておきましょう。 https://helpx.adobe.com/jp/photoshop.html      ▼【パーツ制作実践】の全4回授業です。4回を通してWebサイト制作に必要な技術を身につけることができます。 ・押せる感のあるナビゲーションボタンの作り方 ・テイスト別ナビゲーションボタンの作り方 ・テイスト別サイトトップ画像の作り方 ・パーツを組み立てる!ランディングページの作り方    

とんちんかんなデザインにしないためのアートディレクション講座vol2

第2回 とんちんかんなデザインにしないためのアートディレクション講座vol2(80分)

2014年9月27日放送

こんなときに役立つ授業です ・一人前のデザイナーになったら ・Webディレクターのワイヤーをもらったら ・サイトまるっと任せられたら 1回目の授業では、「サイト全体のテイストをそろえる」を重点的に話しました。2回目の授業はその実践になります。 下記の様なターゲットに向けてサイト制作の依頼があった場合、どんなアートディレクションしていけばよいか実例で見ていきます。 ・キレイになりたい女子(ティーン〜30代) ・定年前のエグゼクティブ層男性 ・大きなお友達と呼ばれている層(ティーン〜40代男子) ・食費を押さえておいしい物をたらふく食べさせたい主婦層(20代〜50代女性) ・常にエッジの情報を仕入れたい層(老若男女) また、お客様からとんでもないミスマッチな要望が有った場合の対応方法も学びます。       ■受講にあたって準備するもの 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

とんちんかんなデザインにしないためのアートディレクション講座vol1

第1回 とんちんかんなデザインにしないためのアートディレクション講座vol1(90分)

2014年9月27日放送

こんなときに役立つ授業です ・パーツを作る毎日に不安を感じている ・会社のサイト担当で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    

クリックされるバナーをデザインする実践テクニック vol2

第2回 クリックされるバナーをデザインする実践テクニック vol2(90分)

2014年9月14日放送

Photoshopの基本操作が出来る人に向けて、Webデザイナーへの第一歩、バナー制作の実践を学ぶ全2回の授業の2回目です。この後、実際にバナー課題を制作して提出する授業へと続きます。 ■押されないバナーと押されるバナー 人の目にとまらないバナーになっていませんか?あるいは目立ち過ぎて逆効果のバナーになっていませんか?配置されるページになじみ、しかもそこで目立つバナー制作のテクニックを学びます。 ■一瞬で飛び先が把握できるバナー どんなに小さなサイズでも必須情報を押さえていないと、バナーは役目を果たす事ができません。どんな情報を盛り込むべきか、どんなレイアウトにすべきかを、バナーのサイズ別に学びます。 ■可読性を最大限に上げる実践テクニック バナー広告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 ■バナー甲子園:関連授業一覧 ・PhotoshopでWebデザインするときの悩みに答えます ・バナーからはじめるクライアントワーク vol1 ・バナーからはじめるクライアントワーク vol2 ・クリックされるバナーをデザインする実践テクニック vol1 ・クリックされるバナーをデザインする実践テクニック vol2 ※バナー甲子園の案件はこちら http://crowdworks.jp/public/jobs/147765  

クリックされるバナーをデザインする実践テクニック vol1

第1回 クリックされるバナーをデザインする実践テクニック vol1(90分)

2014年9月13日放送

■バナー制作習得は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  

WordPressを使ってまとめサイトを作ろう(3)【課題発表:最終回】

第6回 WordPressを使ってまとめサイトを作ろう(3)【課題発表:最終回】(90分)

2014年8月25日放送

■ WordPress未経験でもOK。WordPressオリジナルテーマでサイトを作ろう!【全6回】 このシリーズを通して学べるのは、WordPressでオリジナルテーマ造り、お問合せフォームやNews配信の出来る商用サイトを作れるようになる事です。 全6回で演習してきた課題の発表をします。 さて、みなさんはどんなまとめサイト、あるいはキュレーションサイトを作ってこられたのでしょうか? 各々の作品に導入されたプラグインや、ウィジェット、あるいはWordPress固有のタグがどのように働いているのか見ていきましょう。 その後の総復習とまとめでは、WordPressサイトのバックアップや更新作業の方法、便利なCSSのフレームワークやjQueryの導入の仕方についても学んでいきます。 ■ 受講にあたって準備するもの 1)Sublimeのインストール(授業中コードを打つのに使います) 下記のURLからダウンロードしてください。 http://www.sublimetext.com/2 設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。 2)WordPressインストール済みのレンタルサーバーまたは、ローカルにXampp、MamppなどのPHP 開発環境を構築してWordPressをインストールしてください。 「WordPressと既存テーマをインストールしてネット上で表示する方法【第1回】」の授業をご覧になるとレンタルサーバーを借りてWordPressをインストールするところまでが、学習できます。 3)「WordPress未経験でもOK。WordPressオリジナルテーマでサイトを作ろう!【全6回】」の5回目迄でWordPressサイトを作り上げました。過去授業の録画に目を通しておくと、より理解が深まります。

WordPressを使ってまとめサイトを作る(2)【5回 /全6回】

第5回 WordPressを使ってまとめサイトを作る(2)【5回 /全6回】(90分)

2014年8月24日放送

■ WordPress未経験でもOK。WordPressオリジナルテーマでサイトを作ろう!【全6回】 このシリーズを通して学べるのは、WordPressでオリジナルテーマ造り、お問合せフォームやNews配信の出来る商用サイトを作れるようになる事です。 最近注目の「まとめサイト」。これは、RSSを使ってネット上にある情報をまとめて表示するという技術です。 今日は、おなじみのサイトのRSSフィードを引っ張って来て、自分の作ったWordPressサイトに表示させてみようという授業です。また、自分のTwitterやFecebookのRSSフィードを取得してWordPressのウィジェットとして、asideタグの中に表示させる事も学んで行きます。 ※この授業はhtml+cssのことはひと通り知っている方対象です。html+css初心者の方は、先に「【HTMLとCSSを使って、150分で簡単なWEBサイト制作】全5回」の録画放送を見てからこちらを受講してください。 ■ 受講にあたって準備するもの 1)Sublimeのインストール(授業中コードを打つのに使います) 下記のURLからダウンロードしてください。 http://www.sublimetext.com/2 設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。 2)WordPressインストール済みのレンタルサーバーまたは、ローカルにXampp、MamppなどのPHP 開発環境を構築してWordPressをインストールしてください。 「WordPressと既存テーマをインストールしてネット上で表示する方法【第1回】」の授業をご覧になるとレンタルサーバーを借りてWordPressをインストールするところまでが、学習できます。 ※この授業では「SublimeTextの簡単プラグンを導入してWordPressのオリジナルテーマを作ろう!(第3回)」で学んだプラグインがインストールされていることを前提として授業が進んでいきますので、こちらを事前に受講される事をオススメします。

WordPressを使ってまとめサイトを作る【4回 /全6回】

第4回 WordPressを使ってまとめサイトを作る【4回 /全6回】(90分)

2014年8月18日放送

※ スライド5ページ目で紹介されていた、"feedspot"について学生の方から「知人にサービス加入を促すメールが一斉送信されてしまった」という問い合わせがありました。友達招待の機能によるものですが、サイトが全て英語で書かれており、入門者の方にとって難解な恐れがあると判断し、スライドから削除させていただきました。ご使用の際は自己責任でお使いください。 ■ WordPress未経験でもOK。WordPressオリジナルテーマでサイトを作ろう!【全6回】 このシリーズを通して学べるのは、WordPressでオリジナルテーマ造り、お問合せフォームやNews配信の出来る商用サイトを作れるようになる事です。 最近注目の「まとめサイト」。これは、RSSを使ってネット上にある情報をまとめて表示するという技術です。 今日は、おなじみのサイトのRSSフィードを引っ張って来て、自分の作ったWordPresssサイトに表示させてみようという授業です。また、自分のTwitterやFecebookのRSSフィードを取得してWordPressのウィジェットとして、asideタグの中に表示させる事も学んで行きます。 ※この授業はhtml+cssのことはひと通り知っている方対象です。html+css初心者の方は、先に「【HTMLとCSSを使って、150分で簡単なWEBサイト制作】全5回」の録画放送を見てからこちらを受講してください。 ■ 受講にあたって準備するもの 1)Sublimeのインストール(授業中コードを打つのに使います) 下記のURLからダウンロードしてください。 http://www.sublimetext.com/2 設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。 2)WordPressインストール済みのレンタルサーバーまたは、ローカルにXampp、MamppなどのPHP 開発環境を構築してWordPressをインストールしてください。 「WordPressと既存テーマをインストールしてネット上で表示する方法【第1回】」の授業をご覧になるとレンタルサーバーを借りてWordPressをインストールするところまでが、学習できます。 ※この授業では「SublimeTextの簡単プラグンを導入してWordPressのオリジナルテーマを作ろう!(第3回)」で学んだプラグインがインストールされていることを前提として授業が進んでいきますので、こちらを事前に受講される事をオススメします。

WordPressのオリジナルテーマの制作とSublimeTextの作業スピードアップ【3回 /全6回】

第3回 WordPressのオリジナルテーマの制作とSublimeTextの作業スピードアップ【3回 /全6回】(90分)

2014年8月10日放送

■ WordPress未経験でもOK。WordPressオリジナルテーマでサイトを作ろう!【全6回】 このシリーズを通して学べるのは、WordPressでオリジナルテーマ造り、お問合せフォームやNews配信の出来る商用サイトを作れるようになる事です。 今回の授業を受講すると、商用サイトをテーマとして、WordPressのコーディング(html+css)の方法について学べます。 ■ プロも使うエディタ「SublimeText」で作業効率向上 SublimeTextの強力なプラグインEmmet(エメット)。これを入れると最強武器を手に入れたように、コーディングの速度が一気に向上します! ただし、このコーディングスピードが上がるという「イージーモード」の恩恵にあずかれるのはhtml+cssを一通り知っている事が前提です。 html+css初心者の方は、先に「【HTMLとCSSを使って、150分で簡単なWEBサイト制作】全5回」の録画放送を見てからこちらを受講してください。一度知ってしまえば、今日の授業で一気に作業効率を向上させていきましょう。 今日は、私だけではなく全てのコーダーが愛してやまないエディターSublime Textに「最強の武器」を持たせて、劇的に皆さんのコーディングを改善していきます。 html+cssを勉強して、SublimeTextのコツを掴んだ人だけが味わえるこの「脳汁でまくりんぐ」な感覚を堪能してください! ■ 受講にあたって準備するもの 1)Sublimeのインストール(授業中コードを打つのに使います) 下記のURLからダウンロードしてください。 http://www.sublimetext.com/2 設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。 2)WordPressインストール済みのレンタルサーバーまたは、ローカルにXampp、MamppなどのPHP 開発環境を構築してWordPressをインストールしてください。 「WordPressと既存テーマをインストールしてネット上で表示する方法【第1回】」の授業をご覧になるとレンタルサーバーを借りてWordPressをインストールするところまでが、学習できます。

WordPressを使ってphpの仕組みを知ろう!【2回 /全6回】

第2回 WordPressを使ってphpの仕組みを知ろう!【2回 /全6回】(90分)

2014年8月3日放送

■ WordPress未経験でもOK。WordPressオリジナルテーマでサイトを作ろう!【全6回】 このシリーズを通して学べることは、WordPressでオリジナルテーマ造り、お問合せフォームやNews配信の出来る商用サイトを作れるようになる事です。   なんとWordPressで書く記事は全てMySQLというデータベースに納められています。そしてユーザーによって呼び出されるたびにphpがページにしてくれるのです! そんな仕組みは実はどのWebサービスでも同じなんです。 ショッピングサイトなら、”ボトムス メンズ”などで検索するとメンズのボトムスがずらりとリストページになって表示されます。旅行サイトなら”温泉 東北”な度々検索すれば、東北の温泉宿がずらりと並んだページが表示されます。その様にデータベースと連動して動的にページを作る仕組みをになうのがphpなどのサーバーサイドプログラミングなのです。 phpはサーバーサイドで一体何をしてるのでしょうか? phpの仕組みを理解するのに一番手っ取り早いのが、WordPressのCMS(管理画面)! 今日はWordPressのCMS(管理画面)を見ながらphpの仕組みをやさしくやさしく学んでいきます。 ■ 受講にあたって準備するもの 1)Sublimeのインストール(授業中コードを打つのに使います) 下記のURLからダウンロードしてください。 http://www.sublimetext.com/2 設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。 2)WordPressとテーマBaskervilleがインストールされたサーバーが必要です 第1回の授業のスライドを見ながら、ロリポップのアカウントを取得し、WordPressとテーマBaskervilleをインストールしておいてください。他社でサーバーを借りている方は、WordPressとテーマBaskervilleをインストールしておいてください。  

WordPressと既存テーマをインストールしてネット上で表示する方法【1回 /全6回】

第1回 WordPressと既存テーマをインストールしてネット上で表示する方法【1回 /全6回】(90分)

2014年7月31日放送

■ 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のコードの羅列が表示されてしまったりと、カスタマイズには挫折してしまった人も多いのではないでしょうか?そんな人に送る、安全で簡単なカスタマイズ法をこのシリーズでは学んで行きます。 第一回目は、まずWordPressをインストールしてデフォルトのテーマで表示させ、その後新たなテーマと便利なプラグインをダウンロードし、まずはサイトの体裁を整えてネット上で表示させてみるところまでやります。テーマカスタマイズで挫折した経験のある方でも、WordPressでサイトが作れるようにしていきましょう。 ■ 受講にあたって準備するもの 1)ロリポップのアカウント ロリポップでレンタルサーバーの詳しい借り方は、こちらの授業をご覧下さい。授業中にハンズオンでロリポップのサーバーを借ります。 Webサイトをネットに上げるためのサーバーについての「超」基礎知識 授業を見ないでレンタルサーバーを借りる方は、こちらから、ロリポプランをお申込みください。 http://lolipop.jp/ 10日間のお試し期間中に演習します。WordPressのインストールを授業でやりますのでまだインストールはしないで下さい。10日後に入金しなければそのまま制作サイトは消滅します。独自ドメインを取る必要はありません。

「ファビコン」を設定して、サイトを目立たせる方法

第3回 「ファビコン」を設定して、サイトを目立たせる方法(60分)

2014年7月27日放送

「自作サイトのFTPサーバーアップロード編 全3回」(3回目) 今日は、7月22日に完成したサイトにファビコン(favicon)を表示してみましょう。ファビコンとは、ブラウザのタブやお気に入りやブックマークに登録した時に表示されるアイコンの事です。 作ったサイトをよりたくさんの人に知ってもらい親しみを持ってもらうためにもファビコンの設定をしましょう。また、仕事を発注して下さったクライアントさんの満足度も上がりそうです。 ▼ファビコンの例 フリーイメージを使ってファビコンを表示させる方法を学んでいきます。 自作のイラストを使用する方は授業前までに、用意しておいて下さい。 サイト制作の大まかな流れは、下記の手順です 1)クライアント(お客様)へのヒヤリング 2)ターゲット設定 3)サイト設計(ワイヤーフレーム) 4)制作仕様書策定(デザインルール、コーディングルール策定) 5)開発(デザイン&コーディング) 6)ローカルテスト 7)テストサーバーレビュー(クライアントチェック) 8)リリース(本サーバーアップ) 9)ランニング(SEO解析)  このシリーズは7番のテストサーバーレビューの為に、レンタルサーバーを借りてサイトをアップロードする演習です。 テストサーバーレビューとは、ローカル(自分のPCの中)で完成したサイトがネット上でどのような動きをするのか検証する事です。自分でデバッグをして問題なければ、クライアント(サイトの発注者)さんにURLをお伝えしてチェックしてもらいます。 まだレンタルサーバーを借りてない人は20日の授業を録画授業を見てサーバーを借りておいて下さい。(授業では、10日間の無料期間のあるレンタルサーバーを借りる演習をしています。無料期間終了後は月払いだと300円、年払いだと月額250円が必要になってきます。) 7月15日までの授業を見ていない人には、アップロード用のサンプルを配布しています。 今回初めて授業を受ける方は、サンプルをブラッシュアップをして、オリジナルのサイトにカスタマイズしてして行きましょう! 受講にあたって準備するもの 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/  

サーバーにアップして、ネット上にWebページを表示させる方法

第2回 サーバーにアップして、ネット上にWebページを表示させる方法(90分)

2014年7月22日放送

「自作サイトのFTPサーバーアップロード編 全3回」(2回目) この授業では、前回の授業でレンタルしたサーバーにwebページを上げ、ネット上で表示されるか確認します。いよいよ、皆さんが制作したWebサイトを自分以外も見れるようにしていきます。 この授業では、FTP(File transfer protocol)の設定やサーバーの設定、そして、作ったページをアップロードするところまで一気に90分で実施していきます! 今回の授業を受講すると、制作したサイトを自分以外も開けるような場所に置くことが出来るようになります。 サイト制作の大まかな流れは、下記の手順です 1)クライアント(お客様)へのヒヤリング 2)ターゲット設定 3)サイト設計(ワイヤーフレーム) 4)制作仕様書策定(デザインルール、コーディングルール策定) 5)開発(デザイン&コーディング) 6)ローカルテスト 7)テストサーバーレビュー(クライアントチェック) 8)リリース(本サーバーアップ) 9)ランニング(SEO解析)  このシリーズはで7番のテストサーバーレビューの為に、レンタルサーバーを借りてサイトをアップロードする演習です。 テストサーバーレビューとは、ローカル(自分のPCの中)で完成したサイトがネット上でどのような動きをするのか検証する事です。自分でデバッグをして問題なければ、クライアント(サイトの発注者)さんにURLをお伝えしてチェックしてもらいます。 まだレンタルサーバーを借りてない人は20日の授業を録画授業を見てサーバーを借りておいて下さい。(授業では、10日間の無料期間のあるレンタルサーバーを借りる演習をしています。無料期間終了後は月払いだと300円、年払いだと月額250円が必要になってきます。) 今回は、初めての人に加えてFTPサーバー設定で挫折した人、ネット上で巧く表示できなかった人を対象にゆっくりハンズオン授業をしていきます。 受講にあたって準備するもの 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://www.forest.impress.co.jp/library/software/lhaplus/  

Webサイトをネットに上げるためのサーバーについての「超」基礎知識

第1回 Webサイトをネットに上げるためのサーバーについての「超」基礎知識(90分)

2014年7月20日放送

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

簡単なWEBサイト制作総集回【質疑応答と提出課題の添削】

第1回 簡単なWEBサイト制作総集回【質疑応答と提出課題の添削】(90分)

2014年7月15日放送

「HTMLとCSSを使って、150分で簡単なWEBサイト制作全6回」の最終回です。 ワイヤーフレーム作りのサイト設計から始まり、カンプ制作、テンプレートコーディング、画像張り込み、jQuery設置とサイトの開発実習を行ってきました。本日は、提出いただいた完成サイトの添削と質疑応答です。 jQueryに触れた事の無い方は、下記の授業で勉強しましょう。 ■レスポンシブなサイトにあっという間にjQueryを実装する ■挫折した人のための、初心者速習html+css【JQueryでTOP画像がクルクル動くようにしてみよう編】 ■挫折した人のための、初心者速習html+css【JQueryで商品画像をポップアップさせよう編】 途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインのためのPhotoshop】全3回の事前受講をオススメします。 サイト制作の大まかな流れは、下記の様な物になります。 1)クライアント(お客様)へのヒヤリング 2)ターゲット設定 3)サイト設計(ワイヤーフレーム) 4)制作仕様書策定(デザインルール、コーディングルール策定) 5)開発(デザイン&コーディング) 6)ローカルテスト 7)テストサーバーレビュー(クライアントチェック) 8)リリース(本サーバーアップ) 9)ランニング(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/

WEBサイトの完成と、総復習と質疑応答

第6回 WEBサイトの完成と、総復習と質疑応答(30分)

2014年7月10日放送

「jQueryの基礎を理解する全6回」の最終回です。 前回の授業(クリックするとポップアップするjQueryプラグインをカスタマイズする)まででjQueryプラグイン2つをhtmlに設置し、ブラッシュアップしていきました。今回は総復習と質疑応答回です。 本日完了したwebページを提出して下さい。来週の「HTMLとCSSを使って、150分で簡単なWEBサイト制作」最終回にて、優秀作品の発表がありますので、巧く行かない点や疑問点をクリアーにしましょう。 jQueryに触れた事の無い方は、下記の授業で勉強しましょう。 ■レスポンシブなサイトにあっという間にjQueryを実装する ■挫折した人のための、初心者速習html+css【JQueryでTOP画像がクルクル動くようにしてみよう編】 ■挫折した人のための、初心者速習html+css【JQueryで商品画像をポップアップさせよう編】 途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインのためのPhotoshop】全3回の事前受講をオススメします。 サイト制作の大まかな流れは、下記の様な物になります。 1)クライアント(お客様)へのヒヤリング 2)ターゲット設定 3)サイト設計(ワイヤーフレーム) 4)制作仕様書策定(デザインルール、コーディングルール策定) 5)開発(デザイン&コーディング) 6)ローカルテスト 7)テストサーバーレビュー(クライアントチェック) 8)リリース(本サーバーアップ) 9)ランニング(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プラグインをカスタマイズする

第5回 クリックするとポップアップするjQueryプラグインをカスタマイズする(30分)

2014年7月8日放送

「jQueryの基礎を理解する全6回」の5回目の授業です。 前々回の授業(jQueryプラグインをカスタマイズしよう!(カルーセル編))まででjQueryプラグインをhtmlに呼び込む事ができました。 前回のカルーセルのカスタマイズに続きまして、クリックすると画像がポップアップするプラグイン「ライトボックス」もスタイリッシュなものにブラッシュアップしていきます。 jQueryに触れた事の無い方は、下記の授業で勉強しておくとより理解が深まります。 ■レスポンシブなサイトにあっという間にjQueryを実装する ■挫折した人のための、初心者速習html+css【JQueryでTOP画像がクルクル動くようにしてみよう編】 ■挫折した人のための、初心者速習html+css【JQueryで商品画像をポップアップさせよう編】 途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインのためのPhotoshop】全3回の事前受講をオススメします。 サイト制作の大まかな流れは、下記の様な物になります。 1)クライアント(お客様)へのヒヤリング 2)ターゲット設定 3)サイト設計(ワイヤーフレーム) 4)制作仕様書策定(デザインルール、コーディングルール策定) 5)開発(デザイン&コーディング) 6)ローカルテスト 7)テストサーバーレビュー(クライアントチェック) 8)リリース(本サーバーアップ) 9)ランニング(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/

TOP画像をスライドさせるjQueryプラグインをカスタマイズする

第4回 TOP画像をスライドさせるjQueryプラグインをカスタマイズする(30分)

2014年7月3日放送

「jQueryの基礎を理解する全6回」の第4回目の授業です。 前回の授業(Webサイトに動きをつける、jQueryプラグインの設置方法)でjQueryプラグインをhtmlに呼び込む事ができました。 今回は、呼び込んだカルーセルのプラグインをカスタマイズして、スタイリッシュなものにブラッシュアップしていきます。 jQueryに触れた事の無い方は、下記の授業で勉強しましょう。 ■レスポンシブなサイトにあっという間にjQueryを実装する ■挫折した人のための、初心者速習html+css【JQueryでTOP画像がクルクル動くようにしてみよう編】 ■挫折した人のための、初心者速習html+css【JQueryで商品画像をポップアップさせよう編】 途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインのためのPhotoshop】全3回の事前受講をオススメします。 サイト制作の大まかな流れは、下記の様な物になります。 1)クライアント(お客様)へのヒヤリング 2)ターゲット設定 3)サイト設計(ワイヤーフレーム) 4)制作仕様書策定(デザインルール、コーディングルール策定) 5)開発(デザイン&コーディング) 6)ローカルテスト 7)テストサーバーレビュー(クライアントチェック) 8)リリース(本サーバーアップ) 9)ランニング(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/

Webサイトに動きをつける、jQueryプラグインの設置方法

第3回 Webサイトに動きをつける、jQueryプラグインの設置方法(30分)

2014年7月1日放送

「jQueryの基礎を理解する全6回」の第3回目の授業です。 jQueryプラグインの設置に必要なhtmlとcssの知識で学習したjQueryを読み込んだhtmlに、jQueryを実行するスクリプトを書いて行きます。 カルーセル/ライトボックスという2つのjQueryを実行するスクリプトを書いていきましょう。 jQueryに触れた事の無い方は、下記の授業も参考にして勉強しておきましょう。 ■レスポンシブなサイトにあっという間にjQueryを実装する ■挫折した人のための、初心者速習html+css【JQueryでTOP画像がクルクル動くようにしてみよう編】 ■挫折した人のための、初心者速習html+css【JQueryで商品画像をポップアップさせよう編】 途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインのためのPhotoshop】全3回の事前受講をオススメします。 サイト制作の大まかな流れは、下記の様な物になります。 1)クライアント(お客様)へのヒヤリング 2)ターゲット設定 3)サイト設計(ワイヤーフレーム) 4)制作仕様書策定(デザインルール、コーディングルール策定) 5)開発(デザイン&コーディング) 6)ローカルテスト 7)テストサーバーレビュー(クライアントチェック) 8)リリース(本サーバーアップ) 9)ランニング(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プラグインを設置するための環境構築

第2回 jQueryプラグインを設置するための環境構築(30分)

2014年6月26日放送

「jQueryの基礎を理解する全6回」の第2回目の授業です。 jQueryプラグインの設置に必要なhtmlとcssの知識で学習したjQueryを読み込んだhtmlに、jQueryを実行するスクリプトを書いて行きます。 今回は、jQueryを設置していく際にしておくべきPCの設定方法について学びます。 簡単なjQueryについては以下。 jQueryとは ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリです。Webデザインでは、Webサイトに動きをつけたい時などに用います。 このカリキュラムでは、「TOP画像を滑らかに横に動かす表示方法(カルーセル)」と「サムネイル画像をクリックするとホップアップ表示する方法(ライトボックス)」を学んでいきましょう。  jQueryに触れた事の無い方は、下記の授業も参考にして勉強しておきましょう。 ■レスポンシブなサイトにあっという間にjQueryを実装する ■挫折した人のための、初心者速習html+css【JQueryでTOP画像がクルクル動くようにしてみよう編】 ■挫折した人のための、初心者速習html+css【JQueryで商品画像をポップアップさせよう編】 途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインのためのPhotoshop】全3回の事前受講をオススメします。 サイト制作の大まかな流れは、下記の様な物になります。 1)クライアント(お客様)へのヒヤリング 2)ターゲット設定 3)サイト設計(ワイヤーフレーム) 4)制作仕様書策定(デザインルール、コーディングルール策定) 5)開発(デザイン&コーディング) 6)ローカルテスト 7)テストサーバーレビュー(クライアントチェック) 8)リリース(本サーバーアップ) 9)ランニング(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/

Webサイトに動きをつける、jQuery概論

第1回 Webサイトに動きをつける、jQuery概論(30分)

2014年6月24日放送

「jQueryの基礎を理解する全6回」の第1回目の授業です。 前回の授業(HTML&CSSの特訓授業〜jQuery(プログラミング)に取り組む前にコーディングの復習〜)で学習したhtmlに、jQueryを実行するスクリプトを書いて行きます。 今回の授業は、「jQueryとはなにか?」という概要の理解です。簡単な説明は以下の通りです。   jQueryとは ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリです。Webデザインでは、Webサイトに動きをつけたい時などに用います。 このカリキュラムでは、「TOP画像を滑らかに横に動かす表示方法(カルーセル)」と「サムネイル画像をクリックするとホップアップ表示する方法(ライトボックス)」を学んでいきましょう。  jQueryに触れた事の無い方は、下記の授業も参考にして勉強しておきましょう。 ■レスポンシブなサイトにあっという間にjQueryを実装する ■挫折した人のための、初心者速習html+css【JQueryでTOP画像がクルクル動くようにしてみよう編】 ■挫折した人のための、初心者速習html+css【JQueryで商品画像をポップアップさせよう編】 途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインのためのPhotoshop】全3回の事前受講をオススメします。 サイト制作の大まかな流れは、下記の様な物になります。 1)クライアント(お客様)へのヒヤリング 2)ターゲット設定 3)サイト設計(ワイヤーフレーム) 4)制作仕様書策定(デザインルール、コーディングルール策定) 5)開発(デザイン&コーディング) 6)ローカルテスト 7)テストサーバーレビュー(クライアントチェック) 8)リリース(本サーバーアップ) 9)ランニング(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の特訓授業〜jQuery(プログラミング)に取り組む前にコーディングの復習〜

第4回 HTML&CSSの特訓授業〜jQuery(プログラミング)に取り組む前にコーディングの復習〜(30分)

2014年6月19日放送

jQueryを実装していく前に、HTML/CSSの特訓をしましょう! 授業中は、ひたすらコーディングをしていきます。 前回の授業同様、サイト内への画像の配置や、デザインの反映など、ここまでのHTMLとCSSの知識を使ってコーディングしながら慣れていきましょう。 (現在、以下の2つの授業は無料で受講が可能です) 全くHTMLとCSSに触れた事の無い方は、下記の授業で勉強して望むと、より学べます。 ■html+cssを挫折した全ての人のための基礎実習 ■挫折した人のための、初心者速習html+css【4ページのサイトマルッと制作編】 次は、設置した画像をインタラクティブに動かして行く【jQueryプラグインの設置に必要なhtmlとcssの知識】を学びますので、この授業ではしっかり画像の配置を学んでおきましょう。 途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインのためのPhotoshop】全3回の事前受講をオススメします。 サイト制作の大まかな流れは、下記の様な物になります。 1)クライアント(お客様)へのヒヤリング 2)ターゲット設定 3)サイト設計(ワイヤーフレーム) 4)制作仕様書策定(デザインルール、コーディングルール策定) 5)開発(デザイン&コーディング) 6)ローカルテスト 7)テストサーバーレビュー(クライアントチェック) 8)リリース(本サーバーアップ) 9)ランニング(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の特訓授業〜カンプからスライス切り出しした画像をwebページに組み込む〜

第3回 HTML&CSSの特訓授業〜カンプからスライス切り出しした画像をwebページに組み込む〜(30分)

2014年6月17日放送

HTML/CSSの特訓をしましょう! 制作した画像をサイトに反映していくための、HTMLとCSSを学びましょう。 授業中は、ひたすらコーディングをしていきます。 サイト内への画像の配置や、デザインの反映など、ここまでのHTMLとCSSの知識を使ってコーディングしながら慣れていきましょう。 (現在、以下の2つの授業は無料で受講が可能です) 全くHTMLとCSSに触れた事の無い方は、下記の授業で勉強して望むと、より学べます。 ■html+cssを挫折した全ての人のための基礎実習 ■挫折した人のための、初心者速習html+css【4ページのサイトマルッと制作編】 【WEBデザインのためのPhotoshop】で制作したカンプから切り出したビルボード及び、サムネールをwebページ上に設置してコーディングする方法を学びます。 ※ 授業中で作るサイトはこんな感じです 途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインのためのPhotoshop】全3回の事前受講をオススメします。 サイト制作の大まかな流れは、下記の様な物になります。 1)クライアント(お客様)へのヒヤリング 2)ターゲット設定 3)サイト設計(ワイヤーフレーム) 4)制作仕様書策定(デザインルール、コーディングルール策定) 5)開発(デザイン&コーディング) 6)ローカルテスト 7)テストサーバーレビュー(クライアントチェック) 8)リリース(本サーバーアップ) 9)ランニング(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/

CSS3を用いた、Webサイトのデザイン表現

第2回 CSS3を用いた、Webサイトのデザイン表現(30分)

2014年6月12日放送

【HTMLとCSSを使って、150分で簡単なWEBサイト制作】全6回の5回目です。 webページが完成に近づいてきました。前回(HTML+CSSのコーディングルールについて学ぶ)はhtmlとcssのコーディングルールについて詳しく勉強しました。css3の登場によりデザインのかなりの部分を画像に頼らず表現する事が可能になってきました。 今回は、css3を使ったデザイン表現を学んで行きましょう。 5月7日の「Webデザインの骨組み「ワイヤーフレーム」を学ぼう」からadobe クリエイティブクラウドの体験版を使用してこられた方は、体験期間の1ヶ月が終了していますので、生授業ではコーディングツールはSublime Text2を使用していきます。 adobe クリエイティブクラウドは月単位の課金が可能です。既にDream Weaver(ヴァージョンは問いません)をお持ちの方、adobe クリエイティブクラウドに課金して利用を続行する方はDream Weaverを使用して頂いてかまいません。 サイト制作の大まかな流れは、下記の様な物になります。 1)クライアント(お客様)へのヒヤリング 2)ターゲット設定 3)サイト設計(ワイヤーフレーム) 4)制作仕様書策定(デザインルール、コーディングルール策定) 5)開発(デザイン&コーディング) 6)ローカルテスト 7)テストサーバーレビュー(クライアントチェック) 8)リリース(本サーバーアップ) 9)ランニング(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のコーディングルールについて学ぶ

第1回 HTML+CSSのコーディングルールについて学ぶ(30分)

2014年6月10日放送

【HTMLとCSSを使って、150分で簡単なWEBサイト制作】全6回の4回目です。 【WEBデザインのためのPhotoshop】全3回で制作したカンプからビルボードとサムネールをスライスで切り出しました。これでサイトを制作する準備が整いました。 jQueryを設置してインタラクティブなサイトを完成させる前に、htmlとcssのコーディングルールについて詳しく勉強して行きましょう。 5月7日の「Webデザインの骨組み「ワイヤーフレーム」を学ぼう」からadobe クリエイティブクラウドの体験版を使用してこられた方は、体験期間の1ヶ月が終了していますので、生授業ではコーディングツールはSublime Text2を使用していきます。 adobe クリエイティブクラウドは月単位の課金が可能です。既にDream Weaver(ヴァージョンは問いません)をお持ちの方、adobe クリエイティブクラウドに課金して利用を続行する方はDream Weaverを使用して頂いてかまいません。 サイト制作の大まかな流れは、下記の様な物になります。 1)クライアント(お客様)へのヒヤリング 2)ターゲット設定 3)サイト設計(ワイヤーフレーム) 4)制作仕様書策定(デザインルール、コーディングルール策定) 5)開発(デザイン&コーディング) 6)ローカルテスト 7)テストサーバーレビュー(クライアントチェック) 8)リリース(本サーバーアップ) 9)ランニング(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/

WebデザインのためのPhotoshopを使った画像加工のポイント【補習アリ】

第3回 WebデザインのためのPhotoshopを使った画像加工のポイント【補習アリ】(30分)

2014年6月5日放送

【WEBデザインのためのPhotoshop】全3回の最終回です。 【jQueryの基礎を理解する】の授業で学ぶ、LightBoxでポップアップする画像と、トリガーになるサムネールを制作する授業になります。最終回ですので、復習をかねて画像加工のポイントを説明します。 サムネール:画像を一覧表示する際に縮小された画像のことを指します。画像を一覧で並べたいけれど、画像が大きくて表示出来ないなどというときにサムネール表示をします。 また、サイトのロゴやマークはPhotoshopを使うべきなのかIllustratorを使うべきなのか迷うところ。それぞれのツールの使い所をお話していきます。 途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインに必要なワイヤーフレーム全3回】の事前受講をオススメします。   事前に予習しておくと良い授業 【HTMLとCSSを使って、150分で簡単なWEBサイト制作】 【WEBデザインに必要なワイヤーフレーム全3回】 をご覧になる事をオススメします。   サイト制作の大まかな流れは、下記の様な物になります。 1)クライアント(お客様)へのヒヤリング 2)ターゲット設定 3)サイト設計(ワイヤーフレーム) 4)制作仕様書策定(デザインルール、コーディングルール策定) 5)開発(デザイン&コーディング) 6)ローカルテスト 7)テストサーバーレビュー(クライアントチェック) 8)リリース(本サーバーアップ) 9)ランニング(SEO解析)   この演習では、5番の開発の部分です。 ワイヤーフレームのレイアウト通りにコーディングするスキルを身につけます。   受講にあたって準備するもの 1)adobe DreamWeaverCC 下記のurlより、ダウンロードしてください。 https://creative.adobe.com/ja/products/dreamweaver DreamWeaverを使うにはまず、Adobe Creative Stationをインストールします。上記のurlから案内に従ってインストールしてください。 体験版は1ヶ月無料で使用できます。(既に旧ヴァージョンのadobe DreamWeaverを使用して授業を受ける事も可能です。)   ・容量が大きいのでダウンロードにかなり時間がかかります。 ・wiondowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入っている事が望ましいです。 ・windowsXPをお使いの方はサービスパック3(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サイトでTOP画像をより効果的に見せるためのPhotoshop基礎

第2回 WebサイトでTOP画像をより効果的に見せるためのPhotoshop基礎(30分)

2014年6月3日放送

【WEBデザインのためのPhotoshop】全3回の2回目です。 1回目のビルボード(TOP画像)制作で提出いただいた課題を添削していきます。ここではwebページに設置するビルボードをより効果的に見せる手法を詳しく説明していきます。このビルボードはこの後来る 【jQueryの基礎を理解する】の授業で学ぶ、カルーセル(画像がスライドする仕組み)になります。 webデザイナー科目入門編は、この全3回シリーズの後、「jQueryの基礎を理解する全6回」を経て、最後にの【HTMLとCSSを使って、150分で簡単なWEBサイト制作全6回】の6回目で修了となります。その後「jQueryの基礎を理解する全6回」の6回目でweb制作ワークフロー全行程完了となります。シリーズを通して授業を受けると小規模なwebサイトを制作するスキルを身に付ける事ができます。   途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインに必要なワイヤーフレーム全3回】の事前受講をオススメします。   事前に予習しておくと良い授業 【HTMLとCSSを使って、150分で簡単なWEBサイト制作】 【WEBデザインに必要なワイヤーフレーム全3回】 をご覧になる事をオススメします。   サイト制作の大まかな流れは、下記の様な物になります。 1)クライアント(お客様)へのヒヤリング 2)ターゲット設定 3)サイト設計(ワイヤーフレーム) 4)制作仕様書策定(デザインルール、コーディングルール策定) 5)開発(デザイン&コーディング) 6)ローカルテスト 7)テストサーバーレビュー(クライアントチェック) 8)リリース(本サーバーアップ) 9)ランニング(SEO解析)   この演習では、5番の開発の部分です。 ワイヤーフレームのレイアウト通りにコーディングするスキルを身につけます。   受講にあたって準備するもの 1)adobe DreamWeaverCC 下記のurlより、ダウンロードしてください。 https://creative.adobe.com/ja/products/dreamweaver DreamWeaverを使うにはまず、Adobe Creative Stationをインストールします。上記のurlから案内に従ってインストールしてください。 体験版は1ヶ月無料で使用できます。(既に旧ヴァージョンのadobe DreamWeaverを使用して授業を受ける事も可能です。)   ・容量が大きいのでダウンロードにかなり時間がかかります。 ・wiondowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入っている事が望ましいです。 ・windowsXPをお使いの方はサービスパック3(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基礎

第1回 Webサイトに配置する画像素材を作るためのPhotoshop基礎(30分)

2014年5月29日放送

【WEBデザインのためのPhotoshop】全3回の1回目です。 【HTMLとCSSを使って、150分で簡単なWEBサイト制作】で完成した、webページに設置する画像を作っていきます。 WebデザインのためのPhotoshop Photoshopは、Adobe社が提供する、画像処理ソフトウェアです。Webデザインが初めてでも、写真やデザインに興味がある方であればその名前は一度は聞いたことがあるのではないでしょうか? もしPhotoshopを使ったことがある方でもWebサイトをデザインする際には、Webデザインをするための設定をしていく必要があります。この授業では、WebデザインのためのPhotoshopの環境webページに設置する画像制作の技術をadobe Photoshopを使って習得します。 ■ 授業でデザイン〜コーディングしていっている仕様書 大きなトップ画像3枚は6月17日より始まる【jQueryの基礎を理解する】の授業で設置するカルーセル(画像がスライドする仕組み)になり、小さなサムネールは、同じく【jQueryの基礎を理解する】で設置するライトボックス(サムネール画像をクリックしたら大きな画像がポップアップする仕組み)のトリガーになります。 webデザイナー科目入門編は、この全3回シリーズの後、「jQueryの基礎を理解する全6回」を経て、最後にの【HTMLとCSSを使って、150分で簡単なWEBサイト制作全6回】の6回目で修了となります。その後「jQueryの基礎を理解する全6回」の6回目でweb制作ワークフロー全行程完了となります。シリーズを通して授業を受けると小規模なwebサイトを制作するスキルを身に付ける事ができます。   途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインに必要なワイヤーフレーム全3回】の事前受講をオススメします。   事前に予習しておくと良い授業 【HTMLとCSSを使って、150分で簡単なWEBサイト制作】 【WEBデザインに必要なワイヤーフレーム全3回】 をご覧になる事をオススメします。   サイト制作の大まかな流れは、下記の様な物になります。 1)クライアント(お客様)へのヒヤリング 2)ターゲット設定 3)サイト設計(ワイヤーフレーム) 4)制作仕様書策定(デザインルール、コーディングルール策定) 5)開発(デザイン&コーディング) 6)ローカルテスト 7)テストサーバーレビュー(クライアントチェック) 8)リリース(本サーバーアップ) 9)ランニング(SEO解析)   この演習では、5番の開発の部分です。 ワイヤーフレームのレイアウト通りにコーディングするスキルを身につけます。   受講にあたって準備するもの 1)adobe DreamWeaverCC 下記のurlより、ダウンロードしてください。 https://creative.adobe.com/ja/products/dreamweaver DreamWeaverを使うにはまず、Adobe Creative Stationをインストールします。上記のurlから案内に従ってインストールしてください。 体験版は1ヶ月無料で使用できます。(既に旧ヴァージョンのadobe DreamWeaverを使用して授業を受ける事も可能です。)   ・容量が大きいのでダウンロードにかなり時間がかかります。 ・wiondowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入っている事が望ましいです。 ・windowsXPをお使いの方はサービスパック3(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デザインを始めたい方に贈る、「HTMLが嫌いにならない正しい構文」必要スキル【CSS編】

第1回 Webデザインを始めたい方に贈る、「HTMLが嫌いにならない正しい構文」必要スキル【CSS編】(30分)

2014年5月27日放送

「HTML文書を正しい構文で組み立てる」必要スキル【HTML編】で完成した、html5文書にスタイルシートを当てていきます。 ■ 作成した「ワイヤーフレーム」HTMLとCSSでデザインを反映していきましょう   小規模なWebサイトを作れるようになるための6回授業 この全6回シリーズは、3回連続授業の後、「WEBデザインのためのPhotoshop全3回」をはさみ、その後2回実施されます。その後「jQueryの基礎を理解する全6回」の6回目でweb制作ワークフロー全行程完了となります。シリーズを通して授業を受けると小規模なwebサイトを制作するスキルを身に付ける事ができます。   途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインに必要なワイヤーフレーム全3回】の事前受講をオススメします。   サイト制作の大まかな流れは、下記の様な物になります。 1)クライアント(お客様)へのヒヤリング 2)ターゲット設定 3)サイト設計(ワイヤーフレーム) 4)制作仕様書策定(デザインルール、コーディングルール策定) 5)開発(デザイン&コーディング) 6)ローカルテスト 7)テストサーバーレビュー(クライアントチェック) 8)リリース(本サーバーアップ) 9)ランニング(SEO解析)   この演習では、5番の開発の部分です。 ワイヤーフレームのレイアウト通りにコーディングするスキルを身につけます。   受講にあたって準備するもの 1)adobe DreamWeaverCC 下記のurlより、ダウンロードしてください。 https://creative.adobe.com/ja/products/dreamweaver DreamWeaverを使うにはまず、Adobe Creative Stationをインストールします。上記のurlから案内に従ってインストールしてください。 体験版は1ヶ月無料で使用できます。(既に旧ヴァージョンのadobe DreamWeaverを使用して授業を受ける事も可能です。)   ・容量が大きいのでダウンロードにかなり時間がかかります。 ・wiondowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入っている事が望ましいです。 ・windowsXPをお使いの方はサービスパック3(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デザインを始めたい方に贈る、「HTML文書を正しい構文で組み立てる」必要スキル【HTML編】

第1回 Webデザインを始めたい方に贈る、「HTML文書を正しい構文で組み立てる」必要スキル【HTML編】(30分)

2014年5月22日放送

1回目の「HTMLとCSSって何?(概要理解とツール導入)」で概要を学んだHTML5の正しい文書構造に基づき、マークアップしていきます。   小規模なWebサイトを作れるようになるための6回授業 この全6回シリーズは、3回連続授業の後、「WEBデザインのためのPhotoshop全3回」をはさみ、その後2回実施されます。その後「jQueryの基礎を理解する全6回」の6回目でweb制作ワークフロー全行程完了となります。シリーズを通して授業を受けると小規模なwebサイトを制作するスキルを身に付ける事ができます。   途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインに必要なワイヤーフレーム全3回】の事前受講をオススメします。   サイト制作の大まかな流れは、下記の様な物になります。 1)クライアント(お客様)へのヒヤリング 2)ターゲット設定 3)サイト設計(ワイヤーフレーム) 4)制作仕様書策定(デザインルール、コーディングルール策定) 5)開発(デザイン&コーディング) 6)ローカルテスト 7)テストサーバーレビュー(クライアントチェック) 8)リリース(本サーバーアップ) 9)ランニング(SEO解析)   この演習では、5番の開発の部分です。 ワイヤーフレームのレイアウト通りにコーディングするスキルを身につけます。   受講にあたって準備するもの 1)adobe DreamWeaverCC 下記のurlより、ダウンロードしてください。 https://creative.adobe.com/ja/products/dreamweaver DreamWeaverを使うにはまず、Adobe Creative Stationをインストールします。上記のurlから案内に従ってインストールしてください。 体験版は1ヶ月無料で使用できます。(既に旧ヴァージョンのadobe DreamWeaverを使用して授業を受ける事も可能です。)   ・容量が大きいのでダウンロードにかなり時間がかかります。 ・wiondowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入っている事が望ましいです。 ・windowsXPをお使いの方はサービスパック3(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デザインを始めたい方に贈る、「HTMLとCSSって何」【概要理解とツール導入】

第1回 Webデザインを始めたい方に贈る、「HTMLとCSSって何」【概要理解とツール導入】(30分)

2014年5月20日放送

  「【WEBデザインに必要なワイヤーフレーム全3回】」にて制作したワイヤーフレーム(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デザインに必要なワイヤーフレーム全3回】の事前受講をオススメします。   サイト制作の大まかな流れは、下記の様な物になります。 1)クライアント(お客様)へのヒヤリング 2)ターゲット設定 3)サイト設計(ワイヤーフレーム) 4)制作仕様書策定(デザインルール、コーディングルール策定) 5)開発(デザイン&コーディング) 6)ローカルテスト 7)テストサーバーレビュー(クライアントチェック) 8)リリース(本サーバーアップ) 9)ランニング(SEO解析)   この演習では、5番の開発の部分です。 ワイヤーフレームのレイアウト通りにコーディングするスキルを身につけます。   受講にあたって準備するもの 1)adobe DreamWeaverCC 下記のurlより、ダウンロードしてください。 https://creative.adobe.com/ja/products/dreamweaver DreamWeaverを使うにはまず、Adobe Creative Stationをインストールします。上記のurlから案内に従ってインストールしてください。 体験版は1ヶ月無料で使用できます。(既に旧ヴァージョンのadobe DreamWeaverを使用して授業を受ける事も可能です。)   ・容量が大きいのでダウンロードにかなり時間がかかります。 ・wiondowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入っている事が望ましいです。 ・windowsXPをお使いの方はサービスパック3(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デザインの骨組み「ワイヤーフレーム」を学ぼう【完成編】

第3回 Webデザインの骨組み「ワイヤーフレーム」を学ぼう【完成編】(60分)

2014年5月18日放送

【WEBデザインに必要なワイヤーフレーム全3回】の3回目です。 「ワイヤーフレーム」とは、Webサイトを作成する前に制作する、コンテンツやレイアウト(配置)を確認して、整理するための構成図です。 この授業では、そんなWebサイトをデザインしていく際のとっかかりとしてワイヤーフレームを作成しながら、「Webサイトにはどのような要素が必要なのか」「Webサイトのデザインが始められる準備をする」という事柄について学んでいければと思っています。 この授業で学べる事は、adobe Illusroratorを使用して、webページの設計図であるワイヤーフレームを設計する方法です。 この最終回では、 1回目の「Webデザインの骨組み「ワイヤーフレーム」を学ぼう」で課題を制作し、2回目の「ワイヤーフレーム演習(提出課題の添削&先生の実演)」で修正したワイヤーフレームを、実際にコーディングや画像制作を実行してフロントエンドを開発していく設計図として完成させます。   1)クライアント(お客様)へのヒヤリング 2)ターゲット設定 3)サイト設計(ワイヤーフレーム) 4)制作仕様書策定(デザインルール、コーディングルール策定) 5)開発(デザイン&コーディング) 6)ローカルテスト 7)テストサーバーレビュー(クライアントチェック) 8)リリース(本サーバーアップ) 9)ランニング(SEO解析) この演習では、3番のサイト設計を行います。 この3回連続授業は、3回の授業を順番に受講していくことで「ワイヤーフレーム」の作り方を習得していきます。 受講にあたって準備するもの 1)adobe Illusrorator 下記のurlより、ダウンロードしてください。 https://creative.adobe.com/ja/products/illustrator Illusroratorを使うにはまず、Adobe Creative Stationをインストールします。上記のurlから案内に従ってインストールしてください。 体験版は1ヶ月無料で使用できます。 (このシリーズの「WEBデザインのためのPhotoshop」まで無料体験版を使用する為には、5月4日以降にインストールをして下さい。) ・容量が大きいのでダウンロードにかなり時間がかかります。 ・wiondowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入っている事が望ましいです。 ・初めてに触れる人は、以下のトレーニングビデオを全て見てIllustoratorの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。Illustoratorではどんな事ができるか知っておきましょう。 ・windowsXPをお使いの方はサービスパック3(SP3)までをインストールする事によって、adove CC Illustoratorをインストールできます。各ヴァージョンのwindowsの対応状況に付いては下記をご覧下さい。 http://helpx.adobe.com/jp/creative-cloud/kb/cpsid_93693.html 【Illustrator CC とは何ですか】 https://helpx.adobe.com/jp/creative-cloud/tutorials/video/what-is-illustrator.html 【独学でWebデザイン Illustrator 使い方 1回〜9回】 ・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回目 グラデーションパレットとグラデーションツール ※この授業は1〜2目の受講と課題を制作していると、より理解が深まります。 第一回の授業を受講されていない方は、録画授業で受講されてから受講することをお勧めします。

Webデザインの骨組み「ワイヤーフレーム」を学ぼう【制作編】

第2回 Webデザインの骨組み「ワイヤーフレーム」を学ぼう【制作編】(60分)

2014年5月17日放送

【WEBデザインに必要なワイヤーフレーム全3回】の2回目です。 「ワイヤーフレーム」とは、Webサイトを作成する前に制作する、コンテンツやレイアウト(配置)を確認して、整理するための構成図です。 この授業では、そんなWebサイトをデザインしていく際のとっかかりとしてワイヤーフレームを作成しながら、「Webサイトにはどのような要素が必要なのか」「Webサイトのデザインが始められる準備をする」という事柄について学んでいければと思っています。 この授業で学べる事は、adobe Illusroratorを使用して、webページの設計図であるワイヤーフレームを設計する方法です。 この3回連続授業は、3回の授業を順番に受講していくことで「ワイヤーフレーム」の作り方を習得していきます。 サイト制作の大まかな流れは、下記の様な物になります。 1)クライアント(お客様)へのヒヤリング 2)ターゲット設定 3)サイト設計(ワイヤーフレーム) 4)制作仕様書策定(デザインルール、コーディングルール策定) 5)開発(デザイン&コーディング) 6)ローカルテスト 7)テストサーバーレビュー(クライアントチェック) 8)リリース(本サーバーアップ) 9)ランニング(SEO解析) この演習では、3番のサイト設計を行います。 受講にあたって準備するもの 1)adobe Illusrorator 下記のurlより、ダウンロードしてください。 https://creative.adobe.com/ja/products/illustrator Illusroratorを使うにはまず、Adobe Creative Stationをインストールします。上記のurlから案内に従ってインストールしてください。 体験版は1ヶ月無料で使用できます。 (このシリーズの「WEBデザインのためのPhotoshop」まで無料体験版を使用する為には、5月4日以降にインストールをして下さい。) ・容量が大きいのでダウンロードにかなり時間がかかります。 ・wiondowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入っている事が望ましいです。 ・初めてに触れる人は、以下のトレーニングビデオを全て見てIllustoratorの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。Illustoratorではどんな事ができるか知っておきましょう。 ・windowsXPをお使いの方はサービスパック3(SP3)までをインストールする事によって、adove CC Illustoratorをインストールできます。各ヴァージョンのwindowsの対応状況に付いては下記をご覧下さい。 http://helpx.adobe.com/jp/creative-cloud/kb/cpsid_93693.html 【Illustrator CC とは何ですか】 https://helpx.adobe.com/jp/creative-cloud/tutorials/video/what-is-illustrator.html 【独学でWebデザイン Illustrator 使い方 1回〜9回】 ・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回目 グラデーションパレットとグラデーションツール ※この授業は1回目の受講と課題を制作していると、より理解が深まります。 第一回の授業を受講されていない方は、録画授業で受講されてから受講することをお勧めします。

Webデザインの骨組み「ワイヤーフレーム」を学ぼう

第1回 Webデザインの骨組み「ワイヤーフレーム」を学ぼう(60分)

2014年5月7日放送

【WEBデザインに必要なワイヤーフレーム全3回】の1回目です。 「ワイヤーフレーム」とは、Webサイトを作成する前に制作する、コンテンツやレイアウト(配置)を確認して、整理するための構成図です。 この授業では、そんなWebサイトをデザインしていく際のとっかかりとしてワイヤーフレームを作成しながら、「Webサイトにはどのような要素が必要なのか」「Webサイトをデザインの準備をする」という事柄について学んでいければと思っています。 この授業で学べる事は、adobe Illusroratorを使用して、webページの設計図であるワイヤーフレームを設計する方法です。 (※ このシリーズは3回受講する事が前提になっています。) サイト制作の大まかな流れは、下記の様な物になります。 1)クライアント(お客様)へのヒヤリング 2)ターゲット設定 3)サイト設計(ワイヤーフレーム) 4)制作仕様書策定(デザインルール、コーディングルール策定) 5)開発(デザイン&コーディング) 6)ローカルテスト 7)テストサーバーレビュー(クライアントチェック) 8)リリース(本サーバーアップ) 9)ランニング(SEO解析) この演習では、3番のサイト設計を行います。 受講にあたって準備するもの 1)adobe Illusrorator 下記のurlより、ダウンロードしてください。 https://creative.adobe.com/ja/products/illustrator Illusroratorを使うにはまず、Adobe Creative Stationをインストールします。上記のurlから案内に従ってインストールしてください。 体験版は1ヶ月無料で使用できます。 (このシリーズの「WEBデザインのためのPhotoshop」まで無料体験版を使用する為には、5月4日以降にインストールをして下さい。) ・容量が大きいのでダウンロードにかなり時間がかかります。 ・wiondowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入っている事が望ましいです。 ・初めてに触れる人は、以下のトレーニングビデオを全て見てIllustoratorの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。Illustoratorではどんな事ができるか知っておきましょう。 【Illustrator CC とは何ですか】 https://helpx.adobe.com/jp/creative-cloud/tutorials/video/what-is-illustrator.html 【独学でWebデザイン Illustrator 使い方 1回〜9回】 ・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回目 グラデーションパレットとグラデーションツール 2)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

挫折した人のための、初心者速習html+css【JQueryで商品画像をポップアップさせよう編】

第5回 挫折した人のための、初心者速習html+css【JQueryで商品画像をポップアップさせよう編】(90分)

2014年4月27日放送

※録画授業を受講いただく前にご確認ください 授業内で使用するWordPressプラグインのURLが下記に変更になりました。授業中にスクー教務課が投稿しているプラグインは、現在有料のものになりますので、下記をご利用くださいませ。 ▼本授業で使用するWordPressプラグイン https://github.com/gilbitron/Nivo-Lightbox また、授業内で配布している演習用素材のURLが開けない、という方はインターネットのセキュリティレベルを変更されるか、こちらのストレージからダウンロードしてください ▼演習用素材 http://bit.ly/13XJPtE html+cssを挫折した全ての人に贈るシリーズ 全5回 このシリーズは1回で完結していますが、 1回から5回まで同じサイトがどんどん完成して行く形になっています。 1回づつ完結した出来上がり見本付きの演習ファイルがダウンロードできます。 第5回:初心者速習html+css【JQueryで商品画像をポップアップさせよう編】 初めてコーディングを学ぶ人や、本を読んだり参考サイトを見ながらコーディングしても 崩れてしまってうまく行かなかった人のためのJQuery入門です。 今回は商品写真をクリックしたら大きな画像がポップアップするライトボックスの作り方を学びます。   ■ 必要なもの■ 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/  

挫折した人のための、初心者速習html+css【JQueryでTOP画像がクルクル動くようにしてみよう編】

第4回 挫折した人のための、初心者速習html+css【JQueryでTOP画像がクルクル動くようにしてみよう編】(90分)

2014年4月26日放送

html+cssを挫折した全ての人に贈るシリーズ 全5回 このシリーズは1回で完結していますが、 1回から5回まで同じサイトがどんどん完成して行く形になっています。 1回づつ完結した出来上がり見本付きの演習ファイルがダウンロードできます。 第4回:初心者速習html+css【JQueryでTOP画像がクルクル動くようにしてみよう編】 初めてコーディングを学ぶ人や、本を読んだり参考サイトを見ながらコーディングしても崩れてしまってうまく行かなかった人のためのJQuery入門です。 今回はビルボード画像がインタラクティブに入れ替わるカルーセルの作り方を学びます。   ■ 必要なもの■ 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/  

挫折した人のための、初心者速習html+css【同一サイトがデバイスで切り替わる!レスポンシブ編】

第3回 挫折した人のための、初心者速習html+css【同一サイトがデバイスで切り替わる!レスポンシブ編】(90分)

2014年4月13日放送

html+cssを挫折した全ての人に贈るシリーズ 全5回 このシリーズは1回で完結していますが、 1回から5回まで同じサイトがどんどん完成して行く形になっています。 1回づつ完結した出来上がり見本付きの演習ファイルがダウンロードできます。 第3回:初心者速習html+css【同一サイトがデバイスで切り替わる!レスポンシブ編】 初めてコーディングを学ぶ人や、本を読んだり参考サイトを見ながらコーディングしても 崩れてしまってうまく行かなかった人のために、レスポンシブデザインを易しく解説して演習します。 レスポンシブデザインとは、今や無くてはならないPC、スマホ、タブレットなど、見ているデバイズによってデザインを切り変える手法です。   ■ 必要なもの■ 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/  

挫折した人のための、初心者速習html+css【4ページのサイトマルッと制作編】

第2回 挫折した人のための、初心者速習html+css【4ページのサイトマルッと制作編】(90分)

2014年3月21日放送

【html+cssを挫折した全ての人に贈るシリーズ 全5回】 このシリーズは1回で完結していますが、1回から5回まで同じサイトがどんどん完成して行く形になっています。1回づつ完結した出来上がり見本付きの演習ファイルがダウンロードできます。 第2回:初心者速習html+css【4ページのサイトマルッと制作編】 初めてコーディングを学ぶ人や、本を読んだり参考サイトを見ながらコーディングしても崩れてしまってうまく行かなかった人のために、テンプレートからページを量産してサイトを作り上げる方法を学びます。 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/

挫折した人のための、初心者速習html+css【2カラムボックスモデル編】

第1回 挫折した人のための、初心者速習html+css【2カラムボックスモデル編】(90分)

2014年3月7日放送

【html+cssを挫折した全ての人に贈るシリーズ 全5回】 このシリーズは1回で完結していますが、1回から5回まで同じサイトがどんどん完成して行く形になっています。1回づつ完結した出来上がり見本付きの演習ファイルがダウンロードできます。 第1回:初心者速習html+css【2カラムボックスモデル編】 初めてコーディングを学ぶ人や、本を読んだり参考サイトを見ながらコーディングしても崩れてしまってうまく行かなかった人のために、サイトの基礎工事の部分から学び、サイトの看板となるTOPページを仕上げます。 この授業を受講すると、基礎的な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/ ■資料に記載されているURL 【スライド P14】 http://validator.w3.org/#validate_by_input 【スライド P19】 http://roadstohtml5.com/html5karuta/ 【スライド P24】 https://code.google.com/p/html5shiv/ 【スライド P25】 https://code.google.com/p/html5resetcss/downloads/list 【スライド P26】 https://www.google.com/fonts 【スライド P27】 https://github.com/Behomazn/schoo20140307html_css_Beginner1

レスポンシブなサイトにあっという間にjQueryを実装する

第2回 レスポンシブなサイトにあっという間にjQueryを実装する(60分)

2014年2月17日放送

レスポンシブサイトデザイン第二段です。 前回の授業「Sublimeで書く簡単レスポンシブwebページ制作」 で制作したページにjQueryを実装します。 前回の授業に出ていない人も完成版をダウンロードできるので、 jQueryの実装を演習する事が出来ます。 サイトに色んな動きをもたらすjQueryは 今やスマホサイトには無くてはならないものに! スマホサイトは可変幅が前提なのでちょっとしたコツが必要。 そのコツがサクっとわかり、 JavaScriptが分からなくても簡単に設置できるようになります。 ■ お話すること■ 1) スマホサイトになくてはならないjQuery 2) 動く画像を可変にする業 3) 実習:TOP画像をフェードさせてみよう! 4) 実習:TOP画像をカルーセルさせてみよう! 5) スマホエミュレーターで見てみよう   ■ 必要なもの■ 1)Sublimeのインストール(授業中コードを打つのに使います) 下記のURLからダウンロードしてください。 http://www.sublimetext.com/2 設定は何も必要ありません。 インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。 2)エミュレーターのインストール(win・Mac共通) (※ブラウザでも確認できるのでなくても可) まずAdobe Airをインストールします。 http://get.adobe.com/jp/air/ つづいてMobilizerをインストールします。 http://www.springbox.com/mobilizer/   ■演習用素材について 授業資料のp36にある演習素材は、現在ご利用いただけない状態となっております。 素材が準備出来次第公開いたします。 ご迷惑をお掛けいたしますが、ご理解とご了承のほどよろしくお願いいたします。      

html+cssを挫折した全ての人のための基礎実習

第1回 html+cssを挫折した全ての人のための基礎実習(90分)

2014年1月25日放送

この授業では、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/

生放送授業への参加は無料です
Schooの会員登録および生放送授業への参加は無料です。生放送授業では先生に質問したり他のユーザーと一緒に楽しく学ぶことができます。
×