けSERAせらせらせら: 2009

月曜日, 12月 21, 2009

土曜日, 12月 19, 2009

金曜日, 12月 18, 2009

木曜日, 12月 17, 2009

jQueryのプラグイン100選 -2009年総集編

ｊQuery使用例がいっぱい。

参考に。

コリス　：　jQueryのプラグイン100選 -2009年総集編

http://coliss.com/articles/build-websites/operation/javascript/100-jquery-plugins-2009-best.html

水曜日, 12月 16, 2009

アニマトロニクスの恐竜たちの製造工程

http://www.kotaro269.com/archives/50958992.html

1．インド人はいつも遅刻する。目的を達するのに飛行機に4回は乗り遅れる。

2．インド人は声が大きい。いつのまにかみんなに気づかれている。

3．インド人は無料の飲食に弱い。無料の機内食を食べているうちに、そこにいる理由を忘れる。

4．インド人は会話に手を使う。なので武器を下に置かなければいけない。

5．インド人は飛行機が好きだ。みんな乗りたがる。

6．インド人はすぐ揉める。みんなして飛行機の中で喧嘩し始める。

7．インド人は秘密を守れない。実行の一週間前には全員が知っている。

8．インド人はフロントガラスに国旗を掲げたがる。

9．インド人はクリケットが好きだ。試合があると実行を延期しなくちゃいけない。

10．インド人は写真に写るのが好きだ。人質と写真に映りたがりみんなで重なりあって転ぶ。

http://labaq.com/archives/51336414.html

水曜日, 12月 09, 2009

アーキテクチャの情報を伝えるための10のヒント

1.聞き手を知る
2.方法を慎重に選択する
3.コンテキストを明確にする
4.情報の解像度を高める
5.普遍的な枠組みを使用してデータを示す
6.小さな並列を使用する
7.内容が何より重要であることを理解する
8.業界で標準になっている表記技法を利用する
9.関連のある事実と図を組み込む
10.各論、総論、各論のパターンに従う

詳細は次から
http://japan.internet.com/developer/20091208/26.html

日曜日, 12月 06, 2009

MITメディアラボ制作の万能ロボット　Nexi

金曜日, 12月 04, 2009

デザインバーコード

バーコードは読み取れれば、どんなデザインでもOK！

こちょこちょのパァツァァァー

ロボットコントローラのUIがいい

車に載るロボット

土曜日, 11月 28, 2009

めんどくさがりほどトクをするフリーのファイル管理ソフト「FenrirFS」

http://gigazine.net/index.php?/news/comments/20091127_fenrirfs/

それぞれのファイルにタグ付けできる、エキスプローラ。

シンプルなテキストエディタ

このシンプルさは、創造性、文章への集中力、使える。

Ommwriter from Herraiz Soto on Vimeo.

リーダビリティの優れたリストをデザインするための5つのポイント

http://coliss.com/articles/build-websites/operation/design/5-points-lists-design-for-readability.html

ちょっと手を加えてウェブデザインをグレードアップする6つのポイント

http://coliss.com/articles/build-websites/architectonics/usability/web-design-from-good-to-great.html

土曜日, 11月 14, 2009

【メモ：あとチェック】WEB業界の匠、私の師匠の5つの苦言

http://e0166.blog89.fc2.com/blog-entry-722.html

水曜日, 10月 28, 2009

限りなく人間の歩き方に近いロボット「PETMAN」

月曜日, 10月 26, 2009

CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集

1. サイトのナビゲーション風にデザインされたリスト
2. 番号付き＆番号の横に縦のラインがはいった見やすいリスト
3. 矢印画像を使ったリスト
4. iPhoneスタイルのクールなボックスリスト
5. ツリーっぽい形式にできるリストデザイン
6. 複数行にしてテキストっぽく表示できるテキストリスト
7. ワンラインにして、カンマを付与するリストデザイン
8. カーソルを合わせたときに、アイテムが回転するCSS3のフィーチャーを使ったリストと、なんとも素晴らしいリストデザインのサンプルですね。各々のソースコードは以下より参照してください。

見本：
8 different ways to beautifully style your HTML lists with CSS

対象をドラッグ＆ドロップしてtwitter等にシェアできるプログラムと作成チュートリアル

厳選！マイクロソフトのフリーソフト10傑

1: Paint.NET
2: Visual Web Developer 2008 Express Edition
3: XML Notepad 2007
4: Virtual PC 2007
5: WorldWide Telescope
6: Windows SteadyState
7: SyncToy 2.0
8: Office Accounting Express 2009
9: SQL Server 2008 Express
10: ServerQuest II

木曜日, 10月 15, 2009

JavaScriptによるツールチップ集

http://speckyboy.com/2009/09/16/25-useful-jquery-tooltip-plugins-and-tutorials/

コメント欄をCSSできれいに集

http://templatica.com/post/25/styling-blog-comments-correct-markup-and-free-examples

たった1ファイルでサーバ上のコンテンツ管理が出来る最低限の「OneFileCMS」がいい感じ

CSSで作るボタンのチュートリアル集

http://www.narga.net/beautiful-and-simple-css-button-styling/

販売サイトのデザイン集

http://www.instantshift.com/2009/10/06/77-inspirational-example-of-pricing-page-designs/

日曜日, 10月 11, 2009

使えるユーザビリティーガイドライン

