WEB屋は語る Magnetic-LaboブログMagnetic Labo Blog WEB屋は語る

Magnetic-LaboのWeb屋ブログです。 山梨にてホームページ制作・Webデザイン・コーディングを行っています。
企業のホームページや個人のホームページ、ECサイトの運営からシステム構築まで、一括して承ります。

選択肢を減らすのでは無く、選択の方法を増やす

このCMを知っていますか?

CM 大和証券グループ シャフィール教授「決定回避の法則」篇 ↓

このCMを知っていますか? 数年前放送されたものです。

選択肢が多すぎると、一つも選べないことがある
というのをコミカルに表現したCMです。

確かに当たっています。

選択肢が増えると消費者は「迷い」が生じてしまい、決断ができなくなってしまいますよね。
それは自分にも思い当たるところがあります。
ただこれは、全ておいて言えることではありません。

特にインターネットの世界では。

品揃えが豊富な所が魅力

この動画から「そうか、商品の種類を減らせばいいのか」という単純な考えが浮かんだとしたならば、あなたはインターネット販売には向いていません。

そもそも、選択肢が多すぎて選べないということは、その時点で「お客さんは店に来て商品を見ている」ということです。
ではお客さんが店に来た理由はなんでしょうか?

もしかしたら「沢山の中から選べる豊富な品揃え」が理由かもしれません。
商品の種類を減らしたら「沢山の中から選べる豊富な品揃え」を期待しているお客さんは店に来てくれなくなります。
これでは本末転倒です。

選択肢を減らすのでは無く、選択の方法を増やす

では、どうすれば良いのか?

選択肢を減らすのではなく選択の方法を増やせばいいのです。
選べないというのは「理由」がないからです。

例えば洋服を売っているのであれば、お客さんの手持ちの服との相性を教えたり、コーディネートのアイデアを提案するというような事が出来たとしたらどうでしょうか?
「何故その色なのか」「何故そのデザインなのか」、納得していただくための仕組みが重要です。

ユニクロ

ユニクロ
http://www.uniqlo.com/jp/
さて、「沢山の中から選べる豊富な品揃え」が売りのこのサイトはどんな工夫をしているのでしょうか?

では。

iPhone+iPadのFlash対策の話

FlashはiPhone+iPadじゃみれない

とりあえず、これはもう明らかなこと。
フルFlashのサイトは別ですが、Flashを使ったコンテンツがサイト中に幾つかあるというのはよくある事。

最近は、そのFlashコンテンツをiPhoneやiPad用にJQueryなんかを使ってJavaスクリプトへ置き換え…なんてサイトも多いのですね。

それでも、わざわざ、iPhoneやiPadのためにそんな予算とれないし、時間もないし…。
でも、せっかく作っったFlashもやめたくないし…

シンプルなスライドショーみたいなものであれば、iPhoneやiPadの対策は静止画への変更だけでもとりあえずいいでしょう。

そんなことで、ちょっとPHPソースを載せてみます。

それじゃ、条件分岐で静止画にします

PHPで条件分岐させてiPhoneやiPadの時だけ静止画で… というのを最近やったので載せておきます。

↓↓
<?php
$isiPhone = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPhone');
$isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
if(($isiPhone)||($isiPad)){
?>
■□■ 静止画のときのHTMLソース ■□■
<?php
}else{
?>
■□■ FlashのためのHTMLソース ■□■
<?php
}
?>

手っ取り早く解決

$_SERVER['HTTP_USER_AGENT']を使って、キャリアを調べて変数$isiPhone、$isiPadにboolean型(TRUEorFALSE)を返します。
あとは条件分岐で出力するHTMLソースを切り替える…と。 まあ、ただそれだけのことですが、なんとなくブログに書いて見ました。
 
あ、.htaccessとか使うことも出来そう。
それは、また時間ができたら試してみます。

では。

CMSが活用されない 更新されない更新システムの話

CMSが活用されない

最近、ホームページを作成するとなるとCMSは基本的に必須なわけですが、 実際のところそのCMSが活用されているかどうかは別の話なんです。
※コンテンツ管理システム
HTMLファイル作成やアップロードを行う技術的な知識がなくても、
テキストや、画像等の「コンテンツ」を用意できれば、
ウェブページを作成・編集ができる仕組み。

誰が更新するの?

日本の企業の9割以上が中小企業です。 そういった企業の場合、ホームページを管理する専任の担当者がいる企業はまず無いと思います。

社長さん、事務員さんなど…
それ以外にもコンピュータの扱いに慣れていたり、そう思われているスタッフの方が仕事の合間にせっせとホームページの管理・更新を行っっていたりするのです。
そうなると限られた時間の中で更新をするのは大変です。

ホームページ担当者が忙しいときには殆ど更新などの作業が出来無いこともあります。
そうなってくると、せっかくのCMSも宝の持ち腐れになってしまいますね。

