カラメル - アフィリエイト

カラメルとは、インターネット上のショッピングモールです。
株式会社paperboy&co.が提供する、ショッピングカートシステム「Color Me Shop! pro」のオプションサービスです。

私の親しい人は、サービスが始まったころから、「Color Me Shop! pro」を使っています。
ShopTTというお店をやっています。
北米、ヨーロッパ、ロシアやウクライナから、オルタナティブロックやらエレクトロニカやらエクスペリメンタル系のCDを輸入して売っています。
ニッチな品揃えゆえ、ニッチに売れています。

例えばこのような商品。
さっそく「カラメルアフィリエイト」にて紹介します。
アフィリエイトの"わく"（例えば人物のイラスト）は、カラメルアフィリエイト管理画面から選べました。楽しい！

↑ウクライナの作品は、紙ジャケもすばらしいです。

Mattia Coletti - Pantagruele
価格：1,600円（税込）

↑イタリアの奇才、マッティア・コレッティくんの新譜。
優しいけれど、どこか常軌を逸した、アコースティック・ギターの音が響きます。

ShopTTの経営者が、問いを発していました。

「カラメルのアフィリエイト利率だけど、一律1%ではなく、店側で選べるといいな。」

「アフィリエイターさんが2000円のものを売ってくれても、
入るお金が20円じゃ少ないと思うんだ。」

「例えばウチの店だけ、利率10%にすれば、よりたくさんのブログに貼ってもらえるでしょ？
え？　9%の差はどうするかって？
なに言ってるの、目的は店への集客だから、とうぜん負担するよ。」

「そうやって他の店と差をつけたいじゃん。」

この問いを断片的に（断片的でとてもまずかったのですが）、カラメルのアフィリエイトについて、告知をされていたあるマイミクさんに、コメントしたのが昨日の話です。

（後出しじゃんけんでたいへん失礼しております＞マイミク様）

今日、Color Me Shop!のプロデューサー、えふしんさんのブログに、利率について書いてありました。

楽天アフィリエイトが儲かる理由
http://www.milkstand.net/fsgarage/archives/001598.html

アマゾンは料率が最低3%で、楽天アフィリエイトは基本1%のアフィリエイト報酬です。

（中略）

ところが僕個人のblog活動においては、アマゾンアフィリエイトは大苦戦しています。
紹介料は、３ヶ月で3,000円ぐらいいけば良い感じです。
それに対して楽天アフィリエイトでは、なんだかんだで毎月3,000ポイントから最大で8,000ポイントぐらいの楽天ポイント報酬をもらっています。（1ポイント1円相当）

（中略）

アマゾンは、再訪問期間は24時間です。
それに対して楽天は30日間です。
この期間の差こそがアマゾンの3%でも儲からない人は儲からず、楽天は例え1%でも、アマゾンよりも実績が高くなる秘訣なのです。 アマゾンは、一言で言うと「強者のアフィリエイト」です。
再訪問期間が短くて料率が高いということは、ブログ記事からストレートに直接購入させられる力を持っているアルファブロガーには有利です。あと、ユーザー行動の最後の1クリックを得られるネットサービスも有利。
例えば、書評ブロガーと呼ばれる人たちは、本を買わせる力を持っておりアマゾンを生かして儲けられる人たちです。有名人もアマゾンは向いています。
それに対して楽天は、普通の人向けのアフィリエイトです。
商品を紹介して、楽天サイトに誘導することで、アフィリエイトクッキーが発行されます。紹介された人が、他のアフィリエイトサイトを踏まなければ、３０日以内に商品を購入すれば、アフィリエイトフィーが入ってきます。

（中略）

そんな楽天のアフィリエイトが好きだったので、自分でも作っちゃいました。
それが「カラメルアフィリエイト」です。
カラメル - アフィリエイトのご案内
もちろん再訪問期間は30日です。アフィリエイトフィーは1%。

とても理解しました。
利率が再訪問期間が「普通の人向け」とのことです。
いつだって株式会社paperboy&co.は親しみのわくサービスばかり提供している！　ということを再認識しました。
そう、ロリポップとムームードメインが、われわれに独自ドメインへの門戸を広げてくれたように。

そして感じました。
カラメル運営サイドと出店サイド（端的に言えばShopTT）との考え方が違うのかもしれません。