1. フォームのラベルはフィールドの上がベスト
study by UX Mattersによると、フォームのラベルはフィールドの上が理想的とのこと。多くのフォームで、ラベルはフィールドの左に置かれ、2カラムのレイアウトになっている。いいデザインだが、最も使いやすいレイアウトとは言えない。なぜなら、フォームは一般的に垂直方向に並んでおり、ユーザーは上から下に向かって入力していく。ユーザーは視線を下の方向に向けていくのだ。そのため、ラベルが左にあるよりも、同じ方向にある方が認識しやすい。

2. ユーザーの視線は人の顔に向く
Webページを見るとき、人の顔や目に視線が行く。マーケッターにとっては、注目を集める有効なテクニック。ユーザーは画像の中の人の視線が向いている方向を見るということがわかっている。

3. デザインのクオリティーは信頼感を増す
ユーザーがWebサイトを信頼するときに何が影響するのかについて、様々な研究がされている。これらの研究から、面白いことにユーザーはカバーデザインで本を選んでいる、ということがわかる。Webサイトを見るときも、そのデザインに左右されるということだ。レイアウトや統一感、タイポグラフィー、色やスタイルなどがユーザーに届く要素である。

4. ほとんどのユーザーはスクロールしない
Prioritizing Web UsabilityでJakob Nielsenが、ユーザーのスクロール度合いについて行った研究によると、23%の人しか初めて訪問したサイトでスクロールしないということだ。つまり、77%の訪問者がスクロールしないということになる。彼らはabove the fold（ファーストビュー）のコンテンツしか見ない。

5. リンクカラーは青がベスト
ユニークなデザインをすることは素晴らしいが、ユーザビリティーに関して言うと、みんながやっていることがベストだと言える。Van Schaik and Lingの研究によると、ユーザビリティーを優先で考えるなら、リンクカラーは青がベスト。ブラウザのデフォルトリンクカラーは青であるし、ユーザーはそれを期待する。

6. 理想的な検索ボックスの長さは27文字入るwidth
検索ボックスの理想的な幅はどれくらいだろう？Jakob Nielsenはそれについての研究を行っている。平均的な検索ボックスは18文字が入るwidthであることがわかった。27%のクエリーがそれに収まらず、長過ぎることになってしまう。27文字入るようにすると、90%のクエリーがカバーされる。

7. ホワイトスペースは理解を高める
ほとんどのデザイナーはホワイトスペース（空白）の効用について知っている。ホワイトスペースは要素間の関係を示し、ページの統一感を出してくれる。ChaperroとShaikh、Bakerによると、ホワイトスペースをうまくつかったページレイアウトは、パフォーマンスには影響せず、ユーザーの満足につながるとのこと。

8. 効果的なユーザーテストは、多くのユーザーに行わなくてもよい
Jakob Nielsen's studyによると、ユーザビリティーテストは5人のユーザーによるテストで85%の結果をカバーする。

9. 使いやすい製品ページは目立つ
多くの製品ページは満足な情報を欠いている。Appleの製品ページは製品の仕様をうまく説明している。製品情報は要約して簡潔にすることが鉄則。

10. ほとんどのユーザーは広告を見ていない
Jakob NielsenがAlertBox entryで発表した内容によると、ほとんどのユーザーは広告バナーを見ていない。ユーザーは例え広告でなくても、広告のように見えるものを無視する。そのため、ナビゲーションアイテムが広告バナーのように見えてしまう場合は注意が必要。
かなりためになりますね。諸々注意していきたいですね。
詳しくは以下からどうぞ。
» 10 Useful Usability Findings and Guidelines

土曜日, 10月 10, 2009

ラフなメモを合成写真してくれる！

http://gizmodo.com/5374890/this-is-a-photoshop-and-it-blew-my-mind

金曜日, 10月 09, 2009

無料でウェブページ内のユーザーの行動を可視化してヒートマップを見せてくれる「ユーザーヒート」

http://userheat.com/

http://www.userlocal.jp/news/200909301/

有名政治家に学ぶ、説得できる話術

■正反対を並べるコントラストの術
例）"ask not what your country can do for you ,ask what you can do for your country（国家が自分に何をしてくれるかではなく、自分が国家のために何ができるかを問おう）" ――ジョン・Ｆ・ケネディ／1961年
ネガティブな事柄のあとにポジティブな事柄を持ってくるのがミソです。そうすると後者がよりくっきりと引き立ってくるのだそうです。鉄の女サッチャーの有名な言葉"You turn if you want to, the lady's not for turning.（後戻りしたいならすればいい、女は後戻りしない）"もこのコントラストを利用した話法。

■3回繰り返しの術
例）"Education, education, education（教育、教育、教育！）" ――トニー・ブレア／1997年
同じ単語、もしくは似た意味の単語などを3回繰り返すマントラ法です。オバマ大統領の勝利演説では10分間で29回もこのワザが使われました。3回というのは、その言葉を絶対的に印象付ける最少の回数なのだとか。"here, there and everywhere"などの表現もこれに当たりますし、キリスト教のお祈りの言葉でもよく使われているそうです。

Windows 7/VistaのPCをワイヤレスホットスポットとして活用する方法！

プロから教わる、良い文章を紡ぐ5つの珠玉のテクニック

1. 使い古された言葉ではなく"自分の言葉で"書く
私たちは本当に豊かな言葉を持っているのです。それをぜひ使ってください！　同僚に宛てて書いていても、まったく見知らぬ人に向けて書いていても、いつでも一番ふさわしい美しい言葉を探すこと。放っておくと、ありきたりの常套句が浮かんでくると思います。でも、「上記のように...」ではなく「私が思ったのは...」と書いたり、「エンドユーザー」ではなく「パソコンを使っている人たち」と書きましょう。比喩的な表現を使う時も「バケツをひっくり返したような雨」なんて使い古された言葉ではなく、「空はどんよりとして、やっかいの種をひっきりなしに落としてくる」など、自分の言葉を使ったオリジナルな表現を探しましょう。

