Mysterious iPhone Wallpaper Blog



2017年5月10日水曜日

iOS 7(敢えて10ではなく)を再デザインするiPhone壁紙

記事公開時のOS:iOS 10.3.1
iPhone 7/6s/6/7 Plus/6s Plus/6 Plus/SE/5s/5c/5/iPod touch 6

iPhoneのドックとフォルダとアイコンにフレームを付ける壁紙です。

新古典壁紙 NeoClassic

フォルダにはiOS4〜6風のフレーム。

iOS 6のフォルダ

ドックには初代iPhone風(上下逆)のフレーム。

初代iPhoneのスクショ
Photo by ahhyeah
CC BY-NC-ND
(クリエイティブコモンズ 表示 - 非営利 - 改変禁止)

それらを最新のiOSに合うように、緩やかなグラデーションで仕上げました。iOSの一部感を出すためアイコンで隠れる所にもグリッドシステムを仕込んでいます。

上2つはブックマークエラーで現れる本物のグリッド

ドックだけにフレームを付けたバージョンもあります。こちらの方が初代感は強いかも。

簡易新古典壁紙 Simple NeoClassic

iOS 8-(iOS 8.3-推奨) iPhone 7 Plus/6s Plus/6 Plus用
ダウンロードページ ▶︎ 新古典壁紙 5.5インチ  NeoClassic 5.5″ 200枚

iOS 9.3- iPhone 7/6s/6用
ダウンロードページ ▶︎ 新古典壁紙 4.7インチ  NeoClassic 4.7 200枚

iOS 9.3- iPhone SE/5s/5c/5/iPod touch5/6用
ダウンロードページ ▶︎ 新古典壁紙 4インチ  NeoClassic 4″ 200枚

すべて2種類×5色のフレーム×20枚。フレームはiPhoneのボディカラーとなっていますが、お好きな組み合わせでお試しください。


ボディカラーに捉われない特別色のフレームも計画中です。

(制作中)
クラシックつながりで背景のいくつかはiMac G3のキャンディカラーがモチーフです(オマージュ壁紙以来よく使うカラーリングですが毎回オリジナルに近づけようと微調整を重ねています)。

ラインナップの一部 キャンディカラーモチーフ

画面サイズによって対応iOSが違うのは、iOS 9.3の時に4.7インチと4インチ画面のアイコン位置に変更があったためです。巷に出回っている「棚壁紙」はiPhone 7用を謳っていてもこの変更を反映していないものがほとんどかもしれません。
ドックだけにフレームをつける簡易版にはアイコン位置変更の影響はないので全サイズでiOS 7/8以降に対応します。

Plusの場合はiOS 8からアイコン位置は変わっていませんが、iOS 8.3以降を推奨します。8.3未満だと色によっては上の方が真っ暗になるかもしれません。

ステータスバーは悩みましたけどiOS 3までは仕切りがなかったこと、iOS 4からも背景が黒いと見えなかったこと、iOS7からはアイコンが上に行って間隔が狭いことから作っていません。


設定上の注意点

設定する時に下の画面でめいっぱいピンチインしてください。


視差効果を減らす(設定アプリから「一般」→「アクセシビリティ」→「視差効果を減らす」から「視差効果を減らす」)をオンにしている場合はそのまま設定してください。

壁紙をスクリーンに全面表示して視差効果を封じるのが条件です。


もしもiOS 7が

きっかけはTwitterのフォロワーさん@nitin_rajpalさんとの対話です。いかにドックとフォルダを見えなくするかという流れで彼がふともらしたのは。

「iOS 6のガラスドックと枠付きのフォルダが良かった」

それだ! それです! iOS 10に比べたらだいぶ制限が増えたもののドックを隠す壁紙の人気は根強いです。でも私はその本当の理由を忘れてました。見えなくなるのが面白いからではありません(多分)。

iOS 7(ホーム画面のデザインは基本的には7から変わっていません)のドックとフォルダがダサかったから。


特に背景がシンプルだとミニマムを通り越してゼロデザインになってしまいませんか?
私はスキューモフィズムよりフラットデザインの方が好きです。でもこれは嫌。そんな抗議の気持ちも込めて、ドックもフォルダも全部見えなくなることにこだわって壁紙を作り始めたんです。しかしAppleは壁紙の方を潰すばかり。いつしか私も隠すことが目的に。
でも何も隠すばかりが能じゃない。色を付けたり丸くしたりするだけが能じゃない。デザインが変わるのが一番よかったんだ。壁紙の限界はあるけど枠を付けるくらいのことはできます。

そういうわけで「もしもiOS 7が違うデザインだったら」が今回のテーマです。


アイコンフレームを「復活」

これまでもアイコンにフレームを付ける壁紙はありましたが、棚壁紙同様iOS 7でだいぶ廃れたような気がします。

理由はやはり「視差効果を減らす」をオンにしない限り「静止画」で設定して壁紙の動きを止めてもアイコンが動くからでしょう。おそらく4.7インチのiPhoneで最大16ピクセル(Retinaディスプレイなのでスケール的には8ピクセル)くらい動きます。


新古典壁紙のフレームは太めにして4インチ画面と4.7インチ画面で内側に9ピクセル外側に7ピクセル、5.5インチ画面で内側に12ピクセル外側に10ピクセル分のアソビを持たせました。最大移動量の半分くらいですが普通に使う分にはあまりはみ出さないと思います。上のようにずらすのは結構大変だったりします。

