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

公開日: 2017.12.26
更新日: 2024.01.04
スマホ用サイトを作るためのおすすめ記事5選

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

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

サイトのご紹介

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

スマホ向けサイト制作3手法の基礎知識と課題

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

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


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

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

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

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

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

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

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

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

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

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

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

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はほとんどのユーザが同じシーンで使うのに対し、スマートフォンでは様々なシチュエーションや環境で使うことがあるため、より細かい配慮が必要になっていきます。

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

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5