<h1 id="hf8271ce8c2">非対面のtoBのキャラクター応対受付サービス（SPA）</h1><p>選択したキャラクターがビデオチャットのような会社の受付サービス（Angular9）<br></p><h2 id="h2a709494f8">担当</h2><ul><li>ディレクション</li><li>コーディング(HTML CSS typescript Angular9 firebase)</li></ul><p><br></p><h2 id="hd60e750ebf">使用ソフト</h2><ul><li>VS code</li></ul>

選択したキャラクターがビデオチャットのような会社の受付サービス（Angular9）

非対面のtoBのキャラクター応対受付サービス（SPA）

<h1 id="h7cca834466">外国人旅行者用トラベル案内サービス（Rails）</h1><p>外国人旅行者にオシャレな場所を案内または、登録者自身も投稿するためのサービス<br></p><h2 id="h2a709494f8">担当</h2><ul><li>ディレクション</li><li>デザイン</li><li>コーディング(HTML CSS js Ruby Ruby on Rails)</li></ul><p><br></p><h2 id="hd60e750ebf">使用ソフト</h2><ul><li>VS code</li></ul>

外国人旅行者にオシャレな場所を案内または、登録者自身も投稿するためのサービス

外国人旅行者用トラベル案内サービス（Ruby on Rails）

<h1 id="h67ff001fc8">製品のブランディングサイト</h1><p>製品のロイヤリティ向上の為に制作したブランディングサイト。<br>雑誌風のデザインとマウスによる画像比較制御を行いました。<br></p><h2 id="h2a709494f8">担当</h2><ul><li>ディレクション</li><li>デザイン</li><li>コーディング(HTML CSS js jQuery)</li></ul><p><br></p><h2 id="hd60e750ebf">使用ソフト</h2><ul><li>Adobe Photoshop</li><li>Adobe Illustrator</li><li>VS code</li></ul>

製品のロイヤリティ向上の為に制作したブランディングサイト。
雑誌風のデザインとマウスによる画像比較制御を行いました。

製品のブランディングサイト

<h1 id="hf529341231">製品のブランディングサイト（下層ページ）</h1><p>製品のロイヤリティ向上の為に制作したブランディングサイト。<br>雑誌風のデザインとマウスによる画像比較制御を行いました。<br></p><h2 id="h2a709494f8">担当</h2><ul><li>ディレクション</li><li>デザイン</li><li>コーディング(HTML CSS js jQuery)</li></ul><p><br></p><h2 id="hd60e750ebf">使用ソフト</h2><ul><li>Adobe Photoshop</li><li>Adobe Illustrator</li><li>VS code</li></ul>

製品のブランディングサイト（下層ページ）

<h1 id="h99832b65b2">アパレルのブランディングサイト</h1><p>メンズの衣料品の為に制作したブランディングサイト。<br></p><h2 id="h2a709494f8">担当</h2><ul><li>ディレクション</li><li>デザイン</li><li>コーディング(HTML CSS js jQuery)</li></ul><p><br></p><h2 id="hd60e750ebf">使用ソフト</h2><ul><li>Adobe Photoshop</li><li>Adobe Illustrator</li><li>VS code</li></ul>

メンズの衣料品の為に制作したブランディングサイト。

アパレルのブランディングサイト

<h1 id="haf2fc7fb76">アパレルのブランディングサイト（下層ページ）</h1><p>メンズの衣料品の為に制作したブランディングサイト。<br></p><h2 id="h2a709494f8">担当</h2><ul><li>ディレクション</li><li>デザイン</li><li>コーディング(HTML CSS js jQuery)</li></ul><p><br></p><h2 id="hd60e750ebf">使用ソフト</h2><ul><li>Adobe Photoshop</li><li>Adobe Illustrator</li><li>VS code</li></ul>

アパレルのブランディングサイト（下層ページ）

<h1 id="h67ff001fc8">製品のブランディングサイト</h1><p>製品のロイヤリティ向上の為に制作したブランディングサイト。<br>スクロール駆動で両サイドの植物が動きます。<br></p><h2 id="h2a709494f8">担当</h2><ul><li>ディレクション</li><li>デザイン</li><li>コーディング(HTML CSS js jQuery)</li></ul><p><br></p><h2 id="hd60e750ebf">使用ソフト</h2><ul><li>Adobe Photoshop</li><li>Adobe Illustrator</li><li>VS code</li></ul>

