Web開発

特殊管楽器を販売するECサイト「Kokeshi Arts」のランディングページ最適化を実現するため，デザイン改修・実装ならびにmeta属性の改善を行いました．過去の問合せなどから顧客の特性を整理し，どんな情報を提供して購入してほしいかコンテンツ整理の段階から改善に携わりました．

#### 制作時間
2ヶ月

#### 担当範囲
- 過去の問い合わせからペルソナの再定義
- UI/UXデザイン改修，Wixによる実装
- Metaデータの整理・改修

#### 実績
- 改修後90日でインプレッション数200%増，クリック数40%増
- 改修前と比べて、月間での平均問い合わせ数30%増

#### 用いた言語・技術
Wix, Google Search Console

[サイトを見る](https://www.shop.kokeshi-arts.biz/)

特殊管楽器ECサイトの改修

サイト訪問者に「Music is Yours. – 諦めていたあの楽器を。」というメッセージを届けるため，トップページのファーストビューには楽器を吹いている目力のある人の画像を選定。

トップページ

このページではなぜリーズナブルな価格で高品質な楽器を提供できるか，その秘密と楽器の音色などの特徴を紹介しています．サイト訪問者に安価でも楽器を安心してレンタル・購入できること伝えるために当ページの作成を企画しました．

ブランドの紹介ページ

商品一覧ページ

Thumbnail - Kokeshi

Kokeshi Arts - Instrument EC Site

これまでの制作物をまとめたポートフォリオページを作成しました．当ページはJAMStack形式を採用しており，ReactとHeadless CMSをAPIで連携・実装しました．さらに，問合せフォームから送信された内容はSendGrid APIを用いたメール通知が行われます．

#### 制作期間
- 英語版の作成: 3週間
- i18nの適用＋日本語化: 5週間

#### 利用した言語・技術
HTML, CSS(Bootstrap), JavaScript (React, Next.js), Netlify, Vercel, SendGrid API

[Github](https://github.com/yasmro/portfolio-v5)

ポートフォリオサイト (2020)

Top page

Works page

Own Portfolio 2020

Own Portfolio Site version 2020

学生時代に所属していた奈良高専吹奏楽部の公式サイトをリニューアルする依頼を受け吹奏楽部の後輩と共にチームで実装しました．デザイン・フロントエンドを担当し，Vue.jsでコンポーネントやページをデザイン・実装しております．配色デザインについては奈良高専吹奏楽部が創部以来，マーチング公演で装うパレードコスチュームの配色に合わせております．

#### 制作時間
5ヶ月

#### 担当範囲
フロントエンド実装，デザイン

#### 用いた言語・技術
HTML, CSS(Vuetify), JavaScript (Vue.js)

[サイトを見る](https://nitncwind.org/)

奈良高専吹奏楽部公式Webサイト

コンサートトップページ

コンサート詳細ページ

コンクール実績ページ

Brass Band Official Website

本サイトはタスクを管理するシステムとなっております．メールアドレスとパスワードを用いたアカウント管理をFirebase Authenticationで実装しました．さらに各アカウント間でタスクの生成・管理を行うことができ，ダッシュボードでは今日が期限の未完了タスクを表示し優先順位を把握できるように実装しました．

#### 制作時間
1週間

#### 用いた言語・技術
HTML, CSS (Element UI), JavaScript (ReactJS), Firebase Authentication, Firestore, Firebase Hosting

[サイトを見る](https://react-todo2021-crud.web.app)

[Github](https://github.com/yasmro/react-firebase-todo)

タスク管理システム

Home Dashboard

Login Authentication

Task List

Show Task

Edit Task

Detail Task - Confirmation Dialog

Task Manager

本サイトはファイル音源をアップロードすると，その音源に含まれている音声をテキスト化します．また，キーワード検索機能も追加されており，認識されたテキストに対して検索用語があるかどうか表示されます．

#### 制作時間
1週間

#### 用いた言語・技術
HTML, CSS(Bootstrap5), JavaScript (ReactJS, ExpressJS), IBM Watson Speech to Text

[動作キャプチャを見る](https://github.com/yasmro/speech-to-text/tree/main/test_capture)

[Github](https://github.com/yasmro/speech-to-text)

音声認識アプリケーション

認識結果

Voice Recognition

本サイトは，現金の入出金を管理するアプリケーションとなっております．ユーザへの実用性・使いやすさを担保した上で，管理画面臭いUIにならないように設計しました．CSSフレームワークはシンプルなUIを提供するUIKitを選定し，フォームの入力をなるべく簡素化しました．実装はフロントエンドをReactで実装し，バックエンドはDjango RESTframework（Python）で実装しました．現在はフロントエンドとバックエンドとの連携作業を行っています（現在はフロントエンドで作成したものをFirebaseにホスティングし，DBはローカルストレージを利用）．

#### 制作時間
- フロントエンド: 8時間
- バックエンド: バックエンド単体は完成し，APIでフロントエンドとの連携を実装中

#### 用いた言語・技術
HTML, CSS(UIkit), JavaScript (jQuery and ReactJS), Python (Django Restframework)

[サイトを見る](https://yasumaro-test.web.app)

[Github(フロントエンド)](https://github.com/yasmro/household-frontend)

[Github(バックエンド)](https://github.com/yasmro/household-backend)

家計簿アプリ

Dashboard Page

Create Record Form

Edit Record

Delete Record - Confirmation

Delete Record - Successful Notification

Household Expenses

本サイトはOpenWeatherMap APIを用いて天気予報を取得し表示させるサービスとなっております．フロントエンドはReactを用いて作成しております．

#### 制作時間
16時間

#### 用いた言語・技術
HTML, CSS(Bootstrap4), JavaScript (ReactJS), OpenWeatherMap API

[サイトを見る](https://yasmro.github.io/weatherappreact/)

[Github](https://github.com/yasmro/weatherappreact)

お天気アプリ

Weather Forecast

Weather App

本サイトはAPIを用いてサードパーティのデータベース（CocktailDB）と接続し，指定したカクテルの概要や材料を取得し表示させるサービスとなっております．フロントエンドはReactを用いて作成しております．

#### 制作期間
12時間

#### 用いた言語・技術
HTML, CSS(Bootstrap4), JavaScript (ReactJS), CocktailDB API（外部データベース）

[サイトを見る](https://yasmro.github.io/cocktailappreact/)

[Github](https://github.com/yasmro/cocktailappreact)

カクテルDB

Cocktail Detail Page

Cocktail Search Page

Cocktail App

本サイトはコンピュータと対戦できる三目並べのWebアプリケーションとなっております．縦・横・斜めいずれか一列揃えられればゲーム終了となります．

#### 機能
##### 1. 対戦相手の実装
対戦相手(AI)のレベルは3段階となっており，それぞれ下記のアルゴリズムに則りコマを置く様にしています．
- Lv.1：「1」から空いているところに順番に置く
- Lv.2：ランダムに置く
- Lv.3：どちらかのプレイヤーにリーチが掛かっている場合は，ラインができるマスにコマを置くことで，プレイヤーの勝利を阻止するか，AIが勝利できるようにする

##### 2. ローカルストレージを用いた戦績の記録
ローカルストレージを用いて何戦何勝したのか記録することができます．また，リセット機能を用いて戦績をリセットすることもできます．

#### 制作期間
6時間

#### 利用した言語・技術
HTML, CSS, JavaScript, Netlify

[Github](https://github.com/yasmro/tic-tac-toe)

[サイトを見る](https://tictactoe-yasmro.netlify.app/)

三目並べゲーム

ゲーム画面

Tic-Tac-Toe

Tic-Tac-Toe Game

Shopifyが提供しているStorefront APIをNext.jsと連携して，JAMStackなECサイトを構築してみました．

#### 用いた言語・技術
HTML, CSS(Tailwind), JavaScript (React, Next.js), Vercel, Shopify, Shopify Storefront

[サイトを見る](https://next-shopify-example.vercel.app/)

[Github](https://github.com/yasmro/next-shopify-example)

JAMStack ECサイト

商品詳細ページ

決済ページ（Shopifyの標準機能のページを利用）

JAMStack EC-Site

アート

2009年（中学1年）より部活動・趣味で書道で作品づくりを行っております．部活動中では20以上の賞を獲得しており，過去には演奏会の看板の作成なども行いました．現在は筆ペン・ボールペンで書いた後，PCで編集したものをInstagramにアップしております．また，作成した書道作品からいくつかNFTへ出品しております．

#### リンク集
- [Instagram](https://www.instagram.com/yasmro1226/)
- [NFTアート - Opensea](https://opensea.io/Yasmro_Yu_Ohno)

書道

Beauty II

Sakura Kakushi

Night Dew

Business Card

Smell in the rainy season

Dusk – Minatomirai

404 - Not Found

紅に染まるまで雨に打たれて...

Be Drenched In The Rain Until Painted Crimson

New Year's Greeting 2020

"New" Year's Greeting 2021

破 - Beat

New Year's Greeting 2022

賀正2023「卯」－満月を望む去年今年（こぞことし）の兎

賀正2024 － 「飛龍乗雲」〜レックウザの咆哮〜

Shodo

ハードウェアシステム

本プロジェクトは視覚障がい者の歩行支援を目的に，簡易型のサングラス型障害物検知システムをデザイン・制作しました．本システムは路上にある障害物までの距離を超音波センサが測定し，検知範囲であればリストバンドの振動で対象者に通知します．制作にあたり，対象者（視覚障がい者）のニーズや歩行特性を論文等で調査した上で，三次元の球体座標系に検知範囲を設定しました．また設定した範囲に基づき，センサの選定・測定距離に対する制御のプログラムの制作を行いました．

#### プロジェクト期間
4ヶ月（2017/10〜2018/1）

#### 担当範囲
プロジェクトリーダー・マネジメント，Arduinoコーディング，検出範囲のデザイン

#### 利用した言語・技術
Arduino, Frizing, Tera Term, Fusion360, 数学

Works作品

カテゴリー選択