ちなみに、なぜかPlusのアイコンとアプリ名の間隔は狭くなっています。その為枠の太さも若干狭くしました。Plusでは3分の2のスケールで表示されるので4/4.7インチで先程の余白を表示するなら内側8ピクセル外側6.666...ピクセル相当になります。

Plusではなぜかアイコンネームが詰まっています
空間は一番広いのに?
(タップして拡大できます)

そしてアイコンフレームが廃れたもう一つの理由、iOS 7以降のアイコンに角丸を合わせるのはかなり難しいです。単純な角丸ではなくアプローチRという手法が使われているといいます。notソフトウェアbutプロダクト。iOS7の角丸から見えたAppleのUIデザイン変化 - the.hatenablog.com
滑らかに見せるために異なる曲率を組み合わせているわけですね。ぱっと見は分からなくても、重ねると普通の角丸ではどうやっても四隅にズレが出ます。

余裕を持たせていても手は抜いていません。アプローチRにも合わせています。
1ピクセルの外枠を付けて設定したサンプルがこちら。


完璧です。これを太くしています。

またアイコンフレーム系で私がどうしても好きになれなかったのはページ移動の時とページが埋まってない状態です。


なんだか落ち着きません。

そこで、これもiOS 7で導入されたアイコングリッドシステムをスペースに入れました。アイコンが空いていても、というか空いていた方がかっこいいかもです。
内側を埋めてしまえばはみ出しはもっと気にならないはずですけど、それじゃアイコンの台座みたいになってしまうしこのグリッドがないとデザイン的に台無しだと思っています。

なお、電話を切った時に表示が凄くずれることがあります。これはフォルダを開いて閉じるなどすると戻ります。

ドックに置いたフォルダには当然フレームは付きません。


意外と無かったドックのフレーム

ドックはアイコンと違って静止画にすればまったく動きません。ページを示すドットは動くもののアイコンに比べれば僅かです。
それでもちょっと見た覚えがないのは、やはり「視差効果」がデフォルトだからでしょうか。条件が必要な壁紙を配布することには面倒が付き物ですが、当サイトでは今さらです。

ドックの後ろが見えるのはiOS 10以降ではロック解除とホームに戻る一瞬か、ゼロページ目のウィジットに行く時だけですが、ここにもアイコンのグリッドシステムを仕込んでいます。


ドックには1〜4個のアイコンが置けて、3個以下の場合はセンター寄りになります。グリッドは角丸処理をせず、1〜4個の時のそれぞれのアイコン位置に重ねて置きました。

アイコンフレームがないタイプにはドック裏のグリッドもありません。


アイコンが止まるバグ

機種やiOSのバージョンによるかもしれませんが、少なくともiOS 10.3には「視差効果を減らす」をオンにしなくてもアイコンの動きが止まったままになるバグがあります。
トリガーはまだよく分かりません。再起動で動くようになることが多いですが、たまに自然治癒します。でもまたすぐ止まったりします。私のiPhone 7ではアイコンを止めずに使うのは難しい状態です。

このバグが出たら新古典壁紙的にはラッキーかも。「視差効果を減らす」を使うとすべての画面遷移に影響しますが、これなら使い勝手を変えずにアイコンだけ止まります(普段視差効果を止めてお使いの方には設定含めてそのままで完璧です。低電力モード時にも止まります)。iPhoneをどんなに動かしてもぴったり収まったままです。

ただ指を伸ばそうとiPhoneを手前に傾けた時にアイコンが数ピクセル近づいてくるのが機能しなくなります。こんな所まで考えられていたのかiOS(バグってるけど)。


なぜか扱いが難しい

アイコンフレーム周りには謎の画像乱れが現れることがあります。壁紙そのものは綺麗なのに……


ホーム画面に設定すると枠の太さや色の相性によってはフレーム周りのピクセルが入れ替わって表示されることがあります。グリッド部分でそれが起こることも。


iOSは壁紙にする時に一度画像処理をしてからホーム画面に表示しているみたいですからその時の劣化だと思います。少なくとも現時点でホーム画面の細密描写には注意が必要です。

なのでこれを引き起こすような色は避ける必要があり、フレームの色によって僅かに色を変えた背景もあります。

ちなみに白い背景に赤いアイコンフレームの壁紙は設定後に必ず暗くなります。


またドックのみフレームの簡易版ではフォルダが白くなったりグレーになったりはまちまちで、その辺は今回コントロールしていません。

5/12 一番下の段だけ空けた5段タイプを追加しました。
5/16 4インチ用にも4段タイプを追加しました。



サイトのアイコンをマイナーチェンジ

当サイトをホーム画面に追加した時のアイコンを少し変えています。


まずグレーを黒く。iPhone 8の画面が縦に長くなるという情報もありますし、壁紙の意匠も9:16にこだわるのはやめてグリッドシステムに合わせました。


トップページの他、現行のカテゴリーページと今後追加する壁紙のページが新しいアイコンになります。
サイトのアイコン名も少し前に「MiWP」に、このブログのアイコン名は「不思議な壁紙」に変えています。


8/25 追記:さらに変更しました。


0 件のコメント :

コメントを投稿



follow us in feedly