MD-Blog_Web Creative

皆さま、こんにちは。師走に追われ、その反動で正月は実家に帰れなくなる（いや、それは単なるサボり）不肖・Rickyです。

例年のごとく、いや、年々忙しさが増している気がしますが、仕事があることはありがたいこと、ということで、今年で5回目を迎えるMONSTER DIVE Webプロダクション事業部の実績紹介を行いたいと思います。

が、単純に実績紹介をしても面白みが足りないので、今回はMONSTER DIVEの強みってどこだろう、よりテンションの上がる点はどこにあるのだろう、という自己回顧をしつつ、それらが発揮された案件をご紹介させていただきたいと思います。

• 2018年版はコチラ
• 2017年版はコチラ
• 2016年版はコチラ
• 2015年版はコチラ

【強み１】表現系が大好き

紙媒体と違い、動きで表現できる領域が多いのはWebの特徴です。
そんなCSSやJavaScriptを使ったアニメーションはMONSTER DIVEでも好物としているメンバーが多く、単純にオブジェクトとして動かすだけではなく、ユーザアクションと連動させた動きで、よりサイトへの没入感やインパクトを高められる実装にチャレンジしています。

そんな案件がこちら。

• GANZAさま｜コーポレートサイト
  https://www.ganza.co.jp/

オフィス・店舗の内装や、インテリアデザインを手掛けるデザイン施工会社のコーポレートサイトです。

ロゴを活用したローディングアニメーションでレンチを回している施工感を出したり、ページ背景にうっすらと設計書を載せてパララックス的に動かしていたり、弊社と同じように職人気質なクライアントさまのこだわりを反映させています。

また、実績詳細ページは対比として施工前後の画像を掲載しているのですが、単純に並べるだけでは味気ないので、ユーザー自身が左右に動かしながら比較確認できるアニメーションを実装しています。

【強み2】フロントエンド系なのにシームレスなデータ連携開発

例えばHuluなどの動画サービス。
PC、スマホ、タブレットなどデバイスを問わず視聴することができます。
例えばApple製品。
Mac、iPhone、iPad、Apple Watchを連携させ、iPhoneを手に取らなくても、電話ができたりします。

こんな感じで、ここ数年いろんなモノがシームレス化してきていますが、当然のごとくWeb業界でも起きています。

単純なWebサイト制作案件というのは数を減らしてきており、大なり小なりバックエンドとの連携開発というのが増えてきていますが、味気ないデータ連携開発はMONSTER DIVEらしくない。いかに見た目も含めてトータルで品質のよい仕組みを提供できるかに心を配っています。

そんな案件がこちら。

• 三越伊勢丹さま｜イセタンメンズカスタムオーダー
  https://isetanmensorder.mistore.jp/

新宿にある伊勢丹メンズ館にあるオーダーシャツシステムです。
600種類もの生地はもとより、衿型や前立など、多数のオプションが用意されたオーダーシャツのECです。よくあるオーダーメイドECと違うのは、1着目のオーダーはフィッティング技術を習得したプロスタイリストが店頭で採寸し、2着目以降は専用サイトのマイページからでも購入ができる、テーラリングとデジタルのハイブリット、店頭とECのシームレス化を実現させています。

生地の選択、各種オプションの選択がWeb上でできるのはもちろんのこと、胸囲2cm分だけ調整したい、といった細かな調整寸といったパーソナルオーダーに対応した入力システムのほか、それらのデータを取りまとめて注文完了までできる、バックエンド連携も担当させていただいています。
仕上がりイメージも3DCGで生成するようにしており、そこらのオーダーシステムとは一線を画すサービスとなっています。

MONSTER DIVEは、フロントエンドが強い会社ですが、デザインやアニメーションといったシンプルなモノづくりだけでなく、バックエンドで緻密に管理されたデータをいかにフロントエンドで魅せていくか。
そういった機能設計や連携開発にも実は強いんです。

【強み3】マニュアルいらず!? なCMS設計開発

CMS開発はMONSTER DIVEのWebプロダクションの中でも中核をなしており、特にMovable Type, PowerCMSの構築については、日本でも有数の実績がある（Not 他社比較）のではないかと思っていますが、2019年もCMS構築案件に多数携わらせていただけました。

CMSを導入して、日々の更新を楽にするのは当然ですが、複雑化したサイト構造を整理して一元管理できるようにしたり、リテラシーが高くないユーザーでも簡単に使えるわかりやすい管理画面へとカスタマイズしたり、担当者さんがコンテンツの運用・更新に注力できる環境を提供するカスタマイズはご好評を得ています。

今年の案件でいうとこちら。

• YAOKOさま｜コーポレートサイト
  https://www.yaoko-net.com/

埼玉を中心に関東圏で160店舗を展開、創業130年を迎えるスーパーマーケットチェーンです。

スーパーマーケットなので扱う商品やサービスも多いが、お客様には情報を的確に伝えたい。上場企業なのでIR系情報も大事、業務拡張にあたり採用情報も充実させたい。という、実質3サイト分の情報量をいかに1サイト内に収めていくか、そしてそれらを1つのCMSで管理していくにはどうすればよいか。Webサイト、管理画面ともに情報整理と構造設計を入念に行いました。

普段は実店舗で働いている方も触ることから、管理画面のわかりやすさも追い求め、ゴリゴリとカスタマイズ。それらをPowerCMSで実現させました。
「マニュアルいらず」は言いすぎで、マニュアルも作成しているのですが、各部署で行ったハンズオンによる説明会でスムーズに運用へ入っていただけるくらいのレベルには仕上がっています。

まとめ

改めて振り返ってみると、昨年よりも規模感も大きく、複雑な案件もやらせていただいた1年だったように思います。

メンバーも増えましたが、人数が増えれば大規模なプロジェクトを完遂できるというものでもありません。企画・設計フェーズから、制作・開発フェーズに至るまで、メンバー一人ひとりのスキルアップがあったからに他なりませんし、なによりクライアントさん、そしてその先にいるユーザーさんに対して、より良い価値あるモノを提供したい、という姿勢があったからこそと思います。

今月始め、コーポレート部門に異動したTakanori Shimizuのエントリーで、MONSTER DIVEのVISION/MISSIONについて言及がありますが、より具体的なメンバーの行動指針ともいえるVALUEも実はあり（外に向けて出していないだけで）、それが少しずつ浸透・実践できているのかな、とも感じています。

来期からMONSTER DIVEはNEXT 10 YEARに向かっていきます。流れの早いWeb業界を生き抜いていくためのMONSTERのキバ（武器）を磨き続け、より良いモノづくりができるよう、メンバー一同、精進していきたいと思います。

最後に

クライアントの要望に、期待値を超える結果を出してやるぜという方や、ユーザー視点で最適な技術を提案・実装をしてやるぜという方、トータルで世の中や友だちに自慢できるモノづくりをしたいと思っている方、是非コチラからご応募ください。MONSTER DIVEのVMVや目指しているモノづくりについて是非お話させていただければと思います。