Comments
Description
Transcript
愛のswfファイル
Powerful Creative,Extra Solution 事例集 Powerful Creative,Extra Solution −目次− １ iOS開発実績 P 3∼9 ２ Android開発実績 P10∼13 ３ HTML５での開発実績 P14∼20 ４ Webデザイン実績 P21∼33 iOS開発実績 iPad SHUTTLYZER 自社開発 企画 デザイン IA UI設計 HTML HTML5 JavaScript FLASH システム構築 アプリ概要 プロからアマチュアまで、気軽に使えて分析まで出来る専門性のあ るアプリを制作しました。スコアの記録、試合・選手個人データの 分析が簡単に行えます。 開発ポイント 試合中スムーズに入力・分析できるように、警戒な動作のネイティ ブアプリとして開発しています。スコアをつけるときに、ショット をアイコン化し、コートをグリッドで表現することで、何をシュー トしたか直観的に記録することができるUIにしています。苦手な ショット、苦手なエリア、失点のパーセント等をグラフ分析可能で す。 開発補足情報 ・制作期間：約6ヶ月 ・月刊「バドミントン・マガジン2014年9月に紹介でされました ・公益財団法人 日本バドミントン協会・ジュニア強化部さまと 共同開発。 -4- COPYRIGHT（C)2015 PIVOT Inc. All Rights Reserved. iPhone・Android 観光地ですよ。ご当地キャラ100人に聞きました。 自社開発・運用 企画 デザイン IA UI設計 HTML HTML5 JavaScript FLASH システム構築 アプリ概要 日本全国のご当地キャラクターが魅力的な地元ご当地を紹介してい るアプリです。キャラクターが紹介する情報と、各地を旅すること でもらえる特典で地元への観光促進を目指しています。 開発ポイント 企画・制作し、アプリPRのためのSNSコンテンツ等の運用まです べてを行っています。 短期間でiOS、Androidの両方に対応したアプリを制作するための 手法としてPhoneGapを採用ました。カメラ機能やSNS連携など は各プラットフォームごとにネイティブ実装しています。 また、運用の面では、掲載している情報をwebのCMSで更新可能 にし、地方自治体の方自ら登録更新を行っていただきました。 アプリ内のイラストは描き下ろしです！ 開発補足情報 ・制作期間：約6ヶ月 ・イラスト、キャラクター（アプリ進行役）制作 -5- COPYRIGHT（C)2015 PIVOT Inc. All Rights Reserved. iPhone 家族のあそビバNAVI 株式会社ベネッセコーポレーション様 企画 デザイン IA UI設計 HTML HTML5 JavaScript FLASH システム構築 アプリ概要 「こどもちゃれんじ」の新アプリとして、こどもを持つお父さんや お母さんに向けた おでかけスポット検索アプリ。 開発ポイント アプリを使い慣れていない お父さんにも気軽に使っていただける よう、UI設計ではデザインに入る前のペーパープロトタイプで機能 や画面遷移を検討し、実装後もプロトタイピングを重ねて使いやす さや機能の検証を行っています。 こどもの満足度や親目線でのスポット評価、写真投稿など、みんな が使えば使うほど便利になる機能を充実させているため、投稿いた だくためのリリースキャンペーンも同時にご提案させていただきま した。 開発補足情報 ・制作期間：約4ヶ月 -6- COPYRIGHT（C)2015 PIVOT Inc. All Rights Reserved. iPhone VOGUE Traveller KYOTO ルイ・ヴィトン様 元請け：Conde Nast Publications Japan様 企画 デザイン IA UI設計 HTML HTML5 JavaScript FLASH システム構築 アプリ概要 雑誌VOGUEの京都を舞台としたビジュアルストーリーと京都のト ラベルガイドがひとつになったアプリ。 冨永愛さんをモデルにしたビジュアルストーリーや古都の魅力を味 わえるヴォーグおすすめの厳選スポットを掲載。 ルイ・ヴィトン協力のもと、コンデナスト・パブリケーションズ・ ジャパン様と共同開発しました。 開発ポイント iPhoneでもiPadでも最適なUIを愉しめるユニバーサルアプリとし て設計。 デザインは、日本の伝統を意識したビジュアルへ、メニューの切り 替えやマップへの遷移など、動きの一つひとつも、アプリに世界感 を添えるように丁寧に作り込みました。 開発補足情報 ・制作期間：約1.5ヶ月 -7- COPYRIGHT（C)2015 PIVOT Inc. All Rights Reserved. iPhone Tweet ツイッタークライアント 株式会社サンエーインターナショナル様 企画 デザイン IA UI設計 HTML HTML5 JavaScript FLASH システム構築 アプリ概要 好きなファッションブランドの壁紙を選んで着せ替えできるツイッ タークライアントをオリジナル開発。 複数アカウント管理、各アカウントで別ブランドのデザイン着せ替 え機能、NEW ARRIVAL（おすすめアイテムの紹介）や、 FASHION TWEET（ブランドツイート）がチェックできる機能を 追加。オンラインショップとの連携によい、おすすめアイテムを、 そのまま購入できます。 開発ポイント 通常のツイッターも機能をフル装備し、使いやすいUIでストレスな く毎日使用いただけるアプリケーションを開発しました。 開発補足情報 ・制作期間：約8ヶ月 ・リリース１ヶ月後、App Storeのおすすめに数週間掲載され、 日本以外の国でもダウンロードされています。 -8- COPYRIGHT（C)2015 PIVOT Inc. All Rights Reserved. iPhone・iPad MUJI to GO（iPadアプリ） ArtSetouchi 株式会社良品計画様 株式会社日本デザインセンター 原デザイン研究所様 株式会社ベネッセコーポレーション様 瀬戸内国際芸術祭実行委員会様 企画 デザイン IA UI設計 HTML HTML5 JavaScript FLASH システム構築 （iPhoneアプリ） 企画 デザイン IA UI設計 HTML HTML5 JavaScript FLASH システム構築 フイナム（iPhoneアプリ） THE CONTEMPORARY FIX 株式会社ライノ様 PARIYA.INC様 企画 デザイン IA UI設計 HTML HTML5 JavaScript FLASH システム構築 企画 デザイン IA UI設計 HTML HTML5 JavaScript FLASH システム構築 -9- （iPhoneアプリ） COPYRIGHT（C)2015 PIVOT Inc. All Rights Reserved. Android開発実績 Android 進研ゼミ小学講座 チャレンジタッチ メインコンテンツ 株式会社ベネッセコーポレーション様 企画 デザイン IA UI設計 HTML HTML5 JavaScript FLASH システム構築 アプリ概要 小学生向けタブレット型の通信教育。 見て・聴いて・自分で手を動かしながら考える工夫で、学ぶ楽しさ を実感いただけます。 開発ポイント 企画、構成、アートディレクション、デザイン、フロントエンドの 開発を担当。 制作期間1年半、ベネッセ様、ベンダー各社様とともに、「子供達 に毎日使ってもらえるデジタル教材」を目指しました。UI策定 フェーズでは、プロトタイプを使ったユーザビリティテストを実施 し、課題発見∼改善施策の検証を行いました。 また、タブレットへの愛着を醸成するキャラクターの演出では、試 行錯誤を重ね、生き生きしたアニメーションの動きを実現しました。 開発補足情報 ・制作期間：1年6ケ月 ・イラスト -11- COPYRIGHT（C)2015 PIVOT Inc. All Rights Reserved. Android 進研ゼミ中学講座プラスアイ専用アンドロイド端末向けアプリ 株式会社ベネッセコーポレーション様 企画 デザイン IA UI設計 HTML HTML5 JavaScript FLASH システム構築 アプリ概要 弊社で実装をしたパソコン版のプラスアイ技術を有効活用し、 さらにパソコン版に比べても遜色ないようリッチなコンテンツを実 現したアプリの開発。 開発ポイント リッチなコンテンツを実現するため、「AIR for Android」 「FLEX3」での開発を採用。 タブレットアプリとしては大規模かつ更新頻度の高いアプリを 実現するため、AIRがサーバからswf資源をロードする設計を採用。 運用の手間等を軽減できるように設計を行っている。 開発補足情報 ・制作期間：10ケ月 ・デバイス：Challenge Tablet ・Airアプリ／Flex・Flash／javaアプリを使用 -12- COPYRIGHT（C)2015 PIVOT Inc. All Rights Reserved. iPhone・Android 「しまじろうと遊ぼう」アプリ制作（プロトタイプ） 株式会社ベネッセコーポレーション様 企画 デザイン IA UI設計 HTML HTML5 JavaScript FLASH システム構築 アプリ概要 プロトタイプ開発。 開発ポイント スマートフォン向けアプリ。 小さな子供も遊べるシンプルな構成。 開発補足情報 ・制作期間： ２ヶ月 ・対応デバイス： スマートフォン（iOS、Android) -13- COPYRIGHT（C)2015 PIVOT Inc. All Rights Reserved. HTML5での開発実績 CANVASを使ったHTML開発実績 HTML5・Responsive STYLEUS plannerBlog 株式会社様ブライダルプロデュース 企画 デザイン IA UI設計 HTML HTML5 JavaScript FLASH システム構築 サイト概要 新郎新婦のための 予約・購入ツール「STYLEUS」 会員専用ブログの構築をしました。 開発ポイント 全国のスタッフはユーザー別に、旬な情報を 発信することが可能です。 ユーザーのログイン情報を見て、ブログの内容を 出し分けるAPIを設計開発。 WordPressのカスタマイズ及び、レスポンシブ デザインにも適応しています。 PC表示 開発補足情報 ・制作期間：2ケ月 ・WordPressカスタマイズ ・認証API設計・開発 SP表示 -15- COPYRIGHT（C)2015 PIVOT Inc. All Rights Reserved. HTML5 無印良品 コーディネートカタログ 株式会社ベネッセコーポレーション様 企画 デザイン IA UI設計 HTML HTML5 JavaScript FLASH システム構築 サイト概要 コーディネートカタログ 開発ポイント CSVファイルで管理した商品データをJavaScriptで 読み込み、異なる大きさの画像を自動で最適な レイアウトでディスプレイされるようシステムを 構築。Ajaxによってページの読み込みがないので、 たくさんの商品を気軽にご覧いただけます。 開発補足情報 ・制作期間： -16- COPYRIGHT（C)2015 PIVOT Inc. All Rights Reserved. HTML5 コーポレートサイト 2014年新卒採用ページ オルビス株式会社様 企画 デザイン IA UI設計 HTML HTML5 JavaScript FLASH システム構築 サイト概要 新卒採用サイト。 新卒採用にあたり、来年度より求める人材が変化するため、現状サ イトの抽象イメージから具体性を持たせたいという課題がございし た。それに対して、働く上でのオルビスのイメージを 「感動」をテーマに「人」を通じてリアルに伝えることを狙いにコ ンセプトを立案しリニューアルのご提案を行いました。 開発ポイント ユーザーとなる学生はスマートフォンの使用率も高いため、スマー トフォンではPCと異なるUIの検討を繰り返し、使用感のよいUIを 提供。 表示スピードを考慮して、HTML5＋CSS3を使用しサイトの軽量 化を行い、ストレスを感じさせない閲覧を実現。 開発補足情報 ・制作期間：約2.5ヶ月 ・取材撮影も実施いたしました ・対応デバイス：PC、スマートフォン -17- COPYRIGHT（C)2015 PIVOT Inc. All Rights Reserved. HTML5 自社企画商品 品質実感ムービー 自社開発 企画 デザイン IA UI設計 HTML HTML5 JavaScript FLASH システム構築 サイト概要 タブレットやスマートフォンの普及に伴い、 パソコンと同様に、ムービーを楽しんでいただける ようなサイト構築のご提案ツールとして制作。 開発ポイント 通信の遅いスマートフォンでも不自由なく ご覧いただけるようHTML5で制作しています。 開発補足情報 ・対応デバイス：タブレット、スマートフォン -18- COPYRIGHT（C)2015 PIVOT Inc. All Rights Reserved. CANVAS セキスイハイム「スマートハイムFAN」コンサルティングレポート 積水化学工業様 元請け：日本SPセンター様 企画 デザイン IA UI設計 HTML HTML5 JavaScript FLASH システム構築 サイト概要 HEMSを導入されたお客様に向けて、邸別に様々なコンサル ティングや、機器の活用法をご紹介し、光熱費を削減する快適 な住まい方をサポート。 開発ポイント グラフ部分は、サーバーサイドからデータを受け取り、動的に 表示。 グラフはCANVASを使ってレンダリングを行っています。 開発補足情報 ・制作期間：約2.5ヶ月 ・対応デバイス：PC、スマートフォン（一部） -19- COPYRIGHT（C)2015 PIVOT Inc. All Rights Reserved. CANVAS 進研ゼミ中学講座プラスアイ提出課題ネット 株式会社ベネッセコーポレーション様 企画 デザイン IA UI設計 HTML HTML5 JavaScript FLASH システム構築 サイト概要 開発ポイント グラフ部分は、サーバーサイドからデータを受け取り、動的に表示。 グラフはCANVASを使ってレンダリングを行っています。 開発補足情報 ・対応デバイス：PC -20- COPYRIGHT（C)2015 PIVOT Inc. All Rights Reserved. ウェブデザイン実績 HTML Mix.Tokyo 株式会社TSIホールディングス様 企画 デザイン IA UI設計 HTML HTML5 JavaScript FLASH システム構築 サイト概要 株式会社TSIホールディングスが保有するアパレルブ ランドのショッピングモール。 今までの「SELECSONIC」をイチから見直し、屋 号・サービス内容・デザイン・バックエンドをフル リニューアル。 ブランドのファンのためのショッピングモールを目 指したサイト。 開発ポイント ブランドファンのお客様が望むサービスレベルの実現 を目指し、要件を整理。 制約のあるAPSサービスでは、むずかしい、クライ アント様の要望を叶えるため、APIやjavascriptを駆 使し、フロントエンドの開発を実施。 ローンチを守るのため、急きょアジャイル開発にて実 装を行い、期日通りのローンチを迎えた。 エンドユーザーの要望や希望を受け、随時改修を重ね ている。 開発補足情報 ・制作期間：3.5ヵ月 ・開発ビルドツールgruntを使用 ・PC、SP対応 -22- COPYRIGHT（C)2015 PIVOT Inc. All Rights Reserved. WEB site こどもちゃれんじベビー 0歳の記念フォトムービー「ちいさなきみのストーリー」 株式会社様ベネッセコーポレーション 企画 デザイン IA UI設計 HTML HTML5 JavaScript FLASH システム構築 サイト概要 出産・子育てという、一大イベントを通じ、 ストーリーと音楽と共に「つくる」から体験いただき、お子 さまとの想い出を楽しみ、より深いものにしていただけるコ ンテンツです 開発ポイント 自然な形でブランド認知につなげていくコンテンツとして提案。 sample ユーザーが投稿した写真をリサイズして保持。 投稿ページ(TOP)はPCとスマホ用に制作していますが、スライ ドショーページはPC、スマホ両方に耐えられるワンソースで 制作しています。 都度ユニークなURLを発行し、いつでも（180日間保存）どこ でも閲覧するこちが可能です。 sample フォトムービー 開発補足情報 ・対応デバイス：PC ・AWS設計 -23- COPYRIGHT（C)2015 PIVOT Inc. All Rights Reserved. WEB site STYLEUS 株式会社様ブライダルプロデュース 企画 デザイン IA UI設計 HTML HTML5 JavaScript FLASH システム構築 サイト概要 新郎新婦のための予約及び購入ツール。新郎新婦だけでなく、 結婚式場やブライダルコーディネーターといった関係者全員 が使えるウェディングガイド。 開発ポイント 式場、ドレス、花屋など、多岐にわたる関係者へヒアリング 調査を行い、進捗がイラストやカレンダーで確認できる機能、 時期にあわせて予約などのアクションを促す機能、動画を 使って式のイメージを醸成するコンテンツ等をご提案、開発 し、新郎新婦が1つ1つのステップを楽しめるような 仕組みづくりを実現しました。 開発補足情報 ・対応デバイス：PC ・業務ツール「KARTE」と同時開発 ・NEC基幹業務サービス「NEHOPS」に連携 ・イラスト -24- COPYRIGHT（C)2015 PIVOT Inc. All Rights Reserved. WEB site WEDDING KARTE 株式会社様ブライダルプロデュース 企画 デザイン IA UI設計 HTML HTML5 JavaScript FLASH システム構築 サイト概要 「WEDDING KARTE」はウエディングコーディネータのた めのツールです。 開発ポイント 新郎新婦のための予約及び購入ツール「STYLEUS」と連携し、 お客様の要望の管理し、スタッフのオペレーションを援助する 業務効率化の二つを目指した仕組みです。 さらに社内業務システムと連携することで、いっそう業務を効 率化させました。 アイデアを詰める段階から担当者の業務内容のヒアリングを繰 り返し、必要な機能を設計構築しています。 開発補足情報 ・対応デバイス：PC ・業務ツール「STYLEUS」と同時開発 ・NEC基幹業務サービス「NEHOPS」に連携 ・開発言語 JAVA、playframework、mySQL -25- COPYRIGHT（C)2015 PIVOT Inc. All Rights Reserved. WEB site 進研ゼミ小学講座 5,6年生向け会員サイト 株式会社ベネッセコーポレーション様 企画 デザイン IA UI設計 HTML HTML5 JavaScript FLASH -26- システム構築 COPYRIGHT（C)2015 PIVOT Inc. All Rights Reserved. WEB site 進研ゼミ中学講座プラスアイ（会員サイト内の学習系コンテンツ） 株式会社ベネッセコーポレーション様 企画 デザイン IA UI設計 HTML HTML5 JavaScript FLASH -27- システム構築 COPYRIGHT（C)2015 PIVOT Inc. All Rights Reserved. WEB site 渋谷Hikarie ShinQs ティザーサイト、店舗情報サイト 株式会社様東急百貨店 企画 デザイン IA UI設計 HTML HTML5 JavaScript FLASH システム構築 サイト概要 店舗情報サイトは、東急百貨店様ですでに導入されている CMS(コンテンツ管理システム)を共用したサイト制作。 オープン前のティザーサイトでは、カウントダウンとともに 徐々に見えてくる館内の様子やショップ情報などをツイッ ターを使って渋谷の街に浮かべました。 開発ポイント 新しいユーザーに向け、全く違なるUIをシステムに対応した 形でデザインしています。 スマートフォンではPCと異なるUIの検討を繰り返し、 使用感のよいUIを提供。 IE8でもできるだけイメージが損なわれない動きを保てるよう配 慮しながら、JavaScriptを使って実装しました。 今後の使用シーンの想定を繰り返して、PC・スマートフォンサ イトともに、伝えたい情報よってTOPを変えられる作りにしま した。 開発補足情報 ・店舗撮影も実施いたしました ・対応デバイス：PC、スマートフォン ・東急百貨店さま店舗情報サイト UI設計を担当 ティザーサイト 店舗情報サイト -28- COPYRIGHT（C)2015 PIVOT Inc. All Rights Reserved. WEB site 裏ルシェルシェ アンケート型ブログ オルビス株式会社様 企画 デザイン IA UI設計 HTML HTML5 JavaScript FLASH システム構築 サイト概要 オルビス発・大人の女性のためのコスメ「ルシェルシェ」ブ ランドのコミュニケーションサイト。Facebook連動型アン ケートブログをご提案しました。 「ルシェルシェ」開発チームのご担当者4名がなぜか キャッツになって出題するアンケートに「いいね！」ボタン で答えたり、コメントができるようになっています。 開発ポイント オルビス様側で簡単に更新ができるように、 Movable Type（ウェブログシステム）をサーバに組み込みま した。 開発補足情報 ・対応デバイス：PC -29- COPYRIGHT（C)2015 PIVOT Inc. All Rights Reserved. WEB site 三井製パン舗 サイト 三井製パン舗様 企画 デザイン IA UI設計 HTML HTML5 JavaScript FLASH システム構築 サイト概要 店舗のオープンにあたり、ショップロゴや紙バッグのデザイ ンから撮影、サイト制作までトータルにお手伝いさせていた だきました。 職人さんでもあるオーナーご夫妻との打合せを重ねながら、 オーナーの雰囲気や想いの伝わるシンボルマーク、サイトの イメージなどを固めていきました。また、お散歩MAPなど、 サイトで使われているイラストもPIVOT社内で描き起こして います。 開発ポイント その日のおすすめパンをご紹介する「本日の選りすぐり」は、 簡単に更新ができて美味しさも伝わりやすいように Tumblr（タンブラー）を利用しています。 開発補足情報 ・Webサイト制作期間：約2ヶ月 ・そのほか、 CI／ ロゴデザイン・ショッピングバッグデザイン/撮影を担当 -30- COPYRIGHT（C)2015 PIVOT Inc. All Rights Reserved. WEB site 人工関節ライフ サイト バイオメット・ジャパン株式会社様 企画 デザイン IA UI設計 HTML HTML5 JavaScript FLASH システム構築 サイト概要 「人工関節」への正しい理解を深めるため、アクセス数を2 倍に増やしたいとのことで、サイト改修を実施。 人工関節についての認知自体がまだ十分でなく、痛みの原因 や治療法について検索される方が多いことに注目し、人工関 節の紹介をメインに置いたこれまでのつくりから、関節痛に お悩みの方をサポートするサイトへポジショニングを大きく 変更しました。 開発ポイント クライアントにもご参加いただきながら具体的なターゲット像 を設定することで、TOPに置く各コンテンツの位置や大きさ、 導線、SEO対策としてページに組み込むワードなども細かく検 討。 同時にリスティング広告導入などのご提案もさせていただき、 目標アクセス数に達することができました。 開発補足情報 ・制作期間：約3ヶ月 ・アクセス解析・ターゲット設定（ペルソナ）も担当 -31- COPYRIGHT（C)2015 PIVOT Inc. All Rights Reserved. WEB site 東急百貨店 CMSサイト構築 株式会社東急百貨店様 企画 デザイン IA UI設計 HTML HTML5 JavaScript FLASH システム構築 サイト概要 CMS(コンテンツ管理システム)「Heart Core」の導入にあ たり、スマートフォン、モバイルを含めた開発を行いました。 コンテンツをデータベース化することで、各店舗間での情報 の共有や振り分け、マルチデバイス利用を実現しています。 CMS導入前と比較し、ユニークユーザー数が1.3倍に増加し ました。 開発ポイント 改修にあたり、運用フローから検証しサイトを構築しました。 開発補足情報 ・CMS(HeartCore)サイト構造設計を担当 ・対応デバイス：PC,スマートフォン -32- COPYRIGHT（C)2015 PIVOT Inc. All Rights Reserved. WEB site 車椅子対応の洗面台・キッチンのショッピングサイト 東急百貨店 ネットショッピング サイト 介護の達人 株式会社東急百貨店様 自社運営 http://www.kaigo-tatsujin.jp/ 企画 デザイン IA UI設計 HTML HTML5 JavaScript FLASH システム構築 企画 デザイン IA UI設計 HTML HTML5 JavaScript FLASH システム構築 温故知品 オルビス化粧品 オンラインショップ カタログハウスの中古ショップ オルビス株式会社様 株式会社カタログハウス様 企画 デザイン IA UI設計 HTML HTML5 JavaScript FLASH システム構築 企画 デザイン IA UI設計 HTML HTML5 JavaScript FLASH システム構築 -33- COPYRIGHT（C)2015 PIVOT Inc. All Rights Reserved.