ご依頼やご相談など、
お気軽にお問い合わせください。
フェンリルは、あらゆる問題解決の
プロフェッショナルです。
– OUTLINE
ウェブだからこそ生まれる価値がある
駅に行かなくてもリアルタイムの運行情報がわかるので、列車に遅れがあった場合でも移動手段の変更など、次の行動をいち早く判断できるようになります。「現在の運行状況を知りたい」というユーザーのニーズに対して、最短（1タップ）で目的の情報を提供できることがポイントです。鉄道運行情報を提供する類似または競合のサービスとして、他社の鉄道事業者公式アプリや経路探索アプリ、運行情報を統合した地図アプリなどがある中、「アプリ」ではなくあえて「ウェブサイト」として提供することで、アプリ以上に多くのデバイスをサポートできる点、また、対象路線の拡大や機能拡充の際、ユーザーがアップデートをしなくても最新のシステムを利用できる点は、利便性が高い特長だと考えています。
POINT“安心 × 信頼 × ユニバーサル” がコンセプト
老若男女の誰もが気持ちよく利用できる「わかりやすさ」と「使いやすさ」の実現に注力しました。たとえば、路線名や駅名を記す書体には JR 駅構内のサインとの一貫性を保ちながら、スクリーン上でも読みやすい「UD 新ゴ」を採用。モリサワの TypeSquare を導入し、幅広い環境で意図した通りの文字組みを実現しています。路線選択画面では、路線図から自分が見たい駅を直接選べたり、列車の位置を知るための在線画面では、列車の行き先がひと目で分かるように列車アイコンを路線カラーで着色したり、画面をスクロールしている間だけ行き先方面を表示したりと、ユーザーの理解と行動を助ける工夫を施しています。さらに、淡々と情報を伝えるのではなく、愛着が湧き長く利用されるシステムに育ってほしいと思い、色とりどりの列車がトコトコ走っているかのような「親しみを覚える」表現を目指しました。
POINT多様な工夫を盛り込んだ開発手段
フロントエンドからバックエンド、インフラのそれぞれを担当するエンジニアがそれぞれの知恵や知見を出し合うことで、メンバーの最大パフォーマンスを発揮し連携のとれた開発が実現しました。基盤システムに近いサーバーは多くの情報を処理する必要があるため、並列処理に強い言語を採用したり、画面描画内容は動的に生成することで保守性向上と開発効率化を図ったりといった工夫を盛り込みました。また、大量アクセスに対応するために、エンドユーザーからのアクセス部分はサーバーレス構成としています。
Infrastructure as Code(IaC) の実践
本システムは AWS の各種サービスを利用して構成されています。各サービスの多岐に渡る設定項目を、本番環境／開発環境のような複数環境でもれなく設定するため、AWS CloudFormation を利用して、コードベースで構成管理を実施しています。構成や設定の変更が発生した場合は、CloudFormation テンプレート（コード）の編集と相互レビューを実施した後、検証環境でテンプレートを流し込んで問題がないことを確認、その後本番環境にテンプレートを適応といった手順を踏むことで、安全なインフラ変更を可能にしています。
デザイナーの声
情報を徹底的に整理することで、ユーザー第一の設計に
ユーザーの理解を助ける情報設計には、役割とプライオリティの設定が重要です。案内に必要な情報をすべて洗い出し、列車アイコンや駅名のような「ざっと見る情報」と、遅れ時分や運行案内のような「じっと見る情報」の２つに分類。それぞれの情報に相応しいスタイルを指定することで、見通しがつきやすく、自分にとって必要かどうか即座に判断できる設計としています。また、ユーザーが目的とする情報を迷わず得られるように、ルック＆フィールの一貫性を保ち、ボタンなどは押しやすい面積にし周囲の余白を広めに取る、リンクを想起させるライトブルーで塗る、あるいは、テキストリンクであれば「＞」アイコンと併記するなど、ユーザーの誤操作と誤認識を極力減らす画面設計にしています。
エンジニアの声
苦労したからこそ得られたノウハウ
フロントエンドにおいて Android の標準ブラウザに対応するうえで、サポートが切れているため最新の CSS が利用できなかったり、OS レベルではなく端末レベルで挙動が異なったりと、困難に直面した点も多くありましたが、こうした経験からしか学べないノウハウをたくさん得ることができました。