CMSのメリット、デメリット

CMSのメリットとデメリットを考えてみましょう。
CMSのメリットは前述のとおり、知識がなくても、テキストや、ウェブページを作成・編集ができることです。
しかしデメリットもあります。
日付のついた更新情報などは、更新されなければ古い日付が残った、陳腐化した情報になってしまうということです。
更新を続けている以上は情報のフレッシュさは保たれますが、更新が滞ればホコリをかぶったモノグサ・サイトという印象を与えかねません。

CMS導入の前に

とにかくCMS導入の前に細かくルールのようなものを考えておくと良いかも知れません。

●どんなときに?何を?
→どんな内容のお知らせが発生したときに更新を行うのかを決めておきましょう。
何となくだと、企画によって掲載忘れなども出たりしますよね。

●いつ?
→いつ更新するのか。イベントや休暇のお知らせなど何日前にサイトの表示させるのかを決めておきましょう。
イベント後の報告はイベント終了後、いつまでにサイトに表示させるかなど細かく決めておくと良いかも知れません。

●誰が?
→担当者が前述のとおり、別の仕事と兼任であれば、本業が忙しくて更新ができないこともあります。
そんな時に、代わって担当できるスタッフが居るのかどうかなども重要なポイントです。



CMSを導入することが目的じゃありません

とにかく、CMSは使ってなんぼ。
更新して、編集してサイトを動かすというのがすごく重要です。

先ずは、CMS導入の前になぜ、どうして「CMS」が必要なのかを考えてみてください。
仕事で忙しいスタッフが更新作業を担当できるのか? みなさん意外に忘れているんです。

IE8で画面が真っ白になったら、それは文字コードのせいじゃないかと…

IE8+WindowsXP


先日、デザインカンプをクライアントに見せるために簡単なHTMLを自社のサイトのサーバにアップロードして見てもらうことにした。
すると、画面が真っ白で何も見えないという。
ie_utf8
↑真っ白…

自分で見ているときには何の問題もなかったので、閲覧環境を聞いてみた。
どうやらXP+IE8(インターネットエクスプローラ)とのこと…
またこの組み合わせか…
鬼門だ。
XP+IE8で印刷プレビューがおかしいことになったときの対処方法
http://blog.livedoor.jp/satoshi_magnet/archives/51691677.html

IEはやっぱり厄介、metaの文字コードなんか見てない


原因はすぐに分かりました。
HTMLをUTF-8の文字コードで作成したら…
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
こんな感じでmetaタグを使って宣言を行えば、『あ、このホームページUTF-8だね』ってブラウザが判断するのですが、何故かこのIE8+WinXPのときだけ(?)は駄目らしいんです。

.htaccess登場

というわけで、.htaccessファイルを作って強引に、『あ、このホームページUTF-8だね』を強制的に理解させましょう。
以下の記述を、メモ帳などテキストエディタで書いて…
AddDefaultCharset UTF-8
.htaccessというファイル名で保存。
この出来上がったファイルを、真っ白くなって映らないHTMLファイルのあるディレクトリに放りこんでください。

そういえば過去に似た記事を書いていましたね。
HTMLの文字コードとか問題ないのに文字化けしちゃうとき
http://blog.livedoor.jp/satoshi_magnet/archives/51414857.html

デフォルトで使ってもいいかも

以前も文字コードによるIEブラウザの問題がありました。
(前述の過去記事参照)
今回、用意した.htaccessファイルはしばらくデフォルトで使ってもいいかも知れないとちょっと思いました。

では。

正しいテキストリンクの効果ってあんのかなぁ~って話

正しいテキストリンク

ホームページの中に必ずあるテキストリンク。
そのテキストリンクにマウスを重ねると、色が変わったり、下線が出たり消えたりするのを知っていると思います。

ではコレに最適のものはあるのでしょうか?
どんなテキストリンクがもっとも使いやすいのでしょうか?

とりあえず有名なサイトを見てみましょう。

その1:Amazonの場合

amazon_hover
通常時は青色の文字です。
マウスを乗せるとオレンジ色に変わり、下線が表示されます。
テキストリンク以外の文字の色はほとんど黒です。

その2:mixiの場合

mixi_hover
通常時は青色の文字です。 マウスを乗せるとオレンジ色に変わり、下線が表示されます。
テキストリンク以外の文字の色はほとんど黒です。

その3:Twitterの場合

twitter_hover
通常時は緑色です。(黄緑色?)
マウスを乗せると、下線が表示されます。 テキストリンク以外の文字の色はほとんど黒です。

その4:YahooJAPANの場合

yahoo_hover
通常時は青です。 マウスを乗せると下線が表示されます。
テキストリンク以外の文字の色はほとんど黒です。

その5:Youtubeの場合

youtube_hover
通常時は青です。 マウスを乗せると下線が表示されます。
テキストリンク以外の文字の色はほとんど黒です。

結果発表