◎カラメル運営サイド→アフィリエイターがこつこつポイントを得られるように

◎ShopTT→千客万来！　門前成市！　ウチの店にアフィリ貼って！

むろん10%では、店は負担増です。だからどの店も希望しているとは、考えられません。
しかしShopTTのようなニッチな商売をしている店には、集客を期待しての「利率を上げたい」という、ニーズがあるのではないかと考えます。

立ち上がったばかりのサービスに、勝手なことを申し上げて、ほんとうに失礼きわまりないですが、店側が、利率を選べる仕組みも提供してくださったら、アフィリエイト界の革命なのでは、と考えます。

日本語 http://smack.towntone.com/

英語 http://smack.towntone.com/english/

イラストを描かれたのはROCさん。

PayPalのボタンがしょぼいのだが、これはオフィシャルの画像。この画像を使わないと、フィッシングと勘違いされるという指摘をうけ、泣く泣く......。

デザイン、コーディング、Movable Type作業を行った。png画像を多数使った。IE6はデフォルトで透過png画像を表示できない。（回避策としてJavascirptをかませている。）なのでIE6では多少表示が遅くなってしまうが、透過pngで何ができるか、たとえば透過+透過を重ねるとどうなるか、デザインのインパクトとして何が効果的なのか、そうでないのか、文字を拡大表示した場合に背景画像をどう用意しておけばよいかなどを、検証できた。

前後するが上流行程も行った。タウントーン主宰キクチくんの要望を元にワイヤーを制作。バンド紹介サイトとして、王道な構成ではあるが、キクチくんの要望で1点、特殊なページを設けた。「リミックス募集」ページにて、音素材（wav形式で約40MB、という音質）が置いてあるので、ラップトップ系の人たちにぜひマッシュアップをお願いしたいとのこと。

英訳はキクチくんの知人、ライアンさん。アメリカ東海岸出身の彼から届くメールの書き出しは「お疲れー！！！！！」とか！　もちろん漢字も織り交ぜて。言語体系の異なる言語をここまで自在に操れることにただただ敬服。

ライアンさんのおかげで、ウェブサイトにおける（特にメールフォームの）英語の勉強になった。

リミックス募集→Remix Applications

メールアドレス[必須]→E-mail Address[required]

取得したお名前 または アーティスト名／メールアドレス等の個人情報について細心の注意と最大限の努力をもって、保護／管理を行っております。→Your private information will not be released to any outside parties.（これは簡潔に訳してもらった様子。）

このサイトは昨夏、日本語版のみ完成していたのだが、スマックのお二人が気に入ってくれ、彼らのmyspaceも似たようなデザインに変えてくれていた。うれしい。

http://www.myspace.com/smackcity

http://www.perfect-world.me/

課題：「えむとす小学校(しょうがっこう)だより」をMTOSで構築すること。

http://kiasma.jp/20080621/

つまり、テンプレートの制作が課題です。

HTML、CSS、Javascript、画像ファイルは配布します。

http://kiasma.jp/20080621/20080621MTOS.zip

記事をインポートできますよう、テキストファイルも配布します。

http://kiasma.jp/20080621/20080621MTOS_txt.zip

ウェブページはおそれいりますが各自作成をお願いいたします。 こちらからタイトル・本文をコピペできます。

http://kiasma.jp/20080621/privacy.html

変数と分岐や、さまざまなMTタグを用いて、下記の実装にチャレンジしてください。

• [MT4分科会課題説明] トップページの仕様
• [MT4分科会課題説明] ウェブページの仕様
• [MT4分科会課題説明] ブログ記事リスト：カテゴリー別の仕様
• [MT4分科会課題説明] ブログ記事リスト：ユーザ別の仕様
• [MT4分科会課題説明] ブログ記事の仕様
• [MT4分科会課題説明] サイトマップの仕様

なお、「えむとす小学校(しょうがっこう)だより」で用いています写真は全て「2000ピクセル以上のフリー写真素材集」様からお借りしております。「2000ピクセル以上のフリー写真素材集について／ご利用上のご注意」にも目を通していただけますよう、よろしくお願いいたします。

インポート用テキストファイル（http://kiasma.jp/20080621/20080621MTOS_txt.zip）をダウンロードしてください。

