diff --git a/css/style.css b/css/style.css index 4e9673f..d723ca8 100644 --- 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 new file mode 100644 index 0000000..ca3810a --- /dev/null +++ b/en/award_int2.html @@ -0,0 +1,127 @@ + + + + + + + + + + +Living Wallet + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Case Presentation

+
+ +
+
+
+

PROBLEM

+

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.

+
+
+

SOLUTION

+
+

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.”

+
+
+
+
+

Saving mode

+

1. Evasion - The wallet apprehends any individual around and evades

+

2. Asking for help - When it gets caught, it starts screaming asking for help

+

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.

+
+
+

Consumption mode

+

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.

+
+
+

RESULT

+
+

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.

+
+
+

This is a totally new approach to spend money for those who are not good at saving, realized by the power of technology.

+
+
+ +
+
+ + diff --git a/en/award_med2.html b/en/award_med2.html new file mode 100644 index 0000000..951f113 --- /dev/null +++ b/en/award_med2.html @@ -0,0 +1,127 @@ + + + + + + + + + + +Living Wallet + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Case Presentation

+
+ +
+
+
+

PROBLEM

+

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.

+
+
+

SOLUTION

+
+

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.”

+
+
+
+
+

Saving mode

+

1. Evasion - The wallet apprehends any individual around and evades

+

2. Asking for help - When it gets caught, it starts screaming asking for help

+

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.

+
+
+

Consumption mode

+

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.

+
+
+

RESULT

+
+

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.

+
+
+

This is a totally new approach to spend money for those who are not good at saving, realized by the power of technology.

+
+
+ +
+
+ + diff --git a/en/award_vrl2.html b/en/award_vrl2.html new file mode 100644 index 0000000..fd9aa62 --- /dev/null +++ b/en/award_vrl2.html @@ -0,0 +1,127 @@ + + + + + + + + + + +Living Wallet + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Case Presentation

+
+ +
+
+
+

PROBLEM

+

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, to show the function of Zaim more easily, we invented a totally new wallet.

+
+
+

SOLUTION

+
+

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.”

+
+
+
+
+

Saving mode

+

1. Evasion - The wallet apprehends any individual around and evades

+

2. Asking for help - When it gets caught, it starts screaming asking for help

+

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.

+
+
+

Consumption mode

+

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.

+
+
+

RESULT

+
+

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.

+
+
+

This is a totally new approach to spend money for those who are not good at saving, realized by the power of technology.

