HomeArchive

2005/10/13

この記事へのリンク エージェント型ナビゲーションサイト

現状のWEBと次世代WEB (web2.0) の比較、およびコンテンツプロバイダ系企業の事業移行提案 : iandeth.
 TrackBackしてもらったこの記事(パワーポイント)を読んで、2000年5月に書いた企画書を思い出したのでアップしてみます。
 こちらの記事では人手によってセレクトされた情報サイトを提案されているので、正確には自分が考えたような自動ナビゲーションサービスとは違います。でも、自動か手動かはさておき、今後ネット上では、溢れる情報からユーザーが必要とする情報へのナビゲーション/マッチングがますます必要になるだろうというのは、はてなブックマークなどのソーシャルブックマークの人気などを見ていると感じるので、近いものだと思います。
 このプレゼンテーション資料はビジュアルがわかりやすくていいですね。あとフォントのこだわりも。MSゴシックやMS明朝だけだと様にならないですよ!

 自分が書いた企画書は、固有名詞の古さ、利益の出し方の大雑把さなどは2000年に書いたものだからってことで見逃して欲しいんですが、これを書いた時にどうすればいいのかわからなかったのが技術的な面。
 でも、改めて読み直してみると、今なら既存の技術の組み合わせでできそうとは思わせます。特にキーワードに関しては、キーワードの登録は面倒かなあと思っていたんですけど、はてなダイアリーのように自分が普段からブログに書いた文章からキーワードをピックアップして支援するなどの機能もあれば、いけるのかなという気はしてます。
 文章を書くのも面倒だというのなら、ソーシャルブックマークでクリップした情報から、この人はどういった趣味の傾向の持ち主か?というのを判断し、自動的にその人の趣味志向をデータベース化していくというのも考えられます。
 サイトのイメージとしては、AmazonレコメンドがくっついたGoogleニュースという感じですかね。

―――――――――――――――――――――――――
●企画意図
 現在、インターネット上の情報サイトが続々と立ち上がっているが、その中でも、漫画・アニメーション・ゲームファン向けの情報サイトは、ファンの情報への欲求が強いため、特に需要が高い。そのため、『MANGA ZOO』『キャラアニドットコム』など大規模なプロジェクトのサイトが増えてきている。しかし、パソコン業界における『PC WATCH』のような定番サイトといえるようなものはないのが現状だ。そこで、定番となるファン向け情報サイトを企画する。

●企画内容
 メールマガジンや情報サイトが読まれなくなる原因の一つとして「情報が多すぎる」ということが挙げられる。情報発信側は、「多ければ多いほどいいだろう」と考えがちだが、個人の趣味嗜好に合わない情報ばかりでは、情報にゴミが多い(S/N比が低い)と思われてしまう。逆に各人の趣味にあった情報が提供されれば、その情報サイトのS/N比は低くなる。そこで、ユーザーの趣味を最初に登録してもらい、その趣味情報を元に膨大な情報を選別して、ユーザーに配信すれば、ユーザーにとって情報の質が上がったことになるだろう。情報のナビゲーションを、ユーザー任せにするのではなく、こちらから積極的に誘導するのだ。
 簡単にいえば、ぴあのように膨大な情報量を持ち、ユーザーの登録情報でナビゲートして、東京ウォーカーのように選別された情報を提供する。通常、情報サイトというのは、まんべんなく情報を集めるので、個性が出にくいが、サイトの個性はユーザーによって決まるのだ。
 ここまで複雑な仕組みを使って何をするか? それは、趣味嗜好などきめ細かい情報が詰まった個人情報を集めることだ。ここまで細かい個人情報があれば、商品が狙うユーザーをピンポイントで狙った宣伝やアンケート、作品を発売する前の調査、どんなクリエイターが今人気があるかの調査など様々な利用方法が考えられる。

●内容構成案
・ユーザーに、最初にキーワードとなる単語をいれてもらう。具体的には、好きな漫画やアニメ、ゲームの名前などを入力。そして、データベースによって、アニメやゲームのメインスタッフの情報も同時にそのユーザーのキーワードとして登録される。
・インターネットなのだから、速報性は重要だ。細かいニュースレベルの情報は随時更新。ニュースには、キーワードが登録されており、更新されると、会員の個人情報を検索して、ニュースと同じキーワードを登録している会員に、ニュース更新のことをメールで告知する。

