広告賞用アワードサイトをpsdに合わせて作り替え (3ページとも)

CircuitLab · Jan 7, 2014 · d2cc9bc · d2cc9bc
1 parent 3b61668
commit d2cc9bc
Show file tree

Hide file tree

Showing 27 changed files with 728 additions and 1 deletion.
diff --git a/css/style.css b/css/style.css
@@ -23,7 +23,7 @@ body {
     margin: 0 auto; }
     #wrapper #wrapper_inner .left {
       float: left; }
-    #wrapper #wrapper_inner .right {
+    #wrapper #wrapper_inner afp://10.1.0.10/shared {
       float: right; }
     #wrapper #wrapper_inner #header {
       clear: both;
@@ -177,3 +177,5 @@ body {
   text-align: right; }
   .note .caution {
     padding: 0 0 17px 0; }
+.no-js .en #wrapper {
+}
diff --git a/en/award_int2.html b/en/award_int2.html
@@ -0,0 +1,127 @@
+<!doctype html>
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
+<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
+<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!-->
+<html class="no-js" lang="en">
+<!--<![endif]-->
+<head>
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+<title>Living Wallet</title>
+<meta name="description" content='"Living wallet" helps you to spend money wisely.'>
+<meta name="keyword" content="Living Wallet, Zaim">
+<meta name="viewport" content="width=device-width,maximum-scale=1">
+<meta property="og:title" content="Living Wallet">
+<meta property="og:type" content="website">
+<meta property="og:url" content="http://livingwallet.cct.la/">
+<meta property="og:description" content'"Living wallet" helps you to spend money wisely.'=>
+<meta property="og:image" content="http://livingwallet.cct.la/img/og.jpg">
+<meta property="og:site_name" content="Living Wallet">
+<meta property="fb:admins" content="100002024730526">
+<meta content="ja_JP" property="og:locale">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:site" content="@unibainc">
+<meta name="twitter:creator" content="@unibainc">
+<meta name="twitter:image:src" content="http://livingwallet.cct.la/img/og.jpg">
+<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
+<link rel="stylesheet" href="css/reset.css">
+<link rel="stylesheet" href="css/common.css">
+<link rel="stylesheet" href="css/style.css">
+<script src="../js/libs/jquery-1.9.1.min.js"></script>
+<script src="../js/libs/flickablecarrousel.js"></script>
+<script src="../js/script.js"></script>
+
+<!--[if (gte IE 6)&(lte IE 8)]>
+  <script type="text/javascript" src="js/libs/selectivizr-min.js"></script>
+  <![endif]-->
+<!--[if lt IE 9]>
+  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+  <![endif]-->
+
+</head>
+
+<body class="en">
+
+<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
+<div id="fb-root"></div>
+<script>(function(d, s, id) {
+  var js, fjs = d.getElementsByTagName(s)[0];
+  if (d.getElementById(id)) return;
+  js = d.createElement(s); js.id = id;
+  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
+  fjs.parentNode.insertBefore(js, fjs);
+}(document, 'script', 'facebook-jssdk'));</script> 
+<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
+<div id="wrapper">
+  <div id="wrapper_inner">
+    <header id="header" class="clearfix">
+      <h1><img src="../img/logo.png" alt="Living Wallet"></h1>
+      <!--<ul class="lang cleafix">
+        <li class="lang-en"><img src="../img/lang_en.gif" width="20" height="11" alt="English" /></li>
+        <li class="lang-jp"><a href="ja.html"><img src="../img/lang_jp.gif" width="19" height="12" alt="Japanese" /></a></li>
+      </ul>
+      <ul class="sns clearfix">
+        <li class="sns-twitter"><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://livingwallet.cct.la/" data-text='Living Wallet | "Living wallet" helps you to spend money wisely.' data-lang="en">Tweet</a></li>
+        <li class="sns-facebook"><div class="fb-like" data-href="http://livingwallet.cct.la/" data-width="120" data-height="The pixel height of the plugin" data-colorscheme="light" data-layout="button_count" data-action="like" data-show-faces="false" data-send="false"></div></li>
+      </ul>-->
+      <div class="logo"><img src="img-award/logo-zaim.png" alt="zaim"></div>
+    </header>
+    <div id="carrousel">
+      <div class="nav"></div>
+      <div class="main">
+        <div class="inner">
+          <div class="box"><img src="img/slide/slide_thumb_1.png" width="913" height="500"></div>
+          <div class="box"><img src="img/slide/slide_thumb_2.png" width="913" height="500"></div>
+          <div class="box"><img src="img/slide/slide_thumb_3.png" width="913" height="500"></div>
+          <div class="box"><img src="img/slide/slide_thumb_4.png" width="913" height="500"></div>
+          <div class="box"><img src="img/slide/slide_thumb_5.png" width="913" height="500"></div>
+          <div class="box"><img src="img/slide/slide_thumb_6.png" width="913" height="500"></div>
+          <div class="box"><img src="img/slide/slide_thumb_7.png" width="913" height="500"></div>
+        </div>
+      </div>
+    </div>
+    <div id="contents" class="clearfix">
+      <div class="column top">
+        <h2 class="case"><img src="img-award/h2_case-presentation.gif" width="309" height="30" alt="Case Presentation"></h2>
+        <div id="movie">
+          <iframe width="742" height="417" src="http://www.youtube.com/embed/SbtK-EWf2Dc" frameborder="0" allowfullscreen></iframe>
+        </div>
+      </div>
+      <div class="column">
+        <h2 class="problem"><img src="img-award/h2_problem.gif" width="772" height="41" alt="PROBLEM"></h2>
+        <p><img src="img-award/column_text_1_int.gif" width="754" height="199" alt="Saving money is a challenge for humans. Considering the fact that people have failed with various saving techniques, it is somewhat similar to dieting. In order to solve the challenge, the bookkeeping app “Zaim” has brought in fun and wise way of saving money managed by smartphones. However, no matter how good we are at budget control, humans cannot help, but often waste their money. We came to the conclusion that the problem may lie in wallets that easily allow people to unfold and use it. Therefore, as a function enhancement of mobile app, we invented a totally new wallet for people to be able to spend money wisely."></p>
+      </div>
+      <div class="column">
+        <h2 class="solution"><img src="img-award/h2_solution.gif" width="772" height="42" alt="SOLUTION"></h2>
+        <div class="left">
+          <p class="solution"><img src="img-award/column_text_2.gif" width="323" height="261" alt="We invented “The Living Wallet,” a wallet that can think of its own. The structure of the living wallet is very simple. User’s financial situation is collected in conjunction with API of bookkeeping app, “Zaim.” It automatically changes its behavior (mode) depending on your balance. If the user is low on funds, the wallet turns “Save mode.” In contrast, if the user has financial legroom, such as the day after pay day, the wallet becomes “consumption mode.”"></p>
+        </div>
+        <div class="right"><img src="img-award/column_thumb_1.jpg" width="271" height="302" alt=""></div>
+      </div>
+      <div class="column">
+        <h3 class="mode1"><img src="img-award/h3_saving-mode.gif" width="753" height="22" alt="Saving mode"></h3>
+        <p class="step"><img src="img-award/column_mode_1_thumb_1.jpg" width="670" height="168" alt="1. Evasion - The wallet apprehends any individual around and evades"></p>
+        <p class="step"><img src="img-award/column_mode_1_thumb_2.jpg" width="670" height="168" alt="2. Asking for help - When it gets caught, it starts screaming asking for help"></p>
+        <p class="step"><img src="img-award/column_mode_1_thumb_3.jpg" width="670" height="170" alt="3. Last resort - If you still try to use some money, as a last resort, the wallet sends a text message to your parents asking for help. It is always difficult to go against your parents."></p>
+      </div>
+      <div class="column">
+        <h3 class="mode2"><img src="img-award/h3_consumption-mode.gif" width="753" height="21" alt="Consumption mode"></h3>
+        <p class="step"><img src="img-award/column_mode_2_thumb_1.jpg" width="670" height="169" alt="1. Encouraging spending - When the budget shows favorable balance, we think you should consume for the economy. In this case, living wallet stimulates your material desire by reading out Amazon’s popular products ranking. "></p>
+      </div>
+      <div class="column bottom">
+        <h2 class="result"><img src="img-award/h2_result.gif" width="772" height="46" alt="RESULT"></h2>
+        <div class="left">
+          <p class="result"><img src="img-award/column_text_3.gif" width="414" height="273" alt="After we posted the product video on Youtube, “Living Wallet” became viral across the world. “Living Wallet” was featured in some of the biggest media in the world, including BBC, CNN, ABC, Discovery Channel, Daily mail, Mashable, and Creators Project, despite the fact that the budget was only 1 million yen with no PR fee. As a result, the name of the product, “Zaim,” and its message ”wise and fun way of saving” became widely known to people all over the world. It ended up that the number of users has become more than quadruple compared with the previous year."></p>
+        </div>
+        <div class="right"><img src="img-award/column_thumb_2.jpg" width="279" height="275" alt=""></div>
+        <p class="result"><img src="img-award/column_text_4.gif" width="607" height="44" alt="This is a totally new approach to spend money for those who are not good at saving, realized by the power of technology."></p>
+      </div>
+    </div>
+    <footer id="footer">
+      <div class="logo"><img src="img-award/logo-footer.gif" width="312" height="37" alt="Living Wallet by zaim"></div>
+    </footer>
+  </div>
+</div>
+</body>
+</html>
diff --git a/en/award_med2.html b/en/award_med2.html
@@ -0,0 +1,127 @@
+<!doctype html>
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
+<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
+<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!-->
+<html class="no-js" lang="en">
+<!--<![endif]-->
+<head>
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+<title>Living Wallet</title>
+<meta name="description" content='"Living wallet" helps you to spend money wisely.'>
+<meta name="keyword" content="Living Wallet, Zaim">
+<meta name="viewport" content="width=device-width,maximum-scale=1">
+<meta property="og:title" content="Living Wallet">
+<meta property="og:type" content="website">
+<meta property="og:url" content="http://livingwallet.cct.la/">
+<meta property="og:description" content'"Living wallet" helps you to spend money wisely.'=>
+<meta property="og:image" content="http://livingwallet.cct.la/img/og.jpg">
+<meta property="og:site_name" content="Living Wallet">
+<meta property="fb:admins" content="100002024730526">
+<meta content="ja_JP" property="og:locale">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:site" content="@unibainc">
+<meta name="twitter:creator" content="@unibainc">
+<meta name="twitter:image:src" content="http://livingwallet.cct.la/img/og.jpg">
+<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
+<link rel="stylesheet" href="css/reset.css">
+<link rel="stylesheet" href="css/common.css">
+<link rel="stylesheet" href="css/style.css">
+<script src="../js/libs/jquery-1.9.1.min.js"></script>
+<script src="../js/libs/flickablecarrousel.js"></script>
+<script src="../js/script.js"></script>
+
+<!--[if (gte IE 6)&(lte IE 8)]>
+  <script type="text/javascript" src="js/libs/selectivizr-min.js"></script>
+  <![endif]-->
+<!--[if lt IE 9]>
+  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+  <![endif]-->
+
+</head>
+
+<body class="en">
+
+<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
+<div id="fb-root"></div>
+<script>(function(d, s, id) {
+  var js, fjs = d.getElementsByTagName(s)[0];
+  if (d.getElementById(id)) return;
+  js = d.createElement(s); js.id = id;
+  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
+  fjs.parentNode.insertBefore(js, fjs);
+}(document, 'script', 'facebook-jssdk'));</script> 
+<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
+<div id="wrapper">
+  <div id="wrapper_inner">
+    <header id="header" class="clearfix">
+      <h1><img src="../img/logo.png" alt="Living Wallet"></h1>
+      <!--<ul class="lang cleafix">
+        <li class="lang-en"><img src="../img/lang_en.gif" width="20" height="11" alt="English" /></li>
+        <li class="lang-jp"><a href="ja.html"><img src="../img/lang_jp.gif" width="19" height="12" alt="Japanese" /></a></li>
+      </ul>
+      <ul class="sns clearfix">
+        <li class="sns-twitter"><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://livingwallet.cct.la/" data-text='Living Wallet | "Living wallet" helps you to spend money wisely.' data-lang="en">Tweet</a></li>
+        <li class="sns-facebook"><div class="fb-like" data-href="http://livingwallet.cct.la/" data-width="120" data-height="The pixel height of the plugin" data-colorscheme="light" data-layout="button_count" data-action="like" data-show-faces="false" data-send="false"></div></li>
+      </ul>-->
+      <div class="logo"><img src="img-award/logo-zaim.png" alt="zaim"></div>
+    </header>
+    <div id="carrousel">
+      <div class="nav"></div>
+      <div class="main">
+        <div class="inner">
+          <div class="box"><img src="img/slide/slide_thumb_1.png" width="913" height="500"></div>
+          <div class="box"><img src="img/slide/slide_thumb_2.png" width="913" height="500"></div>
+          <div class="box"><img src="img/slide/slide_thumb_3.png" width="913" height="500"></div>
+          <div class="box"><img src="img/slide/slide_thumb_4.png" width="913" height="500"></div>
+          <div class="box"><img src="img/slide/slide_thumb_5.png" width="913" height="500"></div>
+          <div class="box"><img src="img/slide/slide_thumb_6.png" width="913" height="500"></div>
+          <div class="box"><img src="img/slide/slide_thumb_7.png" width="913" height="500"></div>
+        </div>
+      </div>
+    </div>
+    <div id="contents" class="clearfix">
+      <div class="column top">
+        <h2 class="case"><img src="img-award/h2_case-presentation.gif" width="309" height="30" alt="Case Presentation"></h2>
+        <div id="movie">
+          <iframe width="742" height="417" src="http://www.youtube.com/embed/SbtK-EWf2Dc" frameborder="0" allowfullscreen></iframe>
+        </div>
+      </div>
+      <div class="column">
+        <h2 class="problem"><img src="img-award/h2_problem.gif" width="772" height="41" alt="PROBLEM"></h2>
+        <p><img src="img-award/column_text_1_med.gif" width="768" height="174" alt="Saving money is a challenge for humans. Considering the fact that people have failed with various saving techniques, it is somewhat similar to dieting. In order to solve the challenge, the bookkeeping app “Zaim” has brought in fun and wise way of saving money managed by smartphones. However, no matter how good we are at budget control, humans cannot help, but often waste their money. We came to the conclusion that the problem may lie in wallets that easily allow people to unfold and use it. Therefore, we decided to introduce the function of Zaim more easily by utilizing “the living wallet” as a media."></p>
+      </div>
+      <div class="column">
+        <h2 class="solution"><img src="img-award/h2_solution.gif" width="772" height="42" alt="SOLUTION"></h2>
+        <div class="left">
+          <p class="solution"><img src="img-award/column_text_2.gif" width="323" height="261" alt="We invented “The Living Wallet,” a wallet that can think of its own. The structure of the living wallet is very simple. User’s financial situation is collected in conjunction with API of bookkeeping app, “Zaim.” It automatically changes its behavior (mode) depending on your balance. If the user is low on funds, the wallet turns “Save mode.” In contrast, if the user has financial legroom, such as the day after pay day, the wallet becomes “consumption mode.”"></p>
+        </div>
+        <div class="right"><img src="img-award/column_thumb_1.jpg" width="271" height="302" alt=""></div>
+      </div>
+      <div class="column">
+        <h3 class="mode1"><img src="img-award/h3_saving-mode.gif" width="753" height="22" alt="Saving mode"></h3>
+        <p class="step"><img src="img-award/column_mode_1_thumb_1.jpg" width="670" height="168" alt="1. Evasion - The wallet apprehends any individual around and evades"></p>
+        <p class="step"><img src="img-award/column_mode_1_thumb_2.jpg" width="670" height="168" alt="2. Asking for help - When it gets caught, it starts screaming asking for help"></p>
+        <p class="step"><img src="img-award/column_mode_1_thumb_3.jpg" width="670" height="170" alt="3. Last resort - If you still try to use some money, as a last resort, the wallet sends a text message to your parents asking for help. It is always difficult to go against your parents."></p>
+      </div>
+      <div class="column">
+        <h3 class="mode2"><img src="img-award/h3_consumption-mode.gif" width="753" height="21" alt="Consumption mode"></h3>
+        <p class="step"><img src="img-award/column_mode_2_thumb_1.jpg" width="670" height="169" alt="1. Encouraging spending - When the budget shows favorable balance, we think you should consume for the economy. In this case, living wallet stimulates your material desire by reading out Amazon’s popular products ranking. "></p>
+      </div>
+      <div class="column bottom">
+        <h2 class="result"><img src="img-award/h2_result.gif" width="772" height="46" alt="RESULT"></h2>
+        <div class="left">
+          <p class="result"><img src="img-award/column_text_3.gif" width="414" height="273" alt="After we posted the product video on Youtube, “Living Wallet” became viral across the world. “Living Wallet” was featured in some of the biggest media in the world, including BBC, CNN, ABC, Discovery Channel, Daily mail, Mashable, and Creators Project, despite the fact that the budget was only 1 million yen with no PR fee. As a result, the name of the product, “Zaim,” and its message ”wise and fun way of saving” became widely known to people all over the world. It ended up that the number of users has become more than quadruple compared with the previous year."></p>
+        </div>
+        <div class="right"><img src="img-award/column_thumb_2.jpg" width="279" height="275" alt=""></div>
+        <p class="result"><img src="img-award/column_text_4.gif" width="607" height="44" alt="This is a totally new approach to spend money for those who are not good at saving, realized by the power of technology."></p>
+      </div>
+    </div>
+    <footer id="footer">
+      <div class="logo"><img src="img-award/logo-footer.gif" width="312" height="37" alt="Living Wallet by zaim"></div>
+    </footer>
+  </div>
+</div>
+</body>
+</html>