2.ブログの作成

ブログを作成してください。

サイトURLを画像のとおりにしていただきますと、インポート用テキストファイルを、そのまま活用できます。

3.テキストのインポート

ブログが作成されましたら、システムメニューのツールをクリックしてください。

1. 「ブログを選択」をクリックし、モーダルダイアログから、「えむとす小学校（しょうがっこう）」を選択してください
2. 「インポートしたブログ記事の所有者」は「ブログ記事の著者を変更しない」を選び、「新しいユーザーの初期パスワード」を入れてください
3. 「インポートファイルをアップロード（オプション）」でインポート用テキストファイルを選択し、「ブログ記事のインポート」ボタンを押してください。
4. インポートが開始されます。

4.フォルダcss、img、jaを"\htdocs\今回のフォルダ"直下にアップ

配布のCSS、画像、Javascriptファイル（http://kiasma.jp/20080621/20080621MTOS.zip）を\htdocs\今回のフォルダ（20080621）直下にアップする必要があります。

フォルダcss、img、jaは、"\htdocs\今回のフォルダ"直下にコピペでアップでオーケーですが、メンドウでなければ、MTから登録（cssとjsはインデックステンプレートとして／画像はアイテムとして）するのでもだいじょうぶです。

5.再構築してください

デフォルトのテンプレートでの「えむとす小学校（しょうがっこう）」が生成されます。

カテゴリーから各学年を用意しても良いのですが、小学生じしんが投稿することを想定しています。 小学生がMTの投稿をバリバリできる......とも限らないので、投稿者がカテゴリーを付け忘れても、学年のページにはきちんとソートさせられる仕組みを、今回は目指してください。

• %a/%y%m%d.html

すなわち 投稿者の表示名/年月日.html としてください。

• ユーザ別：author-display-name/index.html（%-a/%f）
• カテゴリー別：category/sub-category/index.html（%-c/%i）

にしてください。

ユーザ別のアーカイブマッピングを行う理由も、「[MT4分科会課題説明] 準備編2：ユーザの仕様」で書いたことと同じです。

カテゴリーから各学年を用意しても良いのですが、小学生じしんが投稿することを想定しています。 小学生がMTの投稿をバリバリできる......とも限らないので、投稿者がカテゴリーを付け忘れても、学年のページにはきちんとソートさせられる仕組みを、今回は目指してください。

1.HTMLファイル：

"MTタグを使いたい"1枚もののページは、インデックステンプレートにします。ちなみに、"MTタグを使わなくてすむ"1枚もののページはウェブページにします。

• index.html：トップページ
• contact.html：おといあわせ（インデックステンプレにしたのはいずれフォームとかつけられるとヨイと考えたからです。ただし今回はテキストのみ。）
• sitemap.html：サイトマップ

2.CSS、Javascriptファイル：

CSS、Javascriptファイルは、下記のようにインデックステンプレート化していただいても、htdocsに直接コピーするのでもかまいません。

• css/fonts.css：フォントサイズ均一化用CSS（拝借元：http://developer.yahoo.com/yui/fonts/）
• css/import.css：読み込み用
• css/module.css：汎用性の高いCSS（clearfix等）
• css/print.css：印刷用CSS
• css/reset.css：ブラウザ設定無効化CSS（拝借元：http://developer.yahoo.com/yui/reset/）
• css/structure.css：レイアウト等、このサイトのためのユニークな設定用のCSS
• css/typography.css：フォントサイズ・色を指定するCSS（フォントサイズの仕様はこちらから確認できます）
• css/version4.css：第4世代ブラウザ用
• js/rollover.js：ロールオーバー用CSS（<img src="hoge.gif" class="btn" />とすれば自動的にロールオーバー時のhoge.gifをhoge_on.gifに差し替えてくれるJavascript）

1.ヘッダナビ：

インデックステンプレートでつくるHTMLファイルを<li>タグで並べてください。コンテナタグは使えません。直書きになります。

2.写真：

今回は、ひんぱんに変更することを想定していないので、インデックステンプレート（index.html）に直書きでオーケーです。

3.最近(さいきん)のニュース：

ブログ記事を最大20件、降順でリスト表示させてください。書いた人の学年のアイコンがつくようにしてください。

