athome-developer’s blog

不動産情報サービスのアットホームの開発者が発信するブログ

シニアユーザーにも分かりやすいデザイン

お久しぶりです。以前こちらの記事を執筆しましたWEBデザイングループの田中です。

私が所属しているWEBデザイングループでは、主に不動産情報サイト アットホームなど、C向けのサイトやアプリのデザインを手掛けていますが、先日、B向けのシステムのデザインに携わる機会がありました。 これまでC向けのデザインではメインターゲットを若年層とすることが多く、素早く使いやすいデザインを重視してきましたが、B（加盟不動産会社）向けのシステムのデザインとなると意識する部分が異なります。
不動産業界は他の業界と比べて年齢層が少し高めであるため、何よりも使いやすさと分かりやすさというのが重要となってきます。 社会全体で高齢化が進み、DXが加速する現代において、特に高齢者層のデジタルデバイド（情報格差）というのは深刻な問題となっています。

そこで今回はシニアユーザーや中高年層のユーザーにとって使いやすいデザインとは何かを考え、デザイン面で視認性を向上させるために気をつけたことを3つ取り上げます。


【POINT 1】視覚の違いを考慮した視認性の高い色の選び方

まず一つ目、色についてです。
いきなりですが下記2枚の画像は皆さんの目にはどんな色に見えますか？

色鮮やかなフルーツや花の画像に見えたでしょうか？
これが白内障の症状を持つ方々には下記の画像のように全体的に少し黄ばんで見えると言われています。

※イメージ

個人差はありますが、白内障や老眼といった視力の衰えに伴う症状は40代を過ぎると徐々に進行すると言われています。特に白内障になると視界が黄色っぽく濁り、色の識別が難しくなります。逆に赤やオレンジといった鮮やかな暖色系は、黄色が加わることでさらに色が濃くなり、認識しやすくなるとも言われており、先ほどのイメージ画像を元の画像と比較すると、りんごや赤いカーネーションなどの赤色が少しだけ濃くなっているように見えるかと思います。その代わり青や紫のものは少し色が薄くなり、グレーっぽくなったように見えませんか？

このように色によって認識しやすいものとそうでないものの差が生じるのは避けられません。 しかし色の組み合わせ方次第では、視認性を改善することができます。

では単に認識しやすい色同士を使って「赤の背景にオレンジの文字」を書けばいいのかというと、それは誤解です。 赤とオレンジは色相(色の種類)が似ているため、鮮明ではっきりとした色同士のまま重ねてしまうと下記の画像のようになってしまいます。

なんだか目がチカチカして見づらい感じがしませんか？
このように、明暗差が小さく彩度(色の鮮やかさの度合い)が高い色同士を組み合わせるとコントラスト比が小さくなるため、目がチカチカしてしまい逆効果になることがあります。では、色相(色の種類)が似ている組み合わせを避ければいいのかというと、そういうわけでもありません。白内障の症状を持つ方々でも認識しやすい色の組み合わせにおいて重要なのは、明度や彩度を調整しそれぞれの色にしっかり差をつけることです。

例えば、下記の画像をご覧ください。

先ほどの画像と比べると、格段にテキストが読みやすく目に優しい印象になったと思います。 一見、違う色に変えたようにも見えますが、実はこれは先ほどの赤とオレンジの明度や彩度を調整しただけです。
彩度や明度を調整すると同じ色相でも色の印象を大きく変えることが可能となるのです。

このように色の明度や彩度を調整して差をつけたり、他の色相の相性が良い色を組み合わせたりすることで、視認性を高めることができます。実際、色単体だけでも約1677万種類あると言われており、その組み合わせを考えると無限に多くのパターンが存在します。それらを微調整しながら工夫することで、年齢に関わらず幅広いユーザーに認識してもらえる色の組み合わせを見つけ出すことができるのです。

【POINT 2】シニアユーザーにも優しい文字デザイン

①文字サイズ

シニアユーザーに向けたデザインをする際には、文字サイズへの配慮も非常に重要です。 人間の目は加齢とともにピントを調整する力が弱くなります。この「老眼」と呼ばれる症状により、近くのものを見るときにピントを合わせることが難しくなります。老眼が進行するにつれて、小さい文字を読む際にピントを合わせるためにスマートフォンを目から離したり、目を細めたりといった工夫が必要になるため、デザインをする際は小さい文字の使用をなるべく避ける必要があります。

多くのWebサイトでは14px~16pxの文字サイズを中心に使われており、時には10px程度の小さい文字が使われることもあります。しかし下記画像をご覧いただくと分かる通り、10pxの文字はかなり見づらいので視認性を大きく損ねる可能性があります。シニアユーザーにとっても読みやすく分かりやすいWebサイトにするには、可能な限り16px以上の文字サイズを使用することが推奨されます。

18px デザインをする際には、文字のサイズへの配慮も非常に重要です。

16px デザインをする際には、文字のサイズへの配慮も非常に重要です。

14px デザインをする際には、文字のサイズへの配慮も非常に重要です。

12px デザインをする際には、文字のサイズへの配慮も非常に重要です。

10px デザインをする際には、文字のサイズへの配慮も非常に重要です。

②行間

また、気をつけるべきなのは文字のサイズだけではありません。行間についても配慮が必要です。 通常、行間は文字サイズの1.5倍程度に設定されることが多いですが、シニアユーザー向けの場合は1.75倍程度にすることで可読性が上がると言われています。たとえ文字サイズを大きくしたとしても行間が狭いと文字が詰まって見えるため、読みづらくなってしまいます。

×文字サイズの1倍(余白0)

「老眼」と呼ばれる自然な変化により、近くのものを見るときにピントを合わせる方法が変わります。シニアユーザーにとっても読みやすく分かりやすいWebサイトにするには、可能な限り16px以上の文字サイズを使用し、行間を1.75倍程度にすることで可読性が上がると言われています。

△文字サイズの1.5倍

「老眼」と呼ばれる自然な変化により、近くのものを見るときにピントを合わせる方法が変わります。シニアユーザーにとっても読みやすく分かりやすいWebサイトにするには、可能な限り16px以上の文字サイズを使用し、行間を1.75倍程度にすることで可読性が上がると言われています。

〇文字サイズの1.75倍

「老眼」と呼ばれる自然な変化により、近くのものを見るときにピントを合わせる方法が変わります。シニアユーザーにとっても読みやすく分かりやすいWebサイトにするには、可能な限り16px以上の文字サイズを使用し、行間を1.75倍程度にすることで可読性が上がると言われています。

③フォントの種類

さらに、フォントの種類も視認性に大きく影響します。
今まで挙げた、色や文字のサイズは一般的にも認識されやすい違いでしたが、フォントの使い分けは意識して見ないと気づきづらい部分かもしれません。しかし実際に皆さんが普段目にしている多くのデザインでは、目的に応じてフォントが使い分けられています。

例えば、このブログで使われているゴシック体は、線の太さが均等でシンプルな形状のため、シニアユーザーにとって認識しやすいフォントの一つです。視覚的に安定しており文字の形が規則的なため、読みやすさが向上します。そのため、長時間読んでいても目が疲れにくい特性があります。 一方、明朝体は縦線と横線で文字の太さが異なるため視認性が低く感じることがあります。文字の細い部分がかすんで見える場合もあり、シニアユーザーにとっては目が疲れやすく、長時間読むのにはあまり向いていないフォントとも言えます。 また、行書体などは筆跡の流れが不規則であるため、慣れていないとさらに読みづらく感じることがあります。行書体は主に装飾的な要素として使うには効果的ですが、実用的な用途で使用する際は注意が必要です。

このようにフォントの選び方によって、ユーザーが快適に情報を得られるかどうかが大きく変わるため、フォント選びにも慎重な配慮が必要です。

【POINT 3】迷わず使えるナビゲーション

