レスポンシブWebデザインの基本と Movable Type テンプレートのカスタマイズが学べる講座


Bootstrap(ブートストラップ)と呼ばれるフレームワークを使って、スマートフォン、タブレット、パソコンなどに最適化できる「レスポンシブWebデザイン」(RWD)によるホームページを、Movable Typeのテンプレートにて制作する方法を学ぶことができる講座です。

Bootstrap と、Movable Type で、レスポンシブWebデザインを

こんな方にお薦めです

・PC、スマホ、タブレット対応のサイトを構築したい方
・レスポンシブWebデザイン(RWD)対応のホームページを作りたい方
・Movabel Type を使ってサイトを構築している方
・Bootstrapのカスタマイズ方法を勉強したい方
・自分でカスタマイズや更新できるサイトを検討している方

レスポンシブWebデザイン制作技術を学習中

レスポンシブWebデザインとは?

スマートフォンやタブレットでも、普通のパソコン向けに作られたホームページを見ることができます。例えば、スマートフォンで、横幅固定980ピクセルで作成されたホームページを表示すると、かなり縮小されて表示され、拡大しないと文字を読むことができません。また、マウス操作でのクリックを前提としたリンクも、指でタップしずらいこともあります。

スマートフォンやタブレットなどのデバイスの画面サイズ(横幅)に合わせて、動的にレイアウトを変更して表示する手法を「レスポンシブWebデザイン」と言います。

具体的に「レスポンシブWebデザイン」を採用している「starbucks.com」のデバイス別レイアウトをみてみましょう。


同じHTMLで、それぞれ異なるレイアウトを表示

以下に「starbucks.com」のページにてウィンドウをリサイズしたときのデモを動画でご覧になることができます。

ぜひ、ご自身でも、「starbucks.com」のページにアクセスしてお確かめください。
http://www.starbucks.com/

スマートフォンやタブレットでもアクセスして、どのレイアウトが表示されるのか、お試しください。

レスポンシブWebデザインの特長

HTMLは1つ

レスポンシブWebデザインでは、すべてのデバイスのアクセスに、1つの同じHTMLファイルで対応します。したがって、スマホ用ディレクトリにリダイレクトしたりしません。1つのHTMLでも、デバイスの横幅サイズに合わせて、レイアウトを変更できるように、ブロックに分けてHTMLをコーディングします。レスポンシブWebデザインを意識しない通常の制作方法と多少異なります。

URLは1つ

HTMLが1つであれば、当然、ページにアクセスするためのURLも1つになります。レスポンシブWebデザインでは、スマホ用URL、タブレット用URLなど、デバイスごとにURLを用意する必要はありません。URLが1つであることによって、検索エンジンのクローラが勘違いをしなくなることや、他のサイトやソーシャルメディアからのリンクが統一されるなどのSEO上のメリットがあります。

CSSで表示を変える

レスポンシブWebデザインでは、各デバイスごとの表示をCSS(スタイルシート)でコントロールします。メディアクエリーという機能を使って、横幅サイズに合わせたスタイルを適用させます。タブレット向け、スマホ向けには、横幅固定でない可変幅のリキッド・レイアウトを使います。

Bootstrapとは?

Bootstrapは、あのツイッターを提供している会社が無料で提供するフレームワークで、レスポンシブWebデザイン対応サイトを、簡単に作ることができるツールです。

Twitterが提供するツール

HTMLのスキルが少々あれば、スマートフォン、タブレット向けのリキッドなデザインのページや、Twitterでも採用されているようなCSSデザインを使ったページをすぐにでも作れます。

Bootstrap
http://getbootstrap.com/

講座では、具体的なサンプルを作成しながら、Bootstrapのコーディングや、カスタマイズ方法を学びます。

レスポンシブWebデザインで作成するメリット

HTMLファイルが1つということは、スマホ用、タブレット用にページを用意する必要がなくなり、ページを制作する時間と費用を抑えることができます。また、ページへの修正などの際にも、1つのHTMLファイルが対象となるので、メンテナンスが楽にできるようになります。

制作が難しいのでは?

レスポンシブWebデザインでサイトを構築するには、再配置可能なブロックを定義し、各デバイス別にレイアウト設計を行う必要があります。それに合わせて、HTMLやCSSをコーディングすることになりますが、やはり慣れていない方には少々戸惑うことになるかもしれません。

そこで、Bootstrapの登場です。レスポンシブWebデザインのページを簡単に作れるような機能が用意されていますので、HTMLやCSSをご存知の方であれば、ある程度のサイトを短時間で構築することができるようになります。

講座では、このBootstrapを使用して、ページを作成していただきます。

Googleも推奨しているレスポンシブWebデザイン

Googleがスマートフォンに最適化したホームページの作り方を発表しています。3つの方法の中 で、一番おススメなのが「レスポンシブWebデザイン」です。


Google Developers ホームページ
https://developers.google.com/webmasters/smartphone-sites/details

本講座の特長

学習用サーバ環境をご用意します

講座では、各ソフトウェアの最新バージョンを使用できるように、学習環境であるサーバーを当社で準備させていただきます。

1人1台パソコンを使います