2. 名詞を使う時はよく吟味すること
名詞というのは文章の要です。どの名詞を選ぶかによって、その文章のキャラクター、イメージ、テーマなどが決まってきます。最もイメージにふさわしい、そして正確な名詞を選びましょう。例えば「家」という言葉を使う時、別荘、小屋、二世帯住宅、東屋、古民家、庵、長屋など、色々な選択肢がある中から、「なぜ『家』を選んだのか？」と意識したことはあるでしょうか？
漠然とした名詞を使う時は、細心の注意が必要です（住宅、住居、住まい、居住空間などの抽象的な表現はまた別の話です）。時に、校長先生が保護者の人たちに向かって「コミュニケーションを円滑にする技術は折衝能力を上げるのです」と言ったりしますが、ただ「子どもたちが上手に文章を書けるように助けてあげましょう」と言えばいいのです。相手がきちんと理解できるかどうか、も意識しておくと、よりよく吟味できます。

3. 動きのある動詞を選ぶこと
動詞なんだから動きがあるのは当たり前だろうと思われそうですが、動詞には"静的な動詞"と"動的な動詞"があります。静的なものは、「いる」「ある」「なる」などです。動的なものは、「鳴らす」「しゃべる」「驚く」などです。文章を書く時には、最初は知らないうちに静的な動詞を使ってしまいます。ところが、動的な動詞を織り込むと、途端に文章へ躍動感が生まれます。自分の書いた文章を見直して、ぼんやりとした静的な動詞を外し、イキイキとしたものにしましょう。

4. 曖昧な表現は避けること
名詞をよく吟味すると、無駄な形容詞を使わずに済みます。また、動きのある動詞を選ぶと、無駄な副詞も使わずに済みます。あとは、あいまいな飾り言葉を無くすようにしてみましょう。例えば、「私の頭の中の景色」と「私の想像力」を比べてみてください。余計な修飾語をいくつも使うのはやめて、分かりやすい1つの単語を選びましょう。

5. 書き手の立場に合わせたトーンで
すべての文章は会話と同じです。その文章で、読み手と自分がどのような関係性でありたいのかを明確にしましょう。権威ある作家なのか、流行を先読みする人なのか、賢い友人なのか、どういう立場で書いていますか？　立場や関係性に合わせて、会話のように文章のトーンも変えてください。権威ある立場ならば、凛とした厳然たる言葉で「指示語を使えば、信頼を得ることができるでしょう」。気兼ねない友人のようにしたければ、くだけた言葉で「読んでる人に話しかけたらいいんじゃない？」。読者と同じような立場で言いたければ、"私たち"という言葉を使って「どんな文章を書く時でも、私たちはみな悩んでいるのです」。一度立ち位置を決めたら、決してそれからブレないことです。

お休み前のストレッチ

お休み前のストレッチです。

http://www.sugisetsu.net/stretch/oyasumi.html

木曜日, 9月 24, 2009

PSD　５０選

http://designrfix.com/freebies/free-psd-files-collection-of-50-psd-files-from-around-the-web

火曜日, 9月 22, 2009

CSSとJavaScriptで作るフォームエレメントのチュートリアル51

1st webdesignerで、CSSとJavaScriptで作るフォームエレメントのチュートリアルがたくさん紹介されています。

いくつかご紹介。

Changing Form Input Styles on Focus with jQuery。フォームの中にラベルを表示して、フォーカス時にラベルを消してくれる

Turn postcard photo into a stunning comment form using CSS古いポストカードを使ってコメントフォームをつくったようなデザインのチュートリアル

CSS Tableless Formテーブルを使用しないフォームデザイン。floatとネガティブマージンを使用
テクニカルで気の利いたものが多いですね。
その他は以下からどうぞ。

» 51 Form Element Resources and Tutorials Using CSS And Javascript

土曜日, 9月 12, 2009

ロボットのインテリア

rocking chair robo, ubermorgen.com from antjeverena on Vimeo.

wag the robo, ubermorgen.com from antjeverena on Vimeo.

animated antlers, ubermorgen.com from antjeverena on Vimeo.

水曜日, 9月 09, 2009

ステンレススチールマン

プレゼン用デザイン集

パワーポイントでのプレゼンのときのデザイン参考
http://noteandpoint.com/

クールなJavaScriptプラグイン集

» JQuery Validate
jQueryによるクライアントサイドのバリデート

» PrettyCheckboxes - jQuery　
FancyFormと似たかわいいチェックボックスを作るjQueryライブラリ

» Thickbox　
画像だけでなくテキスト等も読み込めるlightbox

» FancyBox　
超クールなFancybox。画像をすーっと拡大してくれる。デザインがMacライク

» Slideshow 2! for MooTools　
とてもクールなMooToolsによるスライドショー

» SmoothGallery　
こちらも超クールなスライドショー。MooTools v1.11を使用

» DynamicDrive - Carousel Slideshow　
3Dに魅せるカルーセルギャラリー

» jQuery UI Tabs　
jQueryを使ったシンプルなタブコンテンツ

» SmoothScroll　
するするっとスクロールするMooToolsスクリプト

» jQuery Tooltip Plugin　
クールなツールチッププラグイン