もっとたくさんのデータを記載したかったのですが、5つで勘弁して下さいww

・テキストリンクは他のテキストと区別が着くように色をつけていることが多い。
・オンマウス時は下線がでたり色が変わったりする。
・テキストリンクは通常時、寒色系が多く、オレンジなど暖色系は使われていない。 オンマウスになったときは暖色系が多い。
・テキストリンクは通常時、下線が出ていることはない。


有名なサイトのテキストリンクの効果の傾向は以上のようになっています。
多くのユーザが見ているサイトのテキストリンクは、ある程度、ユーザの記憶に刷り込まれていることが考えられます。

是非、参考にして見てください。

では。

ウェブが成熟するにしたがって、ウェブサイトに共通点が増え、
ユーザ側もそれが当たり前と受け止めるようになっている。
ヤコブ・ニールセン博士

WEBはいくらでも修正できる

Web上の記事はいつでも変える事ができる

ホームページ上の文章などはいつでも直すことが出来ます。

これは、当たり前のことですが、WEB担当者の方は、肝に銘じておきましょう。

微妙なことでクヨクヨなやんでると機会損失しちまうぞ

雑誌、新聞、折り込みチラシなど紙媒体広告を掲載する場合は念入りなチェックも必要です。
一度、世にでたら修正することが出来ませんから…

ですがWebは基本的に修正可能なメディアです。

デザインや文章の言い回しなどでクヨクヨ悩んでも仕方がありません。
機会損失という言葉をご存知だと思います。
簡単に言うとチャンスを逃すということです。

mixiニュースも間違えてる

mixiニュースだって誤植をします。
missmixi-1

↑どのへんが松坂なのでしょうか?ww


商品の金額などは決して間違えてはいけんませんが、後から修正できる範囲かどうか、機会損失にならないかどうか…それらを見比べて適切な判断ができるかどうかもWeb担当者の技量だと思ったりします。

では。

ブログを書くときに気にかけていること

blog

気にかけていること

私が、ブログで記事を投稿するときに気にかけていることを説明してみます。
私はアルファブロガーでもなんでもないので参考になるのかどうか分かりませんが、とりあえず自分がこころがけていることを投稿してみます。
 「そんなもん知ってるわい」という人がいるかも知れませんが、そういう人は読まないでくださいねw

文章量は少なく

とにかく文章は短くがコツです。
長い文章をユーザが絶対に読まないということは無いのですが、やはり簡潔にスマートにまとまった文章のほうが読みやすい事は間違いありません。

あなたが、ユーザをどんどん惹き込んでいくような魅力的な文章を書く名人であれば、長くなっても構わないのかも知れませんが、極力、短くスマートに書くことが必要だと思っています。

…では、書きたい内容にボリュームがあって、どうしても短い文章にまとめられないときはどうしたらよいでしょうか?

ブロックで区切る

作文でいう段落に当たります。
長い文章を読ませるためには、文章をブロックで区切ることが重要です。

例えば、小説は章という単位で区切られていることが多いです。
みなさんも章という単位で区切られていることで読みやすいと感じたことがあるかと思います。

インターネットの記事もブロック(章や段落)ごとに分かれていれば、読みやすいと思います。

見出しをつける

私の場合、見出しを前述のブロック毎につけています。

そこで、特に気にしているのは、見出しを読んだだけで記事の全貌が大まかに読み取れる。 …ということです。

大体、私がネット上の文章を読むとき(長文の記事の場合)見出しを読みます。
とくに複数見出しが存在する場合は、それを斜め読みして、内容に興味が持てれば初めて文章を読みます。

そんなことから私は文章をブロックで区切ったあと、その区切ったブログに見出しを付けていくようにしています。

最後に見出しだけを眺めて、全体の記事の内容があらすじとして伝わってくればOKという感じに見出しを付けています。

文字に色をつける、文字の大きさを変える

文字に弾みを着けるというのでしょうか?
特に読んでもらいたい部分の単語や文章には、文字色をつけたりします。
これだけでグーンと読みやすくなったりします。
文字の大きさや太さを変えたりもしてみます。

写真をつける、図解イラストをつける

例えば電話で目的地を相手に伝えるのに苦労したことはありませんか?
地図を見せれば簡単なのですが、…それだけ視覚に訴えるということは言葉で説明するよりも簡単なのです。

図や表、写真で説明をすれば、余計な文章は必要なくなりますし、読み手にダイレクトに伝わります。

絵文字、機種依存文字は避ける

ビジネスブログだったら、(ビジネスの種類にもよると思いますが)軽薄すぎるのは逆効果。
軽快な文章は読み手に親近感を与えますが、行き過ぎたオフザケはやめたほうが良いかな…と思っています。

では。
livedoor プロフィール


ホームページ制作
Magnetic Labo

ホームページ制作 Magnetic Labo


タグクラウド
QRコード
QRコード
  • ライブドアブログ