レスポンシブWebデザイン作り方講座 | |独学でWebデザインの勉強をする人のためのまとめサイトです。

レスポンシブWebデザインの作り方講座

レスポンシブWebデザイン作り方講座

レスポンシブWebサイト制作のスキルは避けては通れない!

レシポンシブサイトの作り方講座 レスポンシブWebサイト制作のスキルは避けては通れない!

スマートフォンやタブレットで多くの人が、Webサイトを見ている現在。
Web制作の現場も、「パソコン向けサイトだけを作ればよい」というわけにもいかなくなりました。
あらゆる画面幅に対応できるWebサイト制作はもう必須のスキルとなっています。

そう、Webサイトを見ている時、
パソコン画面の幅をキュキュキュッと縮めていくと、テキストも画像も画面の幅に合わせてフィットして、レイアウトが変化する。
というアレです。

「レスポンシブとは一体なに?どんな仕組みで成り立っているのか?よくわからない。」

という方も多いのではないでしょうか?

レスポンシブWebサイトのしくみ、動画で解説してみました。

この動画では、レスポンシブWebサイトのしくみ・講座で学べるスキルをお話しています。
ぜひ、ご覧ください。


この動画講座は、次のような方にオススメです!

  • 「パソコン向けの固定レイアウト」の制作経験はあるけれど、「レスポンシブWebデザイン」にも挑戦したい方。
  • マルチデバイスに対応できるスキルを身につけたい方。
  • レスポンシブWebデザインの基本をしっかり身につけたい方。
  • 自分の独学のやりかたが合っているか確認したい方。
  • SOHO・フリーランスとして活動するのに相談できる相手が欲しい方。

動画を見ながらこんなレスポンシブサイトを作ってみませんか?

レシポンシブサイトの作り方

カリキュラム

講座では、「レスポンシブは敷居が高い」と感じているレスポンシブ初心者の方を対象に、第一歩として、
まずは、初級編で「レスポンシブWebデザイン」てどんなものなのか?がわかる一番簡単なレスポンシブサイトを作っていき、
その後、応用編として、現場で使える技術を盛り込んだサンプルサイトを作ります。

予備知識編に関しましては、現在、無料公開中です。
予備知識編を見てみる

予備知識編(無料公開中)
  1. レスポンシブWebデザインのメリット・デメリット
  2. ブラウザの表示確認について
  3. グリッドデザインについて
  4. メディアクエリの練習
  5. Viewportについて
初級編
  1. HTMLの準備
  2. フルードイメージとは?
  3. モバイルファーストとは?
  4. スマートフォン向けCSSの記述
  5. メディアクエリ CSSの記述
応用編
  1. ブレイクポイントと可変・固定レイアウト
  2. HTMLの準備とCSSの記述
  3. レスポンシブで使えるCSS3
  4. メディアクエリの記述
  5. グリッドから要素の幅を算出する。


受講者の声

講座を進めながら、何度も「おぉ~」と一人、声をあげました。

アーティスト/デザイナー K.Mさん

【アーティスト/デザイナー K.Mさんより】

アーティストと映像、写真、デザイン関係のお仕事をしています。

フリーランスでウェブデザインのお仕事を出来ないだろうかと道を定め、その為に改めて、ウェブ関係を中心に学びたい、良い学校はないだろうかと探していた際、Webクリ講座に出会いました。

ちなみに海外におりましたが、オンライン講座でしたので、その点も非常に助かりました。

Photoshop、illustratorは、仕事で長年使用しており、 html、cssの基礎は知っているけれど、その先、それをどう現実的にウェブデザインのお仕事と結びつけてゆくのか、という所にいた私にとって、Webクリ講座はとても最適に思え、受講を決めました。

内容は、まさに自分の求めていた、福本先生のご案内にもあったように、それぞれの点と点が繋がる体験をし、それぞれのソフトの使い方であったり、方法であったりが、より深く、

「なるほど、こういうことだから、こうなっていたのか」

「こんなスムーズなやりかたがあったのか」など、

講座を進めながら、何度も「おぉ~」と一人、声をあげました。

とても楽しかったです。

