現 役 プ ロ 集 団 が 指 南 ！！ ━━━━━━━━━━━━━━┯━
│
┌─┐┌─┐┌─┐┌─┐┌─┐┌─┐┌┴┐
│釘┃│づ┃│け┃│サ┃│イ┃│ト┃│の┃
2006.02.03 ｖｏｌ.１５―１ └━┛└━┛└━┛└━┛└━┛└━┛└━┛
┌─┐┌─┐┌─┐┌─┐┌─┐
presented by Ku: Art Media Inc. │デ┃│ザ┃│イ┃│ン┃│塾┃
└━┛└━┛└━┛└━┛└┯┛
│
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┷┓
┃ ┃
┃ ☆ 当 塾 の 指 導 理 念 ☆ ┃
┃ ┃
┃ 『 気 が つ け ば 、い つ の 間 に や ら 、プ ロ 級 サ イ ト ！ 』 ┃
┃ ┃
┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
│ │
│ しっかりと伝わるＨＰをつくりたい―。クギサイ塾では“ドングリの背く │
│ らべ”から抜きん出る《来訪者を釘づけにする魅力的なサイトづくり》を、│
│ あなた自身の手で、自由自在にできるようにすることをめざしています。 │
│ │
│ 続ければ続けるほど、あなたのサイトが限りなく魅力的に進化する、プロ │
│ 級のＨＰづくりのノウハウを、詳しく、やさしく伝授する！決定版です。 │
│ │
┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
┃ｃｏｎｔｅｎｔｓ ┃
┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
┃
┃
┣◆口 上 …… あなたのサイトに“ライブ感”はありますか？
┃
┃
┣◆講 釈─◇プランニング …… 導火線のつくり方とそのすすめ
┃ │
┃ │
┃ ◇写真・画像 ……… フラッシュの効果的な活用法
┃ │
┃ │
┃ ◇デザイン ………… トップページに入れる要素を考えよう !
┃ │
┃ │
┃ ◇コピーワーク …… 売れるコピーの書き方
┃
┃
┣◆感謝之辞 ……………………… ちょっとご紹介“専用フォーラムのいま”
┃
┃
┣━┳━┳━┳━┳━┳━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃本┃日┃の┃口┃上┃ あなたのサイトに“ライブ感”はありますか？ ┃
┣━┻━┻━┻━┻━┻━━━━━━━━━━━━━━━━━━━━━━━━━┛
│
│
│ 毎度お馴染み、前説の風嶺です。
│
│ いやぁ〜、トリノ五輪開幕まで、あと一週間となりました。
│
│ 楽しみですね〜。
│
│
│
│ 日本とトリノとの時差は、８時間。
│
│ 日本の夜８時は、トリノでは正午ですから、
│
│ 生中継だと、“眠い目を擦って”という状況になりそうですね。
│
│
│
│ 生中継の醍醐味は、
│
│ ほっかほかの最新情報に誰よりも先に触れられること。
│
│
│
│ 結果を先に知るより、「何が起きるのか？」と、
│
│ ドキドキワクワクして見るほうが断然楽しいですよね。
│
│
│
│ ホームページにもまったく同じことが言えます。
│
│ いつ訪れても、代わり映えのしないサイトでは、魅力はありません。
│
│
│
│ ―そうはいっても、更新は面倒臭いし、ネタだってそんなにはない。
│
│
│
│ では、諦めるしかないですよね、ネットを活用することは。
│
│ ショップだって、いつも同じ商品ばかりじゃ、人は見向きもしない。
│
│ 「寄れば、いつも新しい“何か”がある」からこそ、顧客になるんですね。
│
│ それだけ魅力があれば、寝る間も惜しんでくれるわけです。
│
│
│
│ あなたのサイトは、どうですか？
│
│
│
│ 訪れる方々の期待を膨らませる「新しい何か」を常に用意していますか？
│
│ 「次は何を見せてくれるんだろう？」という関心に応えられる、
│
│ ライブ感のあるサイトになっていますか？
│
│
│
│ デザインをはじめ、プラン、コピー、写真画像は、
│
│ ライブ感のあるサイトを構築するための“根幹”をなすものです。
│
│
│
│ どんなに優れた結果が出ているビジネス・モデルであろうとも、
│
│ ここへの注力が疎かであれば、残念ながら、
│
│ かなり取りこぼしをしているはずです。
│
│ 実にもったいない話です。
│
│
│
│ 当塾生の皆さんには、
│
│ そんなもったいないことはさせませんからご安心を！
│
│
│
│ さて、はじめましょうか、本日も。
│
│ 成功者だけが立つことができる“栄光のポディウム”へあなたを導く、
│
│
└┰───────────────────────────────────
┃
┃
┏┻┓┏━┓┏━┓┏━┓┏━┓
┃本┃┃日┃┃の┃┃講┃┃釈┃ 歓喜の金メダルを、あなたの手に！
┗┳┛┗━┛┗━┛┗━┛┗━┛
┃
┏┻━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┃ ★ プランニング ・・・・・・・・・・・・・・◇ 西 佳宏 NISHI YOSHIHIRO
┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┃
┃
┣━━━━━━━━━━━━━━━ 導 火 線 の つ く り 方 と そ の す す め
┃
┃
┃
┃ よく「落とし込み」とか「導線」なんて言葉で、
┃
┃ 購買率を上げるための誘導のつくり方が問題になりますよね。
┃
┃
┃
┃ 確かに購買率を決定着ける要素として、話の持って行き方が大事です。
┃
┃ 整理されていない情報は見づらいだけでなく、
┃
┃ 時間的な要素が前後したりすると混乱さえ起してしまいます。
┃
┃
┃
┃ ブログもきちんとカテゴリーなどで区分されていないと、
┃
┃ 思いつきや、見つけて来た情報をダラダラ配信するだけなので、
┃
┃ 購買率が上がるはずもないわけです。
┃
┃
┃
┃ デザインとは整理学なので、
┃
┃ 見た目の善し悪しよりも、情報の効果的な配列のほうを重視すべきです。
┃
┃ デザイン的にはどうってことのないサイトが、
┃
┃ 抜群の売上を誇る、このような事例は、
┃
┃ 購買へのクリックへ導線がきちんとできているから起こることです。
┃
┃ 情報の順序立てが効果的につくられているのです。
┃
┃
┃
┃ 前回、コミュニケーションは感情の揺さぶりあいだ、と書きましたが、
┃
┃ 問い掛けをしていくとか、マイナス面を敢えて伝えるとか、
┃
┃ 冷静でいられないように、予測されないように展開していくことで、
┃
┃ 「導線」に小さな火を付けることができます。
┃
┃
┃
┃ ポッ！
┃
┃ Ж━━━━━━━━━━━━━━━━━●
┃
┃
┃
┃ 「ここで火を付けてやる！」
┃
┃ まず、そういうポイントを意識してつくりましょう。
┃
┃ そこからは、メリットを油を注ぐように浴びせて、
┃
┃ 導火線をどんどん燃やしてあげましょう。
┃
┃
┃
┃ チリチリ
┃
┃ ───────Ж━━━━━━━━━━●
┃
┃
┃
┃ 仕上げの段階で購買用のコードをクリックさせられれば、
┃
┃ 仕掛けたあなたの勝ちです。
┃
┃
┃
┃ ドッカ〜ン！
┃
┃ ＼｜／
┃ ──────────────── ─●―
┃ ／｜＼
┃
┃
┃
┃ 「モノを売る」ということは「仕掛けをつくる」と同意語です。
┃
┃ アプローチしてみて、効果がなければ、また仕掛ければ良いだけです。
┃
┃ その繰り返しが「オリジナルノウハウ」を生み出すのです。
┃
┃ 「仕掛ける」このイメージを忘れないでくださいね。
┃
┃
┃
┃ 【シンプルＷｅｂクラブ】
┃
┃ http://simple.sub.jp/
┃
┃
┗┳━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┃
┃
┃
┏┻━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┃ ★ 写真撮影・画像処理 ・・・・・・・・・・◇ 倉田 浩路 KURATA HARUMICHI
┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┃
┃
┣━━━━━━━━━━━━━━━━ フ ラ ッ シ ュ の 効 果 的 な 活 用 法
┃
┃
┃
┃ 皆さんこんにちは。
┃
┃ 先週の話の中でフラッシュ（ストロボ）のことを特に説明せずに
┃
┃ 終わってしまったので、今回はその辺りも含めて続きをお話します。
┃
┃
┃
┃ フラッシュの光は「テカりやすいので・・・要注意！」
┃
┃
┃
┃ 別にテカることが悪いという
┃
┃ 光の当て方によって、綺麗にもなり、汚くも見えてしまう。
┃
┃
┃
┃ まず、この光が当たった部分で、いちばん明るい部分（ハイライト）から、
┃
┃ 影のいちばん暗い部分（シャドー）までの“濃度差の集まり”のことを
┃
┃
┃ 「階調」という言葉で表現しています。
┃
┃
┃
┃ パソコンのモニターで表現できる階調は各色256段階ですので、ＲＧＢで、
┃
┃ 《Ｒ:256段階》×《Ｇ:256段階》×《Ｂ:256段階》＝16777216段階。
┃
┃ つまり、約１６７０万段階の色を表現できるので、
┃
┃ “1677万色”とか“フルカラー”と言ってます。
┃
┃
┃
┃ 現時点では、デジタルカメラの場合、
┃
┃ この階調表現にあって、フィルムカメラよりやや劣っているので
┃
┃ 撮影をするときに光の当て方に注意が必要になってくるのです。
┃
┃
┃
┃ なぜかと言いますとフィルムカメラは、
┃
┃ 細かい銀粒子の無段階に等しいほどの細かさで階調表現しているのですが、
┃
┃ デジタルカメラは、解像度が高くなってきたとはいえ、
┃
┃ まだまだドットが見える世界であるということと、
┃
┃ カメラの性能が上がってもコンピュータのモニター上では、
┃
┃ １６７７万色でフルカラーと言っているくらい限られていて粗いので、
┃
┃ ハイライト側での白の表現も限られてくるわけです。
┃
┃
┃
┃ また、真正面から光を当てると、
┃
┃ 被写体側の表面が鏡のように滑らかな面だと光の反射率も高く、
┃
┃ そのまま跳ね返ってくるのでカメラ側の光源の強さで写ってしまい、
┃
┃ 肌色にならず白もすっ飛んで光ってみえてしまうのです。
┃
┃
┃
┃ こんな場合、肌色も白くなってしまい、
┃
┃ 表現されなくなります（色飛びが起こる）ので、
┃
┃ いくらかでもこうなる事を防ぐために、フラッシュの前にガーゼとか、
┃
┃ うすーいハンカチなどを当ててやると光源の色温度も下がり、
┃
┃ 光も散光にすることができてソフトに写せます。
┃
┃
┃
┃ 私たちが常に気をつけないとならないのは、被写体の立体感です。
┃
┃ 真正面からの光は、被写体を立体的には表現してくれません。
┃
┃ 影があってはじめて凹凸があることがわかるのです。
┃
┃ 絵画の世界でも写真の世界でも同じです。
┃
┃
┃
┃ フラッシュ光は、使い方のコツがあります。
┃
┃ どんなときに使うと良いか、その利点を並べてみましょう。
┃
┃
┃
┃ 日中の撮影などでの、
┃
┃ シャドー部のつぶれすぎになるのを弱める補助光として使ったり、
┃
┃ ポートレート撮影や動物の目にハイライトを入れて生き生きさせる等の表現は
┃
┃ 軽く当てると効果的です。
┃
┃
┃
┃ 室内撮影では、色温度が太陽光に近いので、
┃
┃ 蛍光灯や白熱灯のように緑がかったり、赤っぽくなったりといった、
┃
┃ 不自然な色調になるのを抑えてくれます。
┃
┃ また、逆光撮影になるようなときにも有効です。
┃
┃ 窓辺での撮影などの場合、窓の明るい部分の露出が優先されて、
┃
┃ 人物が暗く写りがちです。（普通のオート撮影では、概ね暗くなります）
┃
┃ こんなときにフラッシュ光を使うと、
┃
┃ 窓の明るさにあったバランスの良い明るさに室内の被写体を写せます。
┃
┃
┃
┃ 色調を整えるということでは、曇天の下とか雨天の場合も、
┃
┃ どんよりして、光の当たり方もフラットになりコントラストもなく、
┃
┃ しまりのない（ねむい）写真になりますが、ハイライトをたて、
┃
┃ 色調を整えさせるためにフラッシュは是非使ってください。
┃
┃
┃
┃ このフラッシュをどう使うかによって写真も変わってきますよ。
┃
┃
┃
┃ コンパクトカメラに付属しているフラッシュ（ストロボ）には、
┃
┃ 限界はありますが、上記の条件下では十分に効果的に使えます。
┃
┃
┃
┃ 手間だと思いますが、「強制発光にセット」したり、
┃
┃ 「解除」したりを面倒臭がらずに使いこなしてください。
┃
┃
┗┳━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┃
┃
┃
┏┻━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┃ ★ デザイン・・・・・・・・・・・・・・・・◇ 倉田 浩孝 KURATA HIROTAKA
┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┃
┃
┣━━━━━━━━━━━━━━ ホームページをデザインする前にすること(15)
┃
┃ ト ッ プ ペ ー ジ に 入 れ る 要 素 を 考 え よ う !
┃
┃
┃
┃ さぁー、今日はトップページに入れる要素について考えてみましょう。
┃
┃ トップページにはいろいろな要素が入ります。
┃
┃
┃
┃ ホームページ、Ｗｅｂサイトのトップページは、ある意味、
┃
┃ 雑誌やカタログなどの表紙に当たり、目次の役割も担っています。
┃
┃ 言うなれば、そのサイトが世の中＝来訪者にアピールしていく「顔」です。
┃
┃
┃
┃ が、そればかりではありません。
┃
┃ そのサイトのさまざまなコンテンツへの入り口でもあり、
┃
┃ ホテルでいえば、エントランスホール・ロビーであり、
┃
┃ 受付カウンターがある総合案内の意味をも併せ持っています。
┃
┃ 来訪者を出迎え、おもてなしをしていくところですね。
┃
┃ そして、そのサイトの全体的なイメージを
┃
┃ いちばん効果的に表現できるところです。
┃
┃ そこで、トップページにはどんな要素を盛り込んでいけば良いのでしょうか？
┃
┃
┃
┃ まず、必要最低限で考えると―、
┃
┃ ●サイトのＩＤ：どこのサイトなのか？会社やブランドを明確にします。
┃
┃ ●サイトのタイトル：どんなサイトなのかを明確に表示します。
┃
┃ ●コンテンツメニュー：どんな内容（コンテンツ）があるかを明示します。
┃
┃ ●イメージビジュアル：サイト全体を魅せるイメージづくりをします。
┃
┃ ざっと、このようなところでしょう。
┃
┃
┃
┃ さらに、サイトによっては―、
┃
┃ ●インフォメーション＝新着情報・お知らせ ●初めての方へのガイド
┃
┃ ●問い合せ先、利用条件、個人情報の取り扱いなどへのリンク
┃
┃ ●関連サイトへのリンクやバナー
┃
┃ ●プラグインのダウンロードセンターへのリンクやバナー
┃
┃ ●サイト内検索 ●サイトマップ ●コピーライト表示
┃
┃ なども必要です。
┃
┃
┃
┃ トップページには、これらの要素をコンセプトイメージとしてデザインし、
┃
┃ レイアウトしていくことになります。
┃
┃ 来訪者はとりあえず、
┃
┃ トップページから＝上位の階層からリンクしてくるとして、
┃
┃ （現実的には必ずしもトップページからアクセスするわけではないですが）
┃
┃ ●サイトのＩＤ ●サイトのタイトル＝コンテンツのタイトル・情報
┃
┃ ●本文＝文章（テキスト）や図・イラスト
┃
┃ ●ナビゲーションリンク（＝リンクボタン）
┃
┃ などは必須の情報です。
┃
┃
┃
┃ ただし、Ｗｅｂサイトには、制限なしに情報を載せられるからといって、
┃
┃ あらゆるケースを想定して無尽蔵に並べて立ていたら、
┃
┃ 見やすく、利用したくなるサイトにはなりません。
┃
┃ わかりやすく情報を整理していくことが大事になります。
┃
┃
┃
┃ 一般に、人間が一度に認識できる情報の数は、
┃
┃ せいぜい５つ〜７つといわれます。
┃
┃ トップページに盛り込む要素は、
┃
┃ カテゴリーに分ける＝グループごとに分けて名前を付けるなどして、
┃
┃ 効率よく整理し、来訪者が認知・認識しやく構成します。
┃
┃
┃
┃ たくさんの情報を整理するときには、
┃
┃ メニューとか文章とか、写真や図表などを
┃
┃ 効率よくカテゴリーごとに分けて見やすく設計していくことが
┃
┃ 大事になってくるんですね。
┃
┃
┃
┃ 例を挙げてみましょう。
┃
┃ 伝えたい情報をまずはランダムに書き出します。
┃
┃ ・会社概要 ・製品案内 ・キャンペーン情報 ・株主や投資家情報
┃
┃ ・コラム集 ・関連リンク集 ・採用情報 ・新製品のお知らせ
┃
┃ ・ニュースリリース
┃
┃ などが挙げられたとします。
┃
┃
┃
┃ 次に、この順番をグループごとに整理して並べ替えましょう。
┃
┃ ◆グループＡ ・会社概要 ・株主や投資家情報 ・ニュースリリース
┃
┃ ◆グループＢ ・採用情報
┃
┃ ◆グループＣ ・新製品のお知らせ ・製品案内 ・コラム集
┃
┃ ◆グループＤ ・キャンペーン情報 ・関連リンク集
┃
┃ こうすると少し相互の関連性が理解しやすくなっていませんか？
┃
┃
┃
┃ さらに、各グループに名前を付けると、
┃
┃ ◆会社情報 ・会社概要 ・株主や投資家情報 ・ニュースリリース
┃
┃ ◆採用情報 ・新卒採用窓口 ・中途採用窓口
┃
┃ ◆製品情報 ・新製品のお知らせ ・製品のご案内 ・トピック/コラム集
┃
┃ ◆関連情報 ・キャンペーン情報 ・関連リンク集
┃
┃ いかがでしょう？
┃
┃ このようにカテゴリーに分けて名前を付ける（＝ラベリングする）と
┃
┃ より見やすく、ほしい情報にアクセスしやすくなることがわかると思います。
┃
┃
┃
┃ トップページに盛り込む要素が決まったら、
┃
┃ それをどのように魅せていくかをよく考えてデザインしていきましょう。
┃
┃ デザインするということは的確に情報を伝えるための整理術なんですね。
┃
┃
┃
┃ ということで・・・本日は、これにて終了します。
┃
┃ お疲れさま。ありがとうございました。
┃
┃
┃
┃ 《参考資料-001》アイドマの法則
┃
┃ http://www.ku-am.co.jp/e-l_members/AIDMA_fig.html
┃
┃ 《参考資料-002》サムネイル・ラフスケッチ
┃
┃ http://www.ku-am.co.jp/e-l_members/Example_thumbnail.html
┃
┃ 《参考資料-003》全体フローチャート
┃
┃ http://www.ku-am.co.jp/e-l_members/Example_flowchart.html
┃
┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
