LIFULL Creators Blog

「株式会社LIFULL(ライフル)」の社員によるブログです。

「まちむすび」をリリースしました!

f:id:LIFULL-oshiday:20180608193139p:plain

こんにちは。新卒3年目デザイナーおおしだです。

以前には、「経験0からデザインをする上で大事なこと5選」を書きました。

www.lifull.blog

もうあれから2年経ちます…驚きです。
今回は私がデザイナーとして開発に携わった、いろんな街の情報コンテンツ「まちむすび」に関して書こうと思います。

まちむすびとは?

「まちむすび」は、気になる「まち」や知らなかった「まち」のことを実際に住む人の声や各種データから知ることができる、 街の情報がつまった情報コンテンツです!

引越しをしたいと思ってウェブサイトなどで家を探してみると、候補にいろいろな駅が出てきてどこを選んだらいいかわからない!ということ、ありませんか?

どの駅が、あるいはどのまちがどんな場所なのかわからないまま引越しをするのは不安ですよね。

実際に住み替えをするのに必要な情報を最適な形でユーザーに届け、住み替えに役立てていただきたいという気持ちから生まれたのが この「まちむすび」です。

内容を少し紹介すると


まちごとにいろいろな評価が見られたり
f:id:LIFULL-oshiday:20180608203149p:plain


ランキング形式でまち周辺の雰囲気がわかったり f:id:LIFULL-oshiday:20180608203008p:plain


まちへの口コミがみられたり f:id:LIFULL-oshiday:20180608203015p:plain


そのまちの家賃相場がわかったり f:id:LIFULL-oshiday:20180608203020p:plain


などなど、「まちむすび」には気になる情報が盛りだくさんです。



なぜ「まちむすび」になったのか

この「まちむすび」という名前が決まるまでは、ボツ案が何十個も出たりなどしながらメンバーでの話し合いが続きました。その中で、

  • 街に関する言葉を入れたい

  • みなさんに覚えて使ってもらえるような、端的でかつインパクトのあるものにしたい

  • コンテンツの特徴である、街と街をつなぎ、まちとユーザーも繋げることを表したい

というところから 「まち」と「むすぶ」という言葉が浮上しました。

「まちむすび」というサービスの意味
  • 街の情報一つ一つが一つのコンテンツとなって集まる

  • 街と街、人と人、そして街を人をつなぐ、結ぶ

  • 開発者がお互い協力して、街に住む人の声を形にしていく

という意味を込めて「まちむすび」に決定しました。

「まちむすび」が目指すこと

「まちむすび」が目指していることは、”住み替えに役立つ「まち」の情報を提供する事”です

住み替えの後に判明するような「まちの情報」を住む前に提供する事で、より多くの人々に、心から満足するような家との出会いに繋げ 「このまちに住んで良かった」「まちむすびで探して良かった」と思ってもらう事を目指しています。

今よりもさらに「まち」から家を探す、ということが広まって欲しい、それによって満足のいく住み替え体験をより多くの人に提供したい、 そんな気持ちで日々開発を行なっています。

「まちむすび」デザイナー目線の誕生秘話

「まちむすび」のデザイナーとしてアサインが決まった時、私は嬉しい気持ちでいっぱいでした。
自分自身、街情報のコンテンツが住み替えの時にあったなら引越しに失敗しなかったのに…という気持ちや 純粋に新しいコンテンツのデザインをしてみたい!という思いがあったため、嬉しい気持ち反面 大規模PJのデザイナーとして初めてアサインされたことに不安も半分、というところでした。

しかしながら、PJメンバーと一緒に、この要素はこうあるべきだ、こういう見せ方だったらユーザーにとって魅力的に感じてもらえるはず、 ユーザーの流入や遷移から何を優先させて画面に表示させるべきか、など、話し合いを重ねリリースまでたどり着きました。

「楽しかった、でも大変だった、もっとユーザーに寄り添ったデザインにしたい」というのが今の気持ちです。

デザインのこと

「まちむすび」のデザインでは、ユーザーに親近感をもってもらいたい、街を探すことをポジティブに捉えて欲しいという想いから イラストやアニメーションにこだわっています。
(是非是非、まちを探してスクロールして見てください! https://www.homes.co.jp/machimusubi/

私にとって今回挑戦だった部分は、イラスト部分に用いているアイソメ図です。
「はじめましてアイソメ」 という感じでした。
(ちゃんと描いています!) f:id:LIFULL-oshiday:20180608195006p:plain

基本的にIllustratorを用いて描いています。
もともとは正方形の図形を平面・右側面・左側面でそれぞれ変形を行うことをアクションを使うと効率的に作ることができます。以下は一例です。

平面

拡大・縮小(垂直:81.65% 水平:70.71%)→ シアー(30度)→ 回転(-30度)

右側面

拡大・縮小(垂直:81.65% 水平:70.71%)→ シアー(30度)→ 回転(30度)

左側面

拡大・縮小(垂直:81.65% 水平:70.71%)→ シアー(-30度)→ 回転(-30度)
左を組み合わせていくと、右のようになります。 f:id:LIFULL-oshiday:20180611123543p:plain

まちむすびの今後

「まちむすび」は、どんどん新しいコンテンツや改修を行なっていく予定です!
乞うご期待。
「まちむすび」を使ってくださる方が好みのまちや、今まで知らなかったけど好きになれるまちに出会えるように もっとこのコンテンツをよくしていきますので、ぜひ、街の情報コンテンツ「まちむすび」をご活用ください。

f:id:LIFULL-oshiday:20180608193139p:plain https://www.homes.co.jp/machimusubi/