●ユーザーの利用例
[高校生A君の場合]
 テレビ東京で放映されているアニメ『無限のリヴァイアス』は、登場人物たちの青春群像が面白く、最近欠かさず見ている。このアニメの詳細な情報が知りたくなったので、さっそくいつものサイトにアクセスしてみた。まず、自分のプロフィールに好きな作品として「リヴァイアス」を登録してみる。すると、『無限のリヴァイアス』は既にデータベースに登録されていたので、メインスタッフの情報が表示された。スタッフの名前をクリックすると、データベースとリンクして、過去の参加作品などの詳しい情報がわかる。キャラデザの「平井久司」が過去に何をやっていたか知りたかったのだが、このデータベースで過去に小説の挿し絵やアニメ『ガルキーバ』のキャラデザをしていたことがわかった。
 数日すると、『無限のリヴァイアス』のメイン脚本家である黒田洋介が次回作品を準備しているとの情報がメールで配信された。そのメールでは、僕が好きな漫画家・内藤泰弘がゲームのキャラデザするという情報も一緒に配信されてきた。さっそくサイトにアクセスしてみると、黒田洋介の次回作品へのコメントなど詳細な記事が確認できた。今度は、ファンタジーモノで、またリヴァイアスのような青春モノになるらしい。楽しみだ。内藤泰弘がキャラデザするのはPS2用の大作RPGだった。まだPS2は買わなくてもいいかなと思っていたが、絵を見ていたら、買いたくなった。
 そして、自分と好きな作品の趣味がよく似ている人がいるとの情報がメールできた。さっそく、その人の公開プロフィールを見てみたが、かなり趣味が合いそうだ。とりあえず一回メールを出してみよう。

●開始時期
早ければ早いほどよし。

●売り上げ見込み
バナー広告と、企業への情報提供が主な収入源となるだろう。

2005/06/01

この記事へのリンク 海外のドメイン登録サービスを使う時は気をつけよう

myblogが停止中。その理由は…:Loopus Laboratory
 6/1になってから、ブログポータルサイトのMyblog japanが停止しているそうです。理由はドメイン更新ミス。
 これを見て、海外のドメイン登録サービスを使うと、更新通知のメールが英語でくるから見逃しやすいというのを実感しました。怖い〜。

 自分は、英語だけのメールはSPAMとして処理するようにしているんですが、海外のサービスに登録した時や、海外で通販した時などはその時だけ、その処理をなくしてます。で、その後、そのサービスが使うメールアドレスがわかるので別扱いすると。ただ、メールサービスの都合上、あまりいろいろ登録はできないので、よほど重要なものしかいれませんが。

2004/07/21

この記事へのリンク 画像の横にテキストを回り込みさせる

 知っている人には当たり前なんですが、WeblogでHTMLタグを知らない人も増えてきているでしょうからメモ的に。

 画像を左や右に置いて、その余っている側に文字を回り込ませたい場合、imgタグに「valign="top" align="right"」(これは画像を右側に)という属性をつければokです。
 また、そのままだと隙間なしで文字が配置されますが、「vspace="n" hspace="n"」でマージンを指定できます。

 そして、意外と知られてなさそうなのがこれ。記事の下の方に回り込みを許可した画像を配置すると、画像がブロックからはみ出してしまうことがあります。また、回り込みを許可した画像を連続して配置すると、位置がどんどんずれていくことがあります。
 そんな時は「<br clear=all>」というタグを入れれば、そこで回り込みが解除されます。

補足:
スタイルシートを使って下記の表現にする方がスマートです。ただ、下記の方法を使った場合、回り込むテキストが画像の下端までない時に、回り込みが解除されない現象がたまにありました。これは、imgタグに直接指定せず、スタイルシートで定義した場合に発生するようです。その時は、「<br clear=all>」を使うと対処できたため、「<br clear=all>」ばかり使うようになってました。

画像回り込み <img src="xxxx" alt="xxx" style="float:right; (margin:5px;border:0px;)">
※この場合は右側、左側にするのならleftで
画像回り込み解除 <br style="clear:both">

なおXHTMLドキュメントの場合、imgやbrのような空要素のタグは「<br />」と表記します。

2004/06/22

この記事へのリンク IEのテキスト編集領域をエディタで編集

 WeblogやWikiなどテキストをWebブラウザ上から編集する機会が増えてきましたが、長文だと作業効率を良くするため、テキストをエディタにコピーして編集している人も多いでしょう。自分はかなりエディタからコピー&ペーストすることが多いです。

