日本にこないかなぁ。
金曜日, 2月 26, 2010
会議に役立ちそうなエントリーのまとめ
会議に役立ちそうなエントリーのまとめ
まずはここから。ホワイトボードなしのミーティングとか考えられんす。
やんわりとした口調を心がけつつ、こうした台詞を使うといろいろスムーズになります。
こちらも大事。「身近な物」を使って説明する手法をマスターしておきましょう。
ネガティブ発言をする人向けに心がけておくといいかも。
議論が感情的になってしまったときに思い出したい言葉。
使えるシーンが限定されますが、マンネリ化した会議にはいいかもですよ。
こちらもたまに使ってもいいかも。「書き出してから発表する」という文化が根付いた後がよいかと。
会議じゃないけど、外部の人が来るちょっとした会に使えるかと。
ミーティングで使えるちょっとした話法いろいろ
- 「今日何を決めますか？」
- 「今日は何時までですか？」
- 「他にアジェンダありますか？」
- 「何分いります？」
- 「じゃ、○○が解決したとして・・・」
- 「質問ですか？コメントですか？リクエストですか？」
- 「あまり時間はないですが、今何を決めますか？」
- 「いつまでにやりますか？」
- 「どうフォローアップしましょうか？」
- 「他にもやることありますよね？」
- 「じゃ、To Doをまとめますか」
特に外部の人とミーティングする場合、ミーティングの作法が違うことが往々にしてあります。そうした場合、お互いの出方を伺いつつやるので時間の無駄になりがち。
そうしたときはこの質問を最初にしましょう。成果にフォーカスさせることにより、メンバーがちょっとだけ真剣になりますよ。
終わりの時間が決まっていないとだらだらミーティングが終わります。最初に決めておいて、ホワイトボードに書いておきましょう。当たり前だけど往々にして決まっていないことが多い、もしくは参加者間で意識の違いがある場合が多いです。
アジェンダはミーティングの最初に全員に確認しましょう。「今日、あのこと決まるのかなぁ・・・」は大きなストレスになります。
しゃべりすぎる人には事前にこう聞くようにしましょう。こう聞いておけば「○分経ちましたよ」と話を中断しやすくなります。
なにか問題があって議論が前に進まないときは（よくある）、とりあえずそれが解決したと仮定して話を進めましょう。往々にして最初の問題が問題じゃなくなることがあります。
だらだらとしゃべる人に向けて。本人もわかっていない場合が多い。
議題のわりに時間がない、というシーンはよくあります。司会は時間を見ながら「今決められないことについて、今どうするか？」を常にウォッチしていなくてはなりません。
期限の決まっていないタスクのなんと多いことか・・・（と思いません？）。
重要なタスクに関してはフォローアップする方法を決めておきましょう。誰か他の人に頼むといいですね。
見積もりが甘い人は仕事を引き受けがち。そういう人はウォッチしておいて、「他にも仕事あるんだから、今うけない方がよくない？」とやんわりと警告しましょう。
ミーティングの成果はそこで決められたTo Doで決まります。最後に「誰が」「いつまでに」「具体的に何をするか（何がどうなったらそのタスクが終わりなのか）」を確認して終わりましょう。
ちなみにミーティングにはホワイトボードが必須ですよね・・・と思う今日この頃。以下の記事もよろしければどうぞ。
カジュアルな勉強会の進め方
- 巨大ポストイットを用意
- 自己紹介
- お名前
- やっていること
- その人の人となりがわかる軽い質問
- テーマについて質問を書き出す
- 一人ずつ発表
- ゲストのプレゼン
- ゲストが残りの質問に答える
- 追加の質疑応答
ホワイトボードでもいいですが、スペースが足りなくなることが多いので、巨大ポストイット（イーゼルパッド）があると便利っす。
書いたらはがして壁に貼っておくと良いですよ。
まずは自己紹介。あまり長いと時間がとられるので以下の項目を40秒程度でしゃべってもらいます。
今まで質問した中で個人的に良かったな、と思ったのが「思い出に残る旅行」「ケータイに一つ機能を追加するとしたら何？」「他の人にはない特殊能力ある？」「自分と付き合うことで得られるメリット」などなどだったかな。
その人に特有の経験が引き出せる質問、その人の知性にチャレンジするような質問が良いです。
なお、自己紹介を聞きながら司会者はイーゼルパッドに「席順マップ」（席順と名前がわかるような図）を書くと良いでしょう。あとで「あの人の名前がわからない！」ということがなくなります。
本日のテーマについて説明し、その周辺で疑問に思っていることを書き出してもらいます。特に制限は設けず、「テーマについて疑問に思っていることをなんでも」という具合に出してもらいます。
なお、時間の節約のため「書いたままを読んでもらいます」と説明し、きちんと文章で質問を書いてもらうのがもっとも大事です。こうすることで発表のときに説明しだす人を防ぐことができます。
全員書いたら一人ずつ発表します。最初は「一人一個だけ発表。他の人に言われたものは飛ばしてください」ルールで。2～3週すると質問がなくなるのであとは適当に残っている人に発表してもらいます。
質問は全部イーゼルパッドに書いていきます。なお、「その質問の意図って何？」という空気が流れたときは司会者はそれを察知してちょっとだけ突っ込むといい感じになります。
それから長くしゃべりだす人がいたら「書いてあるものだけを読んでください」とやんわりと指示します。
ここまでやってからゲストのプレゼンです。その場にいる人が疑問に思っていることがすべて分かっているので、適当に資料をはしょりながら発表することができます。参加者も聞きたいことだけ聞けてハッピー。
なお、このプレゼンはすっとばしてもOKです。ゲストによっては忙しい人もいらっしゃるでしょうから、事前に資料を用意しないで来ていただくのも手です。
プレゼンでは解決しなかった質問に対してゲストが回答します。時間がないときは司会がざざっと一問一答的にこなしていくと良いでしょう（← 簡単に書いたけど実は難しいｗ）。
プレゼンを聞いているうちに新しく疑問が出た場合は追加で質疑応答をします。
まぁ、つまるところ、ゲストのプレゼンをいきなりやらずに、その場に来ている人の疑問をすべて吸い上げてから議論を開始する、という手法です。
他の人がどういう疑問を持っているか、ということ自体が勉強になることも多いのでとってもおすすめです。ゲストのプレゼンがいきなり始まる勉強会も多いですが、お互いに「？」になるときも多いですよね・・・。
プラナフ・ミストリーさんのSixthSenseテクノロジー
ジェスチャーによるインターフェース。というだけでなくPCという存在をなくすアイデア。
これとヘッドマウントディスプレイを組み合わせれば、iPodなどの制約を抜け出して世界観が広がる。
セカイカメラも、iPodに縛らせずにこの世界に入るといい。
↑ 14分ほどですが、デモ満載で飽きません。View Subtitlesで日本語を選びましょう。
Twitterツール開発者は必見！Twitter APIの動作が簡単に確認できる『Twitter API Viewer』
Twitter API ViewerはTwitter APIの動作確認が簡単にできるツールですよ。パラメーターを入力してSubmitすればどんなリスポンスが返ってくるかがわかります。
↑ トップ画面。API種別ごとにうまいことまとまっています。
↑ たとえばUser情報。IDを指定してSubmitすると・・・。
↑ XMLが表示されます。
Googleスプレッドシートで使える便利な関数いろいろ
Google Docsのスプレッドシートで使える関数ですが、Excelっぽいやつは当然として、GoogleのAPIを利用した関数がいろいろ使えるのですね。ちと勉強になったのでまとめてみますよ。
■ ユニークな値だけ抽出
Excelだとわりと面倒な「ユニークな値の抽出」ですが、Google Docsだとunique()一発すね。
↑ これでOK。
メールアドレスの重複をはじく、なんかの処理に便利そうですね。
■ 閾値を指定してフィルタリング
指定したデータセットのうち、10より大きいものを返す、といったことも簡単ですね。Excelのオートフィルタも便利ですが、こうやってセルに直接流し込んでくれるのがGoogle Docsの良いところですね（データセットを返す、という特徴ですかね）。
↑ こんな感じ。複数条件指定も可。
■ Googleで検索した値を表示
Googleならではの機能ですよ。都市名から国を検索して表示したり、有名人の名前から年をひっぱってくることもできるようです。
↑ こういうのもOK。David Allenさんの年がわかりますよ・・・便利。
どういうオプションが使えるかは以下に詳しいです。
» GoogleLookup の使用 : 関数 – Google ドキュメント ヘルプ
■ Googleで翻訳した値を表示
さらに翻訳なんかも可能ですね。超絶便利。
↑ 日本語もこうやって指定すればOK。
言語コードは以下にありますよ。
» Translation API のクラス リファレンス – Google AJAX Language API – Google Code
他にも株価を表示したり、といった機能もありますね。ついつい慣れでExcelの方を起動しちゃいますが、Google Docsも使い込んでみますかね。そのほかの便利関数は以下からどうぞ。
» 10 Useful Google Spreadsheet Formulas You Must Know – woorkup.com
木曜日, 2月 25, 2010
黄金比をサイトのデザインに取り入れる簡単な３つの方法
黄金比をサイトのデザインに取り入れる簡単な３つの方法を紹介します。
黄金比とは、「1:1.618」からなる比率で、最も美しい比率と呼ばれています。
赤線は、黄金螺旋。
その調和された比率は、トランプカードなどの日常的なものから、ギリシアのパルテノン神殿、ミロのヴィーナス、モナリザなどの芸術分野まで、多数存在します。
黄金比を矩形に使用する
サイトで使用する画像などの矩形に黄金比を適応します。
サンプルでは、144pxと233pxの組み合わせを使用していますが、「1:1.6」を利用して100pxと160pxなど簡易なものでも効果はあると思います。
黄金比を横長の矩形に使用
黄金比を縦長の矩形に使用
黄金比をマージンに使用する
レイアウトにグリッドシステムを取り入れマージンを使用した場合、数種類のサイズが必要になる場合が多くあります。
その際、１つの値を基準とし、それ以外のマージンに対して黄金比を用いて算出する例を紹介します。
黄金比を元にマージンのパターンを算出：例１
5, 8, 13, 21, 34, 55, 89, 144, 233、を適応したスケール
黄金比を元にマージンのパターンを算出：例２
6, 10, 16, 26, 42, 68, 110, 178, 288 を適応したスケール
グリッドシステムとは、下記のエントリーを参照ください。
グリッドシステム -サイトへの有効活用方法
黄金比をパーツに使用する
サイトに使用するパーツのデザインに黄金比を導入します。
黄金比を見出しの画像に使用
左横に罫線を入れた見出しの例です。
罫線を「1」マージンを「1.6」として黄金比を導入しています。
２番目のものは罫線が太いので、点線にしています。
黄金比をナビゲーションの画像に使用
よくあるナビゲーション画像をサンプルにしています。
文字の高さに対して、「1」「1.6」の黄金比のマージンをもたせ、画像を作成しています。
２番目のものは、さらにグラデーションの開始地点を黄金比で算出しています。
オブジェクトをさまざまな方向に回転させるスクリプト
オブジェクトをパスに沿って、さまざまな方向に回転させることができるスクリプトをFredHQから紹介します。
Roundabout ShapesはjQueryのプラグインのため、実装にはjquery.jsが必要です。
CSS3対応ブラウザだとより美しいドロップダウン型のナビゲーション
上記のキャプチャはCSS3対応ブラウザ（Chrome）のもので、非対応ブラウザでも下記のように正常に動作します。
CSS3非対応ブラウザ（IE7）でのキャプチャ
ウェブデザインに黄金比やフィボナッチ数列など数学的な要素を取り入れる方法
ウェブデザインに黄金比やフィボナッチ数列など数学的な要素を取り入れる方法
はじめに
「数学は美です。」
数字嫌いの人には、ばかばかしく聞こえるかもしれません。けれども、自然や宇宙にある美しいもの、最も小さい貝殻から最も大きい銀河まで、数学的な要素を持っています。
数学ははるか昔から今日まで芸術や建築のデザインに利用されてきました。しかし、ウェブデザインではあまり利用されていませんでした。数学はクリエイティブなデザインを生産するツールです。これはすべてのデザインを数学に頼るものではなく、数学を友人としてみなすべきであるということです。
ここで紹介する数学的な要素は、すぐに実践できるようにすべてPSDファイルとしてダウンロードすることができます。
※PSDファイルは元記事にてダウンロード可です。
1. 黄金比（黄金四角形）
黄金比とは「1:1.618」からなる比率で、最も美しい比率と呼ばれています。そして、その比率をもった長方形を「黄金四角形」とよび、同じく「1:1.618」の比率を持っています。
その黄金四角形を使用したミニマリストのデザイン例をみてみます。
一列につき三つ、計六つの四角形が配置されており、サイズは299×185となっています。このサイズは299/185=1.616となり、黄金四角形が利用されています。それぞれの黄金四角形は充分なホワイトスペースが確保されており、これがサイトの雰囲気を演出していることに気が付いてください。レイアウト自体にはほとんどカラーが使用されておらず、そしてすべての要素が同じように配置されているだけですが、ナビゲーションの箇所は明白です。
適用例
黄金四角形は写真ギャラリーや作品集などプロダクト指向のウェブサイトによくマッチします。そして、黄金四角形を利用する場合は、グリッドや配置、近接、強調を使用することで更に有効に利用することができます。
2. フィボナッチ数列
フィボナッチ数列とは二つの数字0と1から始まる数列で、一つ前の数を次々に加算した数列です。フィボナッチ数列のシーケンスがより高くなると黄金比に近くなり、お互いに関連しています。
この数値を四角形の辺に割り当て、対角線を結んだ曲線が「黄金螺旋」と呼ばれています。生成された長方形は黄金比をもったものとなっています。
フィボナッチ数列をウェブデザインに取り入れる簡単な方法はレイアウトのベース幅に適用することです。下記にその例をみてみます。
レイアウトは3カラムあり、それぞれの縦列がフィボナッチ数列に対応しています。
ベースを90pxとし、最初のカラムは180px（90×2）、二番目のカラムは270px（90×3）、最後のカラムは720px（90×8）の幅を設定しています。また、フォントのサイズもフィボナッチ数列に対応しており、タイトルは55px、見出しは34px、本文は21pxで設定しています。
フィボナッチ数列を使用する際、ある特定の固定された幅のレイアウトでは注意が必要です。例えばページ幅を1,000pxとした場合、フィボナッチ数列を使用することが難しくなります。
ウェブのレイアウトにフィボナッチ数列を使用した理想的な数値には610px, 987px, 1,597pxがあり、これらの数値からおよその値を選択することになるでしょう。
適用例
フィボナッチ数列は雑誌風のレイアウトやブログなどによくマッチします。フィボナッチ数列を利用する場合は、クリエイティブを忘れないでください。さもなければデザインが単に厳格なだけになってしまい、ナビゲートすることが難しいものになってしまいます。
3. ファイブエレメンツ
ファイブエレメンツはインドの星占い「Kundli」からきたもので、正方形に対角線を二つ描き、各辺の中心を結んだものです。
下記の例は、Kundliの幾何学的なレイアウトに基づいたものです。
各エレメントをクリックすることで、それについてのインフォメーションを表示します。jQueryを使用してアニメーションで表示したり、ツールチップを使っても面白いでしょう。
ファイブエレメンツのレイアウトは複雑なものではありません。
単純な3カラムのレイアウトをベースに、ヘッダとフッタが配置されているだけです。
適用例
ファイブエレメンツはプロダクトインフォメーションやポートフォリオなどによくマッチします。そしてJavaScriptのアニメーションなどで更にスパイスを効かせることができます。
4. サインウェーブ
サインウェーブは別名sinusoidと呼ばれるもので、滑らかで反復的な振動のように波状にあらわれます。
このシンプルな波状のパターンを利用して、ページのレイアウトを作ってみます。もちろん、ウェブだけでなくグラフィックスやインフォグラフィックスなど他のデザインにも同じアプローチを使用できます。
レイアウトはヘッダとフッタ、そして五つのカラムから成っており、非常にシンプルです。jQueryを使用して、インタラクティブなコンテンツにすることもできます。
適用例
サインウェーブは水平方向のナビゲーションを活かしたレイアウトやイベントの予定表などによくマッチします。各カラムをユーザーのフォーカスに合わせてハイライトするなどインタラクティブなものにしてもよいでしょう。
火曜日, 2月 23, 2010
ｊQueryでクールなフォームエレメント実装プラグイン「Uniform」
Uniform - Sexy forms with jQuery
ｊQueryでクールなフォームエレメント実装プラグイン「Uniform」というのが公開されています。
これを使うと次のようなカッコいいフォームが簡単に作れるみたいです。
初期化が、uniform() メソッドを呼び出すだけで超簡単です。
$("select, input:checkbox, input:radio, input:file").uniform();
ｊQueryでクールなフォームエレメント実装プラグイン「Uniform」というのが公開されています。
これを使うと次のようなカッコいいフォームが簡単に作れるみたいです。
初期化が、uniform() メソッドを呼び出すだけで超簡単です。
$("select, input:checkbox, input:radio, input:file").uniform();
登録:
投稿 (Atom)