AppHtmlのテンプレートをiOS7風にカスタマイズ

reeder-ios7

iPhoneやiPadの次世代iOS7はフラットデザインを採用するらしいのでApp Storeアプリを紹介するAppHtmlブックマークレットのテンプレートをiOS7風にカスタマイズしてみました。

iOS7のアイコンデザインの変更点

以下のサイトでApple – iOS7の紹介ページに掲載されている画像を使って変更点をわかりやすく紹介されています。

見た目で明らかですがiOS7のアイコンは角のRが強くなり、またアイコンのシャドーがなくなってますので、このあたりをテンプレートに反映します。

角丸アイコンのRを調整

上記サイトでiOS7のアイコンサイズは縦横120pxに対して角Rが26pxとなっていますから比率は 1 : 0.2167 となります。アイコンサイズ100pxの倍、(100px) × 0.2167 = 21.67 となるので22pxに変更します。

デフォルト
カスタマイズ

3種類の”radius”があるのはブラウザ毎に指定するプロパティが異なるためです。

アイコンのシャドーを消す

iOS7はフラットデザインであるためシャドーを消します。これも同じ理由で3種類あります。

デフォルト
カスタマイズ

iOS7アイコン風のテンプレートで表示

変更前のテンプレート

Reeder 3.2
カテゴリ:ニュース
販売元:Silvio Rizzi(サイズ:7.5MB)
全てのバージョンの評価: 4(954件の評価)

アイコン角丸調整とシャドーを消すカスタマイズしたテンプレート

Reeder 3.2
カテゴリ:ニュース
販売元:Silvio Rizzi(サイズ:7.5MB)
全てのバージョンの評価: 4(954件の評価)

さらにiOS7風にしてみる

どこが変わったのかいまいち分かりにくいのでiOS7の壁紙をイメージして背景の配色を変え、さらにグラデーションを加えてみます(ブラウザがIEの場合はベタ塗り)。

フォントカラーも変えるとこんな感じになります。

Llumino 1.1.1
カテゴリ: ユーティリティ, エンターテインメント
販売元: DOTAPON Software(サイズ: 1.5 MB)
全てのバージョンの評価: 4(31件の評価)

背景色をrgbaで指定しているので透過率の”1″を”0.5″などに変更すると50%透過すると面白いかも。グラデーションはCSS Gradient Background Makerというサイトで簡単にCSSが作れます。

ご参考まで、AppHtmlメーカーのカスタマイズエリアに入れるHTMLタグです。

AppStoreHelper用テンプレート

@hitoriblog さんのMac用アプリAppStoreHelperにも登録できます。

スタイルのクラス化

悩ましい問題ですが、こうしたテンプレートのデザインを変えたい時にクラス化しておいた方が、過去分を一気に修正が可能です。わたしの場合は、アプリ紹介当時の記録として残しておきたいと考えているので今のところタグ内のstyleから指定しています。