スマートフォンの横表示には対応していません

Works

制作事例

⼈と⼈をつなぐコミュニケーションをもっと世の中に。
それが私達が⾏うこと。

Webテクノロジーを使った新製品開発

工業製品製造メーカー 製品内組み込みシステム開発 / Embedded system development

N/A

Webフォームからのお問い合わせ。「新商品を開発したい」

ある日突然、一通のお問い合わせが届いた。

そのお問い合わせはとても丁寧な文面であったが要約すると

「当社でインターネットテクノロジーを使った新商品開発を行う予定がある。

貴社はBootstrapを使えるとWebに書いているが、一度話を聞きに来てくれないか?」

であった。

正直なところ、調べてみるとその企業は当社がお取引できるような・お声がけいただけるような規模の会社ではないほどの大きな企業だ。

 

何かの間違いか?もしくはいたずらか?

そんな気持ちだが、ご連絡を頂いたのでご返信を行い、アポを取って後日ご訪問することとなった。

ご訪問。開発内容の概要をお聞きする。

そしてご訪問の当日。

東京のとある場所にある企業様の本社へお伺いする。

 

受付でご担当者様にアポを頂いたことをお伝えし、通された大きくきれいなウェイティングエリアで待つ。

 

そこに現れた開発担当者様。

お呼び頂いた主旨をご説明いただいた。

一旦話はそれるが、そのお会社様は主に食品向け企業に向けた様々な機器を製造・販売されている企業だ。

小売やスーパーといった店舗のいたるところでその企業の商品を見かける。

 

ご担当者から新製品開発における方向性とお考えになられている機能の概要説明をいただいた。

企業が新たにチャレンジすることに力を注ぐ。

具体的な機能についてはあまり述べられないが、大まかに言うと

 

  • あるフレームワークを使った開発を行う。
  • インターネットを通じた様々な機器へメンテナンス。
  • データベースをクラウドに存在するものを使うため、柔軟なデータ追加が可能。

 

であるとのこと。

その開発に使うあるフレームワークについて非常にマイナーなものだ。

ほとんどの人が聞いたことがないだろう。

だが、手前味噌であるが、なないろは様々な案件に対応する能力があると自負している。

(当社の作業範囲についてもあまり詳しいことが言えないが)我々のご協力させていただく範囲は、

そのフレームワークに関わることはほとんど無く、Webテクノロジーを使った箇所であるので

あまり大きな問題ではない。(と、このときは思っていたのだが、このフレームワークはかなり

特異なものであるため、非常に悩まされた。)

 

様々なお打ち合わせを経て、これらの商品開発のメンバーに我々なないろが入ることになり、新商品開発の業務が始まった。

 

企業が新たなことを始めるときになないろがお手伝いをする。

当社はそういったことがとても得意だ。

「工業製品だ。数十年大きく変わることはない。」

この案件でお客様から強く言われたこと。

「工業製品を開発している。使う人はITリテラシーが特段高いわけではない。また、大きなアップデートも頻繁に行うわけにはいけない。その点をちゃんと理解しておいてくれ。」

 

使うUI・デザインそしてデバッグに非常に配慮して作業を行う必要がある。

まずデザイン・UIについてだが、流行りのフラットデザイン・マテリアルデザインはNGでだった。

「ボタンはボタン然としたり、つまみスライダーはそれとひと目で分かるものにしなければならない。

スッキリ洗練されたものよりは、わかりやすいという観点からデザインをしてほしい。」

とご要望であった。

 

今回このページに載せている画面デザインは、第1回目提出のデザインを

少しわからないように変更しているものだが、

「これでもまだ洗練されすぎている。更にボタンぽくしてほしい。」

とのことであった。

 

誰にでもわかりやすく、間違わないデザインが求められた。

フレームワークが書き出すHTMLに悩まされる。

今回の開発で採用されたフレームワークが曲者だった。

このフレームワークはHTMLを自動的に吐き出す。

 

であるため、HTMLコーディングができない。

その状態で各要素をCSSとJSで配置し、かつ、動作もすべてを制御しなければならい。

そして、そのHTMLはとんでもなく汚いコードであり、制御するのは途方もない作業だった。

 

また、大きな問題の一つでもあるが、起動するたびに

フレームワークが書き出すHTML内に記述されている値が変わるため、

CSSでの制御についてかなり大変であった。

 

 

そういったものも当社の知恵を出し、試行錯誤でなんとか乗り切りった。

工業製品レベルのテストを行い、デバッグを行う。

以前、当社社長は以前IBMに勤めていた。その経験から工業製品レベルの品質チェックについて深い知識があるため、(同じボタンを数十回クリック連打したり、ページ遷移を高速で行ってエラーが出ないなどの)様々な負荷テストを行い、その負荷テストであぶり出された現象を当社内で回避したり、お客様にご報告することでリリース後にできるだけトラブルを発生しないことを心がけた。

 

テストを行えば行うほどエラーが発生するため、一つ一つお客さまとともに潰していった。

 

その結果、無事商品リリースが行うことができた。

現在も引き続きメンテナンス。

正式なリリースをされてからも当社にてバグ・機能向上のための作業をお手伝いさせていただいている。

振り返るとこのプロジェクトはかなり特異な形式だった。

非常に困難な作業であったが、これを通じて当社の技術力が一層上がった。

 

当社のような小さな会社を信じ、依頼を頂いたお客様には感謝しかない。

 

すでに担当者が別部署に異動されたのでどのように当社をお知りになったかを最後まで具体的に聞けていなく、今でも不思議である。

Development information

クライアント

工業製品製造・販売会社

クライアント業種

工業製品製造・販売

Webサイト

N/A

構築内容

工業製品 システム開発

担当業務

ディレクション、デザイン、フロントエンドプログラム、バックエンドプログラム

Tags

CSSDesignDevelopmentEmbedded systemJavascript

私達は京都でNo1のデザイン力・UI力を目指す

システム開発・Web開発カンパニー

株式会社なないろです。

各種CMS、企業サイト、キャンペーンサイト、顧客管理システム、IoTシステムなど幅広いITソリューションを優良なデザインとUIで、SEOソリューションをあわせてお客様の目標達成を行う企業です。