スマートフォン対応サイト制作の基礎知識

公開講座についてのお知らせ

2014年3月末をもちまして「公開講座」を、終了とさせていただくこととなりました。
サービス開始よりご愛顧いただき、誠にありがとうございました。

なお今後は、「公開講座」にて培ったノウハウを盛り込みながら、同ブランドの『法人研修』につきまして、一層充実したサービスを提供してまいります。
つきましては引き続きご愛顧賜りますよう、よろしくお願い申し上げます。

概要

スマートフォン対応サイト制作の基礎知識

スマートフォン対応サイト制作の基礎知識講座では、スマートフォン(スマホ)で閲覧しやすいサイズに整え、指で操作しやすく、表示が軽い「スマートフォン対応のWebページ」の作り方を学習します。

すでにPC用のホームページをお持ちで、さらにスマートフォンで閲覧・操作しやすいページを作成したいWeb制作者の方、企業ホームページ担当者の方におすすめの講座です。

この講座で、できること
  • スマートフォン対応サイトの状況を知る。
  • スマートフォン対応サイト制作での、ソースコードのポイントを押さえる。
  • マルチデバイス対応ページの仕組みを知る。
  • jQuery Mobileの基礎を知る。
こんな方におすすめします
  • スマートフォン対応サイト制作に、本格的にチャレンジしたいWeb制作者の方。

アクセスの増えてきたスマートフォンユーザーに対応したサイトを準備しましょう!

iPhoneやAndroidなどに代表されるスマートフォン(スマホ)の急速な普及にともない、サイトに訪れるユーザーも多くなりました。従来の携帯電話に比べて画面が広ため、外出先などパソコンがない環境でもサイトの閲覧がしやすいのも理由のひとつと考えられます。

そのような中、PC向けのページをそのまま見せるのではなく、スマホで閲覧・操作がしやすいページを準備するサイトが増えてきました。PC向けのサイトをスマホで見ると、画面が小さく表示されるので、ユーザーが自発的に画面を拡大するなど、閲覧の煩わしさを回避できるためです。

スマートフォンで閲覧・操作がしやすいページ

スマートフォン対応サイト制作の基礎知識講座では、

  • スマホで閲覧しやすいページサイズに調整
  • 指で操作しやすい
  • 表示が軽い

という特長をもつ、スマートフォンに対応したホームページの作り方を学びます。

今後「スマホ経由でのアクセス増加」を見込まれるサイトを手がける方には、特におすすめの内容です。

コースカリキュラム

スマートフォン対応サイト制作に必要な知識を学習しましょう!

  • スマホ(スマートフォン)の現状
    • スマホ端末の種類と特長(画面領域やブラウザー)
    • 独特の操作など、スマホ対応サイトの制約
    • スマホ対応サイト事例からみるデザインパターン
  • スマホ対応サイトを制作する
    • HTML5とCSS3が適しているわけ
    • スマホ対応サイトの一般的なひな型
    • スマホ対応サイト向けのソースコードのポイント
    • パソコンとスマホの表示振りわけ
  • さらに進んだスマホ対応サイト作りのテクニック
    • マルチデバイス対応のページデザイン
    • jQuery Mobileを使った動きのあるページ変移
    • 画像をより軽く、きれいに
    • スマホに適したUIとは?

制作実習の完成イメージ

講座の実習で制作する完成イメージや、テキストを確認いただけます。

画面をクリックすると拡大します。

講師

森 和恵 (もり かずえ)
フリーランス Web制作/IT系セミナー講師
Adobe認定インストラクター|Dreamweaver

r360studio.comで活動するWeb系セミナー講師。「難しいことでも、わかり易く伝える」をモットーに楽しく学べるセミナーを開催。今後は、eラーニングや電子出版の形式で、Web制作を学ぶための教育コンテンツにも注力していく。

今後、サイト制作の教科書 r360studyで何かいいことをしかける予定。

