35 Shares

スマホアプリ紹介ツール「アプリーチ」の使い方とCSSデザイン

アプリケーションUX

iPhone と Android のスマホアプリをブログで紹介したいとき、わざわざ検索して URL をコピペして… というのはすごく面倒で手間がかかりますよね。

でも「アプリーチ」というブログパーツ作成ツールを使えば、一気に両方のアプリリンクを生成することができ、さらに iTunes アフィリエイトも利用することができます。

というわけで、iTunes アフィリエイトの申請方法と、アプリーチの使い方、その CSS デザインサンプルをご紹介します。

iTunesアフィリエイトプログラムに申請しよう

アフィリエイトリンクにするかどうかは自由ですが、せっかく紹介するのですからアフィリエイト報酬もゲットしましょう。

※無料アプリを紹介しても報酬は入りません

まず、iTunes アフィリエイトプログラム にアクセスします。

iTunes アフィリエイトプログラム

「プログラムに申し込む」をクリックし、次ページで必要情報を入力して申請します。

iTunesアフィリエイト入力フォーム

審査が行われて、承認されればメールが届きます。

iTunesアフィリエイト承認メール

赤枠部分の「アフィリエイト ID 」をアプリーチで使いますので、どこかにメモしておくかメールを保存しておきましょう。

iTunesアフィリエイトプログラムでリンクを作成する場合

アプリーチを使わず、iTunes アフィリエイトプログラムから直接リンクを作成することもできます。

というか、これが本来の使い方ですね。

管理画面に入り、「ツール」から「Link Maker」をクリック。

iTunes Link Maker

ここからアプリ名などを検索し、結果に表示されたものを選択します。

iTunes Link Makerでアプリ検索

あとは、「バッジ」「テキストリンク」「スモール・バッジ」のいずれかを選び、下に出てきたコードを記事にコピペすれば OK です。

iTunes アフィリエイトリンク生成

このような感じで表示されます。

iPhone 向けならこれでも良いですが、アプリ名やアイコンも取得できて、Android アプリのリンクまで一括して生成してしまうアプリーチのほうが便利ですね。

アプリーチの使い方

アプリーチはすごくシンプルなツールなので、わざわざ使い方を説明するまでもないと思います。

アプリ名を検索して、表示を確認。

アプリーチでアプリを検索

下部で表示するパーツを選択できるので、価格や開発元など、必要なものを選択しましょう。デフォルトのままでも OK です。

アプリーチの使い方

iTunes アフィリエイト ID は、「追加機能」を押すと出てくる「PHG コード」欄に入力します。

その後、「パーツサンプルを更新」ボタンを押して、生成されたリンクをブログ記事にコピペすれば OK 。

あっという間にこんなリンクが完成します!

白猫テニス

白猫テニス
開発元:COLOPL, Inc.
無料
posted with アプリーチ

実は、このリンクは Naifix 用に少しデザインを調整しています。

素の状態だと、このように枠線もなにもない状態です。

※Twenty Sixteen での表示

※Twenty Sixteen での表示

これだとなんだか味気ないので、ブログに合わせて少しデザインを変更したいですよね。

では、CSS のコピペで使えるデザインサンプルをいくつかご紹介します。

アプリーチCSSデザイン(カスタマイズ)

アプリーチのスタイルはインラインで指定されているので、外部 CSS から指定を加えるときは !important が必要になることもあります。

以下、WordPress テーマ「 Twenty Sixteen 」をベースに調整していますので、ご利用のテーマに合わせて調整してください。

枠線つきのデザイン

まず、オーソドックスな枠付きデザイン。

アプリーチ枠線つきデザイン

CSS はいたってシンプルです。

WordPress でアプリーチのソースをそのままコピペして使うと <p> が勝手に挿入されるので、CSS で消しています。

border や margin の値はお好みでどうぞ。

背景色つきのデザイン

つづいて、背景色を薄いブルーにしたデザイン。

アプリーチ背景色つきのデザイン

CSS はただ background-color を追加すれば良いのですが、デザインを調整しやすくするためにいろいろ指定を追加しました。

背景ピンクバージョンはこちら。

アプリーチ背景ピンクバージョン

濃い背景色+枠線を少し離したデザイン

背景色を濃くして文字色を白ベースに。そして「posted with アプリーチ」の部分を目立たせたバージョンがこちら。

アプリーチ濃い背景色デザイン

外側の枠線は box-shadow を使っています。

背景にうっすらグラデーションをかけたデザイン

上のデザインをベースに背景をグラデーションにし、text-shadow なども使ったパターンがこちら。

アプリーチ背景グラデーションデザイン

linear-gradient でグラデーションをかけているため、コードが長めになります。

Naifix で使っているのはこのパターンですね。

ちなみにスマホではこんな感じになります。

アプリーチスマホデザイン

アプリーチのid・class

CSS を駆使すればもっと凝ったデザインにすることもできます。

アプリーチで使われている <div> の id や class はこのようになっていますので、これをもとにいろいろアレンジしてみてください。

図にするとこうなっています。

アプリーチ構成図

まとめ

以上、スマホアプリの紹介に重宝する「アプリーチ」の使い方と CSS デザインでした。

便利なツールはたくさんありますが、いろいろ使うとごちゃごちゃしてしまうので、できるだけブログのデザインに合わせて使いたいですね。

まずはコピペしてみて、お好みでアレンジしてみてください。

それでは、また。