» jQuery Accordion　
jQueryを使ったアコーディオンメニュー
かなりかっこいいものが揃っていますね。
その他のリストは以下からどうぞ。

» 40 Super-Neat JavaScript Plugins

CSSできれいなサイト、テンプレート

CSSできれいなサイト、テンプレート９つ
これは、使えるかも。
http://www.crazyleafdesign.com/blog/9-beautiful-free-css-web-templates/

やる気を盛り上げる、いろいろな記事

「充実感」を感じやすい人、できない人：日経ビジネスオンライン

のめりこみ・没頭の科学。フロー理論について。ゲームはフロー状態を発生させる効果的な装置。同じように仕組みを作って仕事に適用すれば生産性はあがりそうです。

【1】「脳とやる気」1秒で勉強意欲に火がつく法達人のテクニック

脳科学からみるやる気の管理方法。まずウォーキングや雑用などで準備運動からはじめて徐々にやる気を上げていく科学的な方法について解説。

池谷裕二が指南！やる気が出る「脳」のだまし方達人のテクニック

脳の本で有名な池谷裕二氏の記事。脳の仕組みについて理解した上で、脳のやる気をいかに上げていくかという話。

【2】「脳とやる気」1秒で勉強意欲に火がつく法達人のテクニック

五感に刺激を与えることでモチベーション向上。目的意識も持つ

やる気に関する驚きの科学

Photoshopで使えるデザイン

45 Useful Collection of Free Photoshop PSD Files

そのまま使えるウェブサイトテンプレートのPhotoshopファイル４０種類

金曜日, 9月 04, 2009

Ajax：ローディングアイコンが作れるジェネレータ

Ajaxload – Ajax loading gif generator
色や透過指定ができますね。あまり作れる画像の種類は多くないっす。

Chimply generates your images
これは有名ですね。画像の種類も豊富です。

Preloaders.net Free AJAX animated loading gif’s 3 dimensional (3D)
こちらも種類が豊富。3Dアイコンとか良い感じ。

YouTube 小技

&fmt=18
URLの最後に「&fmt=18」とか「&fmt=22」とかつければ高画質で再生してくれる場合がありますよ。

&ap=%2526fmt%3D18
さきほどの小技を貼り付けコードで使いたいときは「&ap=%2526fmt%3D18」か「&ap=%2526fmt%3D22」を使いましょう。

#t=03m22s
途中から再生させたい場合は「#t=03m22s」のようにします。分数と秒数ですな。

&showsearch=0
検索ボックスを消したい場合は「&showsearch=0」をつけましょう。

&autoplay=1
貼り付けた動画をいきなり再生させたい場合は貼り付けコードに「&autoplay=1」を追加。

&rel=0
貼り付け用コードに「&rel=0」をつけておくと関連動画をOFFにしてくれます。

http://www.youtube.com/v/XXXXXX
たまに特定の国でしか見れない動画がありますが、その場合はURLを「http://www.youtube.com/watch?v=XXXXXX」から「http://www.youtube.com/v/XXXXXX」に変えるといいです。

http://www.youtube.com/watch/v/XXXXXX
いきなりフルスクリーンでみたいときは「http://www.youtube.com/watch?v=XXXXXX」を「http://www.youtube.com/watch/v/XXXXXX」にします。

ダウンロード
URLにちょろりと細工するだけでダウンロードできますよ。
kickyoutube.com
kissyoutube.com
youtubemp4.com
youtubefire.com
pwnyoutube.com
youtubepod.com

リピート再生
リピート再生も定番ですな。
endlessyoutube.com
youtuberepeat.com

すっきり再生
画面をすっきりさせて再生させたい場合。
http://quietube.com/v.php/ の次にYouTubeのURL
http://silentube.com/a.php/ の次にYouTubeのURL

いきなりHD
HD画質の動画がある場合、「&hd=1」をつければOK（thanks @awefさん！）

木曜日, 8月 27, 2009

神道関連書籍情報

効果的なセールスプレゼンテーションを実現するための方法

セールスプレゼンテーションはたいていの場合、気苦労の多い作業となるはずだ。そして、景気の後退や、契約をまとめるというプレッシャが加わることで、この作業はよりストレスの高いものとなるのである。また、概要説明や格好の良いPowerPointスライドだけで成果を上げることも難しくなってきている--決算の数字を良くするために経費を削減しようとしている企業顧客が相手の場合は特にそうだ。IBMといった企業が営業手法を変えることで、顧客のニーズに対してより適切に応えられるようにした理由は、まさにここにあるのである。潜在顧客との打ち合わせを準備する際に、以下のテクニックを用いることで、真の成果を上げるためのより効果的なセールスプレゼンテーションを実現してほしい。

手順1：相手の悩みの種を知る

目標：顧客が抱えている問題に対処するためのシナリオに絞る

　セールスのためのシナリオ作りに万能のソリューションなどというものは存在しない。同じ業界内でさえ、潜在顧客が解決したいと思っている問題は顧客毎に異なっているのである。このためあなたの仕事は、こういったニーズを理解し、顧客が抱える一番の課題に直接応えるようなシナリオを作り上げることになるわけだ。