独学で本やホームページを読んだとしても、情報は一方的で、質問疑問には誰も答えてくれません。講義を聴くだけでも、作ってみないと、なかなか身に付きません。

講座では、実際に自分で動作させてみて、理解を深めてください。そして、わからないことは講師に質問して、すべての問題を解決してください。


実際に作って
学んでください

少人数制です。最大5名様。

大変申しわけありませんが、パソコンを使う講義の為、いっぺんに多くの方にお教えすることができません。

講師は作られたソースコードをチェックしますので、少人数でないと無理なのです。少人数ですので、遠慮なく、たくさん質問をして、講師を徹底的に活用してください。

少人数で、じっくり学習できる環境

よくある質問

Bootstrapについて、あまり詳しくないのですが・・・

HTMLやCSSを多少知っているレベルで十分です
Bootstrapについては、講座にて詳しく解説致します。

自分自身は制作担当ではないのですが・・・

どのようなことが、どのくらい簡単にできるのか?
そのノウハウを身に付けるだけでも、

社内制作担当者や制作外注会社とも対等に話ができるようになり、
スマートフォンサイトの構築や提案などに活かせるようになるでしょう。

飲み込みが悪いほうなので、実習タイプだと遅れをとったり、
他の人に迷惑をかけるようなことはないか?

大丈夫です。少人数で行いますので、ご安心ください。

受講者様のパソコンの前で、個別に丁寧に指導いたします。

後で質問したりできますか?サポートしてくれるんですか?

セミナー終了後も、サポートいたしますので、ご安心ください。

セミナーでは、理解できたけど、実際に応用してみたらうまくいかなかった。

自社のホームページで、こんな使い方はできるのか?
あんなことはできるのか?など質問してみたい、などなど、

メールで御相談いただき、丁寧にお返事をさせていただきます。

期限は、講座終了後1ヶ月間とさせていただきますが、
その後のサポートが必要でしたら、有料で対応させていただきます。

Movable Type の環境がないのですが・・・

講習で使ったサーバーは、1ヶ月間利用できます。
Movable Type も利用することができます。

ぜひ、サポート期間内に復習することをお薦めします。

また、講師にコーディングをチェックしてもらいたい場合など、
サーバーにソースコードをアップロードしてください。
具体的な問題点や、正しく修正したものをこちらからアップします。

講座の内容

5時間(13時~18時)で、以下の内容を学習します。

レスポンシブWebデザインの基本

・メディアクエリ
・リキッドレイアウト、仮想ウィンドウサイズ
・画像表示テクニック
・HTML5/CSS3
・フレームワークBootstrapとは?
・開発環境の構築

BootstrapのCSS、コンポーネントの学習

・レイアウト設計
・フルードグリッドシステム
・テーブル、イメージ
・ナビゲーション、スタッカブル
・タブなど

Movable Type テンプレート作成

・IE8以下への対応
・Bootstrapの構造としくみ
・MTテンプレートへの組み込み方法
・CSSによるカスタマイズ
・テンプレート作成

※内容は一部変更になることもあります。

本講座にて、次のスキルを習得できます

・レスポンシブWebデザインに関する技術を学べます
・フレームワークBootstrapの使い方を理解できます
・BootstrapをCSSにてカスタマイズできるようになります
・MovableTypeによるレスポンシブWebデザイン対応サイトを構築できます
・MovableTypeによるPC、スマホ、タブレット対応のサイトを構築できます

Bootstrap による、レスポンシブWebデザイン
Movable Type テンプレート・カスタマイズ講座

日程
時間13:00~18:00
講師アロマネット株式会社 代表取締役 中村義和
場所シェアオフィス練馬 東京都練馬区(地図
定員5名様
本セミナーは、随時、講師があなたのコーディング状態を的確に把握する必要がある為に、少人数制となっておりますので、受講希望の方は早めにお申し込みくださいますようお願い申し上げます。
費用1名様:49,800円(税込)
2名様:69,800円(税込)
※1ヶ月間のメールによる技術サポートが含まれています。
支払方法前払い
お申し込み後、5日以内(ただし、セミナー開始前日まで)にお振込み願います。
パソコンノートパソコンを持参願います。(無線LANにて接続可能なもの)
※貸し出しご希望の方は事前にご連絡願います(別途有料)
特典1ヶ月間の技術サポート
セミナーでは、理解できたけど、実際に応用してみたらうまくいかなかった。自社のホームページで、こんな使い方はできるのか?あんなことはできるのか?など質問してみたい。などなど、メールで御相談いただけます。

短時間で効率良く学んでください。

本講座は、自分で調べたり、技術習得する時間が 取れなくて困っている忙しいあなたの為に、

知っておくべき、ノウハウを凝縮した、
実際にコーディングを行っていただく、
実習型セミナーです。

ぜひ、短時間で効率良くスキルアップしてください。




講師 中村義和

参加申込はコチラからどうぞ

ご希望の開催日、人数の[申込み]ボタンをクリックしてください。

出張講座について

日程が合わない、人数が多くなり出張交通費がかさむ、自社のニーズに合わせた内容で教えて欲しい、などのご要望にお応えするために、講師が貴社にお伺いする「出張講座」もご用意しております。