LIFULL Creators Blog

LIFULL Creators Blogとは、株式会社LIFULLの社員が記事を共有するブログです。自分の役立つ経験や知識を広めることで世界をもっとFULLにしていきます。

ユーザー中心にデザインするための方法を学び・実践する「HCD/UXサークル」

こんにちは。LIFULLのWEBデザイナーのshinoです。

LIFULLではWEBデザイナーが主体となって、ユーザー中心にデザインするための方法を学び・実践する「HCD/UXサークル」があります。
私は2017年4月からこのサークルに参加し、仲間とお互いにサポートしあいながら、勉強と実践を交えて切磋琢磨しています。

今回の記事では、LIFULLのWEBデザイナー職のビジョン・役割からみたHCDの位置づけや、HCD/UXサークルについてご紹介します。


目次

  • そもそもHCDとは?
  • LIFULLのWEBデザイナー職のビジョン・役割からみたHCDの位置づけ
  • HCD/UXサークルについて
    • サークルの活動風景
    • 2017年度上期(4月~9月)の活動概要
      • 各チームの目標や活動内容

続きを読む

デザイナーの3Dモデル作り「モデリング編」

f:id:LIFULL-kobayamu:20170906133853p:plain

こんにちは。 LIFULL HOME'Sアプリのデザイナーのこばやしです。

デザイナーの3Dモデル作り全3編中、第2編は「モデリング編」です。メッシュオブジェクトで形をつくり・整える行程の基本操作(コマンド)・便利機能をまとめました。ツールの操作やモデリング前の下準備については準備編をご覧ください。
www.lifull.blog

メッシュオブジェクト編集の基本操作

全選択と解除

「A」キー f:id:LIFULL-kobayamu:20170906134606p:plain

任意の範囲選択・選択解除

「C」キー f:id:LIFULL-kobayamu:20170906112406p:plain

押し出し

「E」キー
f:id:LIFULL-kobayamu:20170914161938p:plain

インセット(面を内側に押し出す)

「I」キー
f:id:LIFULL-kobayamu:20170914161934p:plain

続きを読む

デザイナーの3Dモデル作り「準備編」

f:id:LIFULL-kobayamu:20170906133858p:plain

こんにちは。 LIFULL HOME'Sアプリのデザイナーのこばやしです。

2017年9月にiOS ARKitを使った新機能「ARお部屋計測」をリリースしました。
この機能は「カメラをかざすとホームズくんが出現して、走ってお部屋を計測」してくれます。ここで登場するホームズくんの3Dモデルを作成しました。

www.lifull.blog
iOS ARKit・Android ARCoreの技術により、AR/VR対応の端末・アプリが増えていくことを考えると、デザイナーがモデリングをする機会が増えてくると思い、私と同じく3Dモデリングをしたことがないデザイナー向けに調べたコト・苦労したコトをまとめました。
全3編の構成で、1編目は「準備編」です。

はじめに

私は「習うより慣れろタイプ」です。そのため、初歩的な内容の記事になりますが、3Dモデリングの初心者入門として読んでいただければ幸いです。

3Dモデルの役割

「ARお部屋計測」では、アテンドとして3Dホームズくんが登場します。3Dモデルを用いることにより、世界観の演出に効果があり、情報をエモーショナルに伝えることができ、表現に広がりを与えてくれます。
iOSのLIFULL HOME'Sアプリで実際にご覧いただけます。

LIFULL HOME'S(ライフルホームズ)

LIFULL HOME'S(ライフルホームズ)

  • LIFULL Co., Ltd
  • ナビゲーション
  • 無料

モデリングのツール

今回はBlenderというツールを使用しました。Blenderはオープンソースの3DCG制作ツールです。 https://blender.jp/

続きを読む

なぜ、リソースがない中「ARKit」に最速対応する道を選んだのか

こんにちは、新UX開発部でLIFULL HOME'Sアプリのサービス企画をしていた島田真寿美です。 (記事アップ時には別部署に異動しているため過去形です)

