iPhoneやiPadの次世代iOS7はフラットデザインを採用するらしいのでApp Storeアプリを紹介するAppHtmlブックマークレットのテンプレートをiOS7風にカスタマイズしてみました。
iOS7のアイコンデザインの変更点
以下のサイトでApple – iOS7の紹介ページに掲載されている画像を使って変更点をわかりやすく紹介されています。
http://stam-design-stam.blogspot.jp/2013/06/ios-7.html
見た目で明らかですがiOS7のアイコンは角のRが強くなり、またアイコンのシャドーがなくなってますので、このあたりをテンプレートに反映します。
角丸アイコンのRを調整
上記サイトでiOS7のアイコンサイズは縦横120pxに対して角Rが26pxとなっていますから比率は 1 : 0.2167 となります。アイコンサイズ100pxの倍、(100px) × 0.2167 ＝ 21.67 となるので22pxに変更します。
| デフォルト |
|
||
| カスタマイズ |
|
3種類の”radius”があるのはブラウザ毎に指定するプロパティが異なるためです。
アイコンのシャドーを消す
iOS7はフラットデザインであるためシャドーを消します。これも同じ理由で3種類あります。
| デフォルト |
|
||
| カスタマイズ |
|
iOS7アイコン風のテンプレートで表示
変更前のテンプレート
アイコン角丸調整とシャドーを消すカスタマイズしたテンプレート
さらにiOS7風にしてみる
どこが変わったのかいまいち分かりにくいのでiOS7の壁紙をイメージして背景の配色を変え、さらにグラデーションを加えてみます（ブラウザがIEの場合はベタ塗り）。
|
1 2 3 |
background:-moz-linear-gradient(left top, rgba(179,54,190,1), rgba(78,78,166,1) 50%, rgba(82,129,185,1) 70%, rgba(77,177,201,1)); background:-webkit-gradient(linear, left top, right bottom, from(rgba(179,54,190,1)),color-stop(0.5, rgba(78,78,166,1)),color-stop(0.7, rgba(82,129,185,1)),to(rgba(77,177,201,1))); background-color:#4db1d3; |
フォントカラーも変えるとこんな感じになります。
カテゴリ: ユーティリティ, エンターテインメント
販売元: DOTAPON Software（サイズ: 1.5 MB）
全てのバージョンの評価: 4（31件の評価）
背景色をrgbaで指定しているので透過率の”1″を”0.5″などに変更すると50%透過すると面白いかも。グラデーションはCSS Gradient Background Makerというサイトで簡単にCSSが作れます。
ご参考まで、AppHtmlメーカーのカスタマイズエリアに入れるHTMLタグです。
|
1 |
<div style="color:#fff;background:-moz-linear-gradient(left top, rgba(179,54,190,1), rgba(78,78,166,1) 50%, rgba(82,129,185,1) 70%, rgba(77,177,201,1));background:-webkit-gradient(linear, left top, right bottom, from(rgba(179,54,190,1)),color-stop(0.5, rgba(78,78,166,1)),color-stop(0.7, rgba(82,129,185,1)),to(rgba(77,177,201,1)));background-color:#4db1d3;margin:10px;padding:17px 10px 12px 10px;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:2px;min-height:100px;"><a href="${linkshareurl}" target="_blank" rel="nofollow"><img width="100" class="alignleft" src="${icon100url}" style="border-radius:22px;-moz-border-radius:22px;-webkit-border-radius:22px;margin: 0px 15px 1px 5px;border:none;padding:0px;float:left;"></a><a style="color:#ffffff;font-size:120%;font-weight:bold" href="${linkshareurl}" target="_blank" rel="nofollow">${appname} ${version}</a><br>カテゴリ: {category}<br>販売元: <a style="color:#fff;" href="${selleritunes}" target="_blank" rel="nofollow">${seller}</a>（サイズ: ${appsize}）<br>全てのバージョンの評価: ${allverrating}（${allreviewcnt}）<br style="clear: both;"></div> |
AppStoreHelper用テンプレート
@hitoriblog さんのMac用アプリAppStoreHelperにも登録できます。
|
1 |
<div style="color:#fff;background:-moz-linear-gradient(left top, rgba(179,54,190,1), rgba(78,78,166,1) 50%, rgba(82,129,185,1) 70%, rgba(77,177,201,1));background:-webkit-gradient(linear, left top, right bottom, from(rgba(179,54,190,1)),color-stop(0.5, rgba(78,78,166,1)),color-stop(0.7, rgba(82,129,185,1)),to(rgba(77,177,201,1)));background-color:#4db1d3;margin:10px;padding:17px 10px 12px 10px;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:2px;min-height:100px;"><a href="$trackViewUrl$" target="_blank" rel="nofollow"><img width="100" class="alignleft" src="$artworkUrl100$" style="border-radius:22px;-moz-border-radius:22px;-webkit-border-radius:22px;margin: 0px 15px 1px 5px;border:none;padding:0px;float:left;"></a><a style="color:#ffffff;font-size:120%;font-weight:bold" href="$trackViewUrl$" target="_blank" rel="nofollow">$appName$ $version$</a><br>カテゴリ: $genres$<br>販売元: <a style="color:#fff;" href="$sellerUrl$" target="_blank" rel="nofollow">$sellerName$</a>（サイズ: $readableFileSize$）<br>全てのバージョンの評価: $averageUserRating$（$userRatingCount$件の評価）<br style="clear: both;"></div> |
スタイルのクラス化
悩ましい問題ですが、こうしたテンプレートのデザインを変えたい時にクラス化しておいた方が、過去分を一気に修正が可能です。わたしの場合は、アプリ紹介当時の記録として残しておきたいと考えているので今のところタグ内のstyleから指定しています。