ECサイトオーナーTY(てぃーわい)です。2005年にECサイトを立ち上げ、制作から運営システムまで全てを自分で作ってきた経験を元に、2012年からはサイト制作、ECコンサルティング、書籍執筆、テキスト制作などをしています。Explorer君」はCSSという外国語を全然理解してくれないアホな子。いう事は周知の事実だと思います。一般ユーザー(特にここ日本のユーザー)のシェアは半数以上がCSS3を理解できないIE6~8が占めています。※記事末尾で注釈しますそんなフラストレーションの溜まる現状が続いている制作現場ですが、とある事情でどうしてもCSS3を使う必要に迫られてしまいました。tyの本職であるネットショップ「PetitCottage」の、ある一つのカテゴリをWordPressで作り替えようとしている時のお話。良質な海外アーティストの有料デザインテーマを導入したのですが、これがなんとCSS3でコーディングされていました。有料だけあって細部まで作りこまれている為、これをCSS2でコーディングし直すのは手間もかかるし無理も出てきます。思っていた最中、このライブラリの存在を知りました。http://css3pie.com/これを使うと、CSS3で書かれたコードに数行追加するだけで、IEでも見た目を同じにできます!作業の具体的な進め方は、以下のリンク先が参考になりました。基本的な部分はこのサイトの説明だけで足ります。動作しなかった場合のトラブルシューティングに。tyの場合、設置・コード編集作業は5分ほどで出来ました。一部の背景が指定の通りに表示されない(no-repeat指定なのにrepeatされる)(背景画像が指定の場所からスタートしない、ずれる)Chrome版IEタブでは一切動作しない(サブ機のChrome/IEタブでは正常動作・・??)などなど、不安定な一面も。いう泣き出したい気持ちの時は、この言葉を思い出してください。(2009年IEの訴訟に関しては)自由な競争が求められるブラウザを独占状態のOSにバンドルする事が独占禁止法に抵触している、というEUの指摘は「OSインストール時にブラウザを選択できる様にする」というMicrosoftの申し出をEUが受け入れる形で同年に和解した。オーバーレイ表示に関する記事の続きです。toを書こうと思いたったのが今回のテーマです。webページ制作と縁のないバリバリの営業マンが取引先で「君、若いから聞いてみよう。うちのサイトの画像をかっこ良く拡大したいんだけど、どうやるかわかる?」というムチャブリをされた時には、是非ご活用くださいませ。※当然ですが、今回の記事を参考にしてページを改良できてもサーバーにアップロードできなければ意味はありません。状態の依頼人でしたら、静かに見放してあげましょう。上の「営業マンが~」の話は半分冗談で、初心者がサイト制作をする場合、ページを改変した本人がサーバーにアップできる状態でないと、何らかのトラブルが起きる可能性があるためオススメできません。オーバーレイ表示の無料スクリプトは多くありますが、今回使用するのは僕のサイトでも使っている「Thickbox」です。今回説明する方法は「簡潔」を目的としている為、(汎用性の高いjquery.jsをthickboxフォルダ内に保存するなど)大きな目でみると非合理的な部分があります。この記事を参考にご自分なりのカスタマイズをして頂けたら、一気にhtmlへの理解が深まると思います!今回は以下の状況を仮定して説明をしていきます。・「ページ」に「画像A」が配置されている。画像をクリックしても何もおきない。「ページ」に配置された「画像A」をクリックすると、「画像Aの拡大画像」がオーバーレイ表示される、という状態がゴールです。ページ内コードの書き換え画像Aに拡大画像へのリンクを貼るここでは最も簡単な画像拡大の方法、「画像Aに拡大画像へのリンクを貼る」方法を説明します。拡大したい「画像A」のソースを見てみます。ソースコードのなかにという部分があると思います。これが「画像A」を表示させる為のコードです。拡大画像を表示させたい時は、この「画像A」に「画像Aの拡大画像」へのリンクを貼ります。リンクを貼るには、リンクさせたい部分を画像で囲みます。↑これで「画像Aをクリックすると、画像Aの拡大画像へ移動する」という状態が実現できました。Thickboxによるオーバーレイ表示のしくみThickboxでは、リンク先の画像(またはHTMLページ)をオーバーレイ表示で現在のページ上に表示させます。上の説明ですでに「画像Aに拡大画像のリンクを貼る」作業を終えている為、そのリンクにThickboxを設定してやればOKです!Thickboxを有効にする為に必要な作業はたったの3つ。(スクリプトのダウンロード)まずはThickboxの関連ファイルをダウンロードします。↓公式サイトはこちら2011.7月現在では、上から2番目のグレーのボックス内にて詳細ファイルへのリンクが貼られています。一応以下からも各々にリンクを貼ります^^リンク先を表示したら、「名前をつけて保存」で以下の名前で保存をしてください。(ページではなくgif画像を保存してください)・jquery.js4つのファイルをダウンロードしたら、全てをサーバーの任意の場所にアップロードします。その前に、軽くサイトの構造についての説明を致します。一般的にはサイトの管理をしやすくする目的で「一連のファイル群を一つのフォルダに格納」します。みなさんのパソコンと同様ですね。誰しもフォルダ分けをしてファイルを整理していると思います。パソコンと同様にサイトのファイル・フォルダ名も「自己流」で構いません。先の4ファイルを入れてアップします。開いて、8行目付近を見て下さい。"images/loadingAnimation.gif";という行があり、これは先ほど保存した「loadingAnimation.gif」を参照するコードです。"loadingAnimation.gif";に書き換えて保存して下さい。理由は、最初のコードでは自分(thickbox.js)のいるフォルダの「images」フォルダの「loadingAnimation.gif」を参照しているからです。今回は自分(thickbox.js)と同じフォルダ内に「loadingAnimation.gif」を保存しましたので、これは間違いになります。よって【「images」フォルダの】という部分を削除しました。ページ内コードの書き換え全ての準備が終わりましたので、ついに本命のページでの作業に入ります!!ます、アップしたthickbox関連ファイルへの参照リンクを貼り、外部ファイルとして読み込みます。</head>という終了タグがあります。この<head>で囲まれた部分には、そのページの重要な情報が書かれてあり、外部ファイルの参照もここで行います。thickboxを動かす為には、初めにjquery.jsを読み込みます。上を参考に、実際にアップした場所のurlを書いてください。次に以下の2ファイルを参照します。この3つで設置した外部ファイルの読み込みは終了です。(「loadingAnimation.gif」は「thickbox.js」内から参照をするので、ここでは使いません。)最後に、オーバーレイ表示したい画像リンクにコードを書き込みます。すごーく昔に、「画像A」に「画像Aの拡大画像」へのリンクを貼りました。」というコードを追加します。はい!おしまい!ページを保存して、アップロード。動作確認をしてみてください。動かなかった場合は、下記のエラーを疑いましょう。・ページのヘッド内の外部ファイルへのリンクが間違えている。・拡大画像がアップロードされていない・拡大画像へのリンクが間違えているそれでもダメな場合。笑(7/18:「このブログで使っているwordpressプラグインとの兼ね合いでサンプルコードの一部に意図しない文字列が表示されている問題」を修正しました。近年、画像などをオーバーレイ表示させるサイトが急激に増えてきました。僕のサイトでも、つい先日、全ページに設置してある「お問合せフォーム」へのリンクと、全商品画像をオーバーレイ表示される様にプチリニューアルしました。??「ここ」とか、↑上のタイトル画像をクリックして下さい。ポップアップ表示みたいな物ですが、ポップアップが「新しいウィンドウでページ・画像を表示する」だけなのに対して、オーバーレイは「現在のウィンドウに重ねて、新しい画像・ページを表示」する所に違いがあります。ベースは「現在のウィンドウ(ページ)」なので、ウィンドウ・タブを閉じたり、戻ったりすると、オーバーレイ表示ごと現在のページも閉じてしまいます。この点がインターネットに慣れないお客様にとっては離脱の原因になってしまうポイントの一つですが、デメリットは後ほどまとめて考えてみます。今回、僕のサイトでは「お問合せjフォーム」へのリンクと、商品販売ページの商品画像をオーバーレイ表示にしました。(別ウィンドウで開く)↑ページ最上部のテキストナビゲーションの「お問い合わせ」をクリックしてください。以前は「お問合せ」は、問い合わせフォームを設置してあるページへのリンクでした。それをオーバーレイ表示にする事で、ページ遷移すること無くフォームだけを呼び出せます。́)エッヘン!!ふざけたワケではなく、ネットショップにとって「かっこ良さ」や「制作技術」は大切です。多少のスクリプトを使って画像をオーバーレイ表示させる技術がある、という事だけでも、閲覧しているお客様にとっての安心感に繋がります。使っているスクリプトにもよりますが、大抵のオーバーレイ表示スクリプトにはスライドショー機能もついています。これにより、同一ページ内の任意の画像を「Next」ボタンなどで簡単に表示させる事ができ、「商品ごとのスライドショー」を簡単に実現できます。僕のサイトの例で言うと、商品拡大画像と問い合わせフォームをオーバーレイ表示にしています。商品の販売ページを見てくれていて、さらに興味ももってくれているから画像を拡大したり「問い合わせフォーム」に進んだりするわけです。その際に拡大画像が別ページで表示されたら。ブラウザの「戻る」ボタンを押してもらえる率はどのくらいでしょうか?ましてや問い合わせフォームのように少し時間のかかる作業の場合、問い合わせた後に元のページに戻ってもらえる可能性はどれほどでしょう^^;ページ遷移をなくすことで離脱率を下げ、結果として成約率が上がれば大成功です。お客様にとっても「あぁ・・・ページ閉じちゃったよ。」というイライラが無くなりますしね。オーバーレイ表示のデメリットただし、先ほども触れたデメリットとしてオーバーレイ表示を閉じようとしてブラウザの戻るボタンor閉じるボタンを押されてしまうという恐怖もあります。オーバーレイ表示スクリプトは枠外のグレー部分をクリックすることで表示が消えますが、慣れていないお客様が戻るボタンを押してしまう例も多くあります。間違って「戻るボタン」を押されても大丈夫。「進むボタン」を押してくれる事を期待するなどがあります。JavaScriptの処理が遅いIEでは、高機能なスクリプトを使用すると、表示に時間がかかったりカクカクしたりしますので、この点も注意が必要です。ページ閲覧中に一時的に表示させる手段としては、デメリットよりはメリットのほうが多いでしょう。経営論7Jun2011今春のサイトリニューアルで感じた事(SNS編)僕の運営しているサイトでは毎年春になるとサイトのリニューアルをしています。デザインリニューアルが大半を占める訳ですが、今年はシステムにもいろいろ手を加えました。そこで、この1年間における「webサイトの環境の変化と対策」をまとめてみたいと思います。【SNSボタンの設置の重要度が高まる】SNSサイトからのトラフィックはここ数年で爆発的に増えていて、大手サイトの中でも検索エンジン経由よりもSNS経由のトラフィックが上回っている例もある様です。この流れを加速させる為にも、SNSボタンの設置重要性は高まったといえます。代表的なものは、Twitterの「ツイートする」ボタン、Facebookの「いいね!」ボタン、Mixiの「チェック」ボタンの3つです。具体的な設置方法は他の優れたサイトを参考にして頂いて、、、今回はSNSを取り込む重要性についてだけ語らせてください。ボタンを設置してSNSサイトを取り込むメリットを考えてみます。【バックリンクの増加】SNSで紹介される事により、外部サイトのリンクが増えます。通常、手動でアドレスをコピペして自分のアカウントで発言する手間がかかるところを、ボタンを設置することで、より手軽に紹介してもらえる様になります。【ポジティブなユーザーの流入が増加】SNSは友達同士がグループを作り交流する場です。見ず知らずの他人がブログで紹介しているサイトよりも、縁のある友達が紹介しているサイトのほうが好意的な気持ちで訪問するでしょう。クチコミの威力はもはや誰もが知るところです。【お客様の声のチェックができる】SNSサイトで、気に入ったサイトを紹介する際にオススメのポイントなどを一言書き添える人は多いと思います。覗き見みたいな方法ではありますが、定期的にSNSサイト内の検索で、自分のサイト名やサービス名を検索してみると良いでしょう。「このお店丁寧だったよ」「発送がちょっと遅かった」など、お店に直接言ってもらえないような貴重な意見が見つかるかもしれません。SNSでは、友達以外には発言を非公開にしている人もいますので、全ての評判チェックができるわけではありません。【悪評を言われる】これは一見するとデメリットに思いますが、お客様に悪評を言われるのは自業自得といえます。真面目に商売をしていてもたまにミスはしてしまいます。お客様の悪評は真摯に受け止め、よりよいお店作りの為の貴重な改善案として受け止めます。私のお店では今まで一度もありませんが、中にはとても非常識なお客さんに当たってしまう例もあるでしょう。いったいわゆる悪質クレーマーと呼ばれる因縁をつけるタイプの人に悪評を広められた場合ですが、こういったタイプの人の発言は第三者から見ても「この人めちゃくちゃ言ってるな」となんとなく分かります。大半のSNSユーザーの皆さんは正しい発言を見抜く目を持っていますので、必要以上に悪評を怖がる必要はないと思います。まとめ最後に重要な事を言いますが、「SNSボタンを設置する事」と「SNSのアカウントを取る事」は全く別物です。お店の公式アカウントとしてSNSを運用する事はリスクも併せもちますが、ボタンを設置する事のリスクはほとんどありません。