今回は、LIFULL HOME'S iPhoneアプリがiOS11新機能「ARKit」に対応するまでのストーリーをお伝えしたいと思います。

ARKitに対応しました

ARKitを使った「ARお部屋計測」

LIFULL HOME’S iPhoneアプリ内に「見学メモ」という機能があります。
物件見学時に「見学メモ」を利用し部屋を撮影すると、撮影した時間と位置情報を利用して、写真を一つのフォルダにまとめる機能です。
今回はこの「見学メモ」をよりユーザー価値の高いものにするべく、ARKitを使い「ARお部屋計測」を開発しました。

「ARお部屋計測」は、カメラを立ち上げると部屋の中にホームズくんが出現します。 部屋の角をタップするとホームズくんが走り出し、そのまま一周すると1cm単位で壁の長さが計測され部屋の寸法が画像化、保存される機能です。

iOS11の方は「右下便利機能タブ > 見学メモ > 間取りをつくる」から体験してみてください。

f:id:LIFULL-shimadma:20171002160251p:plain
走行中は目がキラッキラ

続きを読む

AMPを導入する時の検討事項

f:id:LIFULL-shimadak:20170922120318j:plainLIFULL FinTechの島田です。 LIFULL FinTechで運用するLIFULL保険相談サイトの一部ページにAMP(アンプ)を導入しました。 その際に検討した内容とリリース後しばらく運用してみて得られたAMPに関する知見を共有いたします。

AMP(Accelerated Mobile Pages)

AMPはGoogle社とtwitter社が共同で推進しているプロジェクトです。 もともとはネットワーク環境や端末のハードウェアリソースが足りない地域向けにデザインされたものと言われています。 AMPはAMP-HTML、AMP-JS、AMP-CACHEの3つのコンポーネントで構成されています。

AMP-HTML

AMP-HTMLはAMP用にHTML5の拡張として設計されたHTMLです。 AMPページとして認識されるために通常のHTMLとは異なる記述が求められます。

大きいところとしては以下の3点かと思います。

  • imgタグの代わりにamp-imgタグを使用する必要があります
  • cssはhead内に展開する必要があります
  • 構造化データを挿入してページタイプを宣言する必要があります

ページタイプについてはすべてのカテゴリがカバーされているわけではありませんが、自サイトと乖離したページタイプを宣言するとスパム行為としてみなされる恐れもありますので注意が必要です。

定義済みページタイプはAMP Projectのガイドをご参照ください。

続きを読む

機械学習における技術的負債をDigdagで返済する

お久しぶりです。技術開発部の相原です。 昨年度は技術基盤部としてmrubyを導入したりしていましたが今は少しレイヤーが開発寄りになりました。

とはいえ依然として技術基盤も見ていて、最近はご多分に漏れず機械学習を用いた技術基盤の改善に興味があります。 そんな中でここ数ヶ月メインの業務の合間の時間を使って試験的に機械学習を導入していたので、今回は技術的負債の高利子クレジットカードと呼ばれる機械学習を導入する中でどのような工夫をしたかということについて書きたいと思います。

機械学習については門外漢なので、ここではモデルの訓練などのプラクティスに関しては触れません。 (一部暗黙的に深層学習を前提としている箇所がありますのでご了承ください)

  • 技術的負債の高利子クレジットカード
    • Data Dependencies Cost More than Code Dependencies
    • System-level Spaghetti
    • Dealing with Changes in the External World
  • Digdagによるアプローチ
    • Digdagとは
    • 実際にワークフローを構築してみる
      • データの取得
      • 学習
      • fine-tuning
      • 予測
    • MItamaeによるワークフロー定義ファイル生成の自動化
  • 最後に
続きを読む

LIFULL Webデザイナーインタビュー ♯0

こんにちは! 新卒採用デザイナー職担当の水村です。

今回は、「デザイナーの企業選び」をテーマに、LIFULLに新卒入社した若手デザイナー3名のインタビューをお届けします。18卒・19卒の学生の皆さんの参考になれば嬉しいです!

では、さっそく話を聞いていきましょう!!

