初心者のためのスマートフォンサイトを作るときに見ておきたいサイト

スマートフォンサイトを本格的に作るようになってきたので、いろいろ基本的なことから調べてみました。
自分はコーディングがメインなので、HTML/CSS/JSが主になっています。

  1. 制作する前に仕様の確認
    1. ASCII.jp:サイト制作の前に知りたいiPhone/Androidの仕様|実践!iPhone&Androidサイト制作ガイド
    2. スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき
    3. iPhone iPad向けサイトを制作するためのいろいろ
  2. デザインをする
    1. デザインページのリンク集
    2. 保存版、iPhone等のモバイルGUIデザイン作成用Photoshop用PSDファイル60個まとめ
    3. スマートフォンサイトをデザインする7つのポイント
  3. コーディングをする
    1. ASCII.jp:作って学ぶスマートフォン対応サイトの基本|実践!iPhone&Androidサイト制作ガイド
    2. スマートフォン向けサイトの作り方|ユージック
    3. 【iPhone・iPad】サイト制作のまとめ
  4. JavaScriptを使う
    1. jQuery Mobileを利用したスマートフォンサイト作成手順|ユージック
    2. jQuery mobileの class や div などの挙動サンプル
    3. iPhoneページ製作用jQueryプラグイン「jQTouch」
    4. jQTouchの使い方とclass指定による挙動のまとめ
    5. jCarousel
    6. flickGal
    7. iPhone / iPadなどでposition: fixedが利用できる「iScroll」
    8. ASCII.jp:jQueryでiPhone風スライドパネルを作ろう|実践!iPhone&Androidサイト制作ガイド
  5. iPhone用小ネタ
    1. 【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】
    2. iPhone向けのサイトを作るときのちょっとした気配り
    3. iPhoneのSafariでフォームにメールアドレスを入力する際にキーボードを変更する属性の指定方法
    4. 関連記事:

制作する前に仕様の確認

スマートフォンの仕様が載っています。一通り目を通すと、製作してる時に「これができない!」などの問題が回避できるかもしれません。

ASCII.jp:サイト制作の前に知りたいiPhone/Androidの仕様|実践!iPhone&Androidサイト制作ガイド

スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき

iPhone iPad向けサイトを制作するためのいろいろ

こちらには表示できる画像の大きさやファイルサイズ、iPhoneがサポートする動画/音声ファイル形式などが載っています。

デザインをする

デザインページのリンク集

デザインページリンク集は以前紹介しましたので、以下からどうぞ

保存版、iPhone等のモバイルGUIデザイン作成用Photoshop用PSDファイル60個まとめ

こちらはデザインに使用するパーツを配布しているサイトのまとめ記事です。

スマートフォンサイトをデザインする7つのポイント

リキッド(可変幅)でデザインするなど、デザインのポイントについて書かれています。

コーディングをする

ASCII.jp:作って学ぶスマートフォン対応サイトの基本|実践!iPhone&Androidサイト制作ガイド

基本からわかりやすく説明しています。

スマートフォン向けサイトの作り方|ユージック

こちらも基本から。JSやユーザーエージェントなども載っています。

【iPhone・iPad】サイト制作のまとめ

iPhone/iPadなどのスマートフォン独自タグが載っています。

JavaScriptを使う

jQuery Mobileを利用したスマートフォンサイト作成手順|ユージック

有名なjQueryを使ったプラグインです。

jQuery mobileの class や div などの挙動サンプル

こちらのページにはjQuery mobileのclass指定の挙動がまとめてあります。

iPhoneページ製作用jQueryプラグイン「jQTouch」

こちらは昔紹介しました、jQtouchです。

jQTouchの使い方とclass指定による挙動のまとめ

こちらのページにはjQTouchのclass指定の挙動がまとめてあります。

jCarousel

カルーセルです。スマートフォンは画面が狭いので、カルーセルを使う事が多いかもしれません。

flickGal

こちらはフリックで動かす事ができます。使用するとスマートフォンっぽいねって言われます。

iPhone / iPadなどでposition: fixedが利用できる「iScroll」

スマートフォンに搭載されているmoblie WebkitではCSSのposition:fixed;が使えないので、もし固定表示したい場合はこちらのJavaScriptを使用します。

ASCII.jp:jQueryでiPhone風スライドパネルを作ろう|実践!iPhone&Androidサイト制作ガイド

まだ使用した事はないですが使うかもと思ってメモしてます。スライドで表示します。

iPhone用小ネタ

【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】

iphone4だと3と比べて解像度が2倍なので少しぼやけて見えます。その対応方法。

iPhone向けのサイトを作るときのちょっとした気配り

iPhoneでタップしたときに色をつけたり、電話番号にリンクをつけない方法などが載っています。

iPhoneのSafariでフォームにメールアドレスを入力する際にキーボードを変更する属性の指定方法

inputのtype属性によってキーボードが変わります。知らなかった・・・

コメント

  1. スマートフォンサイトの需要が高まりつつあるので、勉強がてらアスパラガス用に作ってみました

    こんにちわ(・∀・) ガラケーを卒業(ほぼ故障のため)し、ついにスマートフォンデビューを果たした☆MNE☆です。 そんなきっかけもあり、弊社WEBサイトに…

  2. Wyatt Hedeiros より:

    Appreciate the item conducive towards pretty good facts. Clearly fair-minded wen up! When i consistently complete definitely definitely not bourgeoning with these but brooding people performed some almost fervently buddy-buddy depredate in addition to I’m indubitable a number of people suavity this fewer regardless.

タイトルとURLをコピーしました