AreaEditor - 特徴
AreaEditorリリース - IburiTimes
 そんなエディタ派の人間に便利なソフトがこの「AreaEditor」(Windows用)。
 IEやIEコンポーネントを使ったブラウザが対象で、inputやtextAreaなどのテキスト編集領域上で右クリックメニューから、エディタを起動します。編集テキストをセーブしたり、エディタを終了すると、テキスト編集領域にテキストを出力。編集領域ですでに入力済みのテキストもエディタにコピーされるので、書いている途中で、長文になりそうだからエディタを使いたいと思った時も問題なし。
 既存のテキストファイルをテキスト編集領域にコピーすることもできます。Movable Typeのテンプレートをいじる時に、いつもエディタからコピー&ペーストしていたので、かなり便利に使えそう。
 需要がありそうなのに、今までなかったソフトだと思いました。

●関連
textarea - textareaとテキストエディタ連携
 この辺りの情報をまとめたWiki。

ishinao.net/mylog - extedit - Webブラウザの入力フォームで好きなエディタを使う
 こちらはJavaスクリプトを使うものなんですが、タブブラウザだとロックされてしまうそうです。

ゑBLOG: テキストエリアを外部編集

Going My Way: Firefox利用時にTextareaを任意のエディターで開く方法

2004/02/04

この記事へのリンク ネットショップのサイトデザイン

【楽天市場】年間MVP〜ショップ・オブ・ザ・イヤー〜
 楽天のベストショップを決めるコンテストの話題から、楽天にはチラシ系ウェブが多いのではという話に。
eNatural.org: 楽天、ベストショップを決める「ショップ・オブ・ザ・イヤー2003」結果発表
@ parallel minds: 楽天:ショップオブザイヤー2003
berriebook : brblog > Wellinton's blog : チラシという世界
eNatural.org: チラシ系ウェブ
@ parallel minds: チラシを要求するインターフェイス

 1位のいーでじは、扱っているのがPCやAV機器なんで、最初に購入するものを決めている層が多く、価格が安くて、サポートがしっかりしているという評判があれば、サイトのデザインはあんまり気にされないんだろうと思いました。
 3位の【楽天市場】アンジェ(インテリア雑貨)は楽天の中でも割と落ち着いた方な感じですし。

 自分の経験でいうと、以前headphone shop AIRYというヘッドフォンを中心としたAV機器を扱う個人輸入ショップである品を購入したんですが、サイトだけ見ると、わ、しょぼーと思うことでしょう。でも、ここは個人輸入なので普通に国内で買うより安いし、以前使った人から気持ちよく購入できたよと言われて、購入する気になりました。サイトもデザインはしょぼいですけど、説明の文章などからは機器に対する熱気を感じましたし。
 実際にサポートが良かったんで、満足したんですが、こういう口コミが広がりやすいのもネットショップならではという感じが。
 なお、こちらのショップはSennheiserのHDシリーズは正規代理店より安く買えるのでお勧めです。

 デザインの観点とは別にインターフェイスの問題で、いくらデザインが良くても、リンクしても目的の情報があるページをすぐに表示できないサイトは、今後不便がられて遠慮されがちになるのではないかと予測してます。これは、別にネットショップに限らない話ですが。
 掲示板やサイトで情報交換する時や、サーチエンジンで検索した時、そのリンクでちゃんと情報が提示できないページはよくないという印象を受けますから、その印象が積もり重なると、「あのサイトは不便」となってしまうだろうということです。

2003/12/24

この記事へのリンク Googleアドセンス入れてみました

Google アドセンス
 個人でもできるという話なので、申し込んでみたら受理されたので入れてみました。支払いをもらうためには税務情報を出さないといけないそうですが、サイトを見るとアメリカの税務情報しか受け付けてないような…。支払いが米ドルの関係もあるんでしょうけど、これは今後日本のに変わるんですかね。
Google アドセンス - よくある質問 : お支払い
 日本円での支払いも考えているとのこと。税務情報に関しては、アメリカのことしか書いてありませんでしたが。

 個人的には、サイトにゴテゴテとバナーとかいろいろついているのは好きではないんですが、テキストだけならうるさくないし、空いている場所もあるので入れてみました。
 トップページではAV機器関係の広告が多いのが面白いです。プロジェクター絡みのネタ多し。SonyShop C-TECのソニーの学習機能付きリモコンRM-VL1000U紹介ページがきた時には笑いました。自分でRM-VL700Uを使っているもので。

Google AdSense とは? :: SEO / SEM-R
 アドセンスの基本的な解説。

AdSense - Google アドセンス情報 日本語非公式版
 アドセンス情報をまとめたWiki。

