2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
S
N
A
Q
E
A HAPPY NEW YEAR
A HAPPY NEW YEAR
A HAPPY NEW YEAR

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <main class="container"> <section class="fetures"> <div class="feature-item"> <img src="#" width="300" height="146" alt="Laptop"> <h2 class="feature-name">Web sites</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilis amet.</p> </div> <div class="feature-item"> <img src="#" width="300" height="146" alt="Phone"> <span class="feature-name">Apps</span> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="feature-item"> <img src="#" width="300" height="146" alt="Presentation"> <main class="container"> <span class="feature-name">Presentations</span> <section class="features"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Doloremque <div class="feature-item"> </main> beatae vellure quae.</p> <main class="container"><div class="feature-item"> </div> <section class="features"> </section> <div class="feature-item"> </main> <div class= </body> <img src= </html> <b class= </div> <p>Lorem </section> </div> </div> </main> <div class= </body> </main> <img src= </html> <div class= <b class= <div class= "feature-item"> </section> "feature-item"> <title>Document</title> <div class= <img src="#" <main class="container"> "feature-item"> width="300" </section> <div class= <img src="#" height="146" <div class= "feature-item"> width="300" alt="Phone"> "feature-item" <div class= height="146" </div></div> <img src="#" "feature-item"> alt="Phone"> </section> width="300" <img src="#" </div></div> </main> height="145" width="300" </section> </body> alt="Phone" height="146" </main></div> </html> </div></div> alt="Phone"></body></div> <div class= </section></div> <div class="feature" "feature-item"> </main></main> </section></main> <main class="container"></body> </body></html> <section class="features"> <div class="feature" </section>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <main class="container"> <section class="fetures"> <div class="feature-item"> <img src="#" width="300" height="146" alt="Laptop"> <h2 class="feature-name">Web sites</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilis amet.</p> </div> <div class="feature-item"> <img src="#" width="300" height="146" alt="Phone"> <span class="feature-name">Apps</span> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="feature-item"> <img src="#" width="300" height="146" alt="Presentation"> <main class="container"> <span class="feature-name">Presentations</span> <section class="features"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Doloremque <div class="feature-item"> beatae vellure quae.</p> <main class="container">width="300" </div> <section class="features"> </section> </section> <div class="feature-item"> </main> </main> <div class= </body> <img src= </html> <b class= </div> <p>Lorem </section> </div> </div> </main> <div class= </body> </main> <img src= </html> <div class= <b class= <div class= "feature-item"> </section> "feature-item"> <title>Document</title> <div class= <img src="#" <main class="container"> "feature-item"> width="300" </section> <div class= <img src="#" height="146" <div class= "feature-item"> width="300" alt="Phone"> "feature-item" <div class= height="146" </div></div> <img src="#" "feature-item"> alt="Phone"> </section> width="300" <img src="#" </div></div> </main> height="145" width="300" </section> </body> alt="Phone" height="146" </main></div> </html> </div></div> alt="Phone"></body></div> <div class= </section></div> <div class="feature" "feature-item"> </main></main> </section></main> <main class="container"></body> </body></html> <section class="features"> <div class="feature" </section>

TOP STORY 八代目儀兵衛

STORY

八代目儀兵衛

CREDITS
Produce / Planning : Ryo Takada
Direction : Takashi Omae / Chiaki Yui
Design : Yuki Kageyama

Mark Up : Tomoaki Doteuchi / Satoshi Yoshida


依頼背景:

「お米ギフト」として人気を博す八代目儀兵衛を次のステップに進めるべく、ブランディングを目的としたクリエイティブとUI、UXの実現が本プロジェクトです。クリエイティブディレクションは、以前の黒基調で華美なデザインから、一転して無駄を削ぎ落としながらも1つ1つの情報は大きく保ち、アクセスの高いスマートフォンユーザ向けに上質あるオモテナシをコンセプトとしたサイトを構築。各商品のオプション選択画面では、コンセプトを維持しつつ、システムの仕様上制限もクリアに致しました。

 

 

担当者のコメント:

お客様にとって、ギフトの用途・目的、予算は様々です。商品ページからの流入が多い楽天において、商品ページの情報やデザインからの印象、また次ページへの誘導のしやすさは重要となります。
リニューアルでは、価格別、シリーズ別などユーザーの多様なニーズからも探しやすいUIとし、ユーザー毎に持つ理想とする商品選択が出来、画面離脱を防ぐ設計と致しました。
大切な贈り物であり、かつ食べ物でもある為、充実したギフトサービス・お米の安全やこだわり・ご注文方法といった、購入前の必要情報への誘導も心掛け、お客様が安心して購入できるように仕上げております。

ビジュアルアウトプット領域においては、八代目儀兵衛様の持つ京都やお米というキーワードから連想される伝統的な和のトーンを現代的にモダナイズし、スッキリと削ぎ落とされた回遊し易いUIを意識して作成致しました。ギフト商材における晴れの日にふさわしい華やかなイメージは保ちつつも、幅広い世代・性別の方にとって特別な贈り物となるデザインに仕上げております。

 

https://www.arrival-quality.com/blog/quality-people-quality-stories-vol-2/

    八代目儀兵衛
    八代目儀兵衛
    八代目儀兵衛