iPhone6+で変わる高解像度対応の仕方【コーダー】【デザイナー】【SVG】

iPhone6+で変わる高解像度対応の仕方【コーダー】【デザイナー】【SVG】

※今回の記事を読んで欲しい人
・iPhone6+登場で今後を予想しているWEB屋さん
・iPhone6+登場で今後の変化を感じるWEBデザイナーさん
・その他Apple製品に興味がある人

に送ります。

おれなりの結論を先に書いておきます。

iPhone6+の登場でPhotoshopは従来の画像加工は廃れ、
インブラウザデザイン・SVGがメジャーになる。

さていきます。
今回の記事はラジオねこきっくかみじょーの親友で「ウェブに明るい男」と話をしていてのことです。

WEB視点でiPhone6+
9月10日深夜iPhone6+の発表がAppleよりありました。

サイト制作をしていて、デザインなどと同様に意識しなきゃアならない点が「解像度」です。

今まではモバイルサイト向けのサイトを作る時にiPhoneを基準に作っていて
640PXで作ることが多かった。

Androidデバイスの解像度は端末依存で一貫性がないので、どれかに合わせるというのは難しいことです。
なので、iPhoneの解像度をスタンダード基準として制作をしてました。

Confirmed iPhone 6 and 6 Plus viewport device-width: 6: 375px (2.0 DPR) 6 Plus: 414px (2.6 DPR)

— Kyle Barrow (@kylebarrow) 2014, 9月 10

つまりは今まで2倍の解像度で作れば良かったところ
今度は更に大きい2.6倍の解像度で画像を作らなくてはならない時代がやってくる。
大きい画像をフォトショップで処理するとカクカクだ。
もうカクカクだ。フリーズだ。動かねぇ….ぞ…どうしたんだ！おれのPC(*_*)

または画像を折半して半分ずつ加工してかなくてはならないという時代。

[adsense]

iPhone6+登場で変化する高解像度対応

・結論、フォトショは廃れイラレへ移行する!

しかしiPhone6Plusの登場によって単純に高解像度対応をするには、

1080pxと750px

6は750÷375=2
6+は1080÷414=2.6

今までは2倍の大きさのpx画像を作ればよかったけど、これからは6+対応のためには2.6倍のサイズが必要
2倍ではなく2.6倍になったので、
画像を作らないといけなくなる。

フォトショップでその大きさで作らないと高解像度対応ができなくなる。

今後どうなっていくか予想してみると

・ほとんど画像は使われなくなる。
理由：公開増対応の加工が大変だから。

・フォトショは使われなくなる。
上記理由と同様

・イラレが主流になる。
Illustratorでは加工した画像のSVGコードを吐き出してくれる機能が付いているので

このSVGが主流になることと、Illustratorがメジャーとなるのは同義です。

・画像ではなくSVG 【 Scalable Vector Graphics 】が主流になる

※SMGとはXMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。
ベクター画像は画像を点の集合体ではなく、線や面などの図形の集合体として扱うため、
見る環境に応じて最適な表示が可能となる。
ブラウザ上での描写なので、いくら拡大しても画像が荒くなることはない

⇒つまり画像が荒くならない=今回のiPhone6+によって更に高解像度対応を迫られるWEB屋さんやデザイナーさんにとっては、この悩みの種を解消させてくれる特効薬となるのです。

SVG利用の問題点

しかし、そんな救世主とも思えるSVGにも弱点やこれから解決しなくてはならない改善点があります。
簡単に言えば画像加工がインブラウザデザインにシフトされる時期へ来たのだなっていうことです。

インブラウザデザインとはブラウザ上で デザインをするということです。

1.管理・共有面での問題
画像で管理するには、添付や共有が容易でしたが、これから主流になるSVGはコードなので
その共有が難しくなるでしょう。

なので、LINEやチャットなどでも今は各画像対応して授受できますが、これからはスマホなどでもSVG対応機種やそういうSVG対応ツールが流行ってくる。

2.認知度の問題
これはまだ生まれたての存在で一部のウェブ屋さんやデザイナーさんの間でしか使われていないのがSVGです。
少なくても私のような一般人は使う機会がありません。
画像加工をする上で、Illustratorをある程度使いこなせる人向けなのが現在のSVGなのです。

こちらは、6+の普及によって否が応でもメインのツールとして認知されてくると思いますが、
今回の記事は素人の我々ではなく、ウェブ屋さんェブデザイナーサン向けの記事なので、早急にSVGにチャレンジしてみる必要はありそうですね。

3.容量の問題
jpgやPNGと比べると3倍以上重そうなのがこのSVG。
理論上は10px平方の画像ファイルのサイズが100MB

結論.全てをまとめてまだ試作段階。これからもっとユーザーが増えておお化けしそう

SVG 【 Scalable Vector Graphics 】の限界

そして問題点以外にもSVGには限界があります。
ウェブ描写ということで表現に限界があります。

・写真には向いていない
・グラフィック系は向いているがドット描写なので繊細な画像には限界がある。
・フォトショユーザーは中々移行しづらいのかも。

とうことでまとめると、これからはSVGというインブラウザデザインに対するベンキョウをしてった方が良さそう。
そして、Apple製品のWEB屋さんやWEBデザイナーさんに与える影響は大きい。

さすがスタンダードデザイン。

今回の参考資料

今回の記事のテーマや資料を提供してくれた私の親友の「WEBに明るいやつ」が制作した資料です。
ぜひ見てみてねん❤

インブラウザデザインのすゝめ https://t.co/cVPyeFB9QB わたくしのスライドが紹介されてた！ iPhone6の登場でますます注目されそうですね。。

— 魔露@web (@paradox_tm) 2014, 9月 10