福本先生の講座は非常に分かりやすく、ご自分も一から、ご自身の情熱を頼りに学んでこられたというご経験から生まれるものであるからだと思われますが、ビデオ講座も非常に丁寧ですし、また、何かつまずくことがあれば、メールや、FBのグループで直接フォローして頂けるので、安心感があります。

また、FBのグループも皆さん、同じく道を目指す方々が頻繁に情報を投稿されるので、良い刺激になり、また、心の支えになります。

今回、自分でもレスポンシブデザインを学び、試行錯誤していた所に今度はレスポンシブWebデザイン講座のお知らせを受け、一も二もなく受講させて頂くことにしました。

またもや、自分である程度学んで作っていた土台の上に、先生の講座の内容がすいすいと入ってきて、非常に楽しく、あっという間に終えてしまいました。

今回は僭越ながら、さらにビデオ講座の内容、クオリティーもレベルアップしているように思われ、先生のナレーションがさらにクリアーで分かりやすく、また映像の尺やテンポも最適であり、もちろん、内容は基礎からしっかりと分かりやすく、非常に為になりました。

自分もまだまだこれからですが、だんだんと自信をもって、デザインを進められるようになってきました。

これからも宜しくお願いいたします!

最短でレスポンシブwebデザインの基礎を学べる こんな良い講座はないと思う。

【30代 警備関連事業 K.Nさんより】

得られるメリット

  • 最短でレスポンシブwebデザインの基礎を学べる
    通常であれば、参考書を買ったり、Googleで検索して勉強すると思うのですが、福本先生が重要な部分を精査してくれているので、自分で情報を見つけてくる時間を短縮でき、最短でレスポンシブwebデザインの基礎を身につけることができると思います。
  • 初めてでも挫折しない
    ある程度htmlとcssを理解していれば、説明がわかりやすいので、すぐに身につけることができる。
    わからないことがあっても、質問ができますので、解決できると思います。

私はレスポンシブWebデザイン講座の前にwebデザインオンライン講座から受講しているのですが、

福本先生は

  • とにかく説明がわかりやすい。
  • 親身に相談に乗ってくれる。
  • 一人一人を尊重して接してくれる。

他にもいろいろありますが、webデザインの知識や解説力だけでなく人間性も素晴らしいと思いますので、信頼できる人だと思います。

まず、作ってみて案外簡単に作れるんだと感じました。

しかしそれは、福本先生が誰でもわかるようにまとめてくれてるおかげで、自分一人で情報収集して作るとなると相当な労力が必要になると思ってます。

サイト作成はサンプル素材をダウンロードして動画を見ながら、コードを貼り付けてその結果を確認しながら作成するため、コードがどのような意味を持っているのか理解でき、レスポンシブ作成の流れを一通り体感できたので、私でもできるんだという自信を持つことができました。

わかりやすい表現で説明されており、理解しやすいですし、ページに補足説明もあるので、もっと詳しく知りたい!

ってなった時も、対応できているので、利用者にやさしい講座になっている印象を受けました。

どのような感じで講座が進められていくのか見てみたい方は予備知識編 が公開されていますのでご覧になられたらと思います。

講座を受講すれば、福本先生の講座のfacebookグループに入り、同じようなwebデザインを勉強している私を含め仲間にわからないことを質問できますし、交流もできますので、講座以外の部分でも得るものがあると思います。

内容がとても濃く、オンライン講座で何度でも繰り返し復習できるので安心です。

【30代 Web関連事業 E.Fさんより】

Webクリオンライン講座のwebデザイン編に続き、レスポンシブwebデザイン編も受講しました。

前回の講座がとてもわかりやすく、実践でも活用できる内容だったので、今回のレスポンシブ講座も迷わず申し込みをしました。

講座の内容ですが、配布されたテキストファイルから必要なコードを張り付けていくので、直接記述する手間が省け、効率よくスムーズに取り組めます。

また、内容がとても濃く、私の場合は一度では習得できないと感じましたが、オンライン講座で何度でも繰り返し復習できるので安心です。

Web制作の世界は流れが速く、個人ではついていくのが大変です。

日々勉強だなと感じていますが、情報収集だけでも時間がかかります。

そんななか、福本先生のように、ピンポイントでフォローしてスキルを教えてくださる存在は貴重です。

今回のスキルを習得すれば、より幅広いデザインの制作を受注していけると前向きになれました。