最後に、ナビゲーションの明確化です。
Webサイトにはさまざまなナビゲーションがありますが、ここではメニューアイコンを一例として取り上げます。 メニューアイコンは画面上に配置された小さなシンボルや図形のことを指し、押下するとそのサイトのメニューを表示させるナビゲーションです。主にスマートフォンサイトやアプリで使用されることが多いです。 メニューアイコンの中でも代表的なハンバーガーメニューは、三本線の見た目をしており、見た目がハンバーガーの形に似ていることからこの名前が付けられています。

このメニューをよく使用する人にとってはメニューボタンだと認識しやすいですが、インターネットに触れる機会の少ないシニアユーザーにとっては、ぱっと見ではその用途が分かりづらいことがあります。 メニューアイコンにもいろいろなデザインが存在しますが、例えば下記の例を見てみましょう。

こうして見てみると、ただの丸や線が並んでいたりするだけで、どうして「メニュー」だと認識できるのか不思議な感じもします。 見慣れてしまえば当たり前のように認識できますが、見慣れないうちは一体何を意味しているのか分かりづらいのも無理はありません。 メニューアイコンに馴染みがないユーザーにも迷わず使ってもらうには、押下後の画面を図形で表現してイメージさせることが大切であり、時には下記のように「MENU」や「メニュー」といったテキストを入れたりすると用途が伝わりやすいです。

また、他のナビゲーションについてもさまざまな工夫が可能です。例えば、ナビゲーションが表示された際にポップアップウィンドウやツールチップを表示させ、ナビゲーションの目的や意味をユーザーに理解してもらうための説明を加えることも効果的です。 不動産情報サイト アットホーム内でもポップアップウィンドウやツールチップなど、さまざまなナビゲーションを使用しています。

Webサイトには、私たちが当たり前のように使っていて何も違和感がなくなってしまっているパーツがたくさんあります。ですがシニアユーザーの方々には、こうした当たり前の操作やデザインが必ずしも馴染んでいるわけではありません。そのためナビゲーションがスムーズに行えるようにするためには、シンプルで分かりやすいデザインと、しっかりとした視覚的ガイドが必要です。こうした工夫を加えることで、シニアユーザーでも迷うことなく快適にWebサイトを利用できるようになります。

まとめ

今回シニアユーザーや中高年層のユーザーにとって使いやすいデザインについて考える中で、視認性の重要性を改めて実感しました。特にWebデザインにおいては、文字や色、フォントの選び方一つでユーザーの体験が大きく変わります。 私自身、普段は意識していないような細かな部分が、実はユーザーにとっては大きな影響を与えていることに気づきました。シンプルで直感的な操作ができるデザインが、どれほど利用者のストレスを減らすのかを理解し、今後もこの視点を大切にしていきたいです。 時には流行りのデザインを取り入れ新鮮なデザインに挑戦することも大切ですが、シニアユーザーを置き去りにしてしまうことがないよう、今後もユーザーの視点を第一に考えたデザインを追求していきたいと思います。

学生時代と社会人になってからのデザイン制作の違い

はじめまして！WEBデザイングループの濵本です。 2024年の4月に新卒で入社し、7月から今のWEBデザイングループに配属されて、早くも半年が経とうとしています。

高校生の頃にとある会社のWebサイトを見て衝撃を受けたのがキッカケで、Webサイトの裏側に興味を持ち、デザイナーという職業を目指し始めました。自分がWebサイトを見て衝撃を受けたように、人に強い印象を与えられるようなサイトを自分自身で作りたいという思いから、高校卒業後はWebデザインを学べる専門学校に進学しました。

専門学校では、授業内容の定着のためにたくさんのデザイン制作を経験し、先生や外部講師の方からの評価をいただくことはありましたが、基本的には自分が思い描いたものを自由に作成できた2年間でした。 ですが、社内のデザイナーとしてデザイン制作をするには学生時代と少し考え方が変わってきます。 ここからは、私が感じた学生時代と社会人になってからのデザイン制作の違いについてお話しさせていただきたいと思います。

目次

WEBデザイングループで取り組んでいる課題について

配属後の業務内容としては、WEBデザイングループで用意された新卒課題に励んでいます。 WEBデザイングループでは配属後すぐに実案件を任されるのではなく、実務に向けたAdobeソフトの技術を習得しながらデザイン制作の経験を積み、案件に素早く対応できるような課題が用意されています。

課題の内容は、以下のようなものがあります

  • Adobeソフトを使用したトレース（バナー・Webサイト）
  • 画像作成（表・グラフ・地図・キャラクターイラスト・図解）
  • バナー作成
  • Webパーツ作成
  • 入力フォームデザイン
  • HTMLとCSSのコーディング

課題例（グラフ・キャラクターイラスト・Webパーツ）

今まで携わった案件について

案件を任せてもらえる時期は、年度によって多少違うそうですが、私は9月頃から比較的取り組みやすい案件を任せていただいています。

今まで行った案件の内容としましては、以下の通りです。
不動産情報サイト アットホーム

  • 内容更新
  • 新特集ページに使用するキービジュアル画像の選定と切り抜き
  • 新キャンペーンページへの流入口バナー展開

不動産情報アプリ 「アットホーム」

  • 機能説明をする画像のデザイン

その他

デザイン系の案件に関しては、専門学校や、新卒課題で学んだことや経験を生かしながら取り組んでいます。

学生時代と社会人になってからのデザイン制作の違いについて

ここからは本題に入り、学生時代と社会人になってからのデザイン制作の違いを3つに分けてお話ししていきたいと思います。

1.個人開発からチーム開発へ

学生時代と社会人の一番の違いは、全ての案件が個人ではなくチームで進められる「チーム開発」であるということです。 チーム開発についてファイル管理を例にあげると、学生時代はファイル整理に関して特にルールは決められておらず、自分だけの領域で自分自身で管理する環境だったのに対して、社内のデザインデータは、案件に限らずチームで同じファイルを作業したり、共有フォルダを使用したりしてデータを管理しています。よって、自分が作業しているものをメンバーに共有する場合が出てくるため、ファイル名の付け方への配慮やフォルダ内の整理をする必要があります。 これらについては厳密なルールが決まっているわけではありませんが、チーム開発では相手の視点に立ち、思いやりを持って管理する姿勢が大切だということに気づきました。

また、この変化に関してはデータ管理だけではなく、コーディング作業にも通ずるものがあります。 コーディングガイドラインはどの会社にも存在し、クラス名の命名規則や、レスポンシブコーディングをする際のブレイクポイントなど、独断ではなく、コーディングガイドラインによって決められたルールに沿って、コーディングをしていきます。 最近ではSEOへの配慮が進んでいるため、より詳細なコーディングガイドラインが作成され、専門学校では習っていないようなコーディング方法も学んでいくことになります。 このような部分でコーディング作業も単独作業から集団作業へ変化しています。

2.反響を意識したデザイン

学生時代にランディングページや、応募画面に遷移するWebサイト制作をした際、ターゲット設定はしていたものの、反響への意識は現在に比べて低く、自分がやりたいデザインを優先させることがほとんどでした。 それに対して現在は、ユーザーという明確なターゲットが存在することや、反響を獲得するという目的のもと業務に励んでいることから、デザインへのアプローチが変わってきています。また、リリース後には反響が数字として表れることで、目的のために次やるべきことを考えるサイクルを作り出すことができます。

この変化に対応するため、アプリのお問合せフォームをデザインするという新卒課題を通して反響を意識したデザインを学んでいます。この課題はサンプルのワイヤーフレームを参考にし、反響を意識したフォームにデザインし直すという課題です。
私がこの課題内で意識してデザインした箇所は、

・スクロール量の調整
　スマートフォン用のデザインということで、スクロール量が多いとサイト離脱者が増えるという考えから、アコーディオンデザインを用いて説明文を短縮させました。

ワイヤーフレーム
修正後（左：閉じている状態　右：開いている状態）

