2011

JAN

09

2011.01.09

nishimotonishimoto

iPadを買ったのでweb屋的感想を書いてみた

こんにちわ、ipadを購入していじり倒している@nihimotoです。
噂には聞いていましたがいいですね、ipad!

ということでまだまだ使い込んでいるわけではないのですが、制作サイドから見たipadを考えてみたいと思います。

フラッシュが使えない

これは周知の事実ですが、なにも動画をみるときだけに困ることではありません。制作サイドとしては動きのあるコンテンツは提案しづらい状況です。
flashを使えばiphone系が見れない。かと言ってhtml5やjsを使えばie系が対応しにくい。じゃぁ両方用意すれば…と思ってもそんな予算は取れないことがほとんど、とうことになります。

部分的なスクロールが使えない

ウィンドウ全体のスクロールは指を滑らすことでできるのですが、マウスカーソルがないので、特定の入力欄内をスクロールすることができません。なのでiframeやdisplay:scrollでユーザーにスクロールして見てもらうインターフェースは作らない方がよさそうです。またtextareaのサイズもなるべくスクロールが無くても使える様に大きめにしておく方がよさそうです。
ちなみに実際はエリア内で指二本を滑らすことでスクロールは可能です。が、一般ユーザーにそれを求めるのは難しいかなと…

マウスオーバーが使えない

マウスカーソルがないので、当然マウスオーバーはありません。マウスオーバーするこよによってヘルプが出たり、画像がポップアップしたりするインターフェースは避けた方がよさそうです。

キーボードにsubmitボタンがつく

これは別にipadに限ったことではありませんが、エンターを押せばsubmitのアクションを起こします。ただipadの場合はsubmitボタンの上の文字がフォームによって変動します。検索ボタンであればsearchと表示される、といったように。
pcフォームを作る時よりもsubmitボタンを押される確率が高そうなので、その時のアクションには一層の注意が必要になりそうです。

ドラッグができない

元々ドラッグによるインターフェースは一般的ではないのでそこまで気にすることはないのですが、やるならタッチ端末用の動作をきちんと用意しないといけません。

回線が遅い

これはいつもという訳ではありませんが、ipadに限らずスマートフォン系は3G回線でアクセスしている可能性があります。なのでコンテンツの容量はpc向けサイトより注意する必要がありそうです。

画面が広い

ipadを縦で使うと画面内に表示できる領域は恐ろしく広いです。
これはipad自体の画面の広さや解像度によるものというよりは、ipadの画面サイズに合わせてコンテンツが縮小されるためです。PC向けよりも小さく表示されますが見える範囲は広い。

密度の高いリンクは邪魔になる

ipadなどは特定のエリアをダブルタップすると、そのエリアのdivが画面の横幅一杯になる様に拡大率が自動的に調整されます。なので、リンク遷移以外で画面をタップする機会が多いのですが、その分リンクだらけの画面はリンクに間違えて触れてしまうミスが多くなるので使いにくく感じます。

ボタンなどのフォームの隙間は十分に確保する

指の太さは個人差がありますし、人差し指で使うか太い親指で使うか、また使っている端末にも差があります。
ボタンなどのタッチする必要があるフォームやリンクが隙間なしに並んでいると非常に扱いづらいものになってしまいます。普通にpcでやるline-heightやマージンなどではミスしやすいはずです。

以上、ざっとですが使ってみて感じたことを並べてみました。

まだまだ対応端末としてカウントするには至らない程度の数しか出ていないiPadですが、今後Androidのタブレット端末も含めて、タブレットタイプの端末は相当数が出てくるものと思います。(孫さんも「ノートPCを持つのが恥ずかしい時代になる」と言っていることですし。

その時には、多分PCサイトを作っているときに、タブレット端末を意識せざるを得ない状況が出来上がっているものと思います。今のうちに情報と心構えをしておきたいものです。

BLOG recent posts

  • AUG

    05

    2019

    sawazakisawazaki

    五明(ごみょう)茶業組合オフィシャルサイ..

  • FEB

    07

    2019

    sawazakisawazaki

    脱毛サロン Chill(チル)フライヤー..

  • FEB

    07

    2019

    sawazakisawazaki

    脱毛サロン Chill(チル)サイト構築

  • JAN

    21

    2018

    nishimotonishimoto

    我が家にアレクサがやってきた!使ってみた..