Site of the Week

MonotaRO 買ったものリスト 豪華版

企業向けに工具などの消耗品を通信販売するECサイトMonotaROのユーザーログイン後のマイページにおける購入履歴のRIA化プロジェクトをgenephics design, Inc.が手掛けました。
同じ商品を繰り返し買うリピート注文が非常に多く、お客様が過去にご購入された商品を如何に簡単に、且つ直感的にご購入頂けるよう利便性を向上させることを目的に、視覚的かつ直感的な検索や、新たに実装されたい機能など抱えていた問題点を効果的に解消されています。

また、FlexやFlashのノウハウを最大限に活用し、パフォーマンス向上を実現しています。
「買ったモノリスト」では、初期表示時は表示されている十数点の商品しか要素を生成させず、ユーザーがスクロールを行うタイミングで、次に表示する商品の要素を生成するようにしています。こうすることにより、件数が大量に増えた場合でもスムーズに表示が行え、ユーザーのストレス軽減になります。

公開後3ヶ月でサービス利用会員数１万ユーザー突破。サービス利用者とECサイト全体での「1注文当りの平均購入商品数」が約18%アップなどビジネス面でも成功を収めています。 (2009.10.19)
デベロッパー名: genephics design, Inc.

次世代ワークフロー「Questetra BPM Suite」

クライアントアプリケーションの形で提供される例が多かったプロセスモデリングツールを、ブラウザ上で実現する次世代ワークフロー「Questetra BPM Suite」。
Webアプリケーションの形で開発することとなり、その中に含まれるプロセスモデリングを行う（プロセス図を書く）ツールもブラウザ上で実行しています。通常のWebアプリケーションにはないリッチなUIを実現するため、Flexを採用されました。

Java＋eclipseでの開発経験はあるが、Flexについて全く経験のない技術者が、約4か月という限られた期間でツールの初版をリリースされました。Flexを採用したことで、Ajaxに比べてクライアント環境に依存しにくく、クライアントアプリケーション（AIR）化もしやすいツールにできています。
ロジック作成が先行し、デザインを後から適用する形であったが、スムーズに分業を進めることができました。 (2009.10.13)
デベロッパー名: 株式会社クエステトラ

スティーヴ・パクストン＋リサ・ネルソン　ダンス　プロジェクト

振付家／ダンサーのスティーヴ・パクストンと、リサ・ネルソンが二人の活動や思想を、青森、京都、東京、山口の四都市を結ぶ、ワークショップ／公演／展覧会／シンポジウム／レクチャーなどを通して学び対話することで、身体の可能性を多角的に探求するプロジェクトのWebサイトにFlash を活用し、特色のある文字組みやレイアウトを実現しています。
モニター、画面サイズで、文字の組み方やレイアウトが調整するように工夫したフルFlashサイトです。また文字間のスペースを調整することで、読みやすく、また、選択可能にすることで、使いやすさにこだわりました。 (2009.03.23)
デベロッパー名: 中村泰之氏

NINES INTERNATIONAL

ファッションブランドのファッションアイテムや雑貨を販売するファッション通販サイト。イメージブック、カタログなどのブランドの紹介にレイアウトの自由度が高いFlashを活用しています。 (2009.03.15)
デベロッパー名: NINES

INTERNAVI REALIZATION

Hondaの純正ナビ「インターナビ」のブランディングサイト。
普段は意識しにくい「ネットに繋がるナビ」というインターナビの特性を具現化し、ユーザーに体感していただくことを目的に開発されました。「ネットに繋がるナビ」をコンセプトに、インターナビがHondaサーバー上にアップする軌跡をビジュアライズする「NEWRON ROAD」、ドライブをTIMELAPSEで切り取った「DRIVELAPSE」で構成されます。Flash Player 10で実装された3D機能による繊細で美しい表現や、Flash Video を活用したドライブ映像によりインターナビのブランド認知を図りました。 (2009.02.16)
デベロッパー名: Metaphor と Semitransparent Design

郵便年賀.jp　年賀状デザインキット