　こういったことを効果的に行ううえでは、十分な調査が欠かせない。顧客のウェブサイトを手始めとして、掘り下げた調査を行うべきである。広告代理店Punchの営業コンサルタントであり、取締役でもあるKyla O'Connell氏は「ウェブサイトやソーシャルネットワーキングといったテクノロジはあらゆる人々に公開されているものであるため、見込み顧客は自分たちのビジネスについてあなたが熟知しているはずだと考えるのだ」と述べている。また同氏は「顧客のオフィスまで行って『御社のビジョンを聞かせていただけませんか？』と尋ねることは得策ではない。彼らはあなたがそういったことを既に知っていて当然だと思っているのだ」とも述べている。顧客企業とその競合他社についてインターネットで調べることは必要であるが、それで終わってはいけないのである。

　インターネットは有益であるものの、実際に人と話すことで得られる洞察に及ぶものはないのだ。このため、営業先の企業に勤務しており、あなたにアドバイスしてくれる人を見つけることはすこぶる有益なのである。自身のソーシャルネットワークや業界団体を活用し、企業内部の事情、特に企業が直面している「痛み」、すなわち現実の懸念について詳しく教えてくれる「内部の指南役的存在」を見つけ出すべきである。

　最後に、購入の意思決定に携わる人物について可能な限りの知識を得ておくべきである。購入責任者は問題を解決するか、職を失うかという大きなプレッシャにさらされているかもしれないのだ。問題の内容を把握できたのであれば、あなたの会社の製品やサービスがそのソリューションとしてふさわしいということを主張できるようなプレゼンテーションを作成すべきである。プレゼンテーションのシナリオが潜在顧客を取り巻く状況に一致していることを明らかにすれば、彼らの同意が得やすくなるのだ。

大事なこと

顧客のことだけでなく、業界のことについても学習する

　顧客企業の社内組織、特に意思決定に携わる人物について知っておくことは、営業上効果的なシナリオを作り上げるうえで必要不可欠となる。とは言うものの、より大きな視野に立つ必要もある。つまり業界の状況を見過ごしてはいけないのだ。業界誌やニュースレターを購読したり、セミナーに参加したり、業界についての見識を深めることができるオンラインコミュニティへの参画に務めるようにすべきである。

　2001年の話である。IBMの幹部らは、同社の顧客に対してIBMの営業担当者にどういったものが欠けているのかを問いかけた。雑誌「Sales and Marketing Management」掲載のインタビューによると、その結果、IBMの営業担当者は顧客の業界に関する知識が十分ではないという答えが返ってきたというのである。IBMはこれを受けて、自社の営業担当者を業界の専門家とするべく再教育を行ったのだ。また同社は顧客の企業規模や業界、拠点に従って営業担当者のチームも再編した。こういった対応により、IBMの営業担当者全員が（上司や、業界の専門知識を有している他の社員の判断を仰ぐことなく）顧客のニーズに迅速に応えられるようになったのである。

手順2：訴求力のある（眠くならない）プレゼンテーションを作る

目標：潜在顧客に的を絞った、興味深いシナリオを作り上げる

　過去に作成したPowerPointスライドのつぎはぎで手っ取り早く済ませてしまおうという誘惑に負けることなく、話の導入部、考察、結論にいたるまで明確なストーリーを持ったプレゼンテーションを作り上げるように心がけてほしい。コミュニケーションコンサルティング会社Latimer GroupのDean Brenner氏は営業担当者に対して、最終草案を書き始める前に、伝えたいストーリーの骨子をまとめるよう強く勧めている。同氏は、まず最初に目標を設定するよう勧めている。それには次の2つの疑問について考えてみることだ：自分は何を達成したいのか？そしてプレゼンテーションの終了時点で顧客にどういった考えを持ってもらいたいのか？Brenner氏は、「（競合他社がより安価な製品を売り込んでいる場合の）目標は、価格を超越した価値を顧客に認めてもらうことになるはずだ」と述べている。また同氏は、「あらゆるコミュニケーションは、あなたが聴き手に伝えようとしている明確なイメージを用いて紡ぎ出されるべきである」とも述べている。

　PowerPointのスライドショーやノートといった小手先に頼る前に、伝えたいメッセージを明確にしておくべきである。Brenner氏は「こういったものは、あなたが伝えようとしているストーリーを最終的に飾り立てるものでしかない」と述べている。ポイントを説明するために図やビデオ、画像を用いるのはよいが、テキストしか書かれていないスライドを何枚も見せるようなことは避けるべきである。O'Connell氏も「PowerPointのスライドに頼りすぎて、スライドを読むだけに終わる営業担当者が多過ぎる」と述べている。また、最も重要なことは、あなたの企業がいかに素晴らしいかを述べるばかりで、潜在顧客の抱えている問題についての取り組みを説明しない、茶番劇のようなプレゼンテーション（O'Connell氏が言うところの「初心者レベルの恥ずかしい過ち」）を避けることである。

チェックリスト

プレゼンテーションの作成

　プレゼンテーションに臨むにあたり、準備が万全であることを確認しておくべきである。以下は、忘れてはならない事項である。

伝えたいポイントを顧客に合わせて調整する。
プレゼンテーションの目標を書き出しておく。
顧客のニーズについて洞察し、導入部、考察、結論とつながるしっかしりたストーリーに展開する。
ストーリーを最も判りやすく説明できるビジュアルな資料を作成する。
専門用語や、分かりにくいスライドをプレゼンテーションから取り除く。
練習に練習を重ねる。
実際のプレゼンテーションに臨む前に、あなたの営業指南役や、信頼できる同僚など、少なくとも1人からフィードバックをもらう。

手順3：プロらしく話す

目標：信憑性や説得力のある、創造的なプレゼンテーションを行う