f:id:nextdeveloper:20170928105909j:plain

(左)ニックネーム:こさい 新卒3年目。大学時代は、学校でデザイン全般について学びながら、アルバイトでWEBサイトの制作に従事。1~2年目は「LIFULL HOME'S」新規サービスのサイトデザイン、プロモーションを目的とした紙、リアルイベント、ノベルティのデザインからディレクションまで幅広く携わる。3年目から自ら希望を出して異動した部署でデザイン、企画から、広告運用まで担当。

(中)ニックネーム:ぼこ 2017年入社のピカピカの新卒1年目。大学時代はプロダクトデザインを専攻しながら、学生団体に所属し、地域活性化のための冊子を制作。デザイナーとして参加した全国規模のHackathonでの優勝経験あり。入社後は、「LIFULL HOME’S」でデザイナーとして修業中!

(右)ニックネーム:がらし 新卒2年目。学部時代はロボット工学を専攻し、大学院では人間工学に基づくWebアニメーションについて研究。Life is techのインターンも経験。現在は「LIFULL HOME’S」のAndroidアプリのデザインやプロモーション動画の編集などを担当。

就活の軸

水村:早速だけど、3人はどんな軸で就活していたの?

がらし:初めてのインタビューなので緊張しますね(笑)。

水村:飾らずに素で話してもらえたらOKですよ!

がらし:僕はとにかくデザインやものづくりが大好きで、同じ熱量でものづくりをしている会社を探していました。最初から絞ることはせず、けっこう多くの企業を見ていましたね。

こさい:私は人に喜んでもらうのが好きな性格なので、ユーザー目線を最も大切に働きたいと思っていました。そういう意味で、ものづくりに真剣な会社を探していましたね。

ぼこ:私も大学時代の地域活性化の活動などから、人の暮らしを良くしたいという想いがあって、それを叶えられる会社で働きたいと思っていました。自社サービスの会社と制作会社で迷いましたが、対クライアントではなく対エンドユーザーの立場でサービスをつくりたいと思い、最終的には自社サービスの会社に絞って就活をしていました。

水村:ぼこちゃんは、大学ではプロダクトデザインを専攻していたけど、どうしてWebデザイナーを選んだの?

ぼこ:Webデザインは、ユーザーの反応に対してすぐに改善することができるので、PDCAを早く回せるのがいいと思いました。プロダクトデザインは一度つくってしまうと後から変更するのが難しく、時間もかかるので、私には前者の方が合っているなと思ったんです。ユーザー目線で常にいいものをつくり続けたいと考えていました。

f:id:nextdeveloper:20170928121004j:plain

LIFULLを選んだ理由

水村:3人とも多くの会社を見ていた中で、LIFULLを選んだ理由って何?

こさい:なんだか3年前の面接を思い出しますね(笑)。

がらし:LIFULLは、真剣にユーザーのことを考えている社員ばかりで、単純にかっこいいなって思いました。この人たちと働きたいって。

ぼこ:私も先ほどの通り「人の暮らしをよくしたい」という想いがあったので、LIFULLはドンピシャでしたね。暮らしの「不」を解消するというビジョンにとても共感できて、「あ、ここしかない!」と。

こさい:逆に、私は疑い深いので(笑)、他に内定をいただいていた2社ととても迷っていましたね。

水村:とても迷っていたよね(笑)。こさいさんは、迷っていた中で何が決め手だった?

こさい:最終的には、がらしとぼこちゃんと同じですね。一番の決め手は、LIFULLは本当にユーザーの暮らしや人生を考えてサービスをつくっていると感じたことですね。選考で会った一人ひとりの社員からとても伝わってきました。

がらし:僕も、言っているだけではなく、実行しているのがカッコいいなと思いましたね。LIFULLは、アプリのレビューページのユーザーのコメントに対して、とても細かく返信していたのが印象的でした。

f:id:nextdeveloper:20170928121048j:plain

水村:デザイナーに限らず、LIFULLのビジョンや利他主義という価値観に共感して入社を決める人がとても多いよね。採用担当者としても、スキルだけではなくLIFULLのビジョンや文化に合っているかを重視して採用活動をしています。