+
+
+ +
+
+ + diff --git a/en/css/common.css b/en/css/common.css new file mode 100644 index 0000000..c054cdf --- /dev/null +++ b/en/css/common.css @@ -0,0 +1,90 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +img{ + vertical-align: top; + line-height: 1px; + font-size: 1px; +} + +/* #Clearing +================================================== */ + +/* Self Clearing Goodness */ +.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } + +/* Use clearfix class on parent to clear nested columns, +or wrap each row of columns in a
*/ +.clearfix:before, +.clearfix:after, +.row:before, +.row:after { + content: '\0020'; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; } +.row:after, +.clearfix:after { + clear: both; } +.row, +.clearfix { + zoom: 1; } + +/* You can also use a
to clear columns */ +.clear { + clear: both; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; +} +/* @end */ \ No newline at end of file diff --git a/en/css/reset.css b/en/css/reset.css new file mode 100644 index 0000000..cfbc86d --- /dev/null +++ b/en/css/reset.css @@ -0,0 +1,126 @@ +/* ============================================================================= + HTML5 Boilerplate CSS: h5bp.com/css + ========================================================================== */ + +article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } +audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } +audio:not([controls]) { display: none; } +[hidden] { display: none; } + +html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } +html, button, input, select, textarea { font-family: sans-serif; color: #222; } +body { margin: 0; font-size: 1em; line-height: 1.4; } + +/*::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; } +::selection { background: #fe57a1; color: #fff; text-shadow: none; }*/ + +/*a { color: #00e; } +a:visited { color: #551a8b; } +a:hover { color: #06e; } +a:focus { outline: thin dotted; } +a:hover, a:active { outline: 0; }*/ + +abbr[title] { border-bottom: 1px dotted; } +b, strong { font-weight: bold; } +blockquote { margin: 1em 40px; } +dfn { font-style: italic; } +hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } +ins { background: #ff9; color: #000; text-decoration: none; } +mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } +pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } +pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } +q { quotes: none; } +q:before, q:after { content: ""; content: none; } +small { font-size: 85%; } + +sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } +sup { top: -0.5em; } +sub { bottom: -0.25em; } + +ul, ol { margin: 0; padding: 0; } +dd { margin: 0 0 0 40px; } +nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } + +img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } + +svg:not(:root) { overflow: hidden; } + +figure { margin: 0; } + +form { margin: 0; } +fieldset { border: 0; margin: 0; padding: 0; } +label { cursor: pointer; } +legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; } +button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } +button, input { line-height: normal; } +button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; } +button[disabled], input[disabled] { cursor: default; } +input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; } +input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } +input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } +button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } +textarea { overflow: auto; vertical-align: top; resize: vertical; } +input:valid, textarea:valid { } +input:invalid, textarea:invalid { background-color: #f0dddd; } + +table { border-collapse: collapse; border-spacing: 0; } +td { vertical-align: top; } + +.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; } + + + +/* ===== Primary Styles ======================================================== + Author: + ========================================================================== */ + + + + + + + + + + + +/* ============================================================================= + Media Queries + ========================================================================== */ + +@media only screen and (min-width: 35em) { + /* Style adjustments for viewports that meet the condition */ +} + +/* ============================================================================= + Non-Semantic Helper Classes + ========================================================================== */ + +.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; } +.ir br { display: none; } +.hidden { display: none !important; visibility: hidden; } +.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } +.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } +.invisible { visibility: hidden; } +.clearfix:before, .clearfix:after { content: ""; display: table; } +.clearfix:after { clear: both; } +.clearfix { *zoom: 1; } + +/* ============================================================================= + Print Styles + ========================================================================== */ + +@media print { + * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */ + a, a:visited { text-decoration: underline; } + a[href]:after { content: " (" attr(href) ")"; } + abbr[title]:after { content: " (" attr(title) ")"; } + .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ + pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } + thead { display: table-header-group; } /* h5bp.com/t */ + tr, img { page-break-inside: avoid; } + img { max-width: 100% !important; } + @page { margin: 0.5cm; } + p, h2, h3 { orphans: 3; widows: 3; } + h2, h3 { page-break-after: avoid; } +} diff --git a/en/css/style.css b/en/css/style.css new file mode 100644 index 0000000..c1fee07 --- /dev/null +++ b/en/css/style.css @@ -0,0 +1,128 @@ +body { + width: 100%; + height: 100%; + position: relative; + background-color: transparent; + background-position: center top; + background-repeat: repeat-y; + min-width: 1040px; + width: auto !important; } + +#wrapper { + position: relative; + overflow: hidden; + background: url("../../img/background.jpg"); + background-position: center; + min-width: 1040px; + width: auto !important; + border: 12px solid #ffff00; + width: 1040px; } + #wrapper #wrapper_inner { + width: 980px; + background: #fff; + margin: 0 auto; } + #wrapper #wrapper_inner .left { + float: left; } + #wrapper #wrapper_inner .right { + float: right; } + #wrapper #wrapper_inner #header { + clear: both; + height: 54px; + width: 980px; + padding-top: 20px; + display: inline-block; + *display: inline; + *zoom: 1; + position: relative; } + #wrapper #wrapper_inner #header h1 { + float: left; + margin-left: 30px; } + #wrapper #wrapper_inner #header .logo { + float: right; + margin-right: 30px; } + #wrapper #wrapper_inner #contents { + width: 772px; /*760px*/ + margin: 0 auto; } + #wrapper #wrapper_inner #contents .column { + display: inline-block; + *display: inline; + *zoom: 1; + width: 100%; + margin-bottom: 0; } + #wrapper #wrapper_inner #contents .column h2 { + margin: 0 0 20px 0; } + #wrapper #wrapper_inner #contents .column h2.case { + margin: 0 0 20px 6px; } + #wrapper #wrapper_inner #contents .column h2.problem { + margin: 0 0 30px 0; } + #wrapper #wrapper_inner #contents .column h2.solution { + margin: 58px 0 40px 0; } + #wrapper #wrapper_inner #contents .column h2.result { + margin: 58px 0 38px 0; } + #wrapper #wrapper_inner #contents .column h3.mode1 { + margin: 50px 0 52px 12px; } + #wrapper #wrapper_inner #contents .column h3.mode2 { + margin: 30px 0 54px 12px; } + + #wrapper #wrapper_inner #contents .column #movie { + margin: 25px 0 82px 6px; + width: 766px; + height: 442px; + background: url("../../img/movie_background.jpg") no-repeat; } + #wrapper #wrapper_inner #contents .column #movie iframe { + margin: 12px; } + #wrapper #wrapper_inner #contents .column p.step { + margin: 0 0 26px 28px; } + #wrapper #wrapper_inner #contents .column p.solution { + margin: 0 0 0 12px; } + #wrapper #wrapper_inner #contents .column p.result { + margin: 8px 0 35px 12px; } + + #wrapper #wrapper_inner #contents .top { + margin-top: 68px; } + #wrapper #wrapper_inner #contents .bottom { + margin-bottom: 90px; } + + #wrapper #wrapper_inner #footer { + width: 980px; + padding: 34px 0 20px 0; + border: none; + background-color: #e1e1e1; } + #wrapper #wrapper_inner #footer .logo { + margin: 0 auto; + width: 312px; } + +#carrousel .main { + width: 945px; + padding-left: 35px; } + +#carrousel .nav a.prev, +#carrousel .nav a.next { + position: absolute; } + +#carrousel .nav a.prev { + margin-left: 50px; + margin-top: 220px; } + +#carrousel .nav a.next { + margin-left: 890px; + margin-top: 220px; } + +#carrousel .box { + float: left; + width: 913px; } + +#carrousel .indicator div { + float: left; + background-color: #333; + margin-top: 5px; + margin-right: 5px; + width: 10px; + height: 10px; } + +#carrousel .indicator div, +#carrousel .nav a { + cursor: pointer; } + +#carrousel .indicator div.current { + background-color: #4383fb !important; } \ No newline at end of file diff --git a/en/img-award/column_mode_1_thumb_1.jpg b/en/img-award/column_mode_1_thumb_1.jpg new file mode 100644 index 0000000..5937dc2 Binary files /dev/null and b/en/img-award/column_mode_1_thumb_1.jpg differ diff --git a/en/img-award/column_mode_1_thumb_2.jpg b/en/img-award/column_mode_1_thumb_2.jpg new file mode 100644 index 0000000..6217d2d Binary files /dev/null and b/en/img-award/column_mode_1_thumb_2.jpg differ diff --git a/en/img-award/column_mode_1_thumb_3.jpg b/en/img-award/column_mode_1_thumb_3.jpg new file mode 100644 index 0000000..0c52f71 Binary files /dev/null and b/en/img-award/column_mode_1_thumb_3.jpg differ diff --git a/en/img-award/column_mode_2_thumb_1.jpg b/en/img-award/column_mode_2_thumb_1.jpg new file mode 100644 index 0000000..4c6c7e3 Binary files /dev/null and b/en/img-award/column_mode_2_thumb_1.jpg differ diff --git a/en/img-award/column_text_1_int.gif b/en/img-award/column_text_1_int.gif new file mode 100644 index 0000000..93ef66f Binary files /dev/null and b/en/img-award/column_text_1_int.gif differ diff --git a/en/img-award/column_text_1_med.gif b/en/img-award/column_text_1_med.gif new file mode 100644 index 0000000..7f86536 Binary files /dev/null and b/en/img-award/column_text_1_med.gif differ diff --git a/en/img-award/column_text_1_vrl.gif b/en/img-award/column_text_1_vrl.gif new file mode 100644 index 0000000..18635bd Binary files /dev/null and b/en/img-award/column_text_1_vrl.gif differ diff --git a/en/img-award/column_text_2.gif b/en/img-award/column_text_2.gif new file mode 100644 index 0000000..b7e4803 Binary files /dev/null and b/en/img-award/column_text_2.gif differ diff --git a/en/img-award/column_text_3.gif b/en/img-award/column_text_3.gif new file mode 100644 index 0000000..ccc2de6 Binary files /dev/null and b/en/img-award/column_text_3.gif differ diff --git a/en/img-award/column_text_4.gif b/en/img-award/column_text_4.gif new file mode 100644 index 0000000..64b604e Binary files /dev/null and b/en/img-award/column_text_4.gif differ diff --git a/en/img-award/column_thumb_1.jpg b/en/img-award/column_thumb_1.jpg new file mode 100644 index 0000000..5343ad4 Binary files /dev/null and b/en/img-award/column_thumb_1.jpg differ diff --git a/en/img-award/column_thumb_2.jpg b/en/img-award/column_thumb_2.jpg new file mode 100644 index 0000000..2ca0ffb Binary files /dev/null and b/en/img-award/column_thumb_2.jpg differ diff --git a/en/img-award/h2_case-presentation.gif b/en/img-award/h2_case-presentation.gif new file mode 100644 index 0000000..4b48052 Binary files /dev/null and b/en/img-award/h2_case-presentation.gif differ diff --git a/en/img-award/h2_problem.gif b/en/img-award/h2_problem.gif new file mode 100644 index 0000000..e659bef Binary files /dev/null and b/en/img-award/h2_problem.gif differ diff --git a/en/img-award/h2_result.gif b/en/img-award/h2_result.gif new file mode 100644 index 0000000..d0ba3d6 Binary files /dev/null and b/en/img-award/h2_result.gif differ diff --git a/en/img-award/h2_solution.gif b/en/img-award/h2_solution.gif new file mode 100644 index 0000000..7738b3d Binary files /dev/null and b/en/img-award/h2_solution.gif differ diff --git a/en/img-award/h3_consumption-mode.gif b/en/img-award/h3_consumption-mode.gif new file mode 100644 index 0000000..00785f4 Binary files /dev/null and b/en/img-award/h3_consumption-mode.gif differ diff --git a/en/img-award/h3_saving-mode.gif b/en/img-award/h3_saving-mode.gif new file mode 100644 index 0000000..a16c764 Binary files /dev/null and b/en/img-award/h3_saving-mode.gif differ diff --git a/en/img-award/logo-footer.gif b/en/img-award/logo-footer.gif new file mode 100644 index 0000000..545fed1 Binary files /dev/null and b/en/img-award/logo-footer.gif differ diff --git a/en/img-award/logo-zaim.png b/en/img-award/logo-zaim.png new file mode 100644 index 0000000..79bf522 Binary files /dev/null and b/en/img-award/logo-zaim.png differ