Google AdSenseのひみつ : ウェブログ@ことのは
 アドセンスに関連するページがまとめてあります。

[N]: Google AdSenseとblogの親和性
 アドセンスのクリック率の話など。

アドセンス・シミュレータ
 URLを入れるとどんな広告が表示されるのかわかります。

12/25追記
Airblog: Adsenseからのお断り状

個人サイト、チャットサイト: 現在、弊社では、個人サイトまたはチャット ウェブ サイトには、AdSense プログラムを提供しておりません。このようなページには関連性のある広告を掲載できないため、弊社の広告主様にとって効果が低いと考えております。
 といって断られたそうです。やはり基本的には個人サイトに対応してない模様。Movable Typeのサイトが登録されていることが多いのは、googleランクが高いからな気がしてきました。

アドセンスでアマゾンウェブサービスを
 googleのロボットが巡回にきていないページは英語によるチャリティのページが表示されますが、そこをAmazonに変えるアフィリエイト研究室によるサービス。導入してみたんですが、広告のジャンルはコミック(ノード番号:466280)にしてみました。コンピュータ書籍(ノード番号:466298)もよさそう。

12/26追記

INTERNET Watch : グーグル、テキスト広告を表示する「AdSense」を一般サイト向けに提供
 個人向けサービスについて2004/1/14に日本円での支払いを含めて発表を行うとのこと。

【国内】Google AdSense-アドセンスの「個人ページ不可」の「個人」の範囲について [ AffiliatePortal.net ]
 googleのいう「個人ページ」というのは、自分自身や家族の紹介をしているページのことで、ターゲットが絞られたテキストベースのコンテンツがあるサイトならOKと言うことだそうです。
【国内】アドセンスの審査にパスしない問題と、1月14日に何らかの「発表」があるとのニュースについて [ AffiliatePortal.net ]

Google アドセンス - プログラム ポリシー

原則として、AdSense プログラムは個人ページやチャット サイトではご利用いただけません。ただし、対象が絞られたテキストベースのコンテンツが含まれるサイトや、製品、またはサービスを提供するサイトは、参加していただける場合もあります。
 ポリシーのところに書いてありました…。

Goodpic: ブログは金になる?Google AdSense広告のコツ
 前にも紹介しましたがアメリカでの話。

aranxp: Google アドセンスに怒られた!
 自分でクリックしていたら、googleさんからお怒りのメールがきたそうです。

2003/12/23

この記事へのリンク font-familyに指定する英語フォント

 コジャレなサイトのためのフォント選択を小ネタのつもりで書いたら、意外と反応があったので、ちょっとまとめてみます。
はてなダイアリー - おまえにハートブレイク☆オーバードライブ : コジャレ vs ヤンキー
はてなダイアリー - アクティブにいきたいねと思いつつ日記 : コジャレサイトにな(略)そのさん(フォントの話)

 ウチのサイトでは、「Verdana」を基本に、「Arial Black」(1バイト文字のみで強調したい場合)、「Century Gothic」(メニュー部分)、「Times New Roman」(日付表示)(※名前に空白が入るフォントをスタイルシートで指定する時は""で囲む。ただし、一つのみの場合はいらない)を使い分けているんですが、Century Gothicはファンシーですか! Futuraみたいに曲線が少ないから、かっこいい方になると今まで思ってました…。

全標準フォント一覧 / もうパンツはかない
 こちらでOS XとWindows XPで標準搭載されているフォントがわかります。

 Windows、Macintosh、どちらでもオッケーな英語フォントをちょっとならべてみました。上が普通、下はfont-size:largeです。ただし、もともと本文はfont-size:95%になっています。文字サイズ標準でfont-size:largeになると、どのフォントも太めになり、見た目がかなり変わるので、その辺を意識して使うとデザインしやすいです。

■Verdana
1234567890 ABCDEFabcdef あいうえお
1234567890 ABCDEFabcdef あいうえお
 「Verdana」がよく使われる理由は下のページを参照のこと。文字サイズが小さい時にVerdanaは利点が出てきます。
HotWired Japan : Webmonkey : graphics_fonts : ウェブ・タイポグラフィー・チュートリアル――第2日(第1回)

■Arial
1234567890 ABCDEFabcdef あいうえお
1234567890 ABCDEFabcdef あいうえお
 「Verdana」に似ているけど詰まり気味。

■Arial Black
1234567890 ABCDEFabcdef あいうえお
1234567890 ABCDEFabcdef あいうえお
 これにBold指定をかけるとちょっとうるさい。