製品のロイヤリティ向上の為に制作したブランディングサイト。

<h1 id="h2b563d807c">グローバルなフォトコンテストのサイト</h1><p>世界的に打ち出したすべての国対象のフォトコンテスト<br></p><h2 id="h2a709494f8">担当</h2><ul><li>ディレクション</li><li>デザイン</li><li>コーディング(HTML CSS js jQuery)</li></ul><p><br></p><h2 id="hd60e750ebf">使用ソフト</h2><ul><li>Adobe Photoshop</li><li>Adobe Illustrator</li><li>VS code</li></ul>

世界的に打ち出したすべての国対象のフォトコンテスト

グローバルなフォトコンテストのサイト

<h1 id="h88b3e61e99">グローバルなフォトコンテストのサイト（結果発表ページ）</h1><p>世界的に打ち出したすべての国対象のフォトコンテスト<br></p><h2 id="h2a709494f8">担当</h2><ul><li>ディレクション</li><li>デザイン</li><li>コーディング(HTML CSS js jQuery)</li></ul><p><br></p><h2 id="hd60e750ebf">使用ソフト</h2><ul><li>Adobe Photoshop</li><li>Adobe Illustrator</li><li>VS code</li></ul>

グローバルなフォトコンテストのサイト（結果発表ページ）

<h1 id="h08148b462a">動画撮影機能に特化したブランディングサイト</h1><p>スクロール駆動で動画と製品をリンクさせたサイト<br></p><h2 id="h2a709494f8">担当</h2><ul><li>ディレクション</li><li>デザイン</li><li>コーディング(HTML CSS jQuery GSAP)</li></ul><p><br></p><h2 id="hd60e750ebf">使用ソフト</h2><ul><li>Adobe Photoshop</li><li>Adobe Illustrator</li><li>VS code</li></ul>

スクロール駆動で動画と製品をリンクさせたサイト

動画撮影機能に特化したブランディングサイト

<h1 id="hc5bc2f9015">グローバルなフォトコンテストのリマインドHTMLメルマガ</h1><p>グローバルなフォトコンテストのリマインドHTMLメルマガ、Google Analyticsで開封からの導線を計測。<br>（テーブルコーディングでの制作で様々なデバイスやそのweb viewでの崩れのfixが難しかったです。）<br></p><h2 id="h2a709494f8">担当</h2><ul><li>ディレクション</li><li>デザイン</li><li>コーディング(HTML CSS)</li></ul><p><br></p><h2 id="hd60e750ebf">使用ソフト</h2><ul><li>Adobe Photoshop</li><li>Sublime Text</li></ul>

グローバルなフォトコンテストのリマインドHTMLメルマガ、Google Analyticsで開封からの導線を計測。


グローバルなフォトコンテストのリマインドHTMLメルマガ

<h1 id="h7503f18498">製品の販促に使用するHTMLメルマガ</h1><p>どの層に開封後コンバージョンしたかまでを追ったメルマガ、Google Analyticsで開封からの導線を計測。<br>（テーブルコーディングでの制作で様々なデバイスやそのweb viewでの崩れのfixが難しかったです。）<br></p><h2 id="h2a709494f8">担当</h2><ul><li>ディレクション</li><li>デザイン</li><li>コーディング(HTML CSS)</li></ul><p><br></p><h2 id="hd60e750ebf">使用ソフト</h2><ul><li>Adobe Photoshop</li><li>Sublime Text</li></ul>

どの層に開封後コンバージョンしたかまでを追ったメルマガ、Google Analyticsで開封からの導線を計測。
デザインもその時期のものに合わせました。

製品の販促に使用するHTMLメルマガ

<h1 id="h2d53f32512">動画撮影機能に特化したブランディングサイト（モバイル）</h1><p>スクロール駆動でパラパラ漫画のように動くサイト（動画を7000枚のjpgに切り出して制作）のモバイル版は通常のサイトに<br></p><h2 id="h2a709494f8">担当</h2><ul><li>ディレクション</li><li>デザイン</li><li>コーディング(HTML CSS jQuery GSAP)</li></ul><p><br></p><h2 id="hd60e750ebf">使用ソフト</h2><ul><li>Adobe Photoshop</li><li>Adobe Illustrator</li><li>VS code</li></ul>