＊ヒント：<li class="schoolyear01">のclass名を変更させることで、cssからアイコンが変更できます。MTタグを用いて、class名を変更させる方法を考えてみてください。

4.グローバルナビゲーションA：

各学年の扉ページへのリンクをリスト表示させてください。

＊ヒント：ユーザ別にブログ記事リストを並べる方法を考えてください。

5.グローバルナビゲーションB：

各行事の扉ページへのリンクをリスト表示させてください。

＊ヒント：カテゴリー別にブログ記事リストを並べる方法を考えてください。

6.グローバルナビゲーションC：

各ウェブページへのリンクをリスト表示させてください。

＊ヒント：ウェブページを並べる方法を考えてください。

1.グローバルナビゲーションC：

現在"いる"ページをon表示させてください。<li class="here">になれば、下地がピンクになります。

＊ヒント：<li>にするか、<li class="here">にするかは、変数と分岐を用いることで可能になります。なお、IEの仕様ゆえ、<ul><li>部分の改行にヘンな隙間が入ります。ですので、改行を<!-- -->でコメントアウトしています。ややこしくなりそうでしたら、IE以外のブラウザで課題にチャレンジしていただけたらと存じます。

2.大見出し：

ウェブページのタイトルを表示させてください。

3.本文：

ウェブページの本文を表示させてください。

カテゴリーに所属する記事を降順表示させてください。

1.グローバルナビゲーションB：

現在"いる"ページをon表示させてください。<li class="here">になれば、下地がピンクになります。

＊ヒント：<li>にするか、<li class="here">にするかは、変数と分岐を用いることで可能になります。なお、IEの仕様ゆえ、<ul><li>部分の改行にヘンな隙間が入ります。ですので、改行を<!-- -->でコメントアウトしています。ややこしくなりそうでしたら、IE以外のブラウザで課題にチャレンジしていただけたらと存じます。

2.大見出し：

カテゴリー名を表示させてください。

3.見出し：

ブログ記事タイトルと、学年アイコンを表示させてください。

＊ヒント：<span class="schoolyear01">のclass名を変更させることで、cssからアイコンが変更できます。MTタグを用いて、class名を変更させる方法を考えてみてください。

4.本文：

ブログ記事の本文を表示させてください。

5.ボタン：

パーマリンクを貼ってください。

6.本文の下：

日付、所属カテゴリーとそのブログ記事リストページへのリンク、学年と学年アイコンが表示されるようにしてください。

7.文字サイズ：

書いた人の学年によって、文字のサイズを違えてください。

• 1・2年生が書いたら、大サイズの文字
• 3・4年生が書いたら、中サイズの文字
• 5・6年生が書いたら、小サイズの文字

にするということです。

<div class="文字サイズ">
  見出し
  本文
  ボタン
</div>

という構造になっています。CSSで、文字サイズを制御します。

• 1・2年生は <div class="fontS">
• 3・4年生は <div class="fontM">
• 5・6年生は <div class="fontL">

になるよう、MTタグを用いて、class名を変更させる方法を考えてみてください。

フォントサイズ制御専用のCSSを用意しました。詳しくは http://kiasma.jp/20080621/css/typography.css をご覧ください。

各学年（各ユーザ）に所属する記事を降順表示させてください。

1.グローバルナビゲーションA：

現在"いる"ページをon表示させてください。<li class="here">になれば、下地がピンクになります。

＊ヒント：<li>にするか、<li class="here">にするかは、変数と分岐を用いることで可能になります。なお、IEの仕様ゆえ、<ul><li>部分の改行にヘンな隙間が入ります。ですので、改行を<!-- -->でコメントアウトしています。ややこしくなりそうでしたら、IE以外のブラウザで課題にチャレンジしていただけたらと存じます。

2.閲覧している学年に所属する記事のリスト：

閲覧している学年に所属する記事を降順で最大5件、リスト表示させてください。

<li class="here">
  <a href="＊＊＊"><span class="arrow">5年生</span></a>
  <ul class="child">
    <li><a href="＊＊＊"><span class="arrow">運動会に向けて</span></a></li>
    <li><a href="＊＊＊"><span class="arrow">演奏しました</span></a></li>
  </ul>
</li>

