Read Article



アプリのダウンロードボタンを解像度を上げて作ってみた!

Tutorial on How to Add Versatile Button Shortcodes on Your WordPress Theme
Tutorial on How to Add Versatile Button Shortcodes on Your WordPress Theme / webtreats

どうも、リブラブです。

最近、ブロガーさんの記事でよく見かける、iPhoneアプリの大きなダウンロードボタン。

こういうやつです。

するぷろ for iPhone(ブログエディタ) するぷろ for iPhone(ブログエディタ)
価格: ¥350
カテゴリ: ソーシャルネットワーキング, 仕事効率化
App Storeで詳細を見る


アプリをダウンロードする


ボタンがデカくて、分かりやすくて良いデスね(^^)。

実際、私もつい最近、iPhone初心者の方から、

ダウンロードはどこを押すんですか??

と聞かれることもあったので、ボタンを大きくする事は、良いことです。

と、いう事で良い物は積極的に取り入れたいので、私も作ってみる事に…。

作り方は@delaymaniaさんの記事を参考にさせていただきました。

本当、ありがたいです!

アプリをダウンロードするボタンが付くようにAppHTMLをカスタマイズしました | delaymania

記事内で、コードを公表してくれているので、コピペで使う事が出来ます。

私は、こちらの記事に書かれているコードを、ほぼそのまま使わさせてもらっているのですが、ボタンぐらいは自作したいですよね。

といっても、デザイン出来るわけでもないので、何処かのサイトに頼っちゃうことにしますw。

ボタンを自作出来るサイトは、@tato3104さんが記事にされていましたので、参考にさせてもらいました。

[iPhone]アプリのダウンロードボタンをつけてみた! | Macと過ごす日々ver.WP

そんなこんなで、色々なブロガーさんの記事に助けられながら、完成したボタンがこちら⬇

180 2 42 213 206

この後、画像を少し再調整したり、コントラスト等の色調整を行い、冒頭の『するぷろ』アプリのリンクボタンを作りました。

するぷろ for iPhone(ブログエディタ) するぷろ for iPhone(ブログエディタ)
価格: ¥350
カテゴリ: ソーシャルネットワーキング, 仕事効率化
App Storeで詳細を見る


アプリをダウンロードする


iPhone表示の時、少し問題が…

ボタンを作っている時、私だけかも知れないですけどボタン画像が荒くて、何度も作り直しました。

画像の荒さが確認出来るのは、iPhone表示の時だけ…..。

Retinaディスプレイは解像度が高い為に、解像度が低いと画素が荒いものは分かってしまうんでしょうかね?

どうなんだろう….。

どうしても綺麗に表示させたかったので、私は、解像度を2倍(150×600)にして作り、記事にする際に、AppHTML経由で解像度を75×300にして貼付けています。

この方法で作ると、他のデバイスでは違いがわからないのですが、iPhoneの時だけシャープに見えます。

ちょっと違うかもしれないですが、DTPの世界では、印刷物にする画像の解像度は、出力に合わせて通常2倍にするのですが、同じようにすれば良いような。

どうして2倍にする必要があるのかというと、データを印刷する場合、そのままの解像度だと、ジャギー(画像のがたつき)が見えることがあるんです。

よくわかりませんが、ボタンが荒く見えてしまうのは、それと理由は一緒かなぁ〜と。

iPhoneでご覧の方は、上の完成ボタンを拡大表示して文字を見ると、その違いが分かると思います。

ということで、

iPhoneで観たときに、ボタンがシャープに表示されないと感じる方は、

画像の解像度を上げて作ってみる事をオススメします。

もしかしたら、良くなるかもですw。

ちょっと時間がかかってしまいましたが、まぁ、結果的に綺麗に出来たので、暫く、これでアプリ紹介したいと思います。

では、また。

Posted from するぷろ for iPhone.

The following two tabs change content below.

リブラブ

管理人:リブラブ(@livlove007) iPhone、iPad、Macユーザーです。 iPhone関連の商品やアプリを使った感想、また普段の生活の中で感じた様々な事を気ままに色々書いてます。 Follow @livlove007
URL :
TRACKBACK URL :

LEAVE A REPLY

*
*
* (公開されません)

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

Return Top