・非活性デザインへの配慮
　フォームの配色は全体的にモノクロにしていましたが、次の画面に遷移するボタンもグレーのままだとどうしても非活性に見えてしまうということで、アクセントカラーとして視認性が高く、次の操作を促しやすい緑色を使用しました。

ワイヤーフレーム
修正後

・物件コマのレイアウト変更
　一つ一つの情報にラベルを付け、余白をそろえたことで、全体的なばらつきを整え、部屋情報と物件情報を区別しやすいレイアウトに変更しました。

ワイヤーフレーム
ワイヤーフレーム

これからも案件や新卒課題に取り組むにあたって、一人でも多くのユーザーにお問合せをしてもらうという最終目標に変わりはありません。そのために、サイトやアプリのデザインでは「伝わりやすい」、「使いやすい」、「押したくなる」などの反響を優先的に考える必要があり、デザイン性と機能性のバランスが大切になってきます。また、画像と一緒に記載した通り、全てのデザインには理由がなければいけません。デザイナーとして、そのデザインにした意図を自分で説明できるようになる必要があります。私自身まだまだ勉強が必要な部分であると感じているので、反響とデザインの両立を考えられるデザイナーへと成長するために、案件や課題で経験を重ねていきたいです。

3.既存サイトやアプリに合ったデザインを考える必要がある

先ほどもお話した通り、学生時代のデザイン制作というと、授業内容を定着させながら自由にデザインを楽しみ、自分のアイデアを形にすることが重視されていました。 それに対し、WEBデザイングループの主な業務内容は既存サイトやアプリの改修になるため、自社のイメージカラーや、改修対象ページのトンマナなどルール化されているものに対しての配慮は全てのデザイン案件に必須となります。

10月に担当したアプリ内の機能説明をする画像のデザイン案件では、現在アプリで使用されている色やイラスト、ボタンを使用しながら、アプリのイメージに合わせたデザイン制作を初めて経験しました。ただアプリと合わせたパーツを配置するだけではなく、機能の説明がしっかりと伝わるように画像内のどの文言を一番目立たせるべきなのかを考える必要があり、配色や配置も細かく調整しながらの作成でした。 また、ABテスト実施用に、縦長・横長の2パターンと、2種類の配色を組み合わせた合計4案を提出し、スマートフォン自体が縦持ちを基準にデザインされていることや、縦型のほうが表示範囲が広く、ユーザーにとって見やすいという判断から、縦長のデザイン案が採用されました。 このように、複数の案を考える必要があることや、ユーザーが直感的に使いやすいものを目指すという面で、特に違いを実感した例として挙げられます。

上記のことから、学生時代と現在のデザイン制作では自分本位のものから他人本位のものに変わっていることが分かります。また、デザイン制作の以外の面でもチームで一つのサイトを作るにあたっての行動の違いも見られます。

まとめ

ここまで多方面から学生と会社で作るデザインの違いについてお話しさせていただきましたが、学生時代の経験に意味がなかったということではもちろんありません。専門学校で自由なデザイン制作を経験し、発想力や柔軟性、デザインの引き出しをたくさん持って卒業できたことで、社内のルールの中でのデザイン制作にスムーズに適応することができています。
私自身今回このブログを執筆する中で、自分に足りていない部分や、学生時代どのようにデザインと向き合っていたのかを改めて振り返ることができました。学生時代と現在を比較することで、これからのデザインへのアプローチについて考え直す良い機会となり、より多彩なデザイナーへ成長していきたいという思いが強くなりました。 社会人としても、デザイナーとしてもまだまだ未熟な私ですが、より業務を意識した課題への取組みや、デザインの引き出しを増やすための勉強を怠らず、これからも業務へ励んでいく所存です。

最後までお読みいただき、ありがとうございました！

Pythonを使ってタウンライブラリーのデータを分析して見た結果

はじめに: 自己紹介とご挨拶

はじめまして。デジタルイノベーショングループの領家です。2024年、新卒で入社しました。6月に配属され、10月までは会員とユーザーがリアルタイムでお問合せや会話ができるサービスであるコネクト サービスの保守を担当していましたが、11月からは新規プロジェクトのデータ分析の業務に取り組んでいます。

ビッグデータの活用やデジタルトランスフォーメーション（DX）の推進が不可欠になっている現在、データ分析は非常に重要性が高まっています。特にアットホームでは不動産事業のDXも行っているため、これは非常に重要な業務だと感じています。

今回のブログではPythonを使ったデータ分析について、アットホームが運営する街情報コンテンツ「アットホーム　タウンライブラリー」を用いて実際の分析プロセスを紹介したいと思います。技術的な観点から、データ分析によく用いられるPythonとその代表的なライブラリについても詳しく説明します。

データ分析とは

概要

データ分析とは、収集されたデータを整理・加工し、そこから必要な情報を選択して分析を行うプロセスを指します。データ分析を行うことで、従来は直感に頼っていた判断を数値に基づいて行えるようになり、さらにはこれまで気づけなかった課題を発見しやすくなるといったメリットがあります。

近年では、Webサイトの利用や日常生活で何気なく使うサービスから多くのデータが収集されています。これらのデータを分析することで、サービスの向上を図っている企業が多く存在します。

データ分析の流れ

データ分析は、主に以下の流れで進めることが一般的です。

1. 目的と仮説の設定

まず、なぜデータ分析を行うのか、その目的を明確化することが重要です。例えば、売上が芳しくない場合、その原因を分析することが目的となります。次に、課題解決に必要な仮説を設定し、仮説の立証に必要なデータを考えます。

2. データの収集

目的に応じて必要なデータを特定したら、データの収集を行います。収集方法としては、公開されているデータセットを探すことや、自力でデータを測定することなどがあります。

3. データの前処理

収集したデータには、空白の値や通常あり得ない数値（外れ値）が含まれる場合があります。外れ値に対して適切な処理を行うことで、データの質を向上させます。また、データの単位や尺度が異なるため、同じスケールで比較・計算できるように正規化という処理を行うこともあります。

4. 分析の実施

データの前処理が終わったら、仮説に基づいてデータ分析を行います。

5. 分析結果の評価

最後に、分析結果を評価し、その信頼性を確認します。

Pythonとライブラリについて

ここでは、データ分析においてよく使用されるプログラミング言語であるPythonとそのライブラリについてお話しします。

Pythonはオープンソースのプログラミング言語の一つで、シンプルで読みやすい構文と豊富なライブラリを持つことで知られています。データ分析だけでなく、機械学習やWeb開発などさまざまな分野で活用されています。このため、多くのユーザーに支持されており、解説記事も豊富に存在するため初心者にとって扱いやすい言語です。

今回は「pandas」「matplotlib」この2つのライブラリを用いてデータ分析を行っていきます。

pandas

pandasは、データの操作や分析を容易にするためのライブラリです。データの前処理や解析を簡単に行うことができ、データサイエンスやデータ分析の分野で広く使われています。

matplotlib

matplotlibは、データの可視化に使用されるライブラリです。収集したデータやpandasで解析したデータをグラフなどで可視化することで、数値データが見やすくなり、人間による確認や評価を補助します。

これらの2つのライブラリを活用することで、データの前処理から評価に至るまでの一連の分析を効果的に行うことができます。

実際にデータを分析する

それでは先ほど記載したデータ分析の流れにしたがって、Pythonを使ったデータの分析を実際に行ってみましょう。

1. 目的と仮説の設定

まずは目的と仮説の設定です。 今回は目的として、「子育てしやすい街」を探してみます。子育てしやすい街というのは非常に抽象的で、「待機児童数が少ない街」や「行政の支援が手厚い街」などが考えられます。そのため今回は、保育所に入園できる児童数に余裕がある地域だと、保育所探しの負担が軽減されるため、子育てがしやすいという仮説のもと分析を行います。 また、東京では基本的に駅を利用した移動が多いため、街の特徴以上に駅の特徴が重要だと考え、今回は子育てしやすい街にある駅について分析します。