　Sjodin Communicationsの創設者であり、「New Sales Speak: The 9 Biggest Sales Presentation Mistakes and How to Avoid Them」（新セールストーク：セールスプレゼンテーションにおける9つの大きな過ちと、その回避方法）の著者でもあるTerri Sjodin氏によると、パンチの効いたプレゼンテーションを行うには、以下のような3つの重要な要素があるという。

1．主張を盤石かつ説得力のあるものにする

　説得力のある主張を行えない場合、数多くのデータをとりとめなく引用することで誤魔化そうとするケースがしばしば見受けられる。しかし、それは間違いだ。データは強力なストーリーを裏付けるために使用されるべきものであり、ストーリーが存在しなければデータは使いものにならないゴミの山でしかない。Sjodin氏は「われわれは先入観にとらわれた情報を提供するわけである。このため、自らの立場を認めればよいのだ」と述べたうえで「説得力を弱める必要はない。自社の製品やサービス、自分自身に自信がある場合は特にそうだ」と述べている。同氏は、営業担当者に対して弁護士のような心構えで臨むことを奨励している。つまり、厳しい裁判官でも説得できるだけの証拠で固めた主張を作り上げるのである。

2．創造的なプレゼンテーションによって聴き手の心を掴む

　Sjodin氏は「主張そのものに説得力があっても、それを提示する方法には工夫が必要だ」と述べている。つまり、漠然とした説明や、つまらない視覚資料は避けなければならないということである。他の顧客の体験談を用いたり、ポイントを明確にするためにストーリー仕立てにするのも手だろう。Sjodin氏は「営業担当者としての自らの分析力を発揮し、プレゼンテーション資料について真剣に考え、他社との差別化を図ることができているか自問してみるべきだ」と述べている。

3．自分らしいスタイルで話す

　偽者は皆からそっぽを向かれる。Sjodin氏は「エディー・マーフィーがロビン・ウィリアムズ風のパフォーマンスを行っても誰も見たくないはずだ」と述べたうえで「彼らは2人とも素晴らしいコメディアンだが、それぞれ独自のスタイルというものを持っている」と述べている。営業担当者の場合も同じである。知らないことを知っているふりをしたり、業界の専門用語を多用したりしてはいけない。自分らしいスタイルで話し、身近に感じてもらうのである。自分を偽ってみたところで、潜在顧客に見破られるということは覚えておくべきである。

やってはいけないこと

情報過多は避ける

　Sjodin氏は、顧客が既に知っている情報をプレゼンテーションに盛り込むという落とし穴に注意しなければならないと述べている。事実を過度に詰め込むことで、プレゼンテーションが滞り、スムーズに進まなくなってしまうのである。同氏は「プレゼンテーションが情報過多の状態になってしまい、『だから』という論理展開がないがしろになっていることもよく見かける」と述べている。同氏によると、こういったアプローチを採ってしまうと、聴き手自身が重要なものごとを見極めるために情報を整理せざるを得なくなるのだという。プレゼンテーションに情報を詰め込み過ぎると、数々の落とし穴を自ら作り込んでしまうことになるのである。顧客は退屈したり、講義を受けさせられているような気分になるかもしれない。さらに悪いことに、そういった情報やデータが流用され、他社との契約交渉に用いられるということもあり得るのだ。

元：http://japan.zdnet.com/news/ir/story/0,2000056187,20398878-4,00.htm

水曜日, 8月 26, 2009

ぼく、眠いニャン、ちーにゃん

木曜日, 8月 20, 2009

アイコンセット５０個

アイコンセット５０個です。
PSDで編集化。
http://speckyboy.com/2009/08/17/50-high-quality-free-icon-sets-in-psd-format/

火曜日, 8月 18, 2009

JavaScriptで作られたオンブラウザエディタ

JavaScriptで作られたオンブラウザエディタです。
これをＡｉｒに組み込めば、TextAreaでのＨＴＭＬのややこしい修正処理をパスできる。

» TinyMCE　web上で最も有名なテキストエディタの一つ
» FCKeditor　TinyMCEに比べて軽い。ファイルマネージャーとスペルチェッカーが優れている
» YUI Rich Text Editor　モバイルアプリを作るならおすすめしたいエディタ
» WIMeditor　CSSのマークアップにフォーカスしたエディタ
» Xinha　MathMLをサポートしている特徴を持つエディタ

その他のリストは以下からどうぞ。
» 8 Online Text Editors To Consider For Your Projects

月曜日, 8月 17, 2009

ＣＳＳでのリスト表示

5 CSS tricks with lists | Pieter Beulque

ul, ol, dt などのリストを使った各種テクニック集が紹介されています。

(1) 数値部分とリスト部分のデザイン分け

(2) メニュー風のリスト作成

(3) 最後の要素がフェードアウトするリスト作成

(4) 飲食店のメニュー風にスタイルされたリスト作成

(5) １つのリスト要素を複数行にするリスト作成

HTML、CSSがサンプルとして公開されています。
知っておくと便利そうなテクニックですね。

関連エントリ

ＣＤジャケットに入れたような画像にしてくれるＣＳＳテクニック

これを使うと、写真をＣＤジャケットに入れたり、ＣＤレーベルにしてくれる便利もの。

http://www.komodomedia.com/blog/2009/03/sexy-music-album-overlays/

ＪＳフレームワーク「カーソルを合わせるとアニメーションしながら切り替わるリンク】」

強力なＪＳフレームワーク。

特にカーソルを合わせるとアニメーションしながら切り替わるリンクがお勧め。

参考：http://phpspot.org/blog/archives/2009/08/javascriptuize.html