著書 (Amazon 著者ページ

  • よくわかるFireworksの教科書[共著](マイナビ)
  • iPhone&Android スマートフォンサイト 制作の仕事術[共著](マイナビ)
  • DreamweaverとMovableTypeで作る テンプレートカスタマイズレッスン(技術評論社)
  • ホームページを作ろう!パソコン教科書 Dreamweaver 8(日経BPソフトプレス)
  • 困ったときのブログ逆引きリファレンス(技術評論社)

イベント/セミナー

  • CSS Nite in KOBE (2012年10月6日)
  • CSS Nite in OSAKA, Vol.28 (2011年12月4日)
  • Untitled!!!!!!!! (2011年4月3日)
  • MTDDC TOKYO テーマ編 (2010年7月31日)
  • Dreamweaver Town Meeting in Tokyo 大喜利 (2010年5月29日)
  • CSS Nite in KANSAI, LP1 プレセッション (2010年6月26日)
  • CSS Nite in OSAKA, Vol.15 (2009年5月12日)
  • CSS Nite in FUKUI (2008年3月8日)
  • CSS Nite in Osaka, Vol.3 (2007年6月1日)
  • Adobe Max Japan 2009 Dreamweaver CS4 入門講座
  • Macromedia MAX 2004 Japan
    「検索エンジン攻略のための正しい SEO のススメ」

スケジュールにより講師が変更になる場合があります。あらかじめご了承ください。

FAQ

 

受講前

HTML5やCSS3を事前に学習しておく必要はありますか。

HTML5やCSS3の概要は講座中にご説明しますので、事前学習の必要はありません。ただし、深い内容には触れず、スマートフォン対応サイトを作るために必要なポイントのみの解説となります。

実際にサイトを制作する際は、知識がある方がより深く作りこむことができます。講座受講後でもかまいませんので、HTML5/CSS3を習得することをおすすめします。

関連用語・キーワード

jQuery Mobile(jQueryモバイル)とは

jQuery Mobile(ジェイクエリーモバイル)とは、スマートフォンやタブレットなどのモバイル端末用のサイトを手軽に作成・構築できる、高機能なフレームワーク(いろいろな機能がセットになって利用できるソフトウェア)です。

jQuery Mobileを利用すると、画面のサイズもOSも違う多種多様なモバイル端末に自動的に対応されるため、デバイスの違いを考慮することなく、HTMLやCSSなどの制作に集中できます。iPhone(アイフォーン)やAndroid(アンドロイド)はもちろん、Blackberry(ブラックベリー)など広範囲なプラットフォームに対応しています。

制作のうえでも、モバイル端末特有のデザインやユーザーインターフェースが標準で用意されているため、一からボタンデザインなどを作成することなく、簡単にページを作成できます。

最新のファイルは、jQuery Mobile公式ホームページから、無料でダウンロードできます。

詳細

スマートフォン対応サイト制作の基礎知識
講座情報 講座番号 DWAY
講座名 スマートフォン対応サイト制作の基礎知識
講座種別 m-School 入門
実習 パソコンを使った実習があります
カテゴリー Web制作
講座日数 日数 1日
受講時間 13:00~18:00 (12:40より受付)
総時間 5時間(1日5時間×1日)
開催場所 会場
m-School (エムスクール)
〒101-0061 東京都千代田区三崎町1-3-12 水道橋ビル8階
m-Schoolへのアクセス・地図
PC環境 Microsoft Windows 7またはVistaを使用します(日程により環境が異なります)。Apple Macintoshをご利用の方でも、ツールの基本操作やユーザーインターフェースはWindows版とほぼ同等ですので、安心してお申し込みください。
持参物
  • 受講証(お申し込み時にメールでお送りします)
  • 筆記用具

前提条件

講座を受講するうえで、下記の知識・経験が必要になります。

前提条件
基本操作 下記のようなWindowsの一般的な操作ができる。
  • マウス操作(クリック、ダブルクリック、ドラッグ)
  • フォルダ操作(作成、名前の変更、コピー)
  • テキスト操作(入力、フォント変更、フォントサイズ変更)
プログラミングの経験 必要ありません。
デザイン制作の経験 必要ありません。
ネットワークの知識 必要ありません。
Webページ制作の経験 Web制作経験者で、HTMLとCSS2のソースコードをある程度理解できている。
HTMLやCSS自体の基礎はご説明しません。ホームページ制作の基礎に不安がある方はプロの使い方を学ぶ Adobe Dreamweaver CS6 入門講座の受講をおすすめします。

おすすめ講座

受講する前・受講した後にオススメしている講座です。

受講前・受講後にオススメの講座
受講前にオススメ HTMLやCSSの知識が不安な方は、まずはプロの使い方を学ぶ Adobe Dreamweaver CS6 入門講座で、基礎を習得してください。
HTML5やCSS3を学ぶなら、ここがすごい!CSS3入門講座がおすすめです。
受講の後はこの講座 スマートフォンだけでなく、HTML5やCSS3などで「今、主流のWebデザイン」を学びたい方は、実案件から学ぶCSS3使いどころ講座がおすすめです。
関連リンク

スマートフォン対応サイト制作の基礎知識

 

講座一覧へ

法人研修プランをご提案します

本講座は法人研修として随時承り中です。お話を伺い、最適のコーディネートをさせていただきます。

ご希望、ご質問等ございましたら、お気軽にお問い合わせページよりご連絡ください。

スマートフォン対応サイト制作の基礎知識
講座種別 m-School 入門
実習 パソコンを使った実習があります
カテゴリー Web制作
日数 1日
受講時間 13:00~18:00 (12:40より受付)
会場
m-School (エムスクール)
〒101-0061 東京都千代田区三崎町1-3-12 水道橋ビル8階
m-Schoolへのアクセス・地図

RSSフィードで
最新情報を購読