スクロール駆動でパラパラ漫画のように動くサイト（動画を7000枚のjpgに切り出して制作）のモバイル版は通常のサイトに


動画撮影機能に特化したブランディングサイト（モバイル）

<h1 id="h08148b462a">動画撮影機能に特化したブランディングサイト</h1><p>スクロール駆動でパラパラ漫画のように動くサイト（動画を7000枚のjpgに切り出して制作）<br>スクロールしている時はパフォーマンス優先のため画質を落として止めると高画質の写真と差し替わるように制御<br></p><h2 id="h2a709494f8">担当</h2><ul><li>ディレクション</li><li>デザイン</li><li>コーディング(HTML CSS jQuery GSAP)</li></ul><p><br></p><h2 id="hd60e750ebf">使用ソフト</h2><ul><li>Adobe Photoshop</li><li>Adobe Illustrator</li><li>VS code</li></ul>

スクロール駆動でパラパラ漫画のように動くサイト（動画を7000枚のjpgに切り出して制作）


<h1 id="h65288e664a">水中写真とその製品に特化したブランディングサイト</h1><p>製品のロイヤリティ向上の為に制作したブランディングサイト。<br></p><h2 id="h2a709494f8">担当</h2><ul><li>ディレクション</li><li>デザイン</li><li>コーディング(HTML CSS jQuery)</li></ul><p><br></p><h2 id="hd60e750ebf">使用ソフト</h2><ul><li>Adobe Photoshop</li><li>Adobe Illustrator</li><li>Sublime Text</li></ul>

水中写真とその製品に特化したブランディングサイト

<h1 id="hf84765c785">水中写真とその製品に特化したブランディングサイト（下層ページ）</h1><p>クッキーを持たせて流入元写真からの製品の組み合わせがフィルタリングするページを制作。<br>実際にどの組み合わせができるかも製品をクリックすることでフィルタリングできる。<br></p><h2 id="h2a709494f8">担当</h2><ul><li>ディレクション</li><li>デザイン</li><li>コーディング(HTML CSS jQuery)</li></ul><p><br></p><h2 id="hd60e750ebf">使用ソフト</h2><ul><li>Adobe Photoshop</li><li>Adobe Illustrator</li><li>VS code</li></ul>

クッキーを持たせて流入元写真からの製品の組み合わせがフィルタリングするページを制作。
実際にどの組み合わせができるかも製品をクリックすることでフィルタリングできる。

水中写真とその製品に特化したブランディングサイト（下層ページ）

<h1 id="h88bc79fbba">Facebookアプリ（写真のコンテスト）</h1><p>Facebook上で該当ページに［いいね］を押して参加できる形のFacebook上のフォトコンテスト<br></p><h2 id="h2a709494f8">担当</h2><ul><li>ディレクションン</li><li>デザイン</li><li>コーディング(HTML CSS jQuery)</li></ul><p><br></p><h2 id="hd60e750ebf">使用ソフト</h2><ul><li>Adobe Photoshop</li><li>Adobe Illustrator</li><li>Sublime Text</li></ul>

Facebook上で該当ページに［いいね］を押して参加できる形のFacebook上のフォトコンテスト

Facebookアプリ（写真のコンテスト）

<h1 id="hb50a99d72c">写真のコミュニティサイト</h1><p>カメラブランドの写真のコミュニティサイトになります。<br>上流工程から下流工程まで担当<br></p><h2 id="h2a709494f8">担当</h2><ul><li>ディレクションンれｒぃｈｄ</li><li>デザイン</li><li>コーディング(HTML CSS jQuery)</li></ul><p><br></p><h2 id="hd60e750ebf">使用ソフト</h2><ul><li>Adobe Photoshop</li><li>Adobe Illustrator</li><li>Sublime Text</li></ul>

カメラブランドの写真のコミュニティサイトになります。
上流工程から下流工程まで担当

写真のコミュニティサイト