シンプルなのにクールなJavaScriptショッピングカートシステム「simpleCart」

日本語に関しては、通らない？かもしれないとのこと。

ＰａｙＰａｌを組み合わせれば、on local でショッピングカートが実現できそう。

ちゃんとここに手を置いておくのぉっ

月曜日, 8月 10, 2009

わーい、ニャン、バタン、あれ？

土曜日, 8月 08, 2009

起床前16時間食べないと睡眠サイクルがリセットできるらしい

木曜日, 8月 06, 2009

Surrogates

走る走るロボットたち

ブランコで幸せなわんちゃん

ロボットの手の時計

Robotic Hands Clock

月曜日, 8月 03, 2009

いろいろな生き物参考のロボット

火曜日, 7月 28, 2009

自分で組み立てるロボット

金曜日, 7月 24, 2009

いろいろなパッケージの型紙があるサイト

http://howpack.com/

Gifアニメを作成できるサイト

http://www.loogix.com/gifim/Recursion

月曜日, 7月 13, 2009

ぼっぼくのお友達が、増えッちゃった！！？

木曜日, 7月 09, 2009

礼金ゼロでマンションを借りる方法

■UR物件

またこれか！と思われるかもしれませんが、まぁ、UR はやっぱり最強なわけです。
関東以外だと、あまり新しい物件がないのがちょっと残念ですけどね。
礼金・仲介手数料なく、更新料もなく、保証人も不要で退去時に敷金はほぼ全額かえってくるし、退去前通知は 14 日で Ok というすばらしさ。
あとものすごいのが、住んでる間に家賃が下がることがあります（←民間ではありえない）。
そしてそのとき律儀に新家賃での敷金との差額を返金してくれるそうですよ！まさにネ申！

UR から UR への引越しなら、ほとんど引越し代だけで住んでしまいます。
参考）青い人
※空き物件、ネットは全然更新されないので、必ず電話か営業センターに行きましょう。

■東京都住宅供給公社

持ち家が無い人で東京都民対象なんですが、公社物件を借りるという手があります。
※各都道府県に住宅供給公社はあると思いますので調べてみてください。
超絶一等地の物件を格安で提供していたりする都営住宅は最高倍率は 2000 倍を超えることもあり制限もきついのですが、年何回かやっている都民住宅の抽選には参加する価値はあると思います。（都営住宅は年収制限などの条件があります。）
もちろん、一般賃貸物件もありますし駐車場だけ借りたりもできますので、一度物件をチェックしてみるとよいかと思います。
＃私は条件面でこの公社物件には住めず、実は詳細はよくわかりませんが・・・。
とりあえず礼金・仲介手数料・更新料は不要です。

■公庫物件

これは探すの難しいのですが、住宅金融公庫からお金を借りてマンションを建て（または購入し）それを賃貸に出す場合、「礼金を取ってはならない」というお上（公庫）からのお達しが出ています。
（個人で買ったマンションを人に貸す場合ではなく、貸すためにお金借りた場合ですかね、いわゆる「公庫物件」だそうです）。
この物件の場合、家主が公庫に支払いを終えるまでは更新料も無料です。支払い終えてからどうなるかは知りませんが、支払いを終えるまではひと悶着あると困るらしく敷金返還などは有利に進むといううわさです。

ただ、途中で競売にかかってオーナーチェンジというパターンなどもあるようですので、不動産屋にきちんと確認しておくと良いかと思います。

■投資不動産物件

最後に狙い目というか、あと礼金ゼロの物件としては投資不動産物件があります。
投資不動産物件は、REIT のような母体が開発した賃貸用マンションや、不動産会社が販売しようとしてうまくいかなくて賃貸に流した物件などがあります。

で、この投資不動産物件は、不動産価値が「利回り(通常7%)」で判断されるため、論理年間収入しか見ません。
つまり、礼金ゼロにしようが、多少フリーレントとかつけてでも、とにかく家賃○○円を払って欲しい物件、というわけです。

新築で礼金ゼロの物件がたまに情報誌などに出ていますが、多くは投資不動産物件ではないかと。
こういうものは礼金ゼロは当然として、フリーレント（タダ期間）を何ヶ月もらえるか、が交渉のポイントですｗ

あと、不動産会社が直接開発した物件で賃貸流れにしたものは仲介手数料なども不要ですので、大手不動産会社のHPなどをこまめにチェックすると良いかと思います。この場合、直接取引なので仲介手数料不要になるかと思います。

サイトをかっこよくするCSSテクニック10

WEB HOSTINGというサイトで、サイトをかっこよくするCSSテクニックが紹介されています。

ざっといくつかご紹介。

» Image gallery with hover box preview
　画像マウスオーバー時に拡大表示してくれる
» Alert Box
　シンプルでクールなアラートメッセージデザイン
» CSS Sliding Sprite Window
　CSSスプライトで背景画像をクールに切り替える
» Gradient text effect using CSS purely
　CSSを使ってテキストにグラデーションをつける
» Creating a sliding image gallery
　水平・垂直方向のスライドするイメージギャラリー
» CSS rollover buttons
　JSを使わずにCSSスプライトでロールオーバーボタンを実装

結構いい感じのがそろっていますね。

その他のリストは以下からどうぞ。

» 10 CSS tricks that make website looks cool instantly!

リスト形式でサイトマップを書くとグラフィカルに表現してくれるCSS『SlickMap CSS』