ありがとうございました!

ゆっくりと丁寧で解り易い動画のお陰でやっとCSS3やレスポンシブデザインの事が解りました。

【30代 Web関連事業 O.Yさんより】

とても解りやすく、今までどの書籍等で勉強しても難解で全く解らなかったのですが、ゆっくりと丁寧で解り易い動画のお陰でやっとCSS3やレスポンシブデザインの事が解りました(^^♪

ほんとに悩みだったレスポンシブデザインですが、この動画のお陰で悩みがスッキリしました。

レスポンシブデザイン講座に入会して良かったです。

本当に解り易いです。

福本先生、ありがとうございました。

この講座で身につくスキル

シンプルな構造のレシポンシブサイトならサクッと制作できるようにります!

レシポンシブサイトの作り方 スキル

基本的なレシポンシブの構造がわかります。
レシポンシブサイト制作のやり方が一通りわかれば、あとは応用、工夫次第でどんどん、できるようになる!
テンプレートに頼ってきた方もスキルアップ!
オリジナルのレシポンシブサイトを制作できるようになる。
仕事の幅が広がりますね!
モバイルファーストを採用したCSSがわかる。
レスポンシブ対応の効率の良いCSSの記述が学べる。
グリッドデザインができるようになる。
可変するレイアウトをグリッドの規則に合わせて作れるようになる。

講座の概要

目標
レシポンシブサイトの仕組みを理解し、マルチデバイスに対応できるスキルを身につけること。
対象者
HTML・CSSの基本的な部分をマスターされている方。
受講スタイル
インターネット上の専用ページにて動画を閲覧しながら学習していただけます。
解説はWindows環境での解説になります。
学習にはPC・テキストエディタ・インターネット環境が必要です。
※Dreamweaverをお持ちでなくても、お手持ちのテキストエディタで対応していただけます。
動作環境
Win・Mac・スマートフォン・タブレットで再生できます。
受講期間
受講期限はありませんので、24時間、あなたのペースでいつでもどこでも学習できます。
更新費も一切かかりません。
サポートの保証期間
ご質問等は、メールまたはFacebookの秘密グループにて受け付けます。
サポートの保証期間はご購入日より1年間です。
ユーザー登録をしていただくことで、1年を超えても永続的にサポートを受けられます。
返金について
学習用のオンラインサービスという性質上、キャンセル、返金することはできません。

講座購入特典!01
まとめんばーず限定コンテンツ(通常980円/月)を無料で見ることができます。

レシポンシブサイトの作り方講座購入特典

『Webデザインのまとめんばーず』は、独学でWebデザインの勉強をされている方のためのWebデザインのまとめサイトです。

Webスクールや求職者支援の授業内で使用した学習内容も盛り込み、CSSサンプルコード、Webサイト制作、運営、独学の方法など、

独学でWebデザインを勉強し、
フリーランスとしてWebの世界で仕事を持ち、
闘っていけるための

有益な情報を無料で公開していますが、

以下に挙げる一部コンテンツやサービスは『まとめんばーず』にのみ公開させていただいています。

  1. これまでの受講生へのサポート内容などをまとめたコンテンツ
  2. サンプルデータ・実案件で使用した契約書・提案書・見積書・請求書等のダウンロード
  3. 各種ミニWeb講座
  4. SkypeでのWeb勉強会や座談会の開催
  5. インターネット上では、公開することが適切ではない内容・表現の含まれたぶっちゃけ話

これらを全て無料で見ることができます。

※すでに「まとめんばーず」登録をされている方(980円/月)がご購入の場合は、翌月から980円は必要ありません。


講座購入特典!02
無料コンサルいたします。

レシポンシブサイトの作り方講座購入特典02
自分の持っている技術を活かしてWebでビジネスを展開していきたいがどうしていいかわからない、すでにホームページを持っているが上手く集客できず困っている方に、メールでアドバイスさせていただきます。

講座購入特典!03
Webサイトの作品を添削。

レシポンシブサイトの作り方講座購入特典03
ご自身で作成されたWebサイトの作品がある方、よろしければ添削させていただきます。ポートフォリオを持ってお仕事GETして下さい!

お申し込みと講座専用ページログインの流れ

[レスポンシブWebデザイン動画講座] 定価¥49,900

期間限定割引→¥39,900(税込)

受講期限/なし   サポート/無料・更新費もかかりません。


  • ご購入方法は、安全・簡単!
    下記のボタンをクリックするとクレジットカード決済(Paypal)画面が開きます。
    決済完了後、ユーザー登録画面になります。
    ユーザー登録後、すぐに講座を受講していただけます。
    以下に流れを詳しく解説していますのでご利用ください。 
     




クレジット決済の流れ

⇒ 銀行振り込みの方はこちら

以下のボタンをクリックするとクレジットカード決済(Paypal)画面が開きます。





決済完了後、すぐにユーザー登録画面になります。
(画面を閉じずにお待ちください。)

※ここで「新規ユーザー登録」または
お持ちの「まとめんばー」または「Webクリめんばー」アカウントでログインされないと、講座ページを見ることができません。

以下に詳しく説明しています。

よくわからず、失敗しちゃった!という方は、お気軽にメールくださいね!

【ステップ1】

上記のボタンをクリックすると、以下の画面が開きます。

Peypalアカウントをお持ちの方は、「ログイン」してお進み下さい。

Peypalアカウントをお持ちでない方は、「クレジットカードで支払う」をクリックしてお進みください。

レスポンシブWebデザイン作り方講座お申し込みの流れ

【ステップ2】

画面に従っていくと、次の画面になりますので「同意して支払う」をクリックして支払いを完了させて下さい。

レスポンシブWebデザイン作り方講座 購入の流れ

【ステップ3】  次の画面になります。

レスポンシブWebデザイン作り方講座 購入の流れ
この次のページでユーザー登録を行って下さい。
(画面を閉じずにお待ちください。)

※ここでユーザー登録がされないと、講座ページを見ることができません。

【ステップ4】

まとめんばーず・Webクリめんばーで 登録済みの方は
「I have an existing account」を選択後、 (青枠での説明)
お持ちの登録情報を入力してログインしていただけます。

ご自身が登録しているかどうか、わからない。
という方は、新規登録(赤枠での説明)して下さい。

 

はじめての方は(赤枠での説明)
「I am a new user」が選択されていますので
必要事項を記入の上、「登録する」 ボタンをクリックして新規登録して下さい。

【ステップ5】  画面が切り替わるまでお待ちください。

【ステップ6】  右サイドバーをご確認下さい。

あなたの登録情報が反映されていれば成功です。

すぐにレスポンシブ講座を受講していただけます!

【ステップ7】

登録完了後、以下の2通のメールが届きます。

  • まとめんばーず登録完了メール(10分以内に届きます。)
  • レスポンシブめんばー専用特別案内メール(48時間以内に届きます。)




銀行振り込みの方はこちらからどうぞ。

*
*
*

  

お振り込みに関するメールを返信します。
メールに記載されている指定口座をご確認の上、お振込み下さい。

ご入金確認後、オンライン講座を受講していただくためのユーザー登録ページをご案内いたします。

ユーザー登録、すぐに受講していただけます。


  • お問い合わせフォームへ

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

販売者名 福本 智子
所在地 〒460-0008
愛知県名古屋市中区栄5丁目26-39GS栄ビル 3F
メールアドレス online【アットマーク】web-creators-tips.com 【アットマーク】を@に変更してください。
商品名 【Webクリオンライン まとめんばーず】 レスポンシブWebデザイン動画講座
お支払い方法 クレジットカード・銀行振込
販売価格 ¥39,900(税込)(通常定価49,900円)※期間限定割引
商品代金以外の必要金額 銀行決済の場合のお振込み手数料
商品引渡し時期 クレジットカード決済の場合は、決済完了後、ユーザー登録画面になります。
ユーザー登録後、すぐに講座を受講していただけます。
銀行振り込みの場合は、ご入金確認後、48時間以内に講座専用ページを閲覧するためのユーザー登録画面をメールにてお知らせいたします。
返品・返金 学習用のオンラインサービスという性質上、パスワード発行後にキャンセル、返金することができません。
受講期限 なし
サポートの保証期間 ユーザー登録をしていただくことで、1年を超えても永続的にサポートを受けられます。


Pagetop