最近では、ほとんどの案件でスマートフォン対応が必須となってきています。
そこで、もう一度iOSとAndroid（Material Design）のガイドラインを確認して、最適なサイト制作を行っていきたいと思ってます。

前回のフォントの次は、ボタンについてです。

—
＜参考サイト＞
■iOSのガイドライン（OSヒューマンインターフェイスガイドライン）
※safariで最適化

■Android（Material Design）のガイドライン
Up and running with material design
→日本語化されたサイトはこちら
—

【サイズ】

[iOS]
・タップ可能なエリアは約44×44pt（88×88px）が必要

[Android]
・サイズは、64×36dp（128×72px）、
　タッチエリアは、48×48dp（96×96px）必要

※dpとは解像度に依存しないサイズの表現単位

※96×96pxで作成すれば、両方共クリアー

【デザイン】

[iOS]
・デフォルトでは、色や操作を示すアイコンで示す。
・過剰な装飾（ベベル・グラデーション・ドロップシャドウなど）は極力さける。

[Android]
・フラットボタン（テキストのみ）・ライズボタン（長方形）、フローティング
　クションボタン（円）の３つの形を使い分ける
・単色のベタ塗りで、震度による、陰影をつける。

※ボタンのデザインはシンプルに。自然な陰影やアイコンで表現する。

【余白】

[iOS]
・最小サイズは11ptまで。

[Android]
最小サイズは欧文12sp、和文は13sp
※spとは解像度に依存いない文字サイズの表現単位。

※両方の共通である、最小サイズは、欧文11pt、和文13pt程度が基準になりそうです。

【見出し】

[iOS]
・具体的な定義なし

[Android]
・隣接するボタン同士の余白は8dp（16px）必要

※Androidに習って、規定サイズの余白を設定する。

【位置】

[iOS・Android]
・「決定（次に進む要素）」と「キャンセル（戻る要素）」のボタンが並ぶ場合、
　「キャンセルが左」、「決定を右」に配置する。

デザイン的にシンプルなボタンが推奨されている。
サイズ・余白に関しても意識しておきたい。

今回は以上となります。
次は、カラーやアニメーションについても違いを見ていきたいと思います。