【HTML初心者入門】スマホ用サイトを作るためのおすすめ記事5選！

スマートフォンでWebブラウザやWeb表示機能を有するアプリでのサイト閲覧は既に世間では当たり前のことかと思います。しかし、いざ作るとなるとそのアプローチ方法は様々ですし、PC向けとは勝手が 違ったりすることがあります。（PC開発のみやってきた人は尚更です）

ここでは、スマートフォン向けのWEB開発についてまとめます。HTML5やCSS3、jQuery MobileなどJavaScriptフレームワークを使ったスマートフォン向けのWebアプリケーション開発に関する記事、HTMLやCSS、JavaScript／jQuery自体を学習するのに役立つ記事をご紹介します。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

サイトのご紹介

1. スマホ向けサイト制作3手法の基礎知識と課題、OS／機種依存のハマリどころ3選

http://www.atmarkit.co.jp/ait/articles/1210/22/news016.html

スマートフォン向けWebサイト構築支援ツールを開発されている方の記事です。構築支援ツールということで、ありとあらゆるスマートフォン・タブレットで作業をしている関係上、サイト構築の詳細まで非常にわかりやすい内容となっています。実際に作り始める前に一通り確認しておけば制作過程がスムーズになると思います。

「今の働き方に不満はあるけど、日々の業務が忙しくてゆっくり考える時間がない…」
そんな悩みを持つ方に向けて【DMM WEBCAMP】では無料のキャリア相談を実施しています。
ビデオ通話で相談をすることができるため、仕事で忙しい方でもスキマ時間に気軽にカウンセリングを受けることも可能です！
プロのキャリアカウンセラーと一緒に、今後のキャリアについて考えてみませんか？

2. 5分で分かるレスポンシブWebデザイン

http://www.atmarkit.co.jp/ait/articles/1301/28/news068.html

スマートフォン向けのサイトといえば、まずは流行りのレスポンシブWebデザインを 考えると思います。レスポンシブ、スマホやPCなど様々な形態の端末から参照しても統一的に見えるデザインのことです。この記事では、いくつかのカテゴリに分けて説明してあり、レスポンシブデザインへの取り組みについて順序立てて理解していくことが可能になっています。

3. もうWebはブラウザという制約に縛られなくていい

http://www.atmarkit.co.jp/fwcr/special/hello_html5ux/01.html

Webサービスにおけるユーザーエクスペリエンス、つまり満足度を考え、現在のHTML5が良く使用されるこの時代にどういったアプローチが有効なのかが紹介されています。特にハードウェアとの連携を実現する機能について取り上げており、何らかの身体的動作を伴うこの連携は、ユーザーにわかりやすい印象を与えます。この機能はユーザーの心に残りやすいという特徴があり、アプローチとして非常に有効的です。

これまでのWebサイトは、文字や画像、映像を使ってブラウザに情報を表示していましたが、今では、そのような要素だけに限定されない様々な工夫があるということが分かる記事になっています。

4. 「HTML5“とか”アプリ開発入門」

http://www.atmarkit.co.jp/fwcr/design/index/index_html5appli.html

アプリ開発やデザインの勉強ももちろんですが、まずはJavaScriptのAPIやCSS3、SVGなどを含めアプリ開発の基本である「HTML5」そのものが理解できていないとなかなか先へ進めません。この記事では「HTML5」の基本を学べる入門の内容となっています。まずはここから始めてみましょう。

5. タッチデバイスを指で快適に操作させるために

http://www.atmarkit.co.jp/ait/articles/1210/24/news023.html

スマートフォンと切っても切れない関係にある技術といえば、タッチデバイスです。タッチデバイスUIの特徴とその癖から、HTML5のWebアプリで実現するポイントWEBでのタッチイベント仕様について解説されている記事です。PCのサイトでは触れていなかった内容であり、すぐにはなじめないかもしれませんが今後必須のものですので、しっかり押さえておきましょう。

「今の働き方に不満はあるけど、日々の業務が忙しくてゆっくり考える時間がない…」
そんな悩みを持つ方に向けて【DMM WEBCAMP】では無料のキャリア相談を実施しています。
ビデオ通話で相談をすることができるため、仕事で忙しい方でもスキマ時間に気軽にカウンセリングを受けることも可能です！
プロのキャリアカウンセラーと一緒に、今後のキャリアについて考えてみませんか？

まとめ

スマホ用サイトも、基本的にはPCのWEBサイトと考え方は一緒なのですが、PCはほとんどのユーザが同じシーンで使うのに対し、スマートフォンでは様々なシチュエーションや環境で使うことがあるため、より細かい配慮が必要になっていきます。

それらを考慮されたサイトはとても見やすいものになりますので、制作の際には意識してみてください。