LIFULLでのキャリア・働き方

水村:みんなは、入社してからどんなことに挑戦してきたの?

ぼこ:私はまだ入社4か月ほどですが、サイトのバナーやクライアントに配布する卓上カレンダーのデザインなど、ユーザーやクライアントが目にする部分の制作を任せていただいています。

こさい:LIFULLは、早い段階から任せてもらえるよね。私も入社して数ヶ月でCMや交通広告といったプロモーションに関わる大きなプロジェクトに携わらせてもらいました。私はいろいろなことに興味があったので、その後も広告からサービスまで幅広いデザイン業務に取組んできました。

がらし:僕は、LIFULL HOME’Sの新築一戸建てマーケットと中古一戸建てマーケットの統合というプロジェクトに関わらせてもらいました。既存の仕組みを変えるという非常に大きなプロジェクトでしたが、デザイナーは2年目の僕1人だけでした。大変なこともありましたが、PM、エンジニア、ディレクターと協力し、何とか約3ヶ月間で完遂!入社2年目でもこういった大きなプロジェクトを任せてもらえることは、プレッシャーもありましたが、その分やりがいを感じました。

こさい:プレッシャーを感じることはあるよね。(笑) でも、その先に実感する成長もある。1年目に「快適通勤検索」という新規サービスの立ち上げに参加した際、企画から関わらせてもらいました。ユーザー目線で本当にいいサービスにするために、他職種のメンバーと社歴の長短に関係なく本気でぶつかりながら議論して制作したのは良い経験になりました。3年目の今年からLIFULL HOME’Sの不動産投資部門に自分で希望を出して異動しました。サービスをより良くするために、これまでの経験を活かしてデザインだけでなく企画や広告運用にも携わらせてもらっています。

f:id:nextdeveloper:20170928121138j:plain

こさい:LIFULLには、キャリア選択制度があり、自分から手を挙げて部署異動や職種変更ができるので、自分のやりたいことに挑戦しやすい環境だと思いますね。 ※キャリア選択制度:半年に1度、上司と面談を行い、中長期的なキャリアビジョンを明確にし、異動希望や職種変更の希望を申請することが可能。毎回希望者の約60%が承認されている。

ぼこ:日常の業務でも、先輩や上司が親身になって相談にのってくれるので、自分の意見やアイデアを言いやすいです。むしろ新人かどうかなど関係なく意見を求められます(笑)。

がらし:LIFULLは、「あらゆるLIFEを、FULLに。」することを目指している会社なので、まずは会社や個人として「こうしたい」というビジョンや意志を起点に仕事をしているのだと思います。デザイナーに限らず多くの社員が自分の想いを持って働いていますね。

こさい:自社サービスの会社なので、デザイナーでも企画段階から関われることも多いですしね。自分のやりたいことや想いを大切にしたい人にとっては、ベストな環境だと思いますね。

f:id:nextdeveloper:20170928105938j:plain

就活生へメッセージ

水村:最後に、就活生の皆さんへメッセージをお願いします!

ぼこ:ものづくりをするときに大切にしているものは、それぞれ違うと思います。カッコいいデザインが好きな人、新しいものをつくるのが好きな人・・・。その自分の軸に合ったものづくりをしている会社に入れば、きっと仕事は楽しいと思いますよ!

がらし:僕も同じ感覚です。自分の好きなことややりたいことをやってほしいですね。そうすればモチベーション高く働けます。あとは、一緒に働く「人」も大切にしてほしいですね。

こさい:新卒は自分で自由に選べる貴重なタイミングなので、後悔のないように色々な会社を見てください!そして、ぜひ自分のやっていきたいことに挑戦してほしいなと思います。

水村:3人ともありがとうございました!就活生の皆さんに、少しでも参考になれば嬉しいです!!では、またお会いしましょう~!

◆LIFULL デザイナーセミナー開催中!!◆

URL:株式会社LIFULL (旧ネクスト)新卒採用 エントリーページ