おやつのひきだし「スマホのデザインサイズについて」
出勤前、カバンに入れたはずのアポロがオフィス到着時には忽然といなくなっていました。
走っているうちにカバンの中から箱ごと飛び立ったものと思われます。
さすが「アポロ」。泣いてません。
さて、今回は、
「スマートフォン用のデザイン、あえて2倍で作る必要なくない？？？」
と今更ながら気がついた話です。
（※Photoshopでの制作が前提です。）
目次
スマホデザイン、なぜ2倍？
「スマートフォン用デザインの作り方」を解説しているサイトには
「実寸の2倍で制作する」と書かれていることが多いと思います。
私もスマホデザインを作り始めてからずっと2倍で作成してきました。
2倍でデザインするのはRetina（レティナ）ディスプレイのような
高解像度のモニタに対応するためで、
スマホデザインの制作方法としては今でも主流だと思います。
これまで広まってきたことからも分かる通り正しいやり方なのですが、
つい最近ふと、
「PCにも高解像度のモニタがあるけど2倍以上で作れという記事を見たことがない。
iPhone X / plusシリーズは2倍どころか3倍だし、
いっそSP（スマホ）も実寸で制作していいのでは？」
と思い至ったわけです。
そしたら、PC⇔SPにレイアウトし直すとき
フォントサイズや枠線を変更しなくてもいいじゃん？？？
コーディングチームにはPC用デザインをRetina用に拡大して書き出してもらっているので、
SPもそれでいいじゃん？？
いいじゃん！いいじゃん！！すげぇじゃん！！！と。
実寸でつくるときの注意点
実寸でWebデザインをする場合の注意点を3つ。
当たり前ですが元素材は書き出しサイズの2倍以上あること。
そして、シェイプ以外の素材はすべて「psd（またはpsb）」にすること。
最後に、色調補正等の効果やフィルターは元素材のほうにかけること。
理由は、拡大して書き出すときに滲んで（ぼやけて）しまうから。
この現象、こちらの記事がとても詳しく説明してくださってるので、ぜひご覧になってください。
めっちゃ勉強になりました。ありがとうございます。
忘れていましたが、PCに入っていないフォントも拡大して書き出すとぼやけてしまうので、
コーディングを別の方に依頼する場合は同じフォントが入っているか確認することをオススメします。
ここが一番のネックかもしれませんね( ˘ω˘ )
デザインはスリル、ショック、サスペンス
さて、ここまで語ったものの、今のところ机上の空論です( ˘ω˘ )｡oO( )
次回デザインを作るときコーディングチームのどなたかに犠牲になっ・・・
お手伝いしていただきながら実験しようと思います。
ノーベル賞を受賞した本庶先生も「教科書を疑え」とおっしゃっていたし、
今自分がしている方法が本当に「よりよい方法」なのか
疑っていく姿勢は大事だなーという話でした。
なんだかいい感じのミラクル着地をキメたような気がするのでここで締めます。
グダグダですか？仕様です( ˘ω˘ )
今日のおやつ
明治「アポロ」
1969年8月7日誕生。
ミルクチョコといちごチョコが二層になった円錐形のチョコレート菓子。おいしい。
ちなみに、明治が「アポロ」の名前を登録したのは1966年で、
宇宙船アポロ11号が初めて月面着陸して有名になるよりも前のことなんだとか。
アポロの製造機で別のお菓子が作れないかと試行錯誤した末に出来たのが「きのこの山」。
サイボーグ009で言うところの002と009みたいなものです。知らんけど。
ゆめかわお菓子の代表格。
ところで、大人になったら自然と朝起きれるようになるんだと思っていた時期が私にもありました。
未だに春眠問わず、暁を覚えられません。おかしいな。。
それではまた。
関連記事
記事を書いた人
トリアナのおやつ係です。
トリアナのおやつ係です。