年賀状デザインから宛名印刷まで。直感的な操作で誰でも簡単に、楽しく年賀状が作れるAdobe AIR アプリケーションです。Adobe AIRアプリケーションからの印刷レイアウトの精度の向上や、テキストの縦書き入力に対応したシステムの組み上げに成功されています。また、個人情報管理とアプリケーションのバージョン管理を効率化させ、サーバの負荷軽減を実現しています。 (2009.01.06)
デベロッパー名: 株式会社パズル と 株式会社エアフレイム

シャープ株式会社 「笑顔のデッサン」

家族の笑顔（幸せ）をテーマに、投稿された写真をデッサン風、水彩画風に変換できたり、Adobe AIR を使用したオリジナルアプリによって、レシピの投稿が可能なエンターテイメントコンテンツです。商品訴求優先のキャンペーンサイトでは無く、健康と環境を考えるシャープの白物家電の想いを伝えるため、あえて商品画像は一切出さず、「笑顔」をテーマに、主婦を主なターゲットとし、テーマパークのようにコンテンツ内を回遊いただけるよう開発されました。

「笑顔のデッサン」では、投稿された写真をデッサン風に変換する必要があったため、ActionScript3の機能をフルに活かし、Flash で、画像の高速な変換を可能にしました。「ヘルシオのレストラン」では、複数のレシピの投稿や更新に対応するため、投稿部分に自由度と容易さが必要でした。そのため、ローカルアプリとしてAdobe AIR による専用アプリを開発し、投稿機能を分離することで投稿における課題を解決されました。さらに、Progressionとの組み合わせにより、Flashの開発期間を短縮し、Adobe AIR により高機能も実現されました。 (2008.10.30)
デベロッパー名: 株式会社ワン・トゥー・テン・デザイン

東京・横浜マンションリフォーム plus NAVI

中古マンションを購入する30代～40代をターゲットに理想の住空間創りを提供する株式会社サンリフォームのホームページ。施工事例では、Flash を採用することで、コンテンツが増えてもクライアントにてスムーズに更新が可能なCMSも含めて構築されました。 (2008.10.13)
デベロッパー名: OFFICE TAKASAKI

H.P.F, MALL

Flashを採用し、グラフィカルな表現とFlash Videoを組み合わせた深みのある演出で、FRANCEのブランディングとECサイトの両立を実現しています。カバーページでは個性的なセレクトで有名なH.P.Franceのファッション性を、既存の顧客に満足いただくと共に、新規顧客に印象づけることに成功しています。

コンテンツページでは、H.P.Franceが持っているスッキリとした高級感や手作り感と、ECサイトとしての購入のしやすさを考え、顧客の個性的なデザインへの欲求と、購入のしやすさを両立したサイトを目指しました。Flashによる検索では、シェアードオブジェクト等を使用して、商品の拡大縮小などシステム側で非対応の仕組みをxmlを活用し可能にしています。 (2008.09.07)
デベロッパー名: 西田幸司氏

Firework.jp

夏の風物詩「花火」をテーマに、ユーザ自身で花火玉をデザインし、花火大会を演出する参加体験型アプリケーションをFlash で実現しています。ActionScript3.0を採用しリアルな花火を表現することで、ユーザから大きな反響を得ています。

自分のオリジナル花火を作るときに使う花火玉エディターは、一つ一つの火種をドット絵のように描画できるようなイメージを表現されました。描画方法は、カラーピッカーから選択されたRGBカラーの情報からクリックされたオブジェクトの色が変更されていますが、このとき変更したいオブジェクトを一つ一つクリックするのではなく、一度クリックしてからドラッグした状態でも色を描画できるようにしています。花火玉エディターで編集された個々のオブジェクトのカラー情報を配列にしたあと、ActionScript3.0用のJSONライブラリによってjsonデータに変換しています。ファイル形式をjsonにした理由は、xmlよりもデータ転送量が少ないという点です。今回、花火データ一つにつき61個分の火種情報があり、1ユーザにつき10個分の花火データを持てるようにしています。それらをサーバで受け取ったり保管する場合データ転送時のパフォーマンスが悪くならないよう、データ転送量の少ないjson形式が有効だったと判断されました。

Flashの表現力を活かして、花火のパーティクルや花火作成画面の操作感の向上を実現しています。また、ユーザに操作上のストレスを感じさせることなく、「ネット上で自分だけの花火を作る」という体験が見事に成功しています。 (2008.08.31)
デベロッパー名: 株式会社イージェーワークス