と、<li class="here">のなかに、<ul class="child">～</ul>を入れ子で作成してください。（改行コードをコメントアウトしないとIEではヘンな隙間ができますのでご注意ください。）

3.大見出し：

学年（ユーザ名）を表示させてください。

4.見出し：

ブログ記事タイトルを表示させてください。

5.本文：

ブログ記事の本文を表示させてください。

6.ボタン：

パーマリンクを貼ってください。

7.本文の下：

日付、所属カテゴリーとそのブログ記事リストページへのリンク、学年と学年アイコンが表示されるようにしてください。

8.文字サイズ：

書いた人の学年によって、文字のサイズを違えてください。

• 1・2年生が書いたら、大サイズの文字
• 3・4年生が書いたら、中サイズの文字
• 5・6年生が書いたら、小サイズの文字

にするということです。

<div class="文字サイズ">
  見出し
  本文
  ボタン
</div>

という構造になっています。CSSで、文字サイズを制御します。

• 1・2年生は <div class="fontS">
• 3・4年生は <div class="fontM">
• 5・6年生は <div class="fontL">

になるよう、MTタグを用いて、class名を変更させる方法を考えてみてください。

フォントサイズ制御専用のCSSを用意しました。詳しくは http://kiasma.jp/20080621/css/typography.css をご覧ください。

ブログ記事単体を表示させてください。

1.グローバルナビゲーションA：

現在"いる"ページをon表示させてください。<li class="here">になれば、下地がピンクになります。

＊ヒント：<li>にするか、<li class="here">にするかは、変数と分岐を用いることで可能になります。なお、IEの仕様ゆえ、<ul><li>部分の改行にヘンな隙間が入ります。ですので、改行を<!-- -->でコメントアウトしています。ややこしくなりそうでしたら、IE以外のブラウザで課題にチャレンジしていただけたらと存じます。

2.閲覧している学年に所属する記事のリストとon表示：

閲覧している学年に所属する記事を降順で最大5件、リスト表示させた上、現在"いる"ページをon表示させてください。<ul class="child">のなかの<li class="here">は濃い目の水色になります。

<li class="here">
  <a href="＊＊＊"><span class="arrow">5年生</span></a>
  <ul class="child">
    <li class="here"><a href="＊＊＊"><span class="arrow">運動会に向けて</span></a></li>
    <li><a href="＊＊＊"><span class="arrow">演奏しました</span></a></li>
  </ul>
</li>

と、<li class="here">のなかに、<ul class="child">～</ul>を入れ子で作成してください。さらに<ul class="child"><li class="here">～</ul>としてください。（改行コードをコメントアウトしないとIEではヘンな隙間ができますのでご注意ください。）

3.大見出し：

学年（ユーザ名）を表示させてください。

4.見出し：

ブログ記事タイトルを表示させてください。

5.本文：

ブログ記事の本文を表示させてください。

6.ボタン：

パーマリンクを貼ってください。

7.文字サイズ：

書いた人の学年によって、文字のサイズを違えてください。

• 1・2年生が書いたら、大サイズの文字
• 3・4年生が書いたら、中サイズの文字
• 5・6年生が書いたら、小サイズの文字

にするということです。

<div class="文字サイズ">
  見出し
  本文
  ボタン
</div>

という構造になっています。CSSで、文字サイズを制御します。

• 1・2年生は <div class="fontS">
• 3・4年生は <div class="fontM">
• 5・6年生は <div class="fontL">

になるよう、MTタグを用いて、class名を変更させる方法を考えてみてください。

フォントサイズ制御専用のCSSを用意しました。詳しくは http://kiasma.jp/20080621/css/typography.css をご覧ください。

1.大見出し：

サイトマップ用のインデックステンプレートに、直書きでオーケーです。

2.見出し（学年(がくねん)ごとのニュース）：

各学年の扉ページへのリンクをリスト表示させてください。

3.見出し（行事(ぎょうじ)ごとのニュース）：

各行事の扉ページへのリンクをリスト表示させてください。

4.見出し（お知(し)らせ）：

各ウェブページへのリンクをリスト表示させてください。

5.インデックステンプレートで作ったHTMLファイルのリスト：

サイトマップ用のインデックステンプレートに、直書きでオーケーです。