レスポンシブ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年間です。
返金について
学習用のオンラインサービスという性質上、キャンセル、返金することはできません。

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

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

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

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

お申し込み

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

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

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


  • ご購入方法は、Paypalまたは銀行振り込みを選択していただけます。
    決済完了後、10分以内に受講のご案内メールをお送りします。
    メールが届かない場合は、メールアドレスの入力間違い、迷惑メールフォルダ等に入っていることが考えられます。

    まずは、迷惑メールフォルダをご確認いただき、見当たらない場合は、お問い合わせ下さい。


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

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

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


Pagetop