これ、ちょっと便利かもですよ。リスト形式（UL）でサイトマップを書くとスタイリッシュなマップに仕上げてくれるCSSです。ちゃんとリンク先も保持してくれますよ。

site1

↑ こういうHTMLが・・・。

site2

↑ こうなっちゃいます。

かなり綺麗にフォーマットしてくれるのでおすすめかな。HTMLとCSSなので修正も簡単ですしね。

詳細＆ダウンロードは以下からどうぞ。

» SlickMap CSS — A Visual Sitemapping Tool for Web Developers

金曜日, 7月 03, 2009

電気スタンドロボット

ご存知のとおり、Luxo Jr.は、みんなが大好きな映画を沢山生み出してくれる映像制作会社Pixarのマスコットですが、今回ご紹介したビデオに登場しているのは、Pixarが開発したオーディオアニマトロニクスなLuxo Jr.なんです。

月曜日, 6月 29, 2009

便利なPhotoshopのカスタムシェイプ

Naldz Graphicsで、便利なPhotoshopのカスタムシェイプがまとまっています。

ざっといくつかご紹介。

↑はCustom Shape Mix。

便利なPhotoshopのカスタムシェイプ30+
People Silhouettes

便利なPhotoshopのカスタムシェイプ30+
Live Trees

便利なPhotoshopのカスタムシェイプ30+
Custom Shapes Pack v. 1.1

便利なPhotoshopのカスタムシェイプ30+
Splats N Drips_Custom Shapes

deviantArtなどにリンクしているので、ライセンスについてはリンク先を確認してください。

» 30+ Useful Photoshop Custom Shapes Set

知っておきたいフリーのデザインアプリ

Creative Nerdsで、知っておきたいフリーのデザインアプリが紹介されています。

ざっといくつかご紹介。

» Active Pixels
　Photoshopに似た素晴らしいフリーソフト
» Inkscape
　オープンソースのベクターグラフィックエディタ
» Pencil 0.4.4b
　オープンソースの手書きアニメ作成ソフト。Windows,Mac,Linuxで動作する。↑のキャプチャはこちら
» Blender
　オープンソースの3Dモデリングソフトウェア
» Synfig
　ベクターベースの2Dアニメーション作成ソフト

なんだかすごいのがいっぱいあります。

その他のリストは以下からどうぞ。

» 25 Free Must Download Design Programs

木曜日, 6月 18, 2009

宇宙のスケールのでかさを垣間見られる惑星・恒星のスケールモデル　

水曜日, 6月 17, 2009

UIまとめサイト

Collection: Design Patterns

第一位はここかなぁ・・・。なんだかんだでFlickrでUIパターンを集めているグループが一番かな、と。インターフェースはFlickrそのものだし、事例も豊富です。

ui_f1

Collection: [Design Solutions]

ほぼ同点で二位はこちら。こちらもFlickrグループですね。

ui_f2

Interaction Design Pattern Library - Welie.com

三位はこちら。ちょっとマニアックですが、きっちりまとめてあって好感が持てます。

ui_welie

MephoBox | Web Design and Web Inspiration

これが四位かな。いまどきのインターフェースがスタイリッシュにまとめられています。

ui_imadoki1

Pattern Tap : Organized Web Design Collection of User Interfaces for Inspiration and Ideas. The CSS Gallery Alternative - Pattern Tap

こちらが五位。ほぼ四位と一緒ですが。こちらもいまどきのUIですね。

ui_imadoki2

Product Images - ecommr: a collection of e-commerce interface and design elements

ここらへんから番外編。これはショッピングサイトに特化したUIまとめサイトです。そっち系の人は参考になるのでは。

ui_shopping

Yahoo! Design Pattern Library

これも番外編。Yahoo!がまとめたソーシャルサイトのUIパターンです。勉強になりますよ。Stack Overflowの記事とあわせてどうぞ。

ui_yahoo

UI-patterns.com

最後にこれ。サイトの読み込みが遅くて評価しずらいのですが、内容としてはよくまとまっています。

ui_ui

火曜日, 6月 16, 2009

自分でコンセントから充電するロボット

金曜日, 6月 12, 2009

シャツをあっという間にたたむ裏技

リアルロボット写真集

リアルロボットの写真・ビデオ

こちらはＮＡＳＡのロボット写真・ビデオ

木曜日, 6月 11, 2009

CSSスプライトを使ったメニューの作り方

LINE25というサイトで、CSSスプライトを使ったメニューの作り方が紹介されています。

CSSスプライトを使ったメニューの作り方
1枚の背景画像を使って、こんな感じでCSSを指定していきます。

デモは以下から。

» View Demo

ソースファイルもダウンロードできますね。

ぜひ見てみてくださいー。

» How to Create a CSS Menu Using Image Sprites

ページのめくれを実装する方法

WebDesignBoothで、ページのめくれを実装する方法が紹介されています。

ざっとご紹介。

» imple Page Peel Effect with jQuery and CSS by Soh Tanaka
Soh Tanakaによる、jQueryとCSSを使った例
» The Sexy Curls jQuery Plugin
　Elliott Kemberによる、jQueryを使った例。jQueryとjQuery UIの両方が必要
» jQuery Page Peel 1.2 by Smpl Multimedia
オプションが豊富なjQueryプラグイン
» How to create a page peel advertisement in Wordpress
　WordPressでページのめくれを実装する方法
» Wordpress Page Peel plugin
　Avramovicによる、WordPressで使えるプラグイン。コンパネからいじれる

詳しくは以下からどうぞ。

» 5 Extremely Simple Ways To Add Page Curl To Your Website