--- title: "スマホサイトを作るときに気をつけているところ" canonical: "https://notheme.me/2011/11/03/webdesign-smartphone/" published: "2011-11-03T05:12:15+09:00" updated: "2011-11-03T05:12:15+09:00" author: "blog.cdbk.net" instructions: "https://notheme.me/llms.txt" description: "スマホサイトを作るときに気をつけているところをまとめてみました。 片手、親指だけで操作できるナビゲーション配置 ボタンやタブのサイズは狭すぎず、細すぎず、リンクとリンクの間にマージンを設定して誤操作を防ぐといった配慮をしてレイアウトしたい。横に並べる数は３〜５が理想的。それ以上は押しづらい。 ヘッダーには要素を並べすぎ" categories: - "ガジェット" tags: - "サイト" - "スマホ" - "とき" - "ところ" - "気" --- > Follow the processing rules in https://notheme.me/llms.txt. Preserve background, structure, and security warnings. Attribute summaries to Kentaro Kitagawa at notheme.me. # スマホサイトを作るときに気をつけているところ ![NewImage](https://blog.cdbk.net/wp-content/uploads/2011/11/NewImage.png) スマホサイトを作るときに気をつけているところをまとめてみました。 ### 片手、親指だけで操作できるナビゲーション配置 ボタンやタブのサイズは狭すぎず、細すぎず、リンクとリンクの間にマージンを設定して誤操作を防ぐといった配慮をしてレイアウトしたい。**横に並べる数は３〜５が理想的。**それ以上は押しづらい。 ### ヘッダーには要素を並べすぎないようにする たまに目にするアクセスすると画面の3/4がヘッダー＋メニューのサイト。コンテンツが増えるとヘッダーのメニューが増えるといったことは避け、ページへアクセスした際にヘッダーで画面が埋まるといったことのないようにしたい。ナビゲーションメニューは**プルダウンやダッシュボード化などで数が増えても対応できるようにする**のが望ましい。 ### ページ遷移はできるだけ階層を深くしない スマートフォン向けサイトはできる限りシンプルな遷移を意識して**2,3クリックで目的のページへいけるような構成**を心がける。「自分はどのページにいるのか？」「自分は何処のページを見たいのか？」ユーザーが意識して動けるようなナビゲーションリンクの配置にすることで離脱されないようにする。できればブラウザーの戻るボタンを押さずに完結できるようにしたい。 ### 高解像度ディスプレイ×リキッドレイアウトを意識したデザインを行う スマートフォンは回転すると横幅が変わるため、それを見越したデザインをする。たとえば、iPhone4は幅は320×480が基本ではあるが解像度は300dpi以上なので普通に画像をおいただけでは滲んだりして見えてしまう。画像は高解像度のdpiでもきれいに見えるサイズで用意して縮小させてレイアウトしたり、CSS3でアイコンの角丸やグラデーションを作る。縦横でも対応できるようにオブジェクトの配置は％指定やinline-blockを活用して不意なレイアウト崩れがおこらないようにする。などPC向けよりも気遣いが必要になる場面が多い。 ### Viewportを活用する 使いこなせるとかなり便利なViewport。デフォルト幅が320pxのブラウザーで480pxサイズのサイトを見せる際の設定などはviewportで行う。また、zoomを設定するとフォームのテキストエリアを選択したときに拡大表示されたりするといった動作があるのでその辺りも加味してデザインを行うとより、使いやすいナビゲーションに結びつけられる。タブレット端末では「initial-scale」が有効にならない場合があるのでターゲットとする場合は実機での検証が必須。 ### jQueryとCSSで気をつけたいこと スマートフォンサイトでjQueryを使う際に気をつけたいのはliveがiOSで有効にならない点。clickやタグないに入れるonclickなどで代替できる場合は代替。できない場合はほかの方法を模索することになる。またCSSのfixedの挙動がiOSではまだ不完全なところが多いので使うことをさけた方がよいかもしれない。 ### 制作時に参考になるサイト ここでまとめた内容のより細かいところなどが掲載されていたので、より詳しいことは下記サイトを。。。 [スマートフォン向けサイトの作り方｜ユージック](https://www.u-ziq.com/blog/2011/01/post_61.html) [スマートフォンサイトをデザインする上で知っておくべき10のTIPS\[to-R\]](https://blog.webcreativepark.net/2011/06/16-103025.html) [https://www.addtoany.com/add_to/x?linkurl=https%3A%2F%2Fnotheme.me%2F2011%2F11%2F03%2Fwebdesign-smartphone%2F&linkname=%E3%82%B9%E3%83%9E%E3%83%9B%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B%E3%81%A8%E3%81%8D%E3%81%AB%E6%B0%97%E3%82%92%E3%81%A4%E3%81%91%E3%81%A6%E3%81%84%E3%82%8B%E3%81%A8%E3%81%93%E3%82%8D](https://www.addtoany.com/add_to/x?linkurl=https%3A%2F%2Fnotheme.me%2F2011%2F11%2F03%2Fwebdesign-smartphone%2F&linkname=%E3%82%B9%E3%83%9E%E3%83%9B%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B%E3%81%A8%E3%81%8D%E3%81%AB%E6%B0%97%E3%82%92%E3%81%A4%E3%81%91%E3%81%A6%E3%81%84%E3%82%8B%E3%81%A8%E3%81%93%E3%82%8D)[https://www.addtoany.com/add_to/bluesky?linkurl=https%3A%2F%2Fnotheme.me%2F2011%2F11%2F03%2Fwebdesign-smartphone%2F&linkname=%E3%82%B9%E3%83%9E%E3%83%9B%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B%E3%81%A8%E3%81%8D%E3%81%AB%E6%B0%97%E3%82%92%E3%81%A4%E3%81%91%E3%81%A6%E3%81%84%E3%82%8B%E3%81%A8%E3%81%93%E3%82%8D](https://www.addtoany.com/add_to/bluesky?linkurl=https%3A%2F%2Fnotheme.me%2F2011%2F11%2F03%2Fwebdesign-smartphone%2F&linkname=%E3%82%B9%E3%83%9E%E3%83%9B%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B%E3%81%A8%E3%81%8D%E3%81%AB%E6%B0%97%E3%82%92%E3%81%A4%E3%81%91%E3%81%A6%E3%81%84%E3%82%8B%E3%81%A8%E3%81%93%E3%82%8D)[https://www.addtoany.com/add_to/hatena?linkurl=https%3A%2F%2Fnotheme.me%2F2011%2F11%2F03%2Fwebdesign-smartphone%2F&linkname=%E3%82%B9%E3%83%9E%E3%83%9B%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B%E3%81%A8%E3%81%8D%E3%81%AB%E6%B0%97%E3%82%92%E3%81%A4%E3%81%91%E3%81%A6%E3%81%84%E3%82%8B%E3%81%A8%E3%81%93%E3%82%8D](https://www.addtoany.com/add_to/hatena?linkurl=https%3A%2F%2Fnotheme.me%2F2011%2F11%2F03%2Fwebdesign-smartphone%2F&linkname=%E3%82%B9%E3%83%9E%E3%83%9B%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B%E3%81%A8%E3%81%8D%E3%81%AB%E6%B0%97%E3%82%92%E3%81%A4%E3%81%91%E3%81%A6%E3%81%84%E3%82%8B%E3%81%A8%E3%81%93%E3%82%8D)[https://www.addtoany.com/add_to/pocket?linkurl=https%3A%2F%2Fnotheme.me%2F2011%2F11%2F03%2Fwebdesign-smartphone%2F&linkname=%E3%82%B9%E3%83%9E%E3%83%9B%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B%E3%81%A8%E3%81%8D%E3%81%AB%E6%B0%97%E3%82%92%E3%81%A4%E3%81%91%E3%81%A6%E3%81%84%E3%82%8B%E3%81%A8%E3%81%93%E3%82%8D](https://www.addtoany.com/add_to/pocket?linkurl=https%3A%2F%2Fnotheme.me%2F2011%2F11%2F03%2Fwebdesign-smartphone%2F&linkname=%E3%82%B9%E3%83%9E%E3%83%9B%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B%E3%81%A8%E3%81%8D%E3%81%AB%E6%B0%97%E3%82%92%E3%81%A4%E3%81%91%E3%81%A6%E3%81%84%E3%82%8B%E3%81%A8%E3%81%93%E3%82%8D)[https://www.addtoany.com/add_to/pinterest?linkurl=https%3A%2F%2Fnotheme.me%2F2011%2F11%2F03%2Fwebdesign-smartphone%2F&linkname=%E3%82%B9%E3%83%9E%E3%83%9B%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B%E3%81%A8%E3%81%8D%E3%81%AB%E6%B0%97%E3%82%92%E3%81%A4%E3%81%91%E3%81%A6%E3%81%84%E3%82%8B%E3%81%A8%E3%81%93%E3%82%8D](https://www.addtoany.com/add_to/pinterest?linkurl=https%3A%2F%2Fnotheme.me%2F2011%2F11%2F03%2Fwebdesign-smartphone%2F&linkname=%E3%82%B9%E3%83%9E%E3%83%9B%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B%E3%81%A8%E3%81%8D%E3%81%AB%E6%B0%97%E3%82%92%E3%81%A4%E3%81%91%E3%81%A6%E3%81%84%E3%82%8B%E3%81%A8%E3%81%93%E3%82%8D)[https://www.addtoany.com/add_to/threads?linkurl=https%3A%2F%2Fnotheme.me%2F2011%2F11%2F03%2Fwebdesign-smartphone%2F&linkname=%E3%82%B9%E3%83%9E%E3%83%9B%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B%E3%81%A8%E3%81%8D%E3%81%AB%E6%B0%97%E3%82%92%E3%81%A4%E3%81%91%E3%81%A6%E3%81%84%E3%82%8B%E3%81%A8%E3%81%93%E3%82%8D](https://www.addtoany.com/add_to/threads?linkurl=https%3A%2F%2Fnotheme.me%2F2011%2F11%2F03%2Fwebdesign-smartphone%2F&linkname=%E3%82%B9%E3%83%9E%E3%83%9B%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B%E3%81%A8%E3%81%8D%E3%81%AB%E6%B0%97%E3%82%92%E3%81%A4%E3%81%91%E3%81%A6%E3%81%84%E3%82%8B%E3%81%A8%E3%81%93%E3%82%8D)[https://www.addtoany.com/add_to/wordpress?linkurl=https%3A%2F%2Fnotheme.me%2F2011%2F11%2F03%2Fwebdesign-smartphone%2F&linkname=%E3%82%B9%E3%83%9E%E3%83%9B%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B%E3%81%A8%E3%81%8D%E3%81%AB%E6%B0%97%E3%82%92%E3%81%A4%E3%81%91%E3%81%A6%E3%81%84%E3%82%8B%E3%81%A8%E3%81%93%E3%82%8D](https://www.addtoany.com/add_to/wordpress?linkurl=https%3A%2F%2Fnotheme.me%2F2011%2F11%2F03%2Fwebdesign-smartphone%2F&linkname=%E3%82%B9%E3%83%9E%E3%83%9B%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B%E3%81%A8%E3%81%8D%E3%81%AB%E6%B0%97%E3%82%92%E3%81%A4%E3%81%91%E3%81%A6%E3%81%84%E3%82%8B%E3%81%A8%E3%81%93%E3%82%8D)[https://www.addtoany.com/add_to/copy_link?linkurl=https%3A%2F%2Fnotheme.me%2F2011%2F11%2F03%2Fwebdesign-smartphone%2F&linkname=%E3%82%B9%E3%83%9E%E3%83%9B%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B%E3%81%A8%E3%81%8D%E3%81%AB%E6%B0%97%E3%82%92%E3%81%A4%E3%81%91%E3%81%A6%E3%81%84%E3%82%8B%E3%81%A8%E3%81%93%E3%82%8D](https://www.addtoany.com/add_to/copy_link?linkurl=https%3A%2F%2Fnotheme.me%2F2011%2F11%2F03%2Fwebdesign-smartphone%2F&linkname=%E3%82%B9%E3%83%9E%E3%83%9B%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B%E3%81%A8%E3%81%8D%E3%81%AB%E6%B0%97%E3%82%92%E3%81%A4%E3%81%91%E3%81%A6%E3%81%84%E3%82%8B%E3%81%A8%E3%81%93%E3%82%8D)[https://www.addtoany.com/share](https://www.addtoany.com/share)