Portfolio up to 2022

Transcript

1. PORT FOLIO PORT FOLIO PORT FOLIO PORT FOLIO PORT FOLIO PORT FOLIO PORT FOLIO PORT FOLIO PORT FOLIO PORT FOLIO BY SATO REI 2022
2. UI 01. 02. 05. 03. 06. 04. SPORTS POINT Banner production LOOP Junano Taberu COMMIS 2021/06 - 2022/02 2021/02 - 2022/02 2019/12 - 2020/07 2020/10 - 2020/11 2020/02 - 2020/05 2020/10 - 2020/12 UIデザインリーダー / デザインディレクター グラフィックデザイナー / デザインディレクター UI/UXデザイナー WEBデザイナー / ディレクター UI/UX・グラフィック・モーションデザイナー WEBデザイナー / ディレクター UI/UX design Graphic design UI/UX design WEB design UI/UX design WEB design 02 PORTFORIO by SatoRei INDEX
3. 03 PORTFORIO by SatoRei UI/UX DESIGN
4. 04 PORTFORIO by SatoRei UI/UX DESIGN OVERVIEW ABOUT 制作期間 領域 2021/06 - 2022/02（8ヶ⽉） UI/UXデザイン ポジション/担当 UIデザインリーダー / デザインディレクター ⼈数規模 使⽤ツール デザイナー5名（外部含む） コーダー4名 / 総括ディレクター3名 システムディレクター2名 プロジェクトリーダー1名（取締役） Adobe XD / Illustrator ゼビオグループ各ショップ（ゼビオスポーツ、ヴィクトリアゴル フ、エルブレスなど）のショップポイントを統合し、SPORTS POINTとして管理できるようにされた新システム。 001 002
5. PROJECT GOAL ゼビオグループ共通のポイント会員基盤を構築する  - 各社の多種多様なポイント会員サービスを統合し、共通のポイント会員基盤として提供する。  - グループ共通の会員IDを⽤意し、会員様をユニークに認識できるようにする。  - グループ共通のポイントを⽤意し、グループの販売チャネル全体で利⽤できる状態にする。  - プラットフォームを統⼀し、ランニングコストの削減をはかる。 MERIT ❶ ゼビオグループの実店舗・ECでポイント付与/利⽤ができます。 ❷ お客様としては、発⾏⼿続きが1回で済む。ポイントが集約管理でき、活⽤範囲も広く、効率よく  　 ポイントイントが貯まることになります。また、多数のカードを持ち歩かずに済み、各ECやWeb 　 サービスへのログインも１つの会員IDを使えばよくなります。 ❸ ポイント照会、会員情報更新、メルマガ要・不要の更新がお客様⾃⾝で⾏うことができ利便性が    向上します。 ❹ カード紛失、盗難による不正利⽤が減少します。 05 PORTFORIO by SatoRei UI/UX DESIGN 004 003
6. 06 PORTFORIO by SatoRei UI/UX DESIGN DESIGN REGULATION 01 デザイン上では「游ゴシック」を使⽤していますが、実装上 はシステムフォントになります。 MacとWinの互換性を考えるなら「源ノ⾓ゴシック」に変更す るのもよいでしょう。 游ゴシック フォント フォントサイズ フォントカラー 読み⽂字全般は基本14ptとします。ボールドかどうかは、重要 度で決定。その他は以下参照。 ・注釈は基本12ptとし、どうしても⼊り切らない場合のみ 10ptを使⽤する。 ・11ptや13ptなど半端な数字は使⽤しないことで、 CSSを簡素化。 ポイント周りのサイズ ポイント実績[18pt] ポイント詳細[28pt] TOP [24pt] ポイント実績[16pt] 読み⽂字：14pt 例：通常の読み⽂字全般はこのサイズです。 注釈⽂字：12pt 注釈⽂字：10pt 例：※⼊⼒が間違っています など 例：※⼊⼒が間違っています など 800pt 1,200pt +10pt 280pt 1 2 3 #000000 基本カラー。読み⽂字など。 #0C4191 ゼビオカラー。ポイントやボタン内⽂字 #0075FF テキストリンクカラー #E60012 注意、警告テキスト #D89000 ポイントがマイナス状態 #A0A0A0 ポイントが失効した際の補⾜ 1 2 3 005
7. 07 PORTFORIO by SatoRei UI/UX DESIGN DESIGN REGULATION 02 ページ内の⾒出し ボタンと⼊⼒フォーム ボタン使い分け ボタンの最⼩タップ領域 4 5 6 7 タイトルが⼊ります 何かをする、実⾏する、進める。など何か物事を進める場合に 使⽤するボタン 戻る、キャンセル、帰る、やめる。など、物事を決めない、進 めず戻る場合に使⽤するボタン 汎⽤的な項⽬で⽤いるナビゲーションボタン。 重要決定では使⽤しない。 第2階層の⾒出しには「戻る」ボタンが⼊る。 しかし、登録フォームや変更完了ページには「戻る」ボタンは ⼊らない。 次へ 戻る 汎⽤ボタン マテリアルデザインでは最低⾼さ36dpを推奨しています。すべてルー ル通りにとはいきませんが、重要もしくはよく利⽤する⼩さいボタン に関しては、背後に透明なオブジェクトを配置してタップ領域の⾼さ を36dp確保するようします。 ・下層ページには「戻るボタン」つきの⾒出し ・TOP⽤のみ18ptの⾒出しを使⽤。 ・基本は16pt ・サブカテゴリは14pt C:⾒出し中(16pt) B:TOP⽤ ⾒出し⼤(18pt) D：⾒出し⼩(14pt) A：⾒出し⼤(18pt) タイトルが⼊ります ⻘ボタンを上、⽩ボタンを下を基本とする。 決定 キャンセル 通常時とエラー時の挙動 ⼊⼒してください パスワード [必須] ⼊⼒してください 正しく⼊⼒してください。 4 7 5 6 006
8. DESIGN OUTPUT 01 007 スーパースポーツゼビオ ECサイト ▲ 関連性を持たせるために、全体に現在のスーパースポーツゼビ オのコーポレートカラーを使⽤。 パーツカラーをブランドに合わせることでユーザーに、同⼀ブ ランドと意識し続けてもらうことを⽬的としています。 また、ボタンやテキストリンクなどのコンポーネントもスーパ ースポーツゼビオECサイトに近づけることでユーザーの混乱 を避けることを⽬的としています。 08 PORTFORIO by SatoRei UI/UX DESIGN
9. 09 UI/UX DESIGN DESIGN OUTPUT 02 008
10. 10 PORTFORIO by SatoRei GRAPHIC DESIGN Banner production
11. OVERVIEW ABOUT 制作期間 領域 2021/02 - 2022/02（12ヶ⽉） グラフィックデザイン ポジション/担当 デザイナー / デザインディレクター ⼈数規模 使⽤ツール デザイナー3名（外部含む） ディレクター3名 Photoshop / Illustrator 各グループ社ECサイトの4ショップ、スーパースポーツゼビオ/ ビクトリアゴルフ/ビクトリア/エルブレスのサイト内で掲載のバ ナー制作を担当。 001 002 Banner production 11 PORTFORIO by SatoRei GRAPHIC DESIGN
12. 12 PORTFORIO by SatoRei GRAPHIC DESIGN DESIGN OUTPUT 01 各グループ社ECサイトの4ショップ、スーパースポーツゼビオ    、ビクトリアゴルフ    、ビクトリア    、 エルブレス    のサイト内で掲載のバナー制作を担当。 SPRING 春 掲載ショップ 掲載ショップ 掲載ショップ 掲載ショップ 訴求ポイント 訴求ポイント 訴求ポイント 訴求ポイント 新⽣活を始めるユーザーに対して訴求するバナー。⾊は⻩⾊と⻘ 緑を使⽤し春と新⽣活の期待感やワクワクを表現したデザインに し、英字⼿書きフォントを背景に⼊れる事で新⽣活の期待感のあ るポップな表現に仕上げた。 ゼビオグループ4ショップ掲載のバナーであることから春らしい カラーリングを意識しつつ、不規則な形を散りばめることで桜が 散るような表現も意識している。「春」という⽂字だけ⼿書きに して⼀番訴求したいポイントも⼤きく表現している。 訴求商品が⼦供向けな商品であるため、素材に⼦供の写真を使⽤ し背景は⻘（空）をおくことで、晴天の元⼦供が外で駆け回るよ うなバナーに仕上げた。 アウトドア⽤品を扱うショップに掲載することからポップなデザ インは避け、カラーもアウトドア且つ春よりのカラーを意識して いる。キャッチフレーズもシンプルなものにしCV率を意識した ⽂⾔にした。 003
13. 13 PORTFORIO by SatoRei GRAPHIC DESIGN SUMMER 夏 掲載ショップ 掲載ショップ 掲載ショップ 掲載ショップ 訴求ポイント 訴求ポイント 訴求ポイント 訴求ポイント クリアランスバナーであることから⾚を使⽤してセール間やお得 感を意識したカラーリングにデザイン。季節も春∼夏にマッチす るよう筆で爽快感のある素材とカラーでデザインした。 LINEのクーポン訴求であることからLINEのコーポレートカラーと 「真夏の売りつくし」を意識したカラーでデザイン。雲や太陽の 輝きで真夏を表現、⼀番の訴求ポイントの「¥500OFF」を⽬⽴ クリアランスバナーとは違い、特集バナーであることから⾚など の⽬⽴つ⾊は使⽤せず、⻩⾊系統の⾊で構成。掲載訴求商品が多 いがひし形の中に並べてデザインすることでただ整列させるだけ ではなく夏らしいワクワクした楽しい雰囲気のバナーに仕上げ た。 アウトドアのショップで展開するバナーであることからアウトド アや⼭、森を意識したデザインにした。背景も夏を連想できるよ うな画像を選定。 DESIGN OUTPUT 02 各グループ社ECサイトの4ショップ、スーパースポーツゼビオ    、ビクトリアゴルフ    、ビクトリア    、 エルブレス    のサイト内で掲載のバナー制作を担当。 004
14. 14 PORTFORIO by SatoRei GRAPHIC DESIGN AUTUMN 秋 掲載ショップ 掲載ショップ 掲載ショップ 掲載ショップ 訴求ポイント 訴求ポイント 訴求ポイント 訴求ポイント LINEのバナーであることからLINEのコーポレートカラーに近い緑 を背景に使⽤しLINEスタンプのバナーであることがひと⽬で理解 できるようなデザインに⼼開けた。 キャンプ⽤品のバナー。カラーリングは秋をイメージしたオレン ジを使⽤しギンガムチェックにし他のバナーよりCV率を上げる ためにデザインをした。 秋に掲載するバナーであったため、オレンジを使⽤したというよ りは競合他社やプロテインや健康⾷品のバナーがオレンジを使⽤ しているバナーが多かった為、このカラーリングを使⽤。ストレ ッチ、運動をイメージさせるようなデザインに仕上げた。 セールバナーであることから他のバナーよりも⽬⽴たせる為、⾚ に⻩⾊⽂字、集中線を使⽤しCV率を達成するためのデザインを ⼼がけた。 DESIGN OUTPUT 03 各グループ社ECサイトの4ショップ、スーパースポーツゼビオ    、ビクトリアゴルフ    、ビクトリア    、 エルブレス    のサイト内で掲載のバナー制作を担当。 005
15. 15 PORTFORIO by SatoRei GRAPHIC DESIGN WINTER 冬 掲載ショップ 掲載ショップ 掲載ショップ 掲載ショップ 訴求ポイント 訴求ポイント 訴求ポイント 訴求ポイント 年始の福袋のバナー。⾚と⽩を使⽤し紅⽩を連想させゼビオグル ープのコーポレートカラーである⻘を使⽤。福袋の内容がスポー ツ⽤品が多い為、⾓があるフォントやシェイプを使⽤。全体的に 傾斜をつけることでスタイリッシュさを表現した。 クリスマスギフトのバナー。クリスマスを連想させるバナーはど うしても暗めなカラーが多いので訴求したい⽂⾔の場所に⻩⾊を 使⽤、周りにクリスマスを連想させるようなカラーを使⽤しデザ インした。 訴求⽂⾔が「あったか防寒⼩物」であった為、最⼤限にバナーで あったかさを表現しようと思い背景には⾚とオレンジのグラデー ションを使⽤し、暖かいときに感じる安⼼さえお表現する為のテ クスチャを使⽤。⽂字処理も⾚いシャドウをつけ、これでもかと いうくらいあったかなバナーを作成した。 ボアフリースのバナーとひと⽬でわかるように起⽑のテクスチャ を使⽤しカラーも暖かさを表現するオレンジを使⽤。 DESIGN OUTPUT 04 各グループ社ECサイトの4ショップ、スーパースポーツゼビオ    、ビクトリアゴルフ    、ビクトリア    、 エルブレス    のサイト内で掲載のバナー制作を担当。 006
16. 16 PORTFORIO by SatoRei WEB DESIGN
17. OVERVIEW ABOUT 制作期間 領域 2020/10 - 2020/11（2ヶ⽉） WEBデザイン ポジション/担当 WEBデザイナー / ディレクター 使⽤ツール Adobe XD / Illustrator オーガニックコスメ「junano」のブランドサイト制作。 クライアントとの製品プロモーションからブランドページ制作まで と、上流の⼯程から携わったプロジェクト。 ⼈数規模 デザイナー1名 / コーダー1名 プロジェクトリーダー（会社代表）1名 001 002 17 PORTFORIO by SatoRei WEB DESIGN
18. 18 PORTFORIO by SatoRei WEB DESIGN DESIGN RENOVATION 003 旧PCページ 旧SPページ 旧ブランドページの掲載コンテンツ 改修で追加すべきコンテンツ KEY VISUAL コンセプト ABOUT 商品説明 PRODUCT 商品⼀覧 ・効果効⽤ ・アフターサポート ・権威性 ・製品へのこだわり ・デザイン ・タレント ・インスタグラムコンテンツ 機能的価値を訴求するための コンテンツ案 情緒的価値を訴求するための コンテンツ案 上記のコンテンツをもとに、ユーザー導線を考慮しながら⾒せ⽅を設計していく
19. 19 PORTFORIO by SatoRei WEB DESIGN DESIGN REGULATION SITE MAP 004 005 基本的な⽂字やコンテンツを構成するフォントはNoto Sans CJK JPを使⽤。 タイトルや、情緒的に訴求したい部分には源ノ明朝を使⽤し、 柔らかい⽂字構成で訴求したい部分に使⽤。 Noto Sans CJK JP 源ノ明朝 フォント カラー 2 3 #F6CCC4 ブランドのコーポレートカラー。 #262222 ⽂字は基本この⽂字⾊で統⼀。 ブランドロゴ・ファビコン 1 ・ファビコン/シンボルマーク ・ブランドロゴ リップグロス LINE UP HOW TO USE 特定商取引 個⼈情報保護 送料 お問い合わせ ABOUT US TOP ⽣ハチミツ ゲルクリーム 化粧⽔ オイル ハニーハニーボックス 機能的価値を中⼼に訴求 製品詳細 効果効⽤ 製品のこだわり アフターサポート 情緒的価値をメインに訴求 下層ページへ誘導する KEY VISUAL 商品概要 権威性 商品⼀覧 Instagram 情緒的価値をメインに訴求 下層ページへ誘導する ブランドコンセプト 権威性の詳細 ▪ 商品リストを「LINE UP」に集約させ、わかりやすくする、またそれぞれの魅⼒を各詳細ページで伝える ▪ それぞれの商品ページをインデックスさせ、SEO流⼊経路からでも商品の理解度を⾼め、CV率の向上を測る DESIGN REGULATION SITE MAP
20. DESIGN OUTPUT 01 006 20 PORTFORIO by SatoRei WEB DESIGN キービジュアル ⼤きな商品写真にキャッチフレーズを重ね、⾼ 級感と、商品をメインに⾒せることができるよ うにデザインした。 写真は時間ごとに切り替わる仕様になってお り、写真は以下の3枚。
21. DESIGN OUTPUT 02 007 21 PORTFORIO by SatoRei WEB DESIGN ブランドメッセージ 製品（Junano）について 商品を開発したオーナーの商品へ対する思い や、商品が⽣まれた経緯を記載し購⼊者側へ情 緒的な訴求を訴えかけるように意識した。 ABOUT USページに遷移するセクション。
22. DESIGN OUTPUT 03 008 22 PORTFORIO by SatoRei WEB DESIGN 商品ラインナップ 商品詳細 商品詳細の上に少し説明⽂を挿⼊して情緒的に 訴えかける要素を追加しました。 各商品の製品詳細に遷移するセクション。
23. DESIGN OUTPUT 04 009 23 PORTFORIO by SatoRei WEB DESIGN 監修医の紹介（権威性） インスタグラム投稿 医師の監修であることを説明するセクションを 設けることで、製品の権威性を伝えることを⽬ 的としています。 moreの遷移先はABOUT USの監修医の説明セ クションに⾶びます。 インスタグラム投稿を挿⼊することで⾝近な印 象付けや話題性を訴求し、サイトだけでは知り 得なかった情報の発信も⽬的としている。
24. DESIGN OUTPUT 05 010 24 PORTFORIO by SatoRei WEB DESIGN お問合わせ お問合せページへ遷移するセクション。
25. 25 PORTFORIO by SatoRei WEB DESIGN commis
26. OVERVIEW ABOUT 制作期間 領域 2020/10 - 2020/12（2ヶ⽉） WEBデザイン ポジション/担当 WEBデザイナー / ディレクター 使⽤ツール Adobe XD / Illustrator “COMMIS”の企業ページと、主に出張シェフサービスを展開して いる“Dream-Like Kitchen”の事業内容ページのデザイン制作を担 当。クライアントとのサービスプロモーションからページ制作まで と、上流の⼯程から携わったプロジェクト。 ⼈数規模 デザイナー1名 / コーダー1名 プロジェクトリーダー（会社代表）1名 001 002 27 PORTFORIO by SatoRei WEB DESIGN commis
27. 27 PORTFORIO by SatoRei WEB DESIGN commis SERVICE OVERVIEW 003 Dream-Like Kitchen ドリームライクキッチン “それはまるで、夢のような⾷卓” 企業名 事業名 Dream-Like Kitchen のサービス概要 出張シェフ事業 デリバリー事業 ケータリング事業
28. 28 PORTFORIO by SatoRei WEB DESIGN commis DESIGN REGULATION SITE MAP 004 005 基本的な⽂字やコンテンツを構成する⽂章などのフォントはヒ ラギノ⾓ゴ ProNを使⽤。 タイトルや、情緒的に訴求したい部分にはNoto Serif JPを使 ⽤。 ヒラギノ⾓ゴ ProN Noto Serif JP フォント カラー 2 3 #171717 ブランドのコーポレートカラー。 #FFFFFF ⽂字は基本この⽂字⾊で統⼀。 #6a6a6a ⽂字は基本この⽂字⾊で統⼀。 企業ロゴ 1 ユーザーを⼆分し、それぞれのページの役割を明確にする 企業のことを知らない⼈に、認知してもらうページ →企業のコンセプト(世界観)・⼈柄/経歴・製作事例・依頼⽅法/Q&A                 └作った料理の事例紹介 企業のことを知っている（または理解した⼈）に、 事業内容を理解して発注してもらうページ →事業のコンセプト・事業内容詳細・料⾦表・事例紹介            └料理+空間デザインの事例紹介 企業ページ（コーポレートサイト） 事業内容ページ（サービスサイト） １：TOP ２：About ３a：Service A(LP) ３a：Case Study ３a：Plan List 4：Team 5：FAQ ６：Contact CMS
29. 29 PORTFORIO by SatoRei WEB DESIGN commis DESIGN OUTPUT 01 006 キービジュアル 企業コンセプト ⼤きな料理写真に企業ロゴを重ね、⾼級感と料 理をメインに⾒せることができるようにデザイ ンした。 写真は時間ごと切り替わる仕様になっている。 企業理念、サービスへの思いを情緒的に訴求す るためのセクション。 Scroll Down Scroll Down
30. ブランドメッセージ ブランドメッセージ ブランドメッセージ 会社概要 商品を開発したオーナーの商品へ対する思い や、商品が⽣まれた経緯を記載し購⼊者側へ情 緒的な訴求を訴えかけるように意識した。 商品を開発したオーナーの商品へ対する思い や、商品が⽣まれた経緯を記載し購⼊者側へ情 緒的な訴求を訴えかけるように意識した。 商品を開発したオーナーの商品へ対する思い や、商品が⽣まれた経緯を記載し購⼊者側へ情 緒的な訴求を訴えかけるように意識した。 サービスの概要ではなく会社の概要。 DESIGN OUTPUT 02 007 30 PORTFORIO by SatoRei WEB DESIGN commis
31. 31 PORTFORIO by SatoRei WEB DESIGN commis キービジュアル 事業（サービス）コンセプト 写真は時間ごと切り替わる仕様になっている。 企業理念、サービスへの思いを情緒的に訴求す るためのセクション。 DESIGN OUTPUT 03 008
32. 事業内容理念 事例写真 サービスのプラン詳細 ご利⽤の流れ 事業内容の権威性を⺬すセクション。ユーザー に権威性を訴求しサービスを使⽤して頂けるよ うに促すセクション。 写真を整列させるのではなく、あえて不規則に 散りばめてアニメーションをつけることで、⾼ 級感と感情的に揺さぶることを⽬的としていま す。 サービスの料⾦プランを主に説明したセクショ ン。⽮印を押下すると料⾦の更なる詳細が記載 されているモーダルウィンドウが出現する。 サービスをおご利⽤になるまでのフローを記載 したセクション。 DESIGN OUTPUT 04 009 32 PORTFORIO by SatoRei WEB DESIGN commis
33. 出張シェフの紹介 サービスの利⽤事例 インスタグラム よくある質問 実際にシェフがその場に出向いて料理を作る 為、顔が事前にわかっていた⽅が安⼼する為顔 写真は必須で掲載し、それぞれの得意料理や料 理にかける思いなどを記載している。 今まで利⽤したお客様の利⽤事例を掲載。 どのような料⾦形態で、シュチュエーションで 利⽤したか、どんな料理が提供されるのか、サ ービスの理解を深めてもらうためのセクショ ン。 公式インスタグラムの写真を掲載し、サービス の利⽤事例のようにサービスの理解を深めても らうためのセクション。 サービスに対するよくある質問を記載し利⽤す る前の不安要素やサービスへの理解度を⾼めて もらうためのセクション。 DESIGN OUTPUT 05 010 33 PORTFORIO by SatoRei WEB DESIGN commis
34. 34 PORTFORIO by SatoRei WEB DESIGN LOOP
35. 04 PORTFORIO by SatoRei UI/UX DESIGN OVERVIEW ABOUT 制作期間 領域 2019/12 - 2020/07（8ヶ⽉） UI/UXデザイン ポジション/担当 UI/UXデザイナー 使⽤ツール Adobe XD / Illustrator QRコードを使⽤した全く新しい業務改善ツール。 飲⾷店経営の問題を解決し、今まで枷となっていた問題をクリーンに 導⼊店舗とお客様（店舗利⽤者）双⽅が便利な世の中へ導きます。 ⼈数規模 デザイナー2名 / コーダー2名 総括ディレクター1名 / 営業3名 001 002
36. PROJECT BACKGROUND 36 PORTFORIO by SatoRei UI/UX DESIGN LOOP 003 注⽂から発注までを⼀元化 今までバラバラに利⽤していたサービスをまとめて業務効率アップ！ 複数の業者と契約して業務の管理をしているため、各業務間でのデータ連携が 困難。各業務でデータの使い回しができたら業務効率の改善に繋がりそう…。 来店客の注⽂から業者への発注までを1つのアプリで⾏うことで、各業務間での 連携が取れます。結果的に業務効率の向上、コストの削減に繋がります。 サービス導⼊前 サービス導⼊後 在庫算出 お会計 発注 提供 注⽂ QR読取 注⽂ 提供 お会計 在庫算出 発注
37. PRODUCT EXPLANATION 37 PORTFORIO by SatoRei UI/UX DESIGN LOOP ４つのポイント スマホ対応 提供メニューの更新から発注、在庫管理まで あらゆる作業がお⼿持ちのスマホで完結。 ⼈件費削減 お客様が⾃⾝の端末で注⽂するため、従業員 によるオーダー回収は不要です。 初期費⽤0円 今なら操作イラスト⼊りQRシール50枚まで 無料提供！導⼊費⽤は⼀切かかりません。 専⽤端末不要 ⾼価な端末は⼀切不要。QRコードを読み取 るだけでお客様のスマホが注⽂端末に。 004 ご利⽤イメージ QRからスマホで注⽂ 1 オーダーを⾃動受信 2 スピーディーに配膳 3 効率の良い店舗経営が可能 GOOD OPERATION! 4
38. PRODUCT GOAL MERIT 38 PORTFORIO by SatoRei UI/UX DESIGN LOOP 「ヒト」「モノ」「カネ」の無駄を 最⼩限に抑え、業務効率化のお⼿伝いをします。 料理の注⽂からお会計までをスマホで⼀元管理することで店舗経営に付き纏う「ヒト」「モノ」「カネ」 の無駄を最⼩限に抑えます。 注⽂は来店客ご⾃⾝のスマホから⾏うため、⾼額な機材の導⼊は不要です。 料理の注⽂は来店客のスマホから⾏う ため、店舗スタッフによるオーダーの 回収は不要です。 オーダー回収不要 ⼈件費削減 低価格な導⼊費⽤ ・ランニングコスト コロナ禍の今だからこそ 接触による感染を抑制 オーダー端末等の⾼額な機材の導⼊は 不要です。また、運⽤コスト・メンテ ナンスコストも掛からないため低コス トでの店舗経営が可能になります。 LOOPは来店客のスマホから注⽂を⾏ うサービスのため、接触によるコロナ 感染リスクを抑制します。 メリット 01 メリット 02 メリット 03 原価 30% 家賃 その他 20% 営業利益 10% 10% ⼈件費 30% ⾒えるコスト 求⼈広告費 ⾒えないコスト 広告出稿に伴う準備時間のコスト 応募者対応にかかるコスト ⾯接にかかるコスト 教育・研修コスト この30％を⼤幅に削減！ 005 006
39. DESIGN REGULATION フォント / フォントサイズ カラー関連 1 2 007 源ノ⾓ゴシック JP px 源ノ⾓ゴシック JP px 源ノ⾓ゴシック JP px 源ノ⾓ゴシック JP px TITLE / LABEL TITLE LABEL TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT MAIN COLOR # A B BASIC TEXT COLOR # SUB TEXT COLOR #B B B BOX BACKGROUND COLOR #E E E ATTENTION COLOR #F BASE COLOR #F F F ボタン アイコン ホバーアクション 3 4 5 AFFIRMATION SELECT CATEGORY CARD SUB CATEGORY CARD ITEM CARD TABLE CARD NEGATION BUTTON ACTIVE INACTIVE TABLE 合計⾦額 (税抜) ¥ , 会計時刻 1/1(⽉) 21:44 TABLE NUMBER SUB CATEGORY ITEM (税抜) ¥ , CATEGORY BUTTON AFFIRMATION ADD DELETE NEGATION EDIT ADD CART CONFIG CHECK GO BACK GO HOME ARROW GUIDE BUTTON BUTTON INACTIVE INACTIVE 39 PORTFORIO by SatoRei UI/UX DESIGN LOOP
40. 008 DESIGN OUTPUT 01 40 PORTFORIO by SatoRei UI/UX DESIGN LOOP 店舗側画⾯UI 店舗側（飲⾷店側）がお客様の注⽂情 報やメニューの編集、売上確認などを するための画⾯。 店舗側は主にPC端末やタブレット端 末で管理するシステムになっている。 ※掲載⼀部
41. 009 DESIGN OUTPUT 02 41 PORTFORIO by SatoRei UI/UX DESIGN LOOP プロダクトのメイン機能であるモバイ ルオーダーのUI。 利⽤するユーザー層に捉われることな く誰でも使いやすいようなUIを設計す ることを⼼がけている。 お客様側画⾯UI ※掲載⼀部
42. 42 PORTFORIO by SatoRei UI/UX DESIGN タベル
43. OVERVIEW ABOUT 制作期間 領域 2020/02 - 2020/05（4ヶ⽉） UI/UXデザイン、モーションデザイン、WEBデザイン ポジション/担当 UI/UX・グラフィック・モーションデザイナー 使⽤ツール Adobe XD / Illustrator / Aftereffect 関東地⽅の飲⾷店をまとめたキューレーションメディアです。 前途で紹介した“LOOP”と連携し2つのサービスを併⽤することで無駄 な待ち時間の削減、店舗の回転率の向上に繋がります。 ⼈数規模 デザイナー1名 / コーダー2名 001 002 43 PORTFORIO by SatoRei UI/UX DESIGN タベル
44. SERVICE OVERVIEW 003 44 PORTFORIO by SatoRei UI/UX DESIGN タベル 関東限定 飲⾷店紹介WEBメディア 関東地⽅限定の飲⾷店を紹介するWEBメディアの運営を⾏なっていま す。⾃社WEBサイトの他に、Instagramでも発信を⾏うことでより広 い層へのリーチが可能。 予約/事前注⽂ 来店 注⽂情報送信 セルフ注⽂ テーブル注⽂ FAST OPERATION 飲⾷店 利⽤客 来店客は      をじて希望の飲⾷店を検索します。 ⾏きたい飲⾷店が⾒つかったらサイト上から予約をし、早速料理を注 ⽂します。 事前に注⽂された情報は店舗に直接送信され、来店客は来店後に待ち 時間無く料理を⾷べられます。 その後、    でセルフ注⽂またはお会計をします。 弊社の2つのサービスを併⽤することで無駄な待ち時間の削減、店舗 の回転率の向上に繋がります。
45. LOGO DESIGN 004 45 PORTFORIO by SatoRei UI/UX DESIGN タベル サービスロゴ 1 ロゴ案 2 ロゴアニメーション 3 フォントは カタカナボーイ を使⽤。タベルの⽂字の前にはカタカナ の「タ」をモチーフにしたシンボルを使⽤し、飲⾷を彷彿とさせるスプー ンでデザインした。 コーポレートカラーの#F39E32を使⽤。⾷欲を減衰させる効果があると されている⻘系統の寒⾊は避け、⾷欲をそそるようなカラーをチーム内で 選定した結果、#F39E32に決定した。 Aftereffectを使⽤し、当サービスのコンテンツの読み込みローディング 中のアニメーションを作成。あえてアニメーションにロゴを使⽤しロゴで サービスの印象を与えることを⽬的としている。 アニメーションの動きは読み込みを連想させる回転などは使⽤せずバウン ドさせることで楽しい、優しい、ワクワクさせる印象を与えたくバウンド させるモーションにした。
46. WEB MEDIA PC DESIGN OUTPUT 005 46 PORTFORIO by SatoRei タベル 飲⾷店掲載 WEB画⾯（PC） ⼈気・有名飲⾷店をまとめたWEBメ ディアサイト。飲⾷店の予約もこのペ ージから⾏い飲⾷店管理側のページに 予約情報は転送される。 ※掲載⼀部
47. WEB MEDIA SP DESIGN OUTPUT 006 47 PORTFORIO by SatoRei タベル タベル 飲⾷店掲載 WEB画⾯（SP） ⼈気・有名飲⾷店をまとめたWEBメ ディアサイト。飲⾷店の予約もこのペ ージから⾏い飲⾷店管理側のページに 予約情報は転送される。 ※掲載⼀部
48. MANAGEMENT DESIGN OUTPUT 007 48 PORTFORIO by SatoRei UI/UX DESIGN タベル 店舗側 予約管理画⾯UI（WEBアプリ） タベルの予約サイトから⾶んできた予 約情報を管理するためのWEBアプ リ。タベルに掲載する店舗の情報変 更、予約管理ができる。 UIを設計するにあたって、飲⾷店側が サービスを利⽤するときに懸念してい る点として操作がわからない問題が調 査結果で分かった。 そのため、感覚で操作しやすいUI設計 を⼼がけ無駄な情報を省いたり、カレ ンダーアプリを参考にしたりと使いや すいUIにするために試⾏錯誤した。
49. MANAGEMENT DESIGN REGULATION 008 49 PORTFORIO by SatoRei UI/UX DESIGN タベル フォント / フォントサイズ 1 カラー関連 2 ボタン 3 アイコン 4 筑紫A丸ゴシック Bold px 筑紫A丸ゴシック Bold px 筑紫A丸ゴシック Bold px Hiragino Kaku Gothic Pro W px TITLE / LABEL TITLE LABEL TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT SUNDAY / FULL TABLES #FF F BOX BACKGROUND COLOR #FFFFFF SATURDAY # C MAIN COLOR #FCB BASIC TEXT COLOR # D D D SIDEBER COLOR #FF D AFFIRMATION RETURN RESERVATION CALENDAR（DAY） RESERVATION TIME MONTH DAY SWITCHING BUTTON RESERVATION CALENDAR（MONTH） SATURDAY WEEKDAYS SUNDAY NEGATION ACTIVE この内容で登録する キャンセル ⽉ ⽇ ⽉ ⽇ 10件 10件 ⼈数 30名 予約 01 満席 10件 10件 ⼈数 30名 予約 01 空有 01 空有 01 01 01 A個室 定員数 10~20名 A個室 定員数 10~20名 ヤマダ タロウ 18:00~19:00 12名 ヤマダ タロウ 19:00~22:30 12名 なりすまし店舗を選択する CANCEL TIME_END DETAILS CHECK_ON EDIT COPY ADD CHECK_OFF ARROW DELETE STORE BOTTON_ON NOSMOKING PEOPLE UNLOCK DINNER USER LOCK LUNCH IMPERSONATION BOTTON_OFF SMOKING ARROW_ TOGGLE_ON NEW TOGGLE_OFF CONFIRM TIME_START AROW
50. MANAGEMENT DESIGN OUTPUT 009 50 PORTFORIO by SatoRei タベル 予約管理画⾯UI 店舗側（飲⾷店側）がお客様の注⽂情 報やメニューの編集、売上確認などを するための画⾯。 店舗側は主にPC端末やタブレット端 末で管理するシステムになっている。 ※掲載⼀部
51. THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU balkansugar1211@gmail.com Mail