2. データの収集

目的と仮説を設定したため、次はデータの収集に移ります。しかし今回はタウンライブラリーのデータを使用するため、新たにデータを収集する必要はありません。そのためここではデータの選択のみを行います。タウンライブラリーには、子育て支援に関連して、区ごとの待機児童数、私立・公立保育所の入園定員数と在籍児童数、そして駅ごとの保育所の数といったデータが保存されています。

今回の仮説では、入園できる児童数に余裕がある地域は待機児童が出にくく、子育てしやすくなるということなので、入園可能な児童数が必要です。タウンライブラリーにある入園定員数から在籍児童数を差し引くことで、入園可能な児童数を算出できます。したがって、入園定員数と在籍児童数を使用します。

また、今回は駅ごとに分析を行いたいのですが、入園定員数と在籍児童数のデータは区・町ごとにしかないため、正確な分析が困難な可能性があります。そこで、駅ごとのデータとして収集されている保育所の数を組み合わせることで、駅ごとの入園可能児童数に近づけることができると考えています。そのため、駅ごとの保育所の数も使用します。

それでは実際にデータを読み込んでみましょう。今回は事前にまとめておいたpickleファイルを使用します。pickleとは、Pythonオブジェクトを直列化・非直列化して保存や復元を行うためのライブラリで、これによって保存されたファイルがpickleファイルです。これは、数値や文字列といった情報を型を維持したまま保存できることを意味し、Pythonではこの方法でデータを保存・読み込みしています。

pandasを使用してデータを読み込むと、それはDataFrameという形式で管理されます。DataFrameは、データベースのような表形式でデータを扱えるものです。では、実際にデータの中身を少し確認してみましょう。

タウンライブラリーのデータの読み込み
タウンライブラリーのデータの読み込み

データの表示
データの中身の表示（先頭5件）

読み込んだpickleファイルを表示すると、一番上の行が列名となり、その下に実際のデータが並んでいます。また、特定の列のみを表示したり、抽出したりすることもできます。それでは、今回利用するデータである私立・公立ごとの入園定員数、在籍児童数、そして保育所数を表示してみましょう。

データ指定表示
指定した列名のみの表示（先頭5件）

画像のようにデータが入っている変数に、表示したい列名のリストを与えるだけで必要なデータの選択ができます。これにより、私立・公立の保育所に関する入園定員数、在籍児童数、保育所数といった重要な情報を選択できます。これらのデータは、次の分析ステップにおいて基盤となるデータです。選択したデータを確認したら、仮説に基づく詳細な分析に進めていきましょう。

3. データの前処理

使用するデータの選択が完了したので、次にデータの前処理を行います。

データ分析の過程では、四則演算を用いてスコアを計算することがあります。しかし、データに空白値が含まれていると、計算が正常に行えない場合があります。そのため、空白値に対して適切な処理を行う必要があります。例えば、他のデータをもとに平均値を補完したり、0を代入する方法があります。

以下の画像はタウンライブラリーにおける保育所データを示しています。ここで、待機児童数が存在する場合、在籍児童数が空白になっていることがあります。この空白値は、適切な方法を用いて補完する必要があります。

市区町ごとの保育所情報
市区町ごとの保育所情報（アットホーム　タウンライブラリーより）

今回の場合、待機児童がいるということは、保育所の定員が既に埋まっていると考えられます。したがって、在籍児童数の空白値には、入園定員数と同じ数字を入れることで補完します。これにより、入園定員数から在籍児童数を差し引いた「入園可能数」が0となり、次の分析ステップで正しいデータが確保されます。

fillnaで保育所数のNaNに0を代入する

空白値埋め
fillnaを使って空白値埋め，在籍児童数と定員数を同じ値にすることで差し引いた時の値を0にする

また、以下のグラフ表示において'NaN'という表記が見られるかと思います。

データの表示
データの中身の表示（先頭5件），永田町の保育所数がNaNになっている

これは空白値を示しており、そのままではデータ処理の際にエラーを引き起こす可能性があります。今回は、'NaN'を0で補完することで処理を進めます。この方法により、データの整合性が保たれ、今後の分析手順で問題なく進めることができます。

保育所数0埋め
保育所数の欠損部分を0で補完するためにfillnaを利用

先ほどNaNだった部分が0に置き換わっていることが確認できます。これにより、データが完全に整いました。 今回は別の値と合わせる方法と、0埋めの2つの方法を用いました。上記以外の方法に平均値、最頻値などを用いた方法がありますが、どの方法が適しているのかはデータの種類によって異なるため、その都度最適な方法を考える必要があります。

以上で、データの前処理が完了しました。これでデータは分析に適した状態になり、次のステップでの分析がスムーズに行えます。

4. 分析の実施

ここからは、実際に分析を行います。今回は、抽出したデータを活用して、子育てに適した街のスコアを算出します。

まず、私立・公立ごとの入園定員数から在籍児童数を引き、入園可能児童数を計算します。一般的なプログラミング言語では、for文を使って各行をループ処理で探索し、対応する値を引く必要がありますが、pandasを用いると、以下のようなシンプルな記述で同じ処理を効率的に行えます。

入園可能数の計算
入園可能児童数の計算

この記述は、入園定員数から在籍児童数を差し引いた値を「入園可能児童数」として新しい列に追加する処理を行っています。

次に、私立と公立それぞれの入園可能児童数を合算し、保育所全体の入園可能児童数を求めます。これにより、私立と公立のデータを統合し、地域全体としての子育てしやすさを評価するための基盤を整えます。

具体的には以下のように操作します。

入園可能児童数を計算
私立・公立保育所の入園可能児童数を計算

これにより、地域単位での詳細な評価が可能となり、次の解析段階でより精緻な分析が行えます。

ここで、matplotlibを用いてデータを可視化してみましょう。可視化することで、データの傾向や特徴を直感的に理解しやすくなり、分析結果の解釈に役立ちます。

具体的には、以下の手順を通じて可視化を行います。

matplotlibを使った可視化
matplotlibを使った可視化

保育所の入園可能児童数合計のグラフ
保育所の入園可能児童数合計のグラフ（赤い箇所は国立競技場駅）

グラフを見れば、市区町ごとに集められたデータのために、データが若干角ばっていることがわかります。次に、保育所数のデータを出力してみましょう。

matplotlibを使った保育所数の可視化
matplotlibを使った保育所数の可視化

保育所数のグラフ
保育所数のグラフ（赤い箇所は国立競技場駅）

先ほどの入園可能児童数と比較してみます。赤色で囲っている駅は国立競技場駅となっているのですが、保育所の数が0であるにもかかわらず、入園可能児童数が半分に位置しているのが確認できます。これは、同じ市区町の他の駅の影響を受けているためです。そこで、この2種類のデータを組み合わせて、駅ごとの入園可能児童数に近づけることで、より子育てしやすい環境を評価する基盤として活用します。

ただし、入園可能児童数と保育所数は異なる尺度や単位で表現されているため、そのままでは適切に比較できないことがあります。そこで、データの尺度を統一するために「正規化」という手法を用います。正規化の具体的な計算方法の説明は割愛しますが、最も基本的な方法として、データの最小値と最大値を用いて値を0から1の範囲に変換する方法があります。

それでは、実際に入園可能児童数のデータを正規化し、結果を可視化して確認してみましょう。

正規化処理とその結果の可視化
正規化処理とその結果の可視化

正規化された保育所数のグラフ
正規化された入園可能児童数のグラフ

グラフを確認すると、データの順番に変化はありませんが、y軸の単位が0から1の範囲に正規化されていることがわかります。

次に、同じ正規化処理を保育所数にも適用し、2つの正規化されたデータを組み合わせて、子育てのしやすい街のスコアを算出し、可視化してみましょう。

子育てのしやすい街の計算
子育てのしやすい街の計算

子育てのしやすい街のスコアのグラフ
子育てのしやすい街のスコアのグラフ

