1. 【iOS7でSafariが大幅リニューアル】既存サイトのデザインで気をつけるべき4つのこと

【iOS7でSafariが大幅リニューアル】既存サイトのデザインで気をつけるべき4つのこと

 昨年発表された「iOS7」は、「フラットデザイン」が採用され、見た目も操作性もがらっと変わりました。もちろん、標準ブラウザ「Safari」も大幅にUIが変わりました。既にあるページに対して気をつけるべきことをまとめました。

目次
1. ブラウザの縦サイズが以前よりも長くなった
2. メニューアイコンが変わった
3. 左右のふちからフリックすると、前後のページに戻る / 進む
4. ウェブクリップアイコンのカドマル具合が変わった

1. ブラウザの縦サイズが以前よりも長くなった

 「 オンライン寄せ書きyosetti」のページをiOS7のSafariで見てみました。最初にページにアクセスしたときには、上にアドレスバー・下にメニューバーがありますが、ページをスクロールすると上のアドレスバーは小さくなり、下のメニューは消えます。このUI変更により、従来よりもブラウザの縦サイズが高くなります。もし、Javascriptなどを使ってブラウザの縦サイズでページ分岐させているページなどがあったら、iOS7で一度チェックする事をおすすめします。

iOS6(iPhone5)との縦サイズの比較

 iOS7ほうがブラウザ領域が25px(Retina換算だと50px)高くなります。

2. メニューアイコンが変わった

 iOS7ではアイコンのデザインがフラットデザインなものに刷新されています。Safariの一番下に配置されているメニューもフラットな感じになっています。
 メニューの中央にある共有アイコンもデザインが変更になっているので、たとえばページ内で「お気に入りボタン(アイコン画像)をタップしてホームに登録してね♪」といったような見せ方をしている場合、修正する必要があるかもしれません。

3. 左右のふちからフリックすると、前後のページに戻る / 進む

 画面の縁から水平に左から右にフリックすると前のページに戻ります。右から左にフリックすると、履歴がある場合次のページに進みます。
 便利と言えば便利!でも、たとえばフリックを実装しているページなどでは意図せぬ誤動作が起きる可能性があるので実装時は注意が必要かもしれません。画面の縁からフリックしないとこの動作は発動しません。

4. ウェブクリップアイコンのカドマル具合が変わった

 ウェブページをホーム画面に登録する際に反映されるウェブクリップアイコンですが、正方形の画像を用意しておけば自動的にカドマル処理がはいります。
 iOS7からはカドマル具合が変更になっています。より丸みを帯びた印象です。既存のカドマル具合に合わせてウェブクリップアイコンの画像を作っている場合(ふちの処理等をしている場合)は修正を検討したほうが良いかもしれません。ちなみにiOS7の角丸は「アプローチR」といって、単純な楕円ではありません。自分で最初から作るのは難しいので、アプリアイコン用に配布されているテンプレートPSDなどを利用するのが良いと思います。

U-NOTEをフォローしておすすめ記事を購読しよう
この記事を報告する