Pages
Stay In Touch
More
© 2011 Kaleidoscope
この記事のURLをスマートフォンに送る
最近いろんなスマホ最適化されたサイトを見るようになりました。
それと同時に、多様なAndroid端末が急速に普及し、iPhone3GSが全盛だった去年までの制作方法では対応が不十分になってきてまして、僕自身も試行錯誤中なこともあり、2011年5月時点でのiPhone・Androidに対応できる自分なりのレイアウト方法をちょっとまとめてみようと思います。
今回は全体編なので、主にviewportの設定と全体を囲むコンテナ要素にフォーカスを絞ります。
この記事のURLをスマートフォンに送る
フリック式スライド デモ
スマートフォンサイトにおいて、左のムービーのようなフリック動作ができる画像スライドのjQueryプラグインを作りました。（ムービーはiOSシミュレータによるデモです）iPhone・Androidでご覧の方はデモに直接アクセスしてください（ムービーは再生されません）。
【デモを見る（iPhone・Androidで見てください）】
【ダウンロード】
この記事のURLをスマートフォンに送る
※Androidでアクセスされた方は使用感をいただけると幸いです。
（サイトトップ）
先日簡単なエントリで書いてますが、今まではてなダイアリーにエントリを書いてまして、やはりデザインの限界などがありWordPressに移行しました。
このサイトのPCビュー
同時に、基本的なスマホ最適化もおこなっています。
ようやく自分のサイトでスマホ最適化ができたので…ということでのエントリです。
ちなみに、このサイト自体はまだまだ作りかけでして…
そもそもサイトの構成がちゃんと考えられておらず、かなりいろいろ行き届いてないサイトです（笑）
（IE系ではちゃんと表示されません…そのうち手入れします。すみません）
どちらかというと、スマホ最適化でのユーザーインターフェースに重きを置いてのエントリとなります。
では、以下にスマホ最適化でおこなったことをまとめてみました。
（ちなみに対象としているスマートフォンはiOSデバイス（iPhone, iPod Touch）、Androidです）