SEOスキルを活かして輝く逸材を世界へ!

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

2014 10/08

スポンサードリンク令

¥900(税抜) ココアシガレット ¥30×30入{子供会 景品 お祭り 縁日 だがしかし 駄菓子 問屋}
created by Rinker
目次

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

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

に送ります。

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

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

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

WEB視点でiPhone6+
9月10日深夜iPhone6+の発表がAppleよりありました。
iPhone6+で変わる高解像度対応の仕方【コーダー】【デザイナー】【SVG】

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

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

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

つまりは今まで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 】が主流になる
iPhone6+で変わる高解像度対応の仕方【コーダー】【デザイナー】【SVG】

※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に明るいやつ」が制作した資料です。
ぜひ見てみてねん❤

この記事を読んだ人はこんなのも高確率で読んでます。

LINEオープンチャット関連記事

◯LINEオープンチャット関連記事
LINEオープンチャット先行版とLINEグループとの違いをまとめてみた
LINEオープンチャットの管理人機能と副管理人の追加
LINEオープンチャットで身バレ防止!ハンドルネームをつけられる便利機能
LINEオープンチャットで人気が出そうなジャンルとチャットメンバー募集中
LINEオープンチャットで作れるカテゴリー一覧と人気チャット考察
LINEオープンチャットの稼ぎ方と騙されないようにするポイント
LINEオープンチャットでメンバーを効率よく増やす人集め方法
LINEオープンチャット正式リリースはいつ?エラーで募集延期の可能性は?
LINEオープンチャット正式リリースまでの禁止事項は招待やQRコード拡散など
LINEオープンチャット5つの禁止事項や規約からわかること
LINEオープンチャット「ブロガーPay」コミュニティメンバー募集中
ブログを書く人向けLINEオープンチャットブロガーPay-記事更新版-作りました
LINEオープンチャット山口県観光コミュニティ「山口県行こうで!」開設!
LINEオープンチャット QRやURL読み込んでも参加できない時の対処法
LINEオープンチャットおすすめトークルーム一覧
Lineオープンチャットのノートに大事なお知らせ・大事なノートが追加
LINEオープンチャット注意喚起!同じ文面を数回コピペすると凍結する仕様
LINEオープンチャットでノートをチャットタイムラインに載せる方法
LINEオープンチャット就活支援コミュ-企業と就活生をマッチング-のご紹介
ブログ運営者やブロガーにこそLINEオープンチャットをおすすめしたい
LINEオープンチャットで楽天ROOMコミュニティ作りました
【検索できない】LINEオープンチャットのトークルーム検索はいつ実装されるのか?
【LINEオープンチャットトークルーム】フォロワーが増えるツイッターコミュニティ
LINEオープンチャットの略称はオプチャ・ぷんちゃ?なんて呼ばれそう?
LINEオープンチャットのトークルームの機能・使い方完全版
LINEオープンチャット管理者・共同管理者の権限とできるコトについて
【退会させられない】INEオープンチャットで退会規制 短時間に60名程退会させると
LINEオープンチャットにある色々な規制まとめ(トーク規制・招待規制・蹴り規制)
【ブロガー必見】LINEオープンチャットを活用したSEO対策とは
LINEオープンチャットでは個人間のやり取りができない!対処法はあるの?
LINEオープンチャットに今後追加される予定の新機能について
LINEオープンチャットでオンラインサロンを作る方法
LINEオープンチャット「オンラインサロンオーナーの会」メンバー募集中
LINEオープンチャットの通報したらどうなる?機能を紹介
LINEオープンチャットで副業!健全稼げる5つの方法
LINEオープンチャット「恋愛相談コミュニティ」恋バナもできる!参加者募集中
LINEオープンチャットを使ってコンサルをする方法
LINEオープンチャット使ってみた!口コミ・感想・良い点・改善点まとめ
LINEオープンチャットの黎明期・全盛期・衰退期への展開を予想してみる
LINEオープンチャット「インスタグラムの会」参加者募集中┃Instagram
自分のサイトにLINEオープンチャットのトークルームを埋め込む方法
LINEオープンチャット運営からのおすすめピックアップルームに掲載されました
LINEオープンチャットほめ合うグループのご紹介
LINEオープンチャット「スニーカー&SNEAKER」靴シューズ好きのコミュニティ
LINEオープンチャット合言葉・コードなど公開設定の方法
LINEオープンチャット紹介「イベント告知&探し🎟!(オフ会、ライブ、配信、実況、展示、セミナー、スポーツなどのイベント開催情報)」
LINEオープンチャット正式リリースはいつ?近日中に迫る!予想は8月19日
LINEオープンチャット「クリエイターズクラブ」のご紹介!クリエイター求ム!
LINEオープンチャットおすすめの「フォニックス英語発音オンラインコミュニティ」
LINEオープンチャット紹介「令和防災サバイバー」震災時のお役立ちコミュ
LINEオープンチャットおすすめ「全米全英ゴルフ実況コミュ」のご紹介
LINEオープンチャットおすすめ「みんなで痩せるダイエットコミュ」の紹介
LINEオープンチャット用のアイコンイラストのご依頼はかみじょー絵師コミュまで
東京都関連のLINEオープンチャットトークルーム一覧
大阪関連のLINEオープンチャット(オプチャ)トークルーム一覧
LINEオープンチャット(オプチャ)荒らし対策まとめ
LINEオープンチャット転職支援や退職代行お悩み相談コミュ┃オプチャ
LINEオープンチャット紹介「大阪おすすめグルメ」参加者350人超える!オプチャ
LINEオープンチャットおすすめ「三浦大知ファンコミュ」が登場!オプチャ
LINEオープンチャット紹介「ラーメン(食べたラーメンの写真と感想を書くコミュ)」
検索できない時のためのLINEオープンチャットゲーム・スマホアプリコミュ一覧
LINEオープンチャット女性向けコミュまとめ
LINEオープンチャット「九州総合コミュ」のご紹介┃町おこし・地域振興
LINEオープンチャット「WordPress全般研究会」グーテンベルク情報も
LINEオープンチャット「松本山雅FCファンコミュニティ」ONE SOUL
LINEオープンチャット紹介「マインドフルネス」
LINEオープンチャット紹介「松本市総合コミュニティ」
LINEオープンチャット「雑談オプチャ」まとめ┆検索できない時のための一覧

関連記事

コメント

コメントする

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次