開発・制作してきたもの
Nimble(Webチャットアプリ)
【概要】多機能チャットアプリ
【開発期間】3ヶ月
【開発人数】3人
【役割】開発・UI設計
【詳細・開発秘話】ログイン機能、チャンネルが分かれており、自分でチャンネルを作成することもできます。またスタンプも送信出来たり,Twitterでいうところのファボ💓機能に加えて、画像を送れたりファイルの共有ができます。(txt,pdfなど多くの拡張子に対応しています)
【使用した主な技術】:Express/Socket.io/FirebaseRealTimeDB・Storage・Authentication/JQuery/bootstrap
ビデオチャットWebアプリ
【概要】SkyWayAPIを使用した1対1ビデオチャットアプリ
【開発期間】1週間
【開発人数】1人
【役割】開発・UI設計
【詳細・開発秘話】上のチャットアプリNimbleのビデオチャット機能として付け加えました。字幕起こしボタンを押すとリアルタイムにお互いしゃべった言葉が文字おこしされます。
【使用した主な技術】:SkyWayAPI, Web Speech API,FirebaseRealTimeDB
HF24 ジムスタッフ業務ツールUI設計
【概要】業務システムの設計
【開発期間】2週間
【開発人数】2人
【役割】UI設計・開発
【詳細・開発秘話】ジムのスタッフの倦怠管理、取引先法人情報、ジムの会員情報の確認などができるWEB業務システムのUI構築をしました。社内のエンジニアの方がバックエンドが構築途中の段階で、並行してUI構築を任されました。最初はCSHTMLの存在自体知りませんでしたが、ユーザーの権限ごとに表示するコンテンツを切り替えるなどの処理も行いました。
【使用した主な技術】:CSHTML/bootstrap/CSS/JS/
FC募集ページ
【概要】HYPERFIT24フランチャイズ募集ページの作成
【開発期間】3週間
【開発人数】1人
【役割】デザイン・コーディング
【詳細・開発秘話】アルバイトでの最初の業務にてフランチャイズ募集ページを作成しました。表示するコンテンツの選定→AdobeXDでサンプル作成→コーディングのステップを踏んで作成しました。9割がた画像のデザインも一人で作成したのですが、Adobe系ツールをガッツリ触れることができいい経験になりました。
【使用した主な技術】:PhotoShop/Illustrator/XD/html/css/js
HYPERFIT24 LP
【概要】HYPERFIT24ランディングページの作成
【開発期間】2週間
【開発人数】1人
【役割】ペルソナ設定・デザイン・コーディング
【詳細・開発秘話】HYPERFIT24事業のLPを作成しました。ペルソナを設定し、アピールポイントの選定、コーディングを行いました。これはLPですが、どのサービスにおいてもペルソナを意識してサービスを作っていくので、実務でペルソナを自分で設定し、0→1を行えたのは非常にいい経験になりました。
【使用した主な技術】:PhotoShop/Illustrator/XD/html/css/js
Instagram投稿の埋め込み
【概要】Instagramの投稿表示
【開発期間】1週間
【開発人数】1人
【役割】投稿埋め込み実装
【詳細・開発秘話】バイトにて自社サイトはSnapwidgetという有料サービスを使ってにInstaの投稿を表示させていたので、Instagram Graph APIでの実装を行いました。作成よりも、InstaAPIの無期限トークン取得までが大変でした。
【使用した主な技術】:HTML/CSS/JS/Instagram Graph API
ネットカフェ新サイトの作成
【概要】ネットカフェ(@time)サイトの改修
【開発期間】2か月半
【開発人数】1人
【役割】サイトのデザインからコーディングまですべて
【詳細・開発秘話】SUNMUSICでのアルバイトにて古くなったサイトを新しく作り直すことを任せられました。競合のネットカフェサイトを研究し、サイトマップの見直しからXDでデザインを行いました。食事メニュー一覧や入荷した漫画タイトル一覧、オンラインゲームタイトル一覧などは、更新頻度が高いのでVue.jsを使って無駄のないコード+保守しやすいように設計を心掛けました。幼いころから同級生と利用したこともあり自分が携わることができ、いい経験になりました。
【使用した主な技術】:HTML/TailwindCSS/Vue.JS/Slick
hanayume事業
【期間】2022/08/15~2023/1/31(予定)
【行った業務】
- ・playwrightを使ったE2Eテストの実装
- ・WindiからTailWindCSSへの移行
- ・結婚指輪のソート機能の実装
- ・Svelteでのweb-componentsの実装