こんにちは、リッテルラボラトリーの清田です。
2015年11月に提供開始した「HOME'Sデータセット」には、おかげさまで多くの研究者の方々からお申し込みをいただいており、すでに20以上の大学の研究室・研究機関にご提供しております。
このたび、「HOME'Sデータセット」に高精細度版の間取り図画像データ（約515万点）を追加しました。間取り図は、物件スペックデータ（面積、部屋数など）だけではわからない住まいの使い勝手の判断材料の一つとして、多くの住まい探しユーザーに利用されています。住まい探しに新たなイノベーションをもたらすような研究に活用されることを期待しています！
「HOME'Sデータセット」には多くの方々からお申し込みやお問い合わせをいただいておりますが、なかでも約8300万点の物件画像データには、deep learningなど最先端の画像処理アルゴリズムの研究資源として関心をお寄せいただいています。
続きを読む
こんにちは。ウェッブデザイナーのアズマです。
皆さん、会社で昼寝してますか？僕は毎日してます。
待ってください。会社のお問い合わせフォームに苦情を書き込む前にちょっと聞いてください。昼寝といっても10〜15分程度のものです。
でも、その昼寝に踏み切れず、眠気にひたすら耐えてつらい思いをしている人もいるのではないでしょうか。
そんな人のために、HOME'Sの「昼寝大使」として、今回は職場での昼寝のメリットと、それを可能にする方法をお伝えしたいと思います。 ====
デザイナーのみならず、およそ机について働く人の仕事は「考えること」です。ボタンの見た目を考えるにしても、サービスの構造を考えるにしても、思考や判断には精神的なエネルギーが必要不可欠です。
「タバコを吸う」「散歩に行く」「座禅を組む」「踊る」など、人によって様々な回復方法がありますが、中でも最も手軽で即効性の高いのが「昼寝」と言えるのではないでしょうか。
ちなみにクリエイティブなアイデアと高いクオリティでお馴染み、面白法人カヤックの柳澤代表は眠くなったら即座に床で寝ているそうです。この昼寝に対する貪欲な姿勢、スピード感がクリエイティビティの源泉なのかもしれません。
襲い来る眠気を我慢して作業を続けようとして、手元が狂って同じところを何度もアンドゥして、作業は進んでないのに時間だけが過ぎていた、ということはありませんか？ その分昼寝していればよかったのではないでしょうか。
デザインは緻密な作業です。エネルギーの大半を「頑張って起きておくこと」に費やすような状況で仕事ができるでしょうか。
睡魔に襲われて最悪のコンディションで1時間頑張るか、10分昼寝して全回復してから50分頑張るか。答えは自ずと明らかです。
極論すれば「起きてる時間が無駄」です。
厚生労働省による「健康づくりのための睡眠指針2014」でも、「午後の早い時刻に 30 分以内の短い昼寝をすることが、眠気による作業能率の改善に効果的」とあります。
そりゃしょうがない。国が認めてるんじゃしょうがないですよ。国には逆らえない。
また、コーネル大学の社会心理学者であったジェームス・マースにより提唱された「パワーナップ」(15〜30分の短い昼寝)はアメリカの企業で広まっており、高度な思考や判断を要するエグゼクティブ層を中心に浸透しているそうです。
NASAでも昼寝の効果は研究されており、26分の眠りがパフォーマンスを34%向上させるとしています。
NASAならしょうがない。NASAが認めてるんじゃしょうがないですよ。
昼寝に対して罪悪感を感じる必要はありません。自分が正しいと信じたことを実行するのみです。弊社のガイドラインにも「自ら動く、自ら変える」とあります。昼寝に対する社内の認識を自ら変えてやるぐらいの気持ちで寝ましょう。
とはいえ口に出して「それじゃ僕寝ますんで！」と言われると「なんだこいつ」となることは必定。ここではさりげなさが大事です。
トイレに行くときのようにさりげなく席を立ち、お気に入りの休憩スペースに向かいましょう。猫は死に際になるとフッと姿を消すといいますが、イメージとしてはアレです。
そして昼寝後は何事もなかったかのように席に戻り、仕事の続きに取りかかりましょう。僕クラスのヒルニスト(昼寝をする人)になれば息を吸うように昼寝できますが、最初のうちは踏ん切りがつかないと思いますので、心の中で「寝るのも仕事のうち」とつぶやくのが効果的です。
ちなみに弊社では最近、休憩スペースをオシャレにDIYしたので、オシャレな気持ちで昼寝をすることができます。
www.homes.co.jp
人によって回復できる時間が違うのかもしれませんが、慣れれば10分でもしっかり目が覚めます。30分以上の昼寝は逆効果という研究もあるので、くれぐれも昼寝は10〜20分程度に抑えておきましょう。
そうなればスマホのタイマーなどを仕掛けて確実に10分で起きるのはもちろんのこと、周囲に対するさりげないアピール&エクスキューズも重要です。そこで僕はこんな物を作りました。
この紙を印刷して社員証の後ろなどに挟み、机にうつぶせて寝るときには背中に回します。これで通りがかりの人に「こいつ、いつから寝てるんだろう…」と思われずに済みます。
また、昼寝のことをPower Napと呼ぶことでなんとなく公認っぽさを出し、後ろめたさを払拭する効果があります。皆さんも印刷してお使いください。
(印刷用ファイルはこちら)
これは10分間の眠りの質に関わる重要なことです。貴重な眠りの質を蛍光灯の光や周囲の声で下げるわけにはいきません。100均のペラペラのものじゃなく、多少高くても良い物を使いましょう。昼寝に対する意識が高まります。
僕のおすすめはDream Essentialsの立体型アイマスクと、軍用でも使われるMOLDEXのCAMO PLUGSです。
耳栓に関しては人によって好みの差があるので、最初にお試しパックを買ってみて一番しっくりくる耳栓を見つけましょう。
より快適な昼寝環境を構築するため、僕はポータブルの枕を持ち込んで使っています。無印の「人がダメになるソファ」のミニバージョン、ネッククッションがおすすめです。
http://sleep.muji.net/ja/
「コーヒーなんて飲んだら眠れなくなっちゃうじゃないか！」とお思いかもしれませんが、カフェインが効果を発揮し始めるのは、摂取後30分経ってからとされています。
昼寝の前に飲むとちょうど起きた頃にカフェインが効いてきて、頭がスッキリする効果が高まります。
いかがでしたでしょうか？あんまりデザイナー関係なかったですね。反省してます。
そろそろ「昼寝したい！毎日したい！」という気持ちになってきたのではないでしょうか？
働くときは全力で働き、寝るときは全力で寝る。そんな真のプロフェッショナルを目指して、レッツ昼寝！
(本記事の内容に基づいて被ったいかなる被害についても、当方は責任を負いかねます)
こんにちわ、フォースを信じてる鈴木です。
ネクストでは、業績目標を達成したご褒美に全従業員参加の社員旅行をします。
会社の成長とともに参加者が増え、4回目の2015年は海外子会社も含めて500人超が参加をしました。今回は、そんなネクストの一大行事の裏側で活躍したクリエイターの日と開発チーム「teamぼんじり」についてお話ししたいと思います。
さて、500人が参加する社員旅行。もちろん旅行代理店の方にお願いはしていますが、旅行の企画や運営は社内の12名の実行委員が主体的に行っています。
参加者の方には集合時間や旅行行程、座席や部屋の番号、アクティビティの案内などをお知らせする必要があります。
昨年まではそれをパワポで作成、名簿含めて実に39ページという大作の旅のしおりを配布するという運用をしていました。
こんにちは、ウェッブデザイナーのアズマです。
みなさん、Sassは好きですか。僕は好きです。
そして、寿司は好きですか。僕は好きです。
Sassがあれば何でもできる！
Sassがあれば、回転寿司も回せる！
というわけで、今日はSass(CSS)を使って回転寿司のように要素を無限ループさせてみましょう。
こうです。寿司が無限ループしています。(本当はもっとなめらかに動きます)
僕の圧倒的な画力についての感想はここでは本質ではないのでご遠慮願います。ここで大事なのは寿司が無限ループすることです。
「画像が流れればそれでよい」ということであれば、1枚の横長背景画像にしてbackground-positionを動かすという手法や、いっそのこと全部Gifアニメにしちゃう(寿司ゆき超かわいい)という手法もありますが、
例えば「今後要素の数がちょくちょく増える予感がある」とか「できるだけセマンティックに作りたい」とか「なんか負けた気がする」などといった理由で背景画像にはしたくない、そんな夜もあるはずです。
ただ寿司が回ればいいのか？
否、回すなら美しく回さなければならない。そうでしょう？
回しましょう、今宵、美しい寿司を。 ====
というわけでSassの出番です。
寿司の個数に合わせて数値を計算したり、CSSで要素ごとにアニメーションを設定しようとすると日が暮れてしまうので、Sassで一気に作っちゃいましょう。
まずHTMLはこうです。何の変哲もないリストですね。ちなみに回転寿司は英語でsushi-go-roundです。本当です。
<ul class="sushiGoRound"> <li><img src="img/ebi.jpg" alt="えび"></li> <li><img src="img/ikura.jpg" alt="いくら"></li> <li><img src="img/maguro.jpg" alt="まぐろ"></li> <li><img src="img/shimesaba.jpg" alt="しめさば"></li> <li><img src="img/tako.jpg" alt="たこ"></li> <li><img src="img/tamago.jpg" alt="たまご"></li> </ul>
そしてSassはこうです。
// 寿司を回すための変数を設定 $itemTotal: 6; // 寿司の総数 $speed: 50; // 寿司の速度 $duration: ($itemTotal*100) / $speed; .sushiGoRound { position: relative; overflow: hidden; width: 500px; height: 100px; padding: 0; background: url('img/bg.jpg'); border: 1px solid #333; li { position: absolute; width: 100px; height: 100px; list-style: none; animation: slide #{$duration}s linear 0s infinite; } li img { width: 94px; height: 94px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 3px 6px rgba(0,0,0,0.1); } // 寿司の動き $offset: $itemTotal * 100%; @keyframes slide { 0% { transform: translateX(0) } 50% { transform: translateX(-$offset); visibility: hidden; } 51% { transform: translateX($offset); visibility: hidden; } 52% { transform: translateX($offset); visibility: visible; } } // 寿司ごとのずらし @for $i from 1 through ($itemTotal) { li:nth-of-type(#{$i}) { $delay: #{($i - 1 - $itemTotal) * ($duration / $itemTotal)}s; animation-delay: $delay; } } }
$itemTotal(寿司の総数)はお手元の寿司の数に合わせて各々入れてください。
$speed(速度)は50〜100ぐらいが適当です。あまりに遅いといわゆる「寿司が止まって見える」状態になります。
へへっ…俺には寿司が止まって見えるぜ…
大まかな流れとしては、
となります。だんだん寿司とは何か、わからなくなってきましたね。哲学的な問いです。
今回はul.sushiGoRoundが寿司のレーン、その中のli要素がそれぞれの皿にあたります。
まずはみんなお馴染みposition: absoluteで、li要素を全部重ねてul要素の端に配置してしまいます。
.sushiGoRound { position: relative; overflow: hidden; width: 500px; height: 100px; padding: 0; background: url('img/bg.jpg'); border: 1px solid #333; li { position: absolute; width: 100px; height: 100px; list-style: none; } li img { width: 94px; height: 94px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 3px 6px rgba(0,0,0,0.1); } }
準備は整いました。さっそく寿司を回しましょう。
…と、その前に、寿司の総数と速度を設定する変数をそこら辺に入れておきます。
// 寿司を回すための変数を設定 $itemTotal: 6; // 寿司の総数 $speed: 50; // 寿司の速度 $duration: ($itemTotal*100) / $speed;
li要素に
animation: slide #{$duration}s linear 0s infinite;
を指定し、適当なところに以下を追記しましょう。
// 寿司の動き $offset: $itemTotal * 100%; @keyframes slide { 0% { transform: translateX(0) } 49% { transform: translateX(-$offset); visibility: hidden; } 50% { transform: translateX($offset); visibility: hidden; } 51% { transform: translateX($offset); visibility: visible; } }
ここで何をしているのかというと、こういうことです。
要は、6つの寿司をぶつからないように、かつ変な間が空かないようにぴったりループさせるには、
1 寿司を初期地点から6つ分左に動かす(0%〜49%)
2 寿司を初期地点から6つ分右に瞬間移動させる(49%〜50%)
3 寿司を初期地点に戻す(51%〜100%(0%))
というアニメーションを絶え間なく続ける必要があります。これを行うためのコードです。
ここでのポイントは、1の動きと3の動きが同じ距離であることです。
これによって回転寿司のレーンのような美しい等速直線運動が生み出されます。
// 寿司ごとのずらし @for $i from 1 through ($itemTotal) { li:nth-of-type(#{$i}) { $delay: #{($i - 1 - $itemTotal) * ($duration / $itemTotal)}s; animation-delay: $delay; } }
以上のコードでは寿司ごとにアニメーション開始タイミングのズレを発生させています。
ここでのポイントは、delayにマイナスの値を入れていることです。
animation-delayがプラスの値だと寿司が動き出すまでに時間がかかりますが、マイナスの値を入れることによって、「既にx秒動いた状態」から開始されることになります。
これによって、結果的に各寿司があるべき場所に配置され、なめらかに動き出すというわけです。
いかがでしたでしょうか？
「Sassで寿司なんて回して一体何の役に立つんだ、働け」という声が聞こえてくるようですが、
先日HOME'Sからリリースされた新サービス「暮らし図鑑」(スマホ用)のトップ画面では、かわいいキャラクターをこの回転寿司メソッドでくるくる動かしてディスプレイしています。(残念ながらイラストを書いたのは僕ではありません。)
「狭い画面で、たくさんの要素を、邪魔にならないように見てもらう」という目的に対して使える手法ではないでしょうか。
ちなみにこの「暮らし図鑑」、約200人から集めたライフスタイルやリアルな生活事情をもとに人々をタイプ分けして、自分と似たタイプの人の引っ越しを見られることで、ユーザーがじゃぶじゃぶ引っ越したくなるような住み替え心を煽るサービスとなっておりますので、ぜひお試しください。そして引っ越したくなってください。
www.homes.co.jp
「たった一つの」とか言っておいてアレなんですが、この回転寿司メソッドにはまだ「寿司の間隔調整が難しい」「寿司の数が変わるたびに変数を手で差し替えないといけない」などの弱点があります。
「俺ならもっと美しく寿司を回してみせるぜ！」という方はコメント欄などからアドバイスいただけると嬉しいです！それでは、よき寿司を！
あけましておめでとうございます。
おうちハッカー@リッテルラボラトリーの石田です。
画像から何かを検出したい、ユーザーの動きに連動して何か作りたい、なんて思うことがあると思います。 そんなときに、どんな技術を使えばよいのか迷うと思うのですが、そんなときに検討すべきライブラリ、API、デバイスを紹介したいと思います。
画像処理といったらlennaさん
