## プロダクト概要
Coloma for MT4はアルゴリズムトレードアプリです。
このサービスは、アクティブ投資経験はあるが成績が上がらない個人投資家向けに、アルゴリズムトレードを容易に行える環境を提供することを目的に開発されました。
ユーザーは株式会社MAZINが提供する投資アルゴリズムを購入し、そのアルゴリズムのデモを実施することができます。
デモの成績を観察し、実際のトレードを開始することで、アルゴリズムに関する専門的な知識なしにトレードを開始することができます。

## メインユーザー
アクティブ投資経験はあるがうまくいっていない個人投資家  
ペイン：
* 日々の値動きにメンタルを左右され、投資計画を機械的に実行できない
* アルゴリズム開発のノウハウはなく機械的な取引が困難である 
ニーズ：
* メンタルの影響をなくし、安定したトレードを行いたい
* 安定した投資収益を得たい
* 常にPCを監視するような環境はいやだ

## メインUX・フロー
![Coloma-forMT4_flow](//images.ctfassets.net/5ows6twnzvv3/6qBdgSTAh9Ai0eqVqQztdr/fb0e455c6be33606cd5631b333df30b9/coloma_MT4_flow.png)

## Library Plan
![coloma-forMT4-library](//images.ctfassets.net/5ows6twnzvv3/3KpkP8AMixDkKAdAVbZCsO/a9f97baac27af1e6e0aae71caf8f7957/library.png)
color
componentライブラリ

## 取引中アルゴリズム詳細
<div class="flex">
<p class="in-flex">
アルゴリズムの詳細をグラフで表示。
ひと目で資産の増減を確認でき、その後に詳細を確認できる構造に設計している。
</p>
<img 
class="in-flex"
src="https://images.ctfassets.net/5ows6twnzvv3/7tw4g4p5Ym1egs4L9eBook/e0aa19268fb91f5ea4531cf1958bc910/algorithm.png"
alt="coloma-forMT4 algorithm" 
>
</div>

## 取引中アルゴリズム一覧
<div class="flex">
<p class="in-flex">
各アルゴリズムの主要指標の成績を一括で外観できる成績リスト。
アルゴリズムのON/OFF判断をひと目で判断できることを目的に設計。
</p>
<img 
class="in-flex"
src="https://images.ctfassets.net/5ows6twnzvv3/7rIIHS7kn433RIVfgcdwLH/cc5102b68a3fb3322b656726b64a60e3/results.png"
alt="coloma-forMT4 algorithm resultu" 
>
</div>

## 制作データ
作成期間 : 1ヶ月
私の作成物 ： アプリケーションフロー アプリUI UIライブラリ　


Coloma-forMT4

Coloma_forMT4

## プロダクト概要
株式会社MAZINの 製造業向けAIサービスのパンフレットです。

## ユーザー像
機械部品製造を中心とする中小企業の、システム導入の裁量を持っているクラスのメンバー

### ペイン
* 業務効率化は図りたいが、製造業向けAIシステムは大規模かつ高価で手が出せない
* 立ち上げで、どのような要件を決定すればいいかわからない
* 製造業の効率化システムの運用経験がない
* システムの学習および教育コストが大きい
* ソフトウェアがそもそもどのように業務効率化に寄与するのかイメージしづらい
* 具体的に自分の環境でワークするのかわからない
* その手のサービスはたくさんあるが信用しづらい

### ニーズ
* 安くて機能するAIシステムは使ってみたい
* イニシャルコストは抑えたい
* 運用コストは小さくして欲しい
* 学習・教育コストも小さく抑えたい
* ソフトウェアを使った改善のイメージが知りたい
* 具体的にできることを教えて欲しい
* 信用のある業者に頼みたい

## 要件
* サービスの小回りが聞くことを訴求する
* 導入・立ち上げ時の手間の小ささを訴求する
* 価格を表示する
* 導入例を示す
* 導入フローを表示する
* オフィシャルな安心感が欲しい

## デザイン
* サービス面での特徴である「低価格・フレキシビリティ・一気通貫の導入支援」について訴求する
* 実際の導入例としてどんなことができるのかを示す。
* 導入フローを示し、ソフトウェアの改善活動の特徴を説明する
* クロージングとして価格を指定する
* 内容ページでは寒色ベースにすることで、清潔で安心感のある画面を目指す

## 制作データ
作成期間 : 1週間
作成物 ： 

mazin publish

株式会社MAZIN サービスパンフレット

## プロダクト概要
株式会社MAZINの「coloma」というサービスにて提供する、投資アルゴリズムのテスト用プロダクトです。  
開発したアルゴリズムが実際に効果を上げるかをテストし、成績を監視するための開発用環境です。  
初期開発では機能を減らし実装するが、後々アルゴリズム開発者に向けて開発環境として解放するという計画で、理想図をデザインしました。

## メインユーザー
株式会社 MAZIN社員　→　投資アルゴリズム開発者
### ペイン：
* 投資アルゴリズム作成は可能だが、実際のテスト環境の準備が大変である
* ステークホルダーにテスト結果をわかりやすく見せるための作業が大変である
* 開発アルゴリズムが多く、一覧できる環境が欲しい
* 個人でのアルゴリズム開発に限界を感じている
### ニーズ：
* 投資アルゴリズムのテスト環境をすぐに立ち上げたい
* グラフィカルに成績を見たい
* 複数の開発アルゴリズムをまとめて観察する方法が欲しい
* チームでのアルゴリズム開発機能が欲しい

## メインUX・フロー
![algorithm-dashboard-main-flow](//images.ctfassets.net/5ows6twnzvv3/2TESTixEZSbohQilDXF9d0/5296927a8564c8b6865b1006ebe7d940/main-flow.png)

## 取引中アルゴリズム画面
![algorithm-dashboard-list-page](//images.ctfassets.net/5ows6twnzvv3/1socjihFGDF8wmywtuMqJA/61962ddcc1b40a984bd2e9cf16d74316/mazin_dashBoard_list_page.png)
各アルゴリズムの成績と現在の計算状況を見せる画面

## チーム招待画面
![algorithm-dashboard-team-page](//images.ctfassets.net/5ows6twnzvv3/315cD6eWffxcvU06UP6a2o/9e3fd7a8182a5476d7a0d6304214bf19/mazin_dashBoard_team_page.png)
多人数での開発に当たって、チームメンバーを招待する際の画面  
メンバー権限によって以下のような操作制限を設ける
![algorithm-dashboard-authority](//images.ctfassets.net/5ows6twnzvv3/53WR83Ub9Usi2j1TYw4oU2/17803698cb7f17b749746006e2f24785/authority.png)

## Pages
![algorithm-dashboard-pages](//images.ctfassets.net/5ows6twnzvv3/6TGVk1lCiJPdmlEwuluPF9/bed00ec2b71d01b3df1c2a9aecd98baf/mazin_dashBoard_pages.png)

## 制作データ
作成期間 ： 1ヶ月
作成物 ： アプリケーションフロー アプリUI UIライブラリ


algorithm-dashboardのキービジュアル 

algorithm-dashboard-key_visual

アルゴリズム開発ダッシュボード

## プロダクト概要
SELF株式会社のプロダクト「SELF TALK」のプロダクトページのデザイン改修およびコーディング実績です。
SELF TALKはチャットボットを通したユーザーとの会話で、不要なコールセンター稼働の削減、CV率の向上や直帰率の低下を実現するサービスです。  
[SELF TALK top](https://self.systems/demo02/self-talk-2/)  
[SELF TALK 下層ページ](https://self.systems/demo02/self-talk-information/)

## 背景と問題
* 「SELF TALK」は抽象度が高く内容が伝わりづらいITシステムであった
* Webサイトのみでのシステムの説明が十分にできていなかった
* 商談時の説明にて詳細なシステム説明や軽いヒアリング、レスポンスを行う
* リードは既に存在し、営業により製品名は知っている程度

## メインユーザー・ユーザーフロー
CVや直帰率改善を考えている現場のWeb担当者
ユーザー像：
* 製品名を聞いたことがある
* 自社Webサービスの成績改善の方法を探している
* 自社で行える改善運動意外の方法も検討している
* できるなら外注に投げてしまいたい
* 効果のあるものかどうか不安である

ユーザーフロー：
画像
フローより、最低限以下の情報提供が必要
* 上長へ相談できるための情報
* 不安を払拭するための導入事例
* 導入先企業
* 導入企業の実際の声
* 導入時の効果の証左
* 導入までの期間の明示

## 戦略
* 資料請求をCVとし、Webページのみでの集客は不適と判断
* ページ内に実際に「SELF TALK」システムを導入し使用感を訴求
* 導入した「SELF TALK」システムをCVへのメインルートとする
* Webページは資料として使用してもらう
* Webページはファクトを伝えることを中心にし、「SELF TALK」システムで使用感や概要を訴求する

## 目的
* 「SELF TALK」に興味を持ってもらい、資料請求へつなげる
* 「SELF TALK」システムを実際に触ってもらう
* ユーザーに「SELF TALK」システムを触ってもらい使用感を伝える
* ユーザーが上長や責任者に「SELF TALK」システムをプレゼンしやすい情報を提供する

## 使用技術
* WordPress
* HTML
* CSS
* JavaScript (JQuery)
* PHP

## 制作データ
作成期間 : 2週間
作成物 : WebUIデザイン 内部クリエィティブ コーディング ワードプレステンプレート化


self-talk

SELF TALK プロダクトページ

## プロダクト概要
自身のポートフォリオも。
技術修作であり、より深く制作物の仕組みを理解する目的で作成した。
随時更新、変更予定。

## 使用技術
jamstack技術の修作として以下の技術を採用した。
* React js
* Typescript
* Next js
* styled components
* Headless CMS（contentful）

## 制作背景・目的
背景：
2021年5月より本格的に重視され始めるGoogleのcore web vitals指標を向上すべく、
レスポンスの早いwebサイト制作技術の習得を目的とした。  
単純なポートフォリオとしての作品集ではなく、制作時に得た技術知識などをBlogとして書き溜めていき、コンテンツSEOの実験物として後々利用する。

目的：
* ポートフォリオサイトとして使用する
* Blogとして使用する(現在未達)
* SEOの実験を行う(現在未達)

## Design plan
![my-blog-design-plan](//images.ctfassets.net/5ows6twnzvv3/6jUFVFXQ76MY9pUIbuCaVj/79a2e07d8256624e36ed2b0bc2bc0ec8/my-blog_library.png)

[サイトマップ](https://docs.google.com/spreadsheets/d/1hKzxtqdk_sacuD9vuqbYXypmplv9ZuH_uLETvKrvRY/edit?usp=sharing)

## Data model

```txt:category_model.txt
  categoryName : カテゴリーの表示名
  categorySlug : urlで使用するカテゴリー文字列
```

```txt:post_model.txt
  thumbnailImage : サムネイルのurl
  title          : タイトル文字列 
  slug           : urlで使用する文字列
  category       : category_modelと紐づいたカテゴリーオブジェクト
  mainContents   : 記事詳細のメイン文 マークダウン 
  excerpt        : 記事コンポーネントに表示する抜粋文
```

## 導線計画
CV：PVの向上とする
流入仮説：
オーガニック検索　→　各コンテンツ　→ 別記事への回遊
画像を作る

## 制作データ
作成期間 : 2ヶ月  
私の作成物 ： サイトフロー UI UIライブラリ　データモデル設計　url設計 


my-blog-key-visual

my portfolio

## プロダクト概要
Coloma WebはColoma for MT4アプリのアルゴリズム販売のECショップとなります。
このサービスは、アクティブ投資経験はあるが成績が上がらない個人投資家向けに、株式会社MAZINが提供する投資アルゴリズム販売のためのショップとなります。

## 要求
* 高額商品を取り扱うため、チープな世界観にはして欲しくない
* 商品の成績・特徴を一眼で伝えたい
* 講座登録画面、商品購入画面では不安感をもたれないよう丁寧に各ステップを示す

## 要件
* アルゴリズムの未来感と、結果を出してくれる印象を目指しシックな印象を採用
* 商品カードにアルゴリズムの成績をリアルタイムに反映
* ユーザーの登録 → 購入完了のフローは購入意思がはっきりとしたタイミングから行う
* お客様の講座登録が必要

## メインUX・フロー
![coloma_webのフロー図](https://images.ctfassets.net/5ows6twnzvv3/6624RhfNBhN50pnd2nZNXN/bc38d177d8255ac1b23fab8a42cf9973/flow.png)
### 購買UXフロー要件

ユーザーは購入までに以下の登録が必要である
* ユーザー登録
* クレジットカード登録
* 月額プラン登録

これらの登録を逐一ユーザーに任意で行わせることはストレスフルな体験になるので、  
「購入」ボタンの押下(購入モチベーションが高い状態)を起点に各情報登録を行うフローとした。

### 完成フローイメージ
![coloma-web_flow_image](//images.ctfassets.net/5ows6twnzvv3/5YpnMvtfekd3U1cUdoV3fV/fe8d7049c91f3189b0a307f9c84b7d43/coloma_web_flow_image.jpg)

## Topページ
![coloma-web_top](//images.ctfassets.net/5ows6twnzvv3/3Fgei71t0PjnG6frWkngr/7a7214d09214057970a61b8a2064ae11/coloma_web_top.jpg)
商品であるアルゴリズムを並べ、投資に関わるサービスであることをアナウンスする。
また、各アルゴリズムカードでは、投資成績に関わる主要指標および実際の結果を一眼で外観できるようにした。  
ユーザーは実際のアルゴリズムの効果を見て詳細ページに移動できる。

## 商品詳細ページ
![coloma-web_purchase](//images.ctfassets.net/5ows6twnzvv3/4kPaL1qxiavbC2mYTqM3AR/c0bd9a305d20c25ed4797b236213529b/coloma_web_detail.jpg)
各アルゴリズムの詳細な内容および、実際のテスト結果を網羅する。

## Pages
![coloma-web_pages](//images.ctfassets.net/5ows6twnzvv3/4GOQLQVp8YmNBOZXwXHMyd/95f7bc136a096316fd9a20afa1bbecc6/coloma_web_pages.jpg)

## 制作データ
作成期間 : 2ヶ月
私の作成物 ： ユーザーフロー UI UIライブラリ　


coloma-webのキービジュアル 画像

coloma-web_key_visual

Coloma_wab

<h2>プロダクト概要</h2>
<p>自身のポートフォリオも。
技術修作であり、より深く制作物の仕組みを理解する目的で作成した。
随時更新、変更予定。</p>
<h2>使用技術</h2>
<p>jamstack技術の修作として以下の技術を採用した。</p>
<ul>
<li>React js</li>
<li>Typescript</li>
<li>Next js</li>
<li>styled components</li>
<li>Headless CMS（contentful）</li>
</ul>
<h2>制作背景・目的</h2>
<p>背景：
2021年5月より本格的に重視され始めるGoogleのcore web vitals指標を向上すべく、
レスポンスの早いwebサイト制作技術の習得を目的とした。<br>
単純なポートフォリオとしての作品集ではなく、制作時に得た技術知識などをBlogとして書き溜めていき、コンテンツSEOの実験物として後々利用する。</p>
<p>目的：</p>
<ul>
<li>ポートフォリオサイトとして使用する</li>
<li>Blogとして使用する(現在未達)</li>
<li>SEOの実験を行う(現在未達)</li>
</ul>
<h2>Design plan</h2>
<p><img src="//images.ctfassets.net/5ows6twnzvv3/6jUFVFXQ76MY9pUIbuCaVj/79a2e07d8256624e36ed2b0bc2bc0ec8/my-blog_library.png" alt="my-blog-design-plan"></p>
<p><a href="https://docs.google.com/spreadsheets/d/1hKzxtqdk_sacuD9vuqbYXypmplv9ZuH_uLETvKrvRY/edit?usp=sharing">サイトマップ</a></p>
<h2>Data model</h2>
<pre><code class="language-txt:category_model.txt">  categoryName : カテゴリーの表示名
  categorySlug : urlで使用するカテゴリー文字列
</code></pre>
<pre><code class="language-txt:post_model.txt">  thumbnailImage : サムネイルのurl
  title          : タイトル文字列 
  slug           : urlで使用する文字列
  category       : category_modelと紐づいたカテゴリーオブジェクト
  mainContents   : 記事詳細のメイン文 マークダウン 
  excerpt        : 記事コンポーネントに表示する抜粋文
</code></pre>
<h2>導線計画</h2>
<p>CV：PVの向上とする
流入仮説：
オーガニック検索　→　各コンテンツ　→ 別記事への回遊
画像を作る</p>
<h2>制作データ</h2>
<p>作成期間 : 2ヶ月<br>
私の作成物 ： サイトフロー UI UIライブラリ　データモデル設計　url設計</p>


Uchida Design

my portfolio

プロダクト概要

使用技術

制作背景・目的

Design plan

Data model

導線計画

制作データ