スマートフォン 14
タッチしやすいスマートフォン向けメニュー

スマートフォンサイトのデザインでよく見かけるアイコン型のメニューと箇条書きのメニューのデザイン手法を紹介する。CSSの機能を生かしてスッキリとしたコードにまとめよう。

制作・文／佐藤とも子・サチコ（螺旋デザイン）

BROWSER iOS Andoroid

01

まずはアイコンが並んだタイプのメニューを作成する【1-1】。

構成はul要素のリストのなかに並んだ状態になっている【1-2】。

アイコンのサイズは57×57pxだ。このサイズはiPhoneのホーム画面のアイコンと同サイズなのでiPhoneに慣れ親しんだユーザーに自然な大きさだ【1-3】。

あまりiPhoneユーザーを重視しなくてよい場合は、最低限指で押しやすいサイズ（44×44px以上）にしておくとよい。

【1-1】スマートフォンのホーム画面を模したタイプのメニューだ。

【1-2】メニューなのでliタグ内のどの要素にタッチしてもページ遷移が行われるようにa要素でマーキングしている。

【1-3】Retina displayに対応したい場合は、倍のサイズ114×114pxで画像を作り、サイズ指定を57×57pxにすると美しく見える。

02

CSSはli要素の中のものすべてセンター揃えにしている。li要素の中はimgとstrongなので「text-align: center;」で簡単にセンター揃えにできる【2-1】。

strongでマーキングしたアイコン内容のテキストは多くて全角5文字までにしたほうが収まりがいい。

【2-1】li要素でレイアウトもしているのでfloatやmarginで設定している。

03

つぎは箇条書きのメニューを作成する【3-1】。

HTMLの構成は、ulで構成された単純なリストだ。先ほどのアイコン型と違ってテキストとリンク以外の画像の情報がないのがポイントだ【3-2】。

アイコンと矢印の画像はCSSのcontentプロパティと:before、:afterの擬似要素を利用して表示する。

【3-1】アイコン型と違ってテキストを多めに入れられるのが特長だ。

【3-2】画像情報がないので非常にスッキリしたソースになっている。

04

右の矢印はCSSのcontentプロパティと:afterの擬似要素を利用している【4-1】。

文字数が増減しても縦方向に中央揃えになるようにしたかったので、親要素のaを「position:relative;」にしてpositionによる絶対配置が行いやすいように準備をしておく。

矢印のアイコンの記述のように、「position: absolute;top: 50%;margintop:-要素の半分の値;」とすると縦方向に中央に揃えることができるので非常に便利だ。

【4-1】contentには「”」で囲んでテキストを入れたり、「

【4-1】contentには「"」で囲んでテキストを入れたり、「""」として空の要素（デザイン上、入れないと対応できないこともあるだろう）をHTMLコードを汚すことなく入れられたりするので、非常に便利だ。

05

角丸部分をコーディングする。

左のアイコンもCSSのcontentプロパティと:beforeの擬似要素を利用している【5-1】。

liに特別なclassを付けないで別の画像を入れるために「E:nth-child(n)」で画像を指定する。

「商品の返品・交換。」の項目は文字数がほかの項目より多めで、iPhoneで確認するとこの欄だけ3行になってしまった。

バランスが悪かったので、この欄だけ「E:nth-child(3)」でフォントサイズを変更し、2行に収まるように調整している。

【5-1】「footer ＞ section ul li a:before」でアイコン表示の共通設定を行い、「footer ＞ section ul li:nthchild(n) a:before」で各欄個別の設定を行っている。

06

リストの四隅の角丸はulに「-webkitborder-radius: 10px;」を設定している。

ベンダープレフィックスを付けておくと、Android 1.6も角丸になるので付けておこう【6-1】。

ポイントはliには背景色を塗らずにulに背景色の白を設定している点だ。

liに背景色を設定してulに角丸を指定しても角丸にならない。

【6-1】このパターンではulに背景色を指定しているが、デザインによってはliに背景を指定することもあるだろう。その場合ははじめと最後のliに角丸の指定をしよう。

[目次に戻る]

【本記事について】
2012年7月28日発売のweb creators特別号「新世代Web制作テクニック総特集」から、毎週記事をピックアップしてご紹介! スマートフォンサイト特集ではデザインのルールとコーディングのポイント、ソーシャルメディア特集では従来のWebサイトとの違いと有効な活用方法、WordPress特集ではサイト構築に必要な機能と役立つプラグインなど、基本的な知識と必須テクニックを網羅した内容になっています。

※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。