飲食店の混雑状況を見える化「こんどる？」の開発中画面を初公開！

こんにちは！
ＢＦＴ名古屋支店・インフラ女子（？）のやまぐちです。

名古屋市内にある馴染みの飲食店に導入し、混雑状況を可視化する無料のサービス「こんどる？」がほぼほぼ出来上がってきました！

私を含め、このプロジェクトに関わるエンジニアはインフラエンジニア。
ラズパイやAWSは何とかなるんですが、問題は２つ。
プログラム関連とデザインです。

本日はそのデザインの部分を少し公開していきたいと思います。

サーバレスなAWSの構成

AWSは上図のように構成しています。
ブラウザでAPI GatewayのエンドポイントにアクセスするとURLパラメータがLambdaへ渡され、そのパラメータをキーにして複数のDynamoDBテーブルからデータを取得してきます。

Lambdaでは滞在人数やCO2濃度の直近5分間の値を計算します。また現在時刻がその店舗の営業時間内かどうかを判断します。LambdaからAPI Gatewayに返される値は、店舗名や滞在人数・CO2濃度・実行時刻・開店フラグなどです。

問題のデザインの部分はAPI Gatewayに置かれるHTMLとBootstrapのCSS、S3にある独自のCSSや画像です。CSSがBootstrapと独自で分かれているのは、PCなら横並び、スマホなら縦並びなどレスポンシブデザインにしたい部分をBootstrapで、それ以外の細かい部分（色・形）を独自CSSとするためです。

名古屋支店の今のページを公開！

画面は導入する店舗ごとに表示されますが、今回はテストとして名古屋支店のページにアクセスしてみます！

どーーーん！
…滞在人数とCO2濃度の枠がずれてますね！笑
滞在人数が表示されていれば以下のように問題ありません。

滞在人数はその場で撮影した写真に対してラズパイ上で人数を計測、AWSに送信した結果が表示されるのですが、うまく写真がとれていない場合にこのように「Under maintenance」と表示されるようにしています。USBカメラが認識されなくなったのかもしれません。確認せねば。

CO2濃度はラズパイに付けているCO2センサーで測定しています。比較的精度の高い方法で測定しており、±50ppmの誤差範囲です。

このページをどうやったらもっと今風に格好良くなるのでしょうか。
指摘する側もデザイン初心者なので、「なんかもっと一般のサイトみたく」というようにふわっとした感想しか出ないので言われる方も困りますよね。

フォント？色？影？画像の大きさ？
何パターンか作成して比較するといいように思います。

終わりに

わからない・迷う部分もたくさんありますが、こうしてサービスとして形になって来るととても愛着がわいてきます。

リリースまであと少し。少しずつ調整していいサイトにしていきたいと思います！