最新のブラウザでは、特定のコンポーネント(アイコン、アドレスバーの色など)を簡単にカスタマイズできるほか、カスタムタイルなどを追加することもできます。こうしたちょっとした工夫で、エンゲージメントが高まり、ユーザーをサイトに呼び戻すことができます。
最新のブラウザでは、特定のコンポーネント(アイコン、アドレスバーの色など)を簡単にカスタマイズできるほか、カスタムタイルなどを追加することもできます。こうしたちょっとした工夫で、エンゲージメントが高まり、ユーザーをサイトに呼び戻すことができます。
優れたアイコンとタイルを提供する
ユーザーがウェブページにアクセスすると、ブラウザは HTML からアイコンを取得しようとします。このアイコンは、ブラウザタブ、最近使ったアプリの切り替え、新しい(または最近アクセスした)タブページなど、さまざまな場所に表示されます。
高品質の画像を提供することでサイトの認知度が高まり、ユーザーがサイトを見つけやすくなります。
すべてのブラウザを完全にサポートするには、各ページの <head>
要素にタグをいくつか追加する必要があります。
<!-- icon in the highest resolution we need it for -->
<link rel="icon" sizes="192x192" href="icon.png">
<!-- reuse same icon for Safari -->
<link rel="apple-touch-icon" href="ios-icon.png">
<!-- multiple icons for IE -->
<meta name="msapplication-square310x310logo" content="icon_largetile.png">
Chrome と Opera
Chrome と Opera は icon.png
を使用します。これはデバイスごとに必要なサイズにスケーリングされます。自動スケーリングを回避するために、sizes
属性を指定して追加のサイズを指定することもできます。
Safari
Safari でも、rel
属性を含む <link>
タグ(apple-touch-icon
)を使用してホーム画面アイコンを示します。
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
リンゴのタップアイコンには、180 ピクセルまたは 192 ピクセルの正方形の不透明な PNG が最適です。
sizes
属性で複数のバージョンを含めることはおすすめしません。以前の iOS 向け Safari では、視覚効果を追加しないように -precomposed
キーワードが考慮されていましたが、iOS 7 以降では必要ありませんでした。
Internet Explorer と Windows Phone
Windows 8 の新しいホーム画面では、固定サイトで 4 種類のレイアウトがサポートされており、4 つのアイコンが必要です。特定のサイズをサポートしない場合は、関連するメタタグを省略できます。
<meta name="msapplication-square70x70logo" content="icon_smalltile.png">
<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
<meta name="msapplication-wide310x150logo" content="icon_widetile.png">
Internet Explorer のタイル
Microsoft の「固定サイト」と回転する「ライブタイル」は、他の実装をはるかに超えており、このガイドの範囲外です。詳しくは、MSDN のライブタイルの作成方法をご覧ください。
ブラウザ要素の色
さまざまな meta
要素を使用することで、ブラウザだけでなく、プラットフォームの要素もカスタマイズできます。一部のプラットフォームやブラウザでしか機能しないものもありますが、エクスペリエンスを大幅に向上させることができます。
Chrome、Firefox OS、Safari、Internet Explorer、Opera Coast では、メタタグを使用してブラウザやプラットフォームの要素の色を定義できます。
Chrome と Opera の Meta テーマカラー
Android 版 Chrome のテーマカラーを指定するには、メタテーマカラーを使用します。
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
Safari 固有のスタイル
Safari では、ステータスバーのスタイルを設定したり、起動画像を指定したりできます。
起動イメージを指定する
デフォルトでは、Safari は読み込み時に空白の画面を表示し、複数回読み込まれた後にアプリの以前の状態のスクリーンショットを表示します。これを防ぐには、rel=apple-touch-startup-image
でリンクタグを追加することで、明示的な起動画像を表示するように Safari に指示します。次に例を示します。
<link rel="apple-touch-startup-image" href="icon.png">
画像は、対象デバイスの画面に固有のサイズである必要があります。そうでない場合、使用されません。詳しくは、Safari のウェブ コンテンツ ガイドラインをご覧ください。
Apple のドキュメントではこのトピックに関する情報はわずかですが、デベロッパー コミュニティは、高度なメディアクエリを使用して適切なデバイスを選択し、正しいイメージを指定することで、すべてのデバイスを対象にする方法を考え出しました。以下に、有効な解決策を示します。tfausak's gist の厚意によるものです。
ステータスバーの外観を変更する
デフォルトのステータスバーの外観は、black
または black-translucent
に変更できます。black-translucent
の場合、ステータスバーは、押し下げるのではなく、全画面コンテンツの上にフロート表示されます。これにより、レイアウトの高さは高くなりますが、上部が邪魔になります。必要なコードは次のとおりです。
<meta name="apple-mobile-web-app-status-bar-style" content="black">