スコアの算出方法はさまざまですが、今回は保育所が一つもない地域は子育てのしやすさに貢献しないと考え、そのようなケースではスコアをゼロにするために乗算を用いました。これにより、保育所数が0の場合はスコアも0になるように設定されています。

この方法を用いることで、仮説に基づいた「子育てのしやすい街」のスコアを効果的に算出することができました。今後、このスコアを基にさらなる詳細な分析や比較を行うことが可能です。

5. 分析結果の評価

最後に、上記のスコアをどのように評価するかを考えてみましょう。データ分析の結果を評価するには、数学的な手法や人間の判断など、さまざまな方法がありますが、それにはそれぞれの特性と限界があります。

数学的手法では、正確な結果の指標や基準が必要ですが、今回のように正解が決まっていない分析では、私たち自身による総合的な判断が求められます。

例えば、私たちは駅ごとに子育て支援が活発かどうかを調査することができます。また、それに加えて、商業施設やスーパーマーケットの利便性、治安についての調査も方法の一つです。

ここで重要なのは、一つの観点のみで判断するのではなく、さまざまな観点から多角的に評価を行い、最終的に自身で総合的な判断を下すことです。

以上のような流れで、データ分析とその評価が行われています。

まとめ

今回の分析では定量的な評価が難しく、人的な判断が必要でしたが、データの可視化を通じてmatplotlibは効果的であると感じました。pandasに関しては、今回はシンプルな操作でしたが、豊富な関数を活用することでさらに複雑な計算を行う際に本領を発揮できると予想されます。

また、今回は保育所関連の情報のみを用いて分析しましたが、他のデータも加えることで、より詳細で精度の高い分析が可能になると考えられます。

現代では、さまざまな形でデータを収集できるようになり、データ分析はビジネスにおいて必要不可欠な業務となっています。生成AIが普及している今もなお、その重要性は変わりません。また、人の感性に依存するような内容は、生成AIでの分析が難しい場合も多く見られます。

今回紹介した手法は、基礎的な分析の一部に過ぎません。他にも、より複雑な手法やさまざまな分析手法が存在します。ぜひ、自分の目的に合った分析手法を見つけ、データ分析に挑戦してみてください。

「タイパ」についてディスカッション

はじめに

初めまして！WEBデザイングループの田中です。
新卒で2023年に入社し今年で2年目になります。
1年目は目の前の業務に必死に食らいついていくことで精一杯な毎日でしたが、2年目となりさまざまな業務に携わらせていただく機会が増え、少しずつ落ち着いて業務に取り組めるようになってきました。 ですがまだまだ知識不足な部分も多く、新しいことに出合うたびに勉強に励む毎日です。

そんな日々の中で、「タイパ」という言葉を初めて耳にしました。
皆さんはタイパをご存知でしょうか？
タイパとはタイムパフォーマンスの略で、
「費やした時間に対して得られる成果（時間対効果）」
つまり「効率の良い時間の活用」を意味します。
近年、デジタル化が進むにつれ社会は情報過多となり、多くの人が「情報を処理するのにもっと時間が欲しい」と感じるようになりました。
しかし、誰にとっても時間は等しく有限です。実際に問われているのは "24時間" という限られた時間をいかに有効に使うか、それが「タイパ」という注目の言葉なのです。
そこで今回はとある案件にて、当社の企画担当者とデザイナーがタイパについてディスカッションした内容をお届けします。

MC：田中
企画：Kさん
デザイナー：Dさん

１．費やした時間に対して得られる成果

タイパの具体例をあげてみる
Kさん）私たちの日常には具体的にどんなタイパがあるでしょう？
Dさん）私はTikTokでの検索が思い浮かびました！
例えば旅行の計画を立てる際に、書籍やネット検索で観光地を調べるのではなく、最近はTikTokなどのショート動画で検索することも増えたかなと思います。
Kさん）確かに書籍などを読んで探すよりも、動画を見た方が手っ取り早く答えを得られますよね。あと分かりやすい例をあげるならば、動画を倍速で視聴するのもタイパですよね。通常の速さで見るより早く見終わるため、時間が短縮されることが目に見えて分かりやすいです。
Dさん）私も隙間時間にYouTubeを倍速で視聴することがあります！
他にはネットショッピングもタイパが良いと思います。実際に店舗まで足を運ぶ必要がなく、短時間で簡単に買い物して家まで届けてもらえるのでとても効率的です。
Kさん）こうして考えると、あまり意識していませんが、日常的にタイパが良い選択をしていることが多々ありますね。

２．タイパの良さ＝満足度の高さ

住まい探しをしているユーザーにとってのタイパを考える
Kさん）物件探しにおいて考えると、ユーザーにとって無駄な時間が少なく物件探しがスムーズにできるかどうかといったところでしょうか。
Dさん）そうですね、例えばユーザーの行動を割合で見た時に、操作に迷っている時間よりも物件を探す時間が多ければ多いほど、タイパが良かったということになるのではないですかね。そして、その割合の高さこそがユーザーが得られた満足度を指し、結果としてタイパの良い物件探しができたと言えると思います。
Kさん）タイパが良いほど、ユーザーの満足度が高いということですね！
それにタイパが向上するということは操作に迷っていた時間が減り、その分を物件を探す時間に費やすことができるため、意識が途切れずにスムーズな操作が可能となり、情報収集に集中することができます。
そのためユーザーにとって希望する物件が見つかりやすくなるというメリットもありそうです。さらに、時間に余裕ができるということは家具選びなど新生活をより楽しみに感じられる時間が取れますよね。
Dさん）確かにそうですね。それに移動時間などの隙間時間でも気軽に物件探しができれば、より時間を有効に使うことができます。だからタイパが注目されているというわけですね！
Kさん）あと1つ思ったのですが、賃貸物件（借りる物件）を探しているユーザーと売買物件（買う物件・売る物件）を探しているユーザーでは、少しタイパの価値観が変わってくるような気もします。
賃貸物件はライフスタイルに合わせて柔軟に選ぶことができる一方で、売買物件は一生ものの買い物のため、より時間をかけてじっくり考える傾向があると思います。
Dさん）確かに、売買物件を探すほうが時間をかけるからこそ、「時間対効果」の ”効果” の部分が求められるというわけですね。また賃貸物件は更新時期や申込の番手なども関係してくるため、タイパが良いに越したことはなさそうです。
そう考えるとタイパはタイパでも人によって価値がバラバラな可能性もあるということですね。

３．タイパの良いサイト＝ユーザーフレンドリーなサイト

“不動産情報サイト アットホーム” でユーザーに提供できるタイパについて考える
Kさん）私はWebサイトにおけるタイパは、次のステップなどが分かりやすく、直感的に操作できるサイト、つまりユーザーフレンドリーなサイトだと思います。
先ほども述べたように、操作に迷う時間が多ければ多いほど効率が落ちてしまいタイパが悪くなってしまうので、ユーザーが迷わないように誘導してあげることが大事かと思います。
Dさん）仰る通りです！ユーザーフレンドリーなデザインにするためにデザイナーができることは、効率の良さを追求するために、ナビゲーションやボタンのサイズ感や余白の ”バランス” をユーザーが使いやすいように調整をすることです。
他には視線を誘導することも大切で、シンプルなレイアウトにし、色のメリハリをはっきりさせることにより、情報の入ってきやすさというのを考えていく必要があります。
また、情報が多すぎるとデザインに注力しづらいため、情報を精査することも大切だと思います。
Kさん）そうですね、企画としてはユーザーが求めている情報をしっかりと提供したいと考えています。ユーザーが必要な情報をすぐに見つけられるように、情報の選別やカテゴリー分けをしていき、検索機能を充実させます。
また、サイトを分析した数値やアンケートなどによるユーザーの満足度に基づいてコンテンツを考え、優先順位をつけていくことにより、タイパを向上させることができると思います。
Dさん）そして開発担当には、私たちが考えたようなことを実装してもらう必要がありますが、タイパを良くするには、可能な限りロード時間を短くすることも大事ですよね。
Kさん）つまり企画担当とデザイナーと開発担当それぞれが、ユーザーの使いやすさを第一優先に考えることにより、タイパの良い物件探しを提供することができるんです！