<h1 id="he8c8924e2b">ターゲットを絞って販促に使用するHTMLメルマガ</h1><p>どの層に開封後コンバージョンしたかまでを追ったメルマガ、Google Analyticsで開封からの導線を計測。<br>（テーブルコーディングでの制作で様々なデバイスやそのweb viewでの崩れのfixが難しかったです。）<br></p><h2 id="h2a709494f8">担当</h2><ul><li>ディレクション</li><li>デザイン</li><li>コーディング(HTML CSS)</li></ul><p><br></p><h2 id="hd60e750ebf">使用ソフト</h2><ul><li>Adobe Photoshop</li><li>Sublime Text</li></ul>

ターゲットを絞って販促に使用するHTMLメルマガ

<h1 id="h843f196c63">展示会のサイト</h1><p>写真展のサイトのご依頼からヒヤリングして制作。<br>メインビジュアルに少しこだわりました。<br></p><h2 id="h2a709494f8">担当</h2><ul><li>ディレクション</li><li>デザイン</li><li>コーディング(HTML CSS jQuery)</li></ul><p><br></p><h2 id="hd60e750ebf">使用ソフト</h2><ul><li>Adobe Photoshop</li><li>Adobe Illustrator</li><li>Sublime Text</li></ul>

写真展のサイトのご依頼からヒヤリングして制作

展示会のサイト

<h1 id="he8c8924e2b">ターゲットを絞って販促に使用するHTMLメルマガ</h1><p>どの層に開封後コンバージョンしたかまでを追ったメルマガ、Google Analyticsで開封からの導線を計測。<br>デザインもその時期のものに合わせました。（テーブルコーディングでの制作で様々なデバイスやそのweb viewでの崩れのfixが難しかったです。）<br></p><h2 id="h2a709494f8">担当</h2><ul><li>ディレクション</li><li>デザイン</li><li>コーディング(HTML CSS)</li></ul><p><br></p><h2 id="hd60e750ebf">使用ソフト</h2><ul><li>Adobe Photoshop</li><li>Sublime Text</li></ul>

<h1 id="h567b27c1ca">祭りの写真にフォーカスを当てたLP</h1><p>Googleの検索からの流入を見込んで制作したページ<br></p><h2 id="h2a709494f8">担当</h2><ul><li>ディレクション</li><li>デザイン</li><li>コーディング(HTML CSS jQuery)</li></ul><p><br></p><h2 id="hd60e750ebf">使用ソフト</h2><ul><li>Adobe Photoshop</li><li>Sublime Text</li></ul>

Googleの検索からの流入を見込んで制作したページ

祭りの写真にフォーカスを当てたLP

<h1 id="h9a4d345aa4">ターゲットを絞った製品のブランディングサイト</h1><p>製品のロイヤリティ向上の為に制作したブランディングサイト。<br>スクロール駆動で両サイドの植物が動きます。<br></p><h2 id="h2a709494f8">担当</h2><ul><li>ディレクション</li><li>デザイン</li><li>コーディング(HTML CSS jQuery)</li></ul><p><br></p><h2 id="hd60e750ebf">使用ソフト</h2><ul><li>Adobe Photoshop</li><li>Adobe Illustrator</li><li>Sublime Text</li></ul>

ターゲットを絞った製品のブランディングサイト

<h1 id="h67ff001fc8">製品のブランディングサイト</h1><p>製品のロイヤリティ向上の為に制作したブランディングサイト。<br>スクロール駆動で両サイドの植物が動きます。<br></p><h2 id="h2a709494f8">担当</h2><ul><li>デザイン</li><li>コーディング(HTML CSS jQuery)</li></ul><p><br></p><h2 id="hd60e750ebf">使用ソフト</h2><ul><li>Adobe Photoshop</li><li>Adobe Illustrator</li><li>Sublime Text</li></ul>

<h1 id="h67ff001fc8">製品のブランディングサイト</h1><p>製品のロイヤリティ向上の為に制作したブランディングサイト。<br>スクロール駆動で両サイドの植物が動きます。<br></p><h2 id="h2a709494f8">担当</h2><ul><li>デザイン</li><li>コーディング(HTML CSS jQuery)</li></ul><p><br></p><h2 id="hd60e750ebf">使用ソフト</h2><ul><li>Adobe Photoshop</li><li>Sublime Text</li></ul>