■Century Gothic
1234567890 ABCDEFabcdef あいうえお
1234567890 ABCDEFabcdef あいうえお
1234567890 ABCDEFabcdef あいうえお
1234567890 ABCDEFabcdef あいうえお

 細くてちょっと頼りないのでBold指定をかけてみました。Bold指定かけた方が幅が狭いというのが不思議。

■Times New Roman
1234567890 ABCDEFabcdef あいうえお
1234567890 ABCDEFabcdef あいうえお
1234567890 ABCDEFabcdef あいうえお
1234567890 ABCDEFabcdef あいうえお

 Operaだと日本語が明朝に。

■Comic Sans MS
1234567890 ABCDEFabcdef あいうえお
1234567890 ABCDEFabcdef あいうえお
 これこそファンシーなのではないかと!

■Lucida Sans Unicode
1234567890 ABCDEFabcdef あいうえお
1234567890 ABCDEFabcdef あいうえお
 これはWindowsのみのもの。IEだと日本語本文が強制的にMS UI Gothicに。

■Trebuchet MS
1234567890 ABCDEFabcdef あいうえお
1234567890 ABCDEFabcdef あいうえお
1234567890 ABCDEFabcdef あいうえお
1234567890 ABCDEFabcdef あいうえお

 これもWindowsのみのもの。TypePadのデフォルトスタイルで指定されているフォントです。

 CSSはソリッドなデザインに強いから、どうしてもコジャレ系になっちゃって、栗原さんの言うようなヤンキー臭いデザインは難しそうです。とりあえず紫色を多用すると、ヤンキー(というか族臭い)のではないでしょうか。あと文字は太めの明朝とか。

2003/11/23

この記事へのリンク サイトでのリンクの挙動/リンク下線

@ parallel minds: リンクの意味と挙動(内部リンク・外部リンク)
 これは結構悩む問題ですよね。とりあえず、記事の本文中のリンクは大体外部だろうと思ってくれるだろうというのを前提にしちゃってます。
 サイドバーのリンクは外部と内部で地の色をわけているんですが、これも初めて見た人にはわからないだろうから、aタグのtitle属性に「記事を読む」などのコメントをつけて、マウスロールオーバーでその文字が表示されるという対策を追加してみました。

@ parallel minds: 日本語フォントのリンク下線
 CSSのborder-bottomは問題点があって、描画が重くなるんですよ。以前、border-bottomでリンクを点線にしていたら、Macintoshの人から重かったです、と言われましたし、単なる線でも重くなる傾向があります。

Passion For The Future: Webデザイン:ナビゲーションと目の動き
 ちょうど関連してそうなのでリンクを。

2003/08/13

この記事へのリンク CSSでタブを実現

CSS Tabs | unraveled [Chitatopops: CSSでタブより]
 TypePadをいじった時に管理画面のタブはCSSでやっているぽいなー、どうやっているんだろう?と気になっていたんですが、やはりCSSでできるようです。

たつをのChangeLog 2003-08-15 CSS でタブきりかえ
CSS と JavaScript でタブ切り替え
 最初に紹介したのは、paddingのサイズを決め打ちしているので、文字サイズを変更すると崩れてしまいますが、TABLEを補助に使って、それを回避した方法。

2003/08/12

この記事へのリンク なぜHTMLは普及したのか?

semblog-dev: RSSとHTML
 なぜHTMLのようなマークアップ言語がここまで普及したのか?という話から、RSSの規格は人間が理解しやすいように(書けるように)する必要ないのではという話。
 RSSに関しては、プログラムに任せればよくて、別に人間が理解できなくてもいいんじゃないかと思う程度で、そんなに意見はないんですが、興味を持ったのが、なぜHTMLが普及したかという疑問です。確かに不思議。
 リンク先でも書かれてますが、見た目の変化をすぐ確認できるというのは魅力の一つでしょうね。で、HTMLは規格の性質上、見た目を完全にコントロールできないので、ページデザインツールの利点が少なく、HTML手書きが生き残った…という仮説を考えてみました。これが発展して、ちょっと変更するだけで見た目が大幅に変えられるCSSの魅力に繋がる気がします。
 TeXの場合、DTPツールは見た目と出力結果を完全にコントロールできるWYSIWYGのため、DTPツールが普及し、TeXは一部でしか使われないようになったのでは。あとTeXはコンパイルしないといけないのが面倒だったというのもありますね。あれがなくて、HTMLみたいにリアルタイムで確認できるビューアーがあったら、また違ったかも。

HomeArchive