まとめ

お2人ともありがとうございました。
このディスカッションを通して、デザイナーと企画担当者の普段の業務の雰囲気なども伝わったでしょうか？
デザイナーは企画からの要望に応じてデザインすることが多いイメージがありますが、こうしてお互いの考えを出し合って話し合うことによって、案件の内容についてすり合わせていくこともあります。

タイムパフォーマンスという言葉だけ聞くと、「いかに時間を短くするか」ということに着目してしまいそうですが、実際は「かける時間の短さ」だけではなく、「かけた時間に対して得られる満足度が高いこと」が重要だということが分かったと思います。
皆さんは今まで「タイパ」についてどんな印象を持っていましたか？
普段の生活の中にも、タイパが関わる場面は多くあると思います。一度皆さん自身の生活や仕事におけるタイパについて、今までの概念にとらわれないような新しい視点で考えてみてみると、限られた時間をさらに有効に使えるかもしれません。
私自身も日頃の業務におけるタイパの向上を意識し、デザインをする際にはそれぞれのユーザーにとっての価値を考え、ユーザーの限られた時間を有益なものにするために日々精進いたします。
最後までお読みいただきありがとうございました。

未経験エンジニアがアプリ開発保守業務に携わった半年間の成長の実感

目次

はじめに

自己紹介とブログの趣旨説明

はじめまして、Cメディア開発グループ、アプリチーム所属の土居です。
2023年4月に入社し、今年で2年目になります。
業務としては、「不動産情報アプリ アットホーム」と「お部屋探しアプリ アットホームであった！」の開発保守を行っています。
その中でも特に、不具合対応や調査依頼の対応といった保守業務がメインになります。
各アプリについては下記記事でもご紹介しているので、ぜひご覧ください！

dblog.athome.co.jp

dblog.athome.co.jp

2024年1月に現部署に配属されるまでは社内の研修を受けていたため、アプリ開発保守業務を担当してから半年と少しになります。
入社前のプログラミング経験はなく、未経験でのスタートでした。
このブログでは、私がプログラミング未経験で入社し、現部署に配属されてから現在までの約半年間で、どのような成長を実感しているのか、入社2年目ならではの視点としてご紹介させていただきます！

アプリチーム配属前に経験したこと

現時点との成長度合いの比較対象として、配属時点までの私の経験値を下記の表にまとめました。

上記の通り、外部研修・社内研修を通し、システム開発の一連の経験を積んだ状態で、アプリチームの業務に携わることとなりました。

アプリチーム配属時に感じた課題

研修による経験はあったものの、実際にアプリチームという現場に配属された際には、多くの課題を感じていました。
特に下記の4件が印象的でした。

  • 担当した2つのアプリは、仕様や仕組みが大きく異なるものであったため、それぞれについて一つずつ理解する必要があった
  • 現場ならではの開発ルールを学ぶ必要があった
  • アプリならではのファイル構成や仕組みであったため、目的のファイルの発見やソースコードの読解に苦戦し、時間をかけて理解する必要があった
  • 配属前の研修では原因などを自身で「調査」することがほとんどなかった一方、アプリチームでは不具合の原因究明などの調査をすることが多かったため、対応について一から教えていただく必要があった

研修ではアプリ開発でも使用しているプログラミング言語を学び、さらにシステム開発の流れを体験したことで、基礎的な部分では比較的つまずくことなく取り組めたように感じています。
しかし上記の課題のように、研修時とのギャップを感じる部分では苦戦することとなりました。

問題解決への取組みと成長の実感

前述した課題について、その問題解決への取組みとして、下記2点を特に心がけ、日々の業務に取り組みました。

  • 業務として与えられたタスクを一つ一つ丁寧に対応すること
  • 一度対応したことは自分で説明できるくらいに理解すること

その結果、「配属当初と比較し、できるようになったことが増えている」ことで、成長を実感しています。
ここで、具体的にどのように成長したのか深掘りをしました。
まず浮かんだのは、業務内容や必要なツールに関する知識量の増加や、社会人としてのコミュニケーション力の向上です。
そして結論として、後述する不具合対応のような経験を積んできたことから、一番成長を実感したのはアプリ開発保守業務に必要な調査の能力という意味での「調査力」であると考えています。

実際に対応した不具合対応の紹介

どのような経験や実感を以て「調査力」が成長したと考えたのか、具体例として、配属されてちょうど半年経った頃に対応した不具合対応についてご紹介します。

発生した不具合の概要

今回の不具合は、「不動産情報アプリ アットホームと不動産情報サイト アットホームにおいて、表示されている内容が異なる部分があった」というものになります。
各サービスの不動産会社の情報を表示する画面において「開業・開店年数」という項目がありますが、その表示される年数が、不動産情報アプリ アットホームと不動産情報サイト アットホームで1年異なっているという事象が発生していました。
「開業・開店年数」の表示例：

  • 不動産情報アプリ アットホーム→2年
  • 不動産情報サイト アットホーム→3年

不動産情報サイト アットホーム側の仕様が正しく、不動産情報アプリ アットホーム側の不具合であるということが判明したため、アプリチームに調査依頼が届く運びになりました。
そして、「不動産情報アプリ アットホームではどのようなロジックで開業・開店年数を取得しているのか」を目的とし、私が調査を担当することとなりました。

対応内容

対応１：不具合箇所の特定

上記の依頼を受けまず行ったことは、システムの流れのどの時点で開業・開店年数の値が期待する値（不動産情報サイト アットホームで表示される年数）と異なるものになっているのかの確認です。
アプリの設計として、開業・開店年数は、不動産会社の情報が保存されているDBからAPIを経由し、フロントエンドでの編集処理により画面に表示される、というものになっています。
不動産情報アプリ アットホームのみ不具合が発生していることから、下記2つの可能性があると考えました。

① フロントエンド側で、画面に表示をする際に不具合が発生している可能性

② フロントエンドにデータを与えているAPIのレスポンスの年数の値が、そもそも異なっているという可能性

簡易的な図にすると、下記のようになります。

よって、2つの可能性について順番に調査を行いました。
まず①に関しては、ソースコードではどのような処理で年数が画面に表示されるようになっているのかを確認しました。
その結果、フロントエンド側の処理としてはAPIから取得した年数のデータを表示しているだけで、その値を編集するような処理はなかったため、特に問題がない可能性が高いことが分かりました。
そして②に関しては、ブラウザの開発者ツールを用いて、該当のAPIのレスポンス内容を調べました。
その結果、APIのレスポンスの時点でデータが期待する値とは異なり、ここで問題が発生していることが分かりました。

対応２：API担当者への調査依頼

対応１により、フロントエンド側ではなくバックエンド側のAPIに不具合の原因がある可能性が高いと分かったため、次はバックエンド側で原因調査を行っていく必要があります。
しかし、前述した自己紹介の通り私はフロントエンドの担当であるため、自身が調査を行うのではなく、別のAPIを担当する方に調査を依頼する必要がありました。
よって、対応１のフロントエンドでの調査結果をまとめたものと、該当のAPIの情報（API名・リクエスト・レスポンス情報など）をAPI担当者に伝えたうえで、調査を依頼しました。

調査結果

対応２の結果、本不具合はAPIの仕様に下記のように差異があったことを原因として、不動産情報アプリ アットホームにて1年少ない年数が表示されてしまっていたということが分かりました。

  • 不動産情報アプリ アットホーム：月を切り捨てる仕様になっており、開業した年を「0年」としていた
  • 不動産情報サイト アットホーム：月を切り上げる仕様になっており、開業した年を「1年」としていた

以上の結果を報告し、今回の調査依頼の対応は完了となりました。

不具合対応を通して得た気付き・まとめ

アプリチームに配属されて以降、今回のような不具合の対応や調査をすることが多々ありましたが、今回の対応を通して、数々の課題を感じた配属当初と現在の自分を比べ、特に下記3点について、変化や成長があったと感じることとなりました。

  1. 調査方法の習得
    例えば今回用いた開発者ツールについて、当初は「画面の要素を確認できる」くらいの認識だった
     ⇓
    現在は、ログやネットワーク状況、APIとの連携部分など、以前より確認できる内容が増え、ツールへの理解度が以前より上がっていると感じる
  2. 必要な調査方法を判断するための業務の理解や知識量の増加
    当初は調査依頼が届いても何をしたらよいのか分からなかった
     ⇓
    現在は、不具合の内容を確認したうえで、どんなツールを用いてどこを調べていくとよいのかなど、必要な調査内容を以前より判断できるようになった
  3. 連携時に必要なコミュニケーション力の向上
    当初は誰にどのように連携すればよいのか分からなかった
     ⇓
    今回はAPIの担当者に調査依頼をしたように、依頼にあたっての適切な情報共有を行い、他の方と連携して改修対応を進められるようになった

成長を実感した内容は「調査力」であると前述しましたが、上記3件をまとめた力としての表現になります。
よって、以上を理由として、現在の業務の総合的な力として「調査力」がついてきていると実感したのでした。

おわりに

いかがでしたでしょうか？
最近は技術をご紹介をする記事が多かったため、新鮮な気持ちでお読みいただけていたら幸いです。
私としても、今までの自分を振り返り、成長点を探すという機会がなかなかなかったため、客観的に自分を見つめ直すとても良い機会になったと感じています。
今回は成長をテーマとした記事とするため、できるようになった点をメインにご紹介しましたが、まだまだ覚えるべきことや身につけるべきことも多く、周りの方々に助けていただくことも多い現状です。
現状の課題と向き合い対策することで、今後も着実に力をつけていき、より良いアプリを皆さまにご利用いただけるよう努めてまいります！
最後までお読みいただき、ありがとうございました！

AI活用による開発の効率化

はじめに：自己紹介とご挨拶

お久しぶりです。昨年10月に未経験エンジニアが挑む反響・再来訪予測モデル開発を書かせていただきました、デジタルイノベーショングループの橋本です。
前回のブログ投稿時は、予測モデルの開発業務を中心に行っていましたが、現在では新たにパーソナルAIの研究開発も行っています。また、予測モデル開発では、大規模データでモデル作成を行うフェーズに入り、I/Oの負荷軽減や初めて扱うAWSリソースの登場など、さまざまな課題に苦戦する日々です。　
こうした開発業務に今や欠かせない存在となっているのが、ChatGPTです。今回のブログでは、ChatGPTを活用した開発業務についてご紹介したいと思います！

1. ChatGPTの活用実例

予測モデル開発では主に、I/O処理の並列化のコード生成やエラー調査、AWSリソースやアルゴリズムについての調査の際にChatGPTを使用しています。

もはや、Google検索はほとんど使用せず、使用するとしてもChatGPTの回答の裏付けを取るために検索する程度になっています。 肌感としては、どの使用例においてもかなり高い精度で回答してくれますし、Google検索しながら開発を進めるより遥かに効率がよく、欲しい答えに辿り着くスピードが速くなったと感じています。
もはや、ChatGPTを使わない日はないと言っても過言ではありません。

もちろん、社内でChatGPTを活用しているのは私だけではありません。社内では他にも、以下のようなシーンでChatGPTを活用しています。

  • APIの仕様調査
  • ベストプラクティスの選定
  • ソースコードの新規作成
  • ソースコードレビュー
  • 設計資料から開発タスクの洗い出し
  • エラー調査・コード修正
  • 大量データ作成
  • 本番の稼働調査（SDBのメモリチューニング）

etc.

このように、ChatGPTはあらゆる開発業務をサポートしてくれるのです。

2. ChatGPT活用による効率化

こうしたChatGPTの活用によって、どれほど開発工数が削減されているかを社内で調査しました。 以下は、その調査結果です。

どの業務でも、工数が大幅に削減されていることが分かります。そして、調査に協力してくれた開発メンバーは口を揃えて、「ChatGPTは手放せないツールになっている」と言っていました。 実際に私も、ChatGPTなしでの開発は考えられないほどになっています。

3. ChatGPTを利用する際の注意点

これほど便利なChatGPTですが、開発業務で利用する際にはいくつかの注意点があります。 以下は、私や他の開発メンバーが普段から意識していることです。

特に重要なのは、ChatGPTに入力するプロンプトの内容です。 プロンプトの内容次第で、生成される回答が大きく左右されるため、背景とゴールの明確化や曖昧な言い回しを避けることは必須であると考えます。 また、生成された回答に対しても、AIリテラシーを持って取り扱うことが必要です。「AIだから100%正確な回答をしてくれる」とは限りません。 ですので、間違った回答が生成され得ることも視野に入れて、自分で回答の裏付けを行うようにしています。

まとめ

いかがでしたでしょうか？ ChatGPTはもはや、開発業務において欠かせない存在となっています。 コーディングだけでなく、要件定義やタスク管理など、さまざまな場面でAIを活用すれば、全体的な工数は大幅に削減され、より効率的なサービス開発につながります。 よって、エンジニアに求められるスキルも、言語知識とロジックの組立てスキルから、AIに適切な指示を出すための知識とAIリテラシー、および幅広いシステム開発に関するノウハウへと変わっていきます。 つまり、今後の開発業務はいかにChatGPTやその他AIを使いこなせるかが重要になってくるということです。
まだChatGPTを使ったことがない方は、これを機にぜひ使ってみてください！

そして最後に、このブログの内容も実はChatGPTが生成した文章を元にして書いている、ということを明かして今回のブログを締めくくらせていただきます。

2D間取り図からの転換、近未来3D間取り図

はじめに: 自己紹介と挨拶

簡単な自己紹介

お久しぶりです。以前 「メタバース打合せサービス」開発をしました！（後編）を書かせていただきましたデジタルイノベーショングループの松山です。前回執筆してから１年が経ち所属するグループも変わりました。デジタルイノベーショングループでは普段、コネクト サービス(チャットサービス)の機能拡張や保守・3D間取り図の開発などを担当しています。グループとしては他にもAIの開発なども行っています。

今回のブログでは、Three.jsを使用して作成した3D間取り図を作成する方法をご紹介します。皆さんは間取り図を見た時、実際にそこに住んでいることを想像できますか？私が家を探していた時、アプリ上の間取り図だけではその空間を想像するのが難しいと感じました。例えば、「〇〇畳」と表示されても、実際にその広さを感じ取ることができませんでした。

ブログの趣旨説明

このブログでは、2D間取り図から3D間取り図へと変換するプロセスについて、また、3D間取り図にすることでどのように便利さが増すかについてお話ししたいと思います。

技術的な観点からは、Three.jsを使用して3D間取り図をどのように再現しているのか、その過程についても説明したいと思います。

第1章: 現在の間取り図の問題点

2D間取り図の限界

従来の2D間取り図は、空間の広がりや奥行き感を伝えることができず、部屋の大きさや配置の理解を難しくしています。この平面的な表現によって、実際の住空間のイメージを把握することが困難になりがちです。特に、初めての住宅購入や引越しを考えている人々にとってはより難しく感じるかもしれません。

実際の空間把握の難しさ

2D間取り図だけでは、部屋の光の流れや窓からの眺望など、空間の質感や快適さを伝えることが難しいです。このような情報は実際に空間を体験することで初めて理解できるため、紙の上や画面上の間取り図だけでは全体感を掴むことが困難です。その結果、物件選びの際に想像と現実とのギャップに直面することもあります。

また、「クローゼット広め」などの言葉を見たことはありませんか。広いという記載があっても実際に行ってみたり住んでみるとあまり広くないと感じることもあると思います。これは人それぞれの感じ方の違いで、広いと感じる人もいれば、あまり広くないと感じる人もいると思います。2Dでは広さや高さを感じることが難しいため実際に住んでからのギャップを感じてしまう場合もあります。

(例)ファクトシート
ファクトシート(図面)

第2章: 3D間取り図の登場

3D間取り図のメリット

最近の技術革新により、3D間取り図が登場しました。これによって、以前に比べて部屋のサイズ感や配置、照明の効果などをよりリアルに想像することが可能になりました。立体的な視点から部屋を眺めることができるため、まるでその場にいるかのような感覚で物件を確認できます。2D間取り図では空間把握が難しく、ギャップが生まれることがありましたが、3D間取り図で実際に仮想空間でその部屋に入ることによって、住んだ時のどのように感じるのかを体験することができます。

「3回家を建てないと満足する家は建てられない」という言葉を聞いたことはありますか？ この言葉は、初めて家を建てる際、実際に住んでみないと自分の理想の家を完璧にイメージすることは難しいことやライフステージが変わることで求められてくるものが変わる、という意味です。しかし、3D間取り図を活用することで、初めて家の設計をする段階から理想的な家を建てられる確率が非常に高まります。

3D間取り図
3D間取り図

3D間取り図のデメリット

3D間取り図のデメリットとしては、VRゴーグルが一般的に普及していないため、現時点ではスマートフォン上でしか閲覧できず、2D間取り図との大きな違いがないという点が挙げられます。ただし、VRゴーグルの技術は進化しており、将来的には個人が所有する時代が訪れる可能性もあります。その時までは、大きな違いは感じにくいかもしれません。

また、現在の技術では外の景色を再現するのが難しいという課題があります。太陽の光の入り方や窓からの景色など、現実世界の複雑な要素を再現するのは難しいため、十分に表現ができない場合があります。特に、太陽の光は周囲の建物や地形によって影響を受けるため、全てのマンションやビルをリアルに再現する必要があります。同様に、景色も地球全体を再現する必要があります。これらの技術的な制約があるため、現時点では外の景色の再現には限界があります。

第3章: 近未来の3D間取り図

Three.jsについて

Three.js という言葉を聞いたことはありますか。Three.jsとは、ウェブ上で3Dコンテンツを作成・表示するJavaScriptライブラリの一つです。この技術を活用することで、開発者は高品質な3D間取り図を作成し、ユーザーに提供できるようになります。Three.jsはその柔軟性と強力なグラフィック表現能力により、3D間取り図分野で注目されています。

3Dコンテンツを作るには専門的な技術が必要と感じるかもしれませんが、こちらはJavaScriptです。ウェブサイトの開発の経験がある方々は馴染みがあるかと思います。実は身近な言語で作られていたりします。

間取り図の作成方法

Three.jsの前の準備

3D間取り図の作成を開始するにあたり、まずPythonのプログラミング知識が基本として必要です。初めに行う作業は、Pythonを使って2D間取り図を分析し、その結果を壁や家具の情報を含むJSON形式で出力することです。出力されたJSONファイルはThree.jsを利用して3Dモデルに変換する際の重要な入力データとなります。

壁と床の作成

3D空間で壁や床を正確に再現するには、各頂点がどのように結びついているかを明確に定義したJSONデータが必須です。指定された頂点同士を結ぶことで、実際の間取り図の壁や床を形成します。しかし、この情報が不足していると、本来意図していない場所に壁が生成されるなどの問題が生じる可能性があります。

2D間取り図からは壁の高さを直接読み取ることができないため、平均的な高さの値や実測データに基づいて設定します。さらに、頂点間をつなぐことにより壁の長さや位置を決定し、これによって実際の間取りに忠実な壁を構築できます。例えば、方眼紙上にマークされた頂点を直線で結ぶことを想像してみてください。

写真は実際に作成に使用したものです。左側の写真では床はピンク色、壁は黒い線で示されます。右側の写真は実際に3D化したものになります。

2D間取り図
2D間取り図
3D間取り図
3D間取り図

壁はリアリティーを高めるテクスチャ処理のため、同じ場所に2枚壁を作成することが望ましいです。これは後ほど説明するテクスチャーの利用に必要です。

同様の手法で床も作成しますが、こちらは3点以上の頂点を結んで形態を作ります。特に重要なのは、床と壁の境界を正確に一致させることです。この作業を怠ると、壁が宙に浮いたように見えたり、床に埋まってしまう可能性があります。

天井の作成

床を作成する際には、効率と一貫性のため天井も同時に作成することをお勧めします。なぜなら、床と天井はほぼ同じ頂点を上下で共有し、高さが異なるのみであるためです。天井を後から作ると、同じ計算を繰り返すことになり、時間の増加や処理効率の低下を招きかねません。

テクスチャによるリアリズムの追求

基本的な3D間取り図が完成したら、壁や床にテクスチャを適用してリアリティーを向上させます。テクスチャとは、壁や床に貼り付ける画像のことで、これによってよりリアルな空間の再現が可能になります。壁には通常、内外面で異なるテクスチャが使用されます。例えば、和室と洋室が隣接する場合、壁の質感や色を変えることで、空間の雰囲気を一層豊かにすることができます。

3D空間におけるリアリティー向上のため、壁にはドアの追加や窓の設置を考慮し、自然光が部屋の中に入るようにするなど、さまざまな工夫を施すことができます。これらの要素を加えることによって、現実に近い住宅モデルを作り上げることが可能となります。

第4章: メタバースの融合

3D間取り図は、ホームステージングやインテリアデザインの分野でもその使用範囲を拡大しています。ユーザーが自分の好みに合わせて家具を配置したり、壁の色を変えたりといった自宅のカスタマイズが可能になるよう研究・開発が進められています。将来的には、ユーザー自身が作成した住宅をメタバース空間にアップロードし、メタバース内で実際に生活する体験ができるようになればいいなと感じています。

さらに、メタバースと3D間取り図の融合により、不動産業界における革新が期待されます。メタバース内で実際に歩き回りながら物件を見ることができれば、現地に訪れることなく、よりリアルな空間の体験が可能になります。これは、物件探しの手法を根本から変える可能性を持っています。地方から都内の物件にアクセスしたり、逆に地方の物件を体験できたりするというのは大きなことだと思います。行ってみなくては分からないという面白さは少しなくなってしまいますが、初めての一人暮らしで初めての街では不安なことも多いと思います。少しでもその不安が軽減できると良いなと感じています。

室内
室内

まとめ

今後の3D間取り図の可能性

3D間取り図は、今後さらなる進化を遂げる可能性があります。まず、よりリアルな光線追跡技術や物理ベースレンダリングの導入によって、部屋内の光の効果や質感をよりリアルに再現することが期待されます。また、AI（人工知能）やVR（仮想現実）技術との統合によって、より個別化された情報提供が可能となり、ユーザー一人一人のニーズや好みに合わせた空間のシミュレーションが実現可能になるでしょう。さらに、データ分析や顧客行動の予測によって、不動産業界全体の業務効率化やサービス向上につながる可能性もあります。これらの新たな技術の導入により、3D間取り図がより魅力的でパワフルなツールとして、不動産市場に革新をもたらすことを期待しています。

さいごに

以上いかがだったでしょうか。この進化の波を目の当たりにすることは、私たちにとって非常に刺激的な体験です。3D間取り図とその将来性について深く掘り下げてきましたが、これはまさに冒険の始まりに過ぎません。不動産業界に限らずいろいろな分野でこれからも技術の進展とともに変化し続けるでしょう。そして、それは私たち自身の住まいに対する考え方や夢も変えていくことでしょう。新しい技術の可能性を探求することで、私たちはより豊富な住まいに関する情報提供を実現していけると感じています。