スマホアプリ紹介ツール「アプリーチ」の使い方と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 はいたってシンプルです。

#appreach-box {
	border: 1px solid #ddd;
	margin: 2em 0;
}

#appreach-box p {
	display: none;
}

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

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

背景色つきのデザイン

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

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

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

#appreach-box {
	background-color: #f5fafe;
	margin: 2rem 0;
	padding: 1rem;
}

#appreach-box p,
#appreach-box br {
	display: none;
}

.appreach-info {
	overflow: hidden;
}

#appreach-appname {
	color: #094274;
	font-weight: bold;
}

#appreach-developer {
	margin-bottom: 1.5rem;
}

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

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

#appreach-box {
	background-color: #fdf1fc;
	margin: 2rem 0;
	padding: 1rem;
}

#appreach-box p,
#appreach-box br {
	display: none;
}

.appreach-info {
	overflow: hidden;
}

#appreach-appname {
	color: #a4199d;
	font-weight: bold;
}

#appreach-developer {
	margin-bottom: 1.5rem;
}

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

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

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

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

#appreach-box {
	background-color: #6c1e60;
	border: 2px solid #fff;
	box-shadow: 0 0 0 2px #6c1e60;
	color: #fff;
	margin: 2rem 0;
	padding: 1rem;
}

#appreach-box p,
#appreach-box br {
	display: none;
}

.appreach-info {
	overflow: hidden;
}

.appreach-info a {
	color: #fff;
}

#appreach-appname {
	color: #fff;
	font-weight: bold;
}

.appreach-powered {
	background-color: rgba(255, 255, 255, .4);
	display: block !important;
	margin: 1em 0;
	padding: .2em .5em .2em 0;
	text-align: right;
}

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

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

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

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

#appreach-box {
	background: #ccc;
	background-image: -webkit-linear-gradient(top,
			rgba(220, 220, 220, 1.0), 
			rgba(240, 240, 240, 1.0) 25%,
			rgba(235, 235, 235, 1.0) 30%,
			rgba(240, 240, 240, 1.0) 36%,
			rgba(235, 235, 235, 1.0) 50%,
			rgba(215, 215, 215, 1.0) 80%,
			rgba(210, 210, 210, 1.0)
			);
	background-image: -moz-linear-gradient(top,
			rgba(220, 220, 220, 1.0), 
			rgba(240, 240, 240, 1.0) 25%,
			rgba(235, 235, 235, 1.0) 30%,
			rgba(240, 240, 240, 1.0) 36%,
			rgba(235, 235, 235, 1.0) 50%,
			rgba(215, 215, 215, 1.0) 80%,
			rgba(210, 210, 210, 1.0)
			);
	background-image: -o-linear-gradient(top,
			rgba(220, 220, 220, 1.0), 
			rgba(240, 240, 240, 1.0) 25%,
			rgba(235, 235, 235, 1.0) 30%,
			rgba(240, 240, 240, 1.0) 36%,
			rgba(235, 235, 235, 1.0) 50%,
			rgba(215, 215, 215, 1.0) 80%,
			rgba(210, 210, 210, 1.0)
			);
	background-image: linear-gradient(to bottom,
			rgba(220, 220, 220, 1.0), 
			rgba(240, 240, 240, 1.0) 25%,
			rgba(235, 235, 235, 1.0) 30%,
			rgba(240, 240, 240, 1.0) 36%,
			rgba(235, 235, 235, 1.0) 50%,
			rgba(215, 215, 215, 1.0) 80%,
			rgba(210, 210, 210, 1.0)
			);
	border-top: 1px solid #ccc;
	border-right: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
	border-left: 1px solid #ddd;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .5) inset;
	color: #333;
	margin: 2rem 0;
	padding: 1rem;
	text-shadow: -1px 1px 0 rgba(255,255,255,.8);
}

#appreach-box p,
#appreach-box br {
	display: none;
}

.appreach-info {
	overflow: hidden;
}

.appreach-info a {
	color: #333;
}

#appreach-appname {
	font-size: 1.1em;
	font-weight: bold;
}

.appreach-powered {
	background-color: rgba(0, 0, 0, .1);
	box-shadow: 1px 1px 1px rgba(0, 0, 0, .2) inset;
	color: #111;
	display: block !important;
	font-size: 65% !important;
	margin: 1em 0;
	padding: .2em .5em .2em 0;
	text-align: center;
	text-shadow: -1px 1px 0 rgba(255,255,255,.2);
}

.appreach-powered a {
	color: #111;
}

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

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

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

アプリーチのid・class

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

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

<!--アプリーチ-->
<div id="appreach-box" style="text-align: left;">

  <!-- アプリアイコン -->
  <img id="appreach-image" style="float: left; margin: 10px; width: 25%; max-width: 120px; border-radius: 10%;" src="アプリアイコン.jpg" alt="アプリ名" />

  <!-- 右側ブロック -->
  <div class="appreach-info" style="margin: 10px;">

    <!-- アプリ名 -->
    <div id="appreach-appname">アプリ名</div>

    <!-- アプリ開発社名 -->
    <div id="appreach-developer" style="font-size: 80%; display: inline-block; _display: inline;">開発元:<a id="appreach-developerurl" href="https://～" target="_blank" rel="nofollow noopener noreferrer">開発名</a></div>

    <!-- 価格 -->
    <div id="appreach-price" style="font-size: 80%; display: inline-block; _display: inline;">価格</div>

    <!-- Powered by -->
    <div class="appreach-powered" style="font-size: 80%; display: inline-block; _display: inline;">posted with <a title="アプリーチ" href="http://mama-hack.com/app-reach/" target="_blank" rel="noopener noreferrer">アプリーチ</a></div>

    <!-- ダウンロードボタン -->
    <div class="appreach-links" style="float: left;">

      <!-- iTunes -->
      <div id="appreach-itunes-link" style="display: inline-block; _display: inline;">
        <a id="appreach-itunes" href="https://～" target="_blank" rel="nofollow noopener noreferrer"><img style="height: 40px;" src="https://nabettu.github.io/appreach/img/itune_en.png" /></a>
      </div>

      <!-- Android -->
      <div id="appreach-gplay-link" style="display: inline-block; _display: inline;">
        <a id="appreach-gplay" href="https://～" target="_blank" rel="nofollow noopener noreferrer"><img style="height: 40px;" src="https://nabettu.github.io/appreach/img/gplay_en.png" /></a>
      </div>

    </div>
  </div><!-- / .appreach-info -->

  <div class="appreach-footer" style="margin-bottom: 10px; clear: left;"></div>

</div><!-- / #appreach-box -->

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

アプリーチ構成図

まとめ

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

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

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

それでは、また。

Related

Author

Naifix 編集部
Web コンサルティング業務を中心に、サイト制作・コンテンツ販売・メディア運営代行業務を行っております。当サイト（Naifix）では、おもにブログ初心者向けのノウハウを無料で配信しています。

お問い合わせ・無料相談