0032)簡単！サイト制作指南塾
簡単！サイト制作指南塾（第11回）
おひさしぶりです。電脳卸絵師・中村です。
先日（7/31）、商品リンクタグ仕入ページに機能追加をさせていただきました。
今回はその内容についてご紹介させていただきたいと思います。
【告知記事】商品リンクタグ仕入ページに機能追加を行いました
http://blog.d-064.com/news/2006/07/post_51.html
一言でご説明しますと「商品購入部分に直リンク」できる機能です。
情報満載で縦長になりがちなストアミックスの商品ページ。
「最も重要な『商品購入ボタン』をお客様がなかなか見つけられないのではないか」というご意見を販売店様からいただいておりました。
今回追加された機能をご利用いただくことで、スムーズな流れで商品をご紹介いただくことが可能になります。
実はこの機能、かなり以前からご要望があったのですが、ひとつだけ懸念がありました。
それは、お客様が販売店様のサイトでリンクをクリックしたとき、どこに飛んできたのか分からなくなってしまう（販売店様のサイト内と混同してしまう）可能性があるということです。
通常のリンクとは異なりストアミックスのヘッダーナビゲーションが見えないためです。
また、直接商品購入部分に誘導しますので、ストアミックスの各ショップ様が掲載している商品説明をお客様がお読みにならない可能性がございます。これは場合によっては非常にマイナスです。
今回追加された機能は地味ながらとても便利です。
が、この機能を使ってお客様を誘導する際には、より一層ご説明を丁寧に行ない、お客様に納得してお買い物いただけるような工夫をお願いいたします。
簡単！サイト制作指南塾（第10回）
おひさしぶりです。電脳卸絵師・中村です。
今回はMovableTypeにおけるスタイルシート（CSS）の便利な活用法をご紹介したいと思います。
MovableTypeでブログサイトを構築すると、簡単に商品紹介ページを増やしていくことができますよね。そしてその場合、ほとんどの人はカテゴリ機能を使ってコンテンツを分類していることと思います。
食べ物カテゴリ、健康食品カテゴリ、ファッションカテゴリ、インテリアカテゴリ、雑貨カテゴリ、電化製品カテゴリ。。。普通に作っていると、全部同じデザインになります。同じテンプレートだから当然ですよね。
。。。
それでもやっぱりカテゴリごとにデザインを変えたい！
とは思いませんか？
実は「簡単に」できるんです。
１．エントリにカテゴリIDを追加する
まず、エントリのテンプレートの<body>タグを、下記のように変更します。
<body id="cat<MTCategoryID>">
<MTCategoryID>は、エントリが属しているカテゴリの「ID」を出力するテンプレート・タグです。これで、カテゴリIDがエントリの<body>タグに振られるようになりました。
※数字だけだとまずい場合があるので便宜上「cat」を頭に追加しています。
２．CSSでデザインを設定する
次に、カテゴリごとのデザインをCSSで設定しましょう。
ここでは仮に「食べ物」カテゴリ（IDは10）の見出しの色を赤に、「インテリア」カテゴリ（IDは20）の見出しの色は青にすることを考えてみます。
やり方は簡単。
通常のCSS指定だと、
h1 {
color:#F00;
}
と書くところを、
body#cat10 h1 {
color:#FF0000;
}
body#cat20 h1 {
color:#0000FF;
}
と書くだけです。
これだけで、<body>タグにカテゴリID（cat10またはcat20）が振られたエントリの見出しの色が変わります。
ポイントはbody#cat20でカテゴリを判別しているところ。これさえしておけば、見出しの色だけでなく、背景画像やレイアウト自体も変更可能です。ぜひご活用くださいませ。
簡単！サイト制作指南塾（第９回）
おひさしぶりです。電脳卸絵師・中村です。
販売店会員の皆様は、普段どのようにしてサイトのデザインをされているでしょうか？
１から作る方も多いと思いますが、デザインを考える作業は時間がかかりますし、なかなか骨の折れる作業ですよね。
効率的に済ませよう！とお考えの方は、他のサイトを参考にすることがあるかと思います。
が、頭の中に描かれたイメージどおりのサイトがすぐに見つかるとは限りません。場合によっては延々探し続けることになるでしょう…。
そんな時はテンプレートです。
（株）グロービスが運営する「テンプレートモンスター」では、一流デザイナーの手によって作られたサイトのデザインテンプレートがかなり格安で提供されています。
テンプレートモンスター ジャパン
http://www.templatemonster.jp/
ひとつひとつ値段が違うのですが、平均すると7,000円前後。
WEBデザイナーは商売上がったりですｗ
また、見るだけでも楽しく、参考になりますね。
さらに、上記サイトに掲載されているテンプレートは有料ですが、同じく（株）グロービスが運営する「Free Templates Online JP」では、なんと無料のテンプレートを配布しています。
Free Templates Online JP
http://www.freetemplatesonline.jp/
品質は「テンプレートモンスター」で提供されているものに比べるとやや見劣りしますが、実用上は問題ないレベルです。
デザインの種類も19カテゴリーが用意されていて、無料とは思えないほどの充実ぶりです。
デザインにこだわりを持っておられる方もそうでない方も、ぜひ一度参考にしてみてはいかがでしょうか？
簡単！サイト制作指南塾（第８回）
絵師・中村です。
今回はSEOスパムについて考えてみたいと思います。
結論から言うと、SEOスパム行為は得策ではありません。
検索エンジンのスパムフィルタリングは日々強化されています。仮に今現在スパムだと判別されていない不正技術を用いて上位表示されたとしても、いつ検索対象から除外されるかは全くわからないわけです。
除外された時、あなたはまた別の技術を研究して１からスパムを施すのでしょうか？それは一部の熱心な研究者を除いては非効率的な作業です。結果的にSEOスパムは、そのような大きなリスクを背負い続けなければいけないのです。
※ちなみにスパム（SPAM）の意味は諸説ありますが、現在では「独善的な宣伝メッセージ（Self Promotional Advertising Messages）」とされるのが一般的。何事も商売は我を出しすぎてはいけないということのようです。
代表的な検索エンジンであるGoogleとYahooのSEOスパムに対する見解は下記から見ることが出来ます。
Web マスターのための Google 情報
http://www.google.co.jp/webmasters/guidelines.html
Yahoo! ヘルプ - サイト管理者向け（「検索エンジンスパム」とは何のことですか？）
http://help.yahoo.co.jp/help/jp/search/indexing/indexing-18.html
かいつまむと、サーチエンジンのために作られているページは駄目だということです。
少し古い事例（今年2月）になりますが、BMWドイツ本社のサイトがgoogleから消されるという事件がありました。BMWが使っていたのは「Javascriptリダイレクティング」と呼ばれる典型的なSEOスパムです。
<html>
<head>
<script language="javascript">
location="ユーザに見せるURL";
</script>
</head>
<body>
検索エンジン向けのテキスト
</body>
</html>
ページは大量にキーワードが書いてあるけれど、実際にユーザが見るのは、勝手にJavascriptでリンクを飛ばされた先のページである、というものです。このような行為を考える時間を割いた挙句に検索対象から外されてしまうというのは本末転倒です。
また、TOPページを全面Flashにしているデザイン重視なサイトでよく使われている手法に下記のようなものがあります。
<html>
<head>
<body>
<script language="javascript">
document.write("Flashコンテンツを貼り付け");
</script>
<noscript>
検索エンジン向け（＆Javascriptなしユーザ用）のテキスト
</noscript>
</body>
</html>
一見セーフのようにも見えますが、やはりリスキーと言わざるを得ません。
興味がおありであっても手を出すのは実験程度にしておいて、メインのサイトでは控えるようにしましょう。
HTML（またはXHTML）による論理的な記述と、オリジナルなコンテンツを多く作成し続けることが最大のリスクヘッジになり、長期的・恒久的に効果を生み続けるということを忘れないようにしてください。
簡単！サイト制作指南塾（第７回）
こんにちは！３月とはいえまだまだ寒く、なかなか布団から出られない絵師・中村です。
今回は、サイト制作から文書作成まで幅広く活躍する便利なツールをご紹介します！
QTClip
http://www2k.biglobe.ne.jp/~araken/qtclip.htm
※Windows用です。Macの方、ごめんなさい。
QTClipは、テキスト形式のクリップボード履歴を残す機能を持っています。
つまり、コピーしたテキストをずっと憶えていて、いつでも呼び出してくれるのです！
例えば、
- 電脳卸で商品を探し、HTMLタグを選択＆コピーした。
- そのあとニュースサイトに行き、気になる記事を見つけたのでそのURLをコピーした。
- さらに、ついでにその記事でブログを書いて、商品もそこで紹介しよう！と思ったので記事の一部をコピーした。
この場合、普通だと自分のブログを書く際にもう一度電脳卸の商品仕入れページを見に行かなくてはいけません。はっきり言って面倒ですよね。でも、QTClipがあればそんなことをする必要が無くなります。
ホットキーでQTClipを呼び出し、履歴からHTMLタグを選ぶだけで済みます。
ホットキー設定（ポップアップメニューを表示するホットキー）とスタートアップへの登録（起動時に常駐するように）を忘れずに。慣れるまでは難しいかもしれませんが、使い方自体は非常にシンプルです。これでコピペ関係のトラブルから開放されます。コーディングや文書編集時の習慣が変わるかもしれませんよ！
簡単！サイト制作指南塾（第６回）
こんにちは！季節もギャグも寒いのが大好きな絵師・中村です。
今回はスタイルシート（CSS）を使った２段組（このブログのようなレイアウト）の方法について解説したいと思います。もちろんテーブルを使えば２段組は簡単に実現できますが、スタイルシートを使うのが一歩進んだやり方。検索エンジン対策的にも有利です。
結論から言うと、ブログを使うorソースをインスパイアするのが手っ取り早いです。が、方法自体はとても簡単で、かつ応用が利くテクニックなので、ぜひマスターしていただきたいと思う次第なのです。
さて、スタイルシートを使った２段組の方法は、大別すると２通りあります。
■方法１
画面の幅を固定しない場合に使う方法です。リキッドレイアウトというやつです。
メインコンテンツの幅を指定しないことで、ウインドウサイズが変わっても、常に画面全体にコンテンツが広がるレイアウトが可能になります。
（１）サイドメニューをfloatプロパティを使って片方に寄せて配置します。幅はpx（ピクセル）または％で指定しておきましょう。
（２）メインコンテンツに、サイドメニューの幅分だけmarginを指定します。
ソースはこんな感じになります。
＜HTML＞
<div id="sideMenu">
〜サイドメニューの内容〜
</div>
<div id="mainContents">
〜メインコンテンツの内容〜
</div>
＜CSS＞
#sideMenu {
width:200px; /*幅は自由に設定可能*/
float:left; /*右に寄せたい場合はright*/
}
#mainContents {
margin-left:200px; /*幅・方向はsideMenuと同じに*/
}
■方法２
画面の幅を固定したい場合に用いる方法です。
（１）サイドメニューに幅を指定し、floatプロパティで片方に寄せます。
（２）メインコンテンツにも幅を指定し、サイドメニューの逆側に寄せます。
（３）このままだと２つの段がウインドウの両端にくっついてしまうので、左右の合計分の幅を指定した枠で、全体を囲います。
ソースはこんな感じになります。
＜HTML＞
<div id="container">
<div id="sideMenu">
〜サイドメニューの内容〜
</div>
<div id="mainContents">
〜メインコンテンツの内容〜
</div>
</div>
＜CSS＞
#container {
width:800px; /*sideMenuとmainContentsの合計値*/
}
#sideMenu {
width:200px;
float:left;
}
#mainContents {
width:600px;
float:right;
}
この２つの方法をマスターすれば、画面レイアウト全体のレイアウトだけでなく、いろいろな部分をテーブルを使わないでレイアウトすることができるようになります。
例えば、
みたいなことがテーブルを使わなくても可能になります。
慣れるまでは難しいですが、前回ご紹介したDeveloper toolなども活用して、ぜひ試していただきたいと思います！
簡単！サイト制作指南塾（第５回）
こんにちは！絵師・中村です。
今回は、MovableTypeをちょっとしたCMSツールに変身させる技をご
紹介したいと思います。
※MovableTypeについてはこちら→http://www.sixapart.jp/
さて早速ですが、今回取り上げるのはコチラです。
★CustomFields Plugin
http://www.movalog.com/plugins/wiki/CustomFields
「Installation Instructions」からダウンロードできます。
※$20.00 とか書いていますが無料です。
これは何かというと、MTのプラグインです。
そしてこのプラグインで何が出来るかというと、
「入力項目を自由に増やすことができる(・∀・)」
通常、MTで新規エントリーを作成する場合、
「エントリーの内容」「追記」「概要」
の３項目に文章を入力します。
日記を書くだけなら、これで問題ないでしょう。
しかし、例えば「商品情報を定型的に入力＆管理して、ショッピン
グサイト風のアフィリエイトサイトを作りたい！」と思った場合、
どうしますか？
このようなニーズに「CustomFields」はベストマッチします。
CustomFieldsをインストールすると、エントリー作成画面に自由に
項目を追加できるので「商品ID」や「商品名」などの項目をいくら
でもエントリーに加えることができるのです。
追加した入力情報は、テンプレートの方で
<MTEntryData field="項目名"><MTEntryDataFieldValue></MTEntryData>
と書けば反映されます。
勘のいい方ならお分かりかと思いますが、これが出来たら後は好き
に整形すればよいのです。商品情報欄のテンプレートを作成すれば
ショッピングサイトが簡単にできます。
あるいはFlashでDWSツールを作成して、エントリーごとに違うキー
ワードを放り込むようなサイトを作ってもよいかもしれませんね。
インストールは少しだけ面倒ですが、「CustomFields」で検索すれ
ば解説記事がすぐに見つかります。本来であればここで解説したい
のですが、長くなりますので割愛させていただきます。m(_ _)m
というわけで、一歩進んだMT活用法でした！
上級者向けですが、ぜひお試しください！
簡単！サイト制作指南塾（第４回）
こんにちは！絵師・中村です。今回は地味ですが凄いですよー。
とっておきの便利ツールをご紹介させていただきます。
さて皆様、サイト制作にはどのようなソフトをご使用でしょうか？
FrontPageやDreamWeaver、なかにはテキストエディタで勝負！という
方もおられるかもしれません。
しかし、どんなソフトで作っていても、いざブラウザで表示させて
みると「枠がずれている…」「なぜかスタイルシートが効かない…」
といったトラブルは発生してしまいますよね。
そこで超便利なツールがこれ！！
■Internet Explorer Developer Toolbar（英語です）
http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en
インストールすると、Internet Explorerのツールバーに
「Developer Toolbar」が追加されます（表示されない場合は
「表示」→「ツールバー」で「Developer Toolbar」にチェック）。
これで、Internet Explorerを使ってページをいろいろと分析する
ことができるようになります。
もともとプロ用ツールなので機能はかなりたくさんあるのですが、
僕がお勧めする機能はただ一つ！！
「テーブル、セル、画像、DIVを可視化」
ツールバーの「Outline」メニューから、いろんなアウトラインを
表示することができます。例えば、
「どこからがどのテーブルなのか分からないよ…」
「このテキストって本当にDIVタグで囲われてるの？」
「あのサイト、どんなテーブル構造になってるんだろう？」
といった悩み・疑問を即解決！だって一目瞭然なのですから。
他の機能はいろいろ調べてみてください。めっちゃ便利ですよ。
要するに、ブラウザが制作ソフトになってしまうのです。
※修正作業はできませんが。
ちなみにナウなFirefox使いには同様にこんなツールがあります。
■Web Developer 日本語版
http://www.infoaxia.com/tools/webdeveloper/
機能はInternet Explorerのものとほぼ同等です。
日本語なのでこちらの方が使いやすいかもしれませんね。
以上、今回は少々難易度が高めですが便利なツールをご紹介させて
いただきました！次回もお楽しみに！
簡単！サイト制作指南塾（第３回）
こんにちは！絵師・中村です。
今回はデザインの重要性について考えてみたいと思います。
さて、日々販売店様のサイトを拝見させて頂いていて思うのですが
単刀直入に申し上げて「デザインに注力していない」サイトが多い
ように感じます。
僕は一応絵師（WEBデザイナー）ですので、デザインにはそれなり
にウルサイのですｗ
もちろんアフィリエイトサイトにおいて、デザインが良ければ売れる
のかと言うと、必ずしもそうではありません。
カッコよくなくても、物は売れます。売れればOK。
しかし、カッコが良いに越したことはないというのもまた事実です。
具体的に、サイトのデザインがカッコいいと、次のような良い事が
あります。
（１）情報の信頼性が増す。
（２）印象が強まる（記憶に残りやすい）。
（３）モテる。
最も重要なのは、もちろん（１）ですよね！！ね？
信頼感が増すと、メッセージはよりストレートに伝わります。
当然、購買衝動にも影響があります。
では、カッコいいサイトってどうやって作れば良いのでしょうか？
手っ取り早いのはよそのサイトをパク…参考にすることですｗ
とはいえ、よそのカッコいいサイトを探すのは意外に一苦労。
特に普段デザインに興味のない方だとどうすればいいことやら。。
そこで！！そんなときに便利なサイトがココなのです。
【いけてるサイト ドットコム】
http://www.ikesai.com/
デザインがいけてるサイトをジャンル別に網羅してくれている
素晴らしいリンクサイトです。ここを活用して、
・ジャンルや書いてある内容はとりあえず気にしない。
・手当たり次第に沢山見てみる。
ということをしてみてください！
こんな綺麗なサイト作るのは無理だー、なんて考えなくていいです。
だって、僕も作れませんから（涙）
眺めながら、「自分が好きなサイトのイメージ」を固めましょう。
これが固まっていない人がほとんどなのではないでしょうか？
漠然と「青くてきれいな感じ…」とか「スタイリッシュな透明感…」
と思っていても、具体的に形にできなければ意味がありません。
「こんなサイトにしたい！」という目に見える目標を定めましょう。
ただしソックリのものを作ってはいけません！！！
雰囲気を真似る。これだけでガラっと印象が変わりますよ。
いろんなサイトを見て、参考にしてみてください。
ちなみに、WEB制作業界的にアダルトサイトはかなり最先端だって
ご存知ですか？写真に惑わされず、一度ゆっくり調べてみるのも
よいかもしれませんね。
というわけで今回はデザインに気を配る事をお勧めいたしました！
次回（12/16です）は便利な制作ツールを紹介します！では！
簡単！サイト制作指南塾（第２回）
こんにちは！「簡単！サイト制作指南塾」担当の絵師・中村です。
さて、今回は色の話です。
色選びはサイト制作の楽しみでもありますが、
闇雲に好きな色を使うだけではきれいな配色にはなりません。
ここで「きれいな配色・売れる配色とは？」について語りたいところ
ですが、残念ながらここではスペースが足りません。
そこで僕の代わりをしてくれるのがこれ！
ColorBlender
http://colorblender.com/
自動的にきれいな配色を教えてくれる便利ツールです。
画面左下にあるRGBスライダーを適当に動かしてみましょう。
動かすのと同時に、６つの色が変化します！
そして、どの瞬間を見てもそれなりに美しい！
気に入った組み合わせを選んであなたのサイトに適用しましょう。
いろいろいじってきれいな配色を探してみてください。
また、同じく簡単な方法として「好きなサイト・商品の配色をパクる」
という方法もオススメです。
いずれにしても、慣れないうちはまず基準となる配色を見つけて、
それをもとに自分好みに調整するようにしましょう。
趣味のサイト制作なら別ですが、効果の上がるサイトを作りたいのならば
好例を積極的に取り入れるのが近道です。
最後に、自分で配色を考えたい！色について勉強したい！
という方に僕がお薦めするのがこの１冊。
売れる色・売れるデザイン（著：高坂美紀）http://www.amazon.co.jp/exec/obidos/ASIN/4893699482
サイト制作用ではないし、学術的な内容でもありませんが、
色の重要性について考えるには最適の書籍ですよ！
次週は【 やってみよう！DWS 】です（たぶん）。
ウェブサービスの秘密に迫ります。お楽しみに！
簡単！サイト制作指南塾（第１回）
電脳卸 絵師（WEBデザイナー）・ナカムラです！
今回はサイト制作について書かせていただくことになりました。
一生懸命書きますので、よろしくお願いいたします！
さて皆様、サイト制作の調子はいかがでしょうか？
きっと、楽しみながら作成されていることと思います。
しかし！いろいろな販売店を拝見していますと、
びっくりするくらい出来栄えの良いサイトがある一方で、
ここさえあーしてこーしてやれば、グググググッと良くなるのに！！
と思うサイトも多々あるようです。
で、実はその多くはスタイルシートで解決できちゃったりします。
例えば行間！長めの商品紹介文などは読みやすくしたいですよね。
文章の始めと終わりに以下のタグを追加しましょう。
<p style="line-height:150%;">
ここはすばらしいインターネットですね。
</p>
これだけで行間が広がります！見やすい！なぜこうしないのだ！
ちなみに出版界では150％の行間（文字の半分の高さの隙間）は
可読性を維持する最低条件と言われています。WEBでも同じのはずです。
この「スタイルシート」を利用するメリットは大雑把に言うと、
★見やすくなる！
★HTMLだけでは出来ないことが出来る！
★検索エンジンとの相性がいい！（HTMLとの組み合わせ次第ですが）
★メンテナンスが簡単！一発でデザインの調整が可能に！
勉強する価値、ありますよね。
ぜひいろいろ調べてみてください！では！
