<img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/ebbe579582d14d0bb11b42d055439ee6/doboku_mock01.png" alt=""><h2 id="h09ad636ae9">デザインデータからアニメーションコーディング</h2>水道管やパイプなどの水回りの工事をされている会社様の、コーポレートサイトを制作いたしました。 デザインをIllustratorファイルでいただき、コーディングを担当させていただきました。 採用ページではパララックスやフェードインなど、スクロールに合わせたアニメーションを多様し、賑やかな雰囲気を演出しています。 <img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/fdc09361fb2145d091de1ecd42ec7f07/doboku_img01.png" alt=""> <img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/883fdcd974d34cb29dd81d0c14557dd2/doboku_img02.png" alt=""> <img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/c80cae86a1564f01ab0c9b470f5d2ef1/doboku_img03.png" alt=""> <img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/de60651f47804652bb8c01130ad29eaf/doboku_mock02.png" alt="">

<img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/4f65f4db942d469c8e3d4e76b27c543e/01_zeruch_lp_mock01.png" alt=""><h2 id="he6e1f2c74b">コンバージョンにつながるLP</h2>探偵社様の広告LP制作を担当させていただきました。 今回LPを制作する上で一番重要としたことは『コンバージョンにつながる』こと。 主に検索広告からの流入を前提としたLPでしたが、目標はアクセス数の増加ではなく問い合わせ件数の増加でした。 その為標準的な構成にプラスして、訪問したユーザーが今後の流れをイメージし安心して問い合わせができる様に意識しています。 特に問い合わせフォームエリアについては『手間のかからない入力』を考え、大きく見やすくわかりやすくしています。 <img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/7f7849deda5e4984b1fd7c0ad3fb2726/01_zeruch_lp_img01.png" alt=""> <img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/5acfb3a3c4034642b4ec60210a7c69e9/01_zeruch_lp_img02.png" alt=""> <img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/9bcecc3872464a72b9768297a8a18eae/01_zeruch_lp_img03.png" alt=""> <h2 id="h740547a762">ターゲット層を考慮したデザインを提案</h2>マーケティングも担当させていただいているので、ターゲット層を分析しスマートフォンからのアクセスが多いことを把握していました。 その為スマートフォンファーストでデザインを制作しています。 <img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/406c840ed5c64845912eebe90b4c625f/01_zeruch_lp_mock02.png" alt="">

<img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/79b510f6e439449497a46a9880b65a35/hashcreate_all_mock01.png" alt=""><h2 id="hcb8d4c861f">自分の魅力を伝えられるサイトを目指して</h2>自分のポートフォリオは実績にならないかもしれませんが、一つのプロジェクトとしてこの「HASH CREATE」を客観視して記載しておきたいと思います。 当たり前の話ですが、独立するにあたっての屋号決めからデザインコンセプト、運営まで全て一人で行なっています。 コンセプトについて<a href="https://hash-c.com/about" target="_blank" rel="noopener noreferrer">詳しくはこちら</a>に記載していますが、自分の持っている技術をアピールすることがこのサイトの目的となっています。 Next.jsとVercelで構築し、Three.jsで3D表現、GSAPでスクロールアニメーションを行なっています。 完成するまではクライアント様同様複数パターンの検証やモックアップの作成など、実案件同様に進めてまいりました。 ちなみに私の好きな「スターウォーズ」「攻殻機動隊」の世界観を少し意識しています（笑） <img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/449ebbb9299d4ddca0948dde405909a9/hashcreate_all_mock02.png" alt=""> <img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/8135a62ebce7495e9b66c9cf35a97ad1/hashcreate_all_img02.png" alt=""> <img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/3ebe7e90f60f4a608856d4289b7575dc/hashcreate_all_img03.png" alt=""> <img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/87aff11aa48246949fd33b0c4ea75b36/hashcreate_all_img04.png" alt="">

<img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/7e3af78584d241e29b32434c39460801/koumuten_mock01.png" alt=""><h2 id="h393c7db520">動きのあるサイトでアクティブ感を演出</h2>チェンソーなどの機械工具を扱っている工務店様のコーポレートサイトを制作いたしました。 ディレクション、デザイン、コーディングと一貫して担当させていただきました。 さらにはサイト内で使用する写真もお任せいただきました。 機能としては、一般的なコーポレートサイトに加えて、多くの取扱商品を掲載しサイト内で検索できるシステムを構築しました。 スクロールと共に動く背景で、アクティブな印象を演出しています。 <img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/2835b9a1a31d41709d3e5c04915cda2a/koumuten_img02.png" alt=""> <img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/eee26f4166474fdfb0f5b3285f6da59b/koumuten_img03.png" alt=""> <img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/be0cdb61a2de48dabc867cdeb01e0f85/koumuten_img04.png" alt=""> <img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/d0210b77dcb640ae918cbde3909acec9/koumuten_mock02.png" alt="">

<img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/9cbb6db8f6c44c0c8bbf59d1a0915615/switch_mock01.png" alt=""><h2 id="h54d584c2dc">動画やギミックを多用して楽しく</h2>スケートボードパークのウェブサイトを制作しました。 ファーストビューで動画を流し、アグレッシブな印象を与えています。 画像の切り出し方でバンクや階段をイメージし、スケボー好きに伝わるようなデザインを心がけました。 WordPressのオリジナルテーマで制作し、クライアント様でブログ更新ができるようになっております。 ユーザー層を意識して、スマホファーストデザインで制作しました。 <img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/db10393ded1749ae877499fef6d1d857/switch_mock02.png" alt=""> <img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/a61b2f98f11744e1a2b1b7fa07194653/switch_img01.png" alt=""> <img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/a51968af1dfc4f06bf9b941c8d4bc6fa/switch_img02.png" alt=""> <img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/cacb2d624f3c4b9a845c6e41c4dcea68/switch_img03.png" alt="">

<img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/bb71af12101e4b24be4e19f349ef84a1/golf_mock01.png" alt=""><h2 id="hcb8d4c861f">自分の魅力を伝えられるサイトを目指して</h2>ゴルフ場のウェブサイトをリニューアルしました。 WordPressのオリジナルテーマで構築しています。 クライアント様でレストランメニューや求人情報などを変更できるよう、カスタム投稿など管理画面のカスタマイズを行なっています。 ターゲットのユーザー層を意識して、少し高級感のあるリッチなデザインで作りました。 もちろんスマートフォン対応です。 <img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/32d70c4cd1cc4a0c96475f4ee399bc31/golf_mock02.png" alt=""> <img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/d30c47f21f99436c8579ebcd551c4ef0/golf_img01.png" alt=""> <img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/aa9d5ba0bdfd43828ca192d853ec2ef3/golf_img02.png" alt=""> <img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/771261db08784048936fa7cce7a870e9/golf_img03.png" alt="">

<img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/b16d7f70ff6944f583e6156e1e87c20e/04_tennis_mock01.png" alt=""><h2 id="h90ea58806d">使いやすさだけでなく、ムーブメントになるようなサイト</h2>テニスショップ様のECサイトを制作させていただきました。 ディレクション、デザイン（一部）、コーディングを担当いたしました。 EC-CUBEを土台にカスタマイズをしています。 一般的なショッピング機能に加え、「ブログ投稿機能」「特集商品機能」を搭載しています。 また「コーディネート販売」と称し、モデルさんの着ているウェアやアイテム一式を紹介する機能も追加いたしました。 ただのショッピングサイトではなく、クライアント様が常にサイトを更新することでユーザーが楽しめる、何度でも訪れたくなる様なウェブサイトになりました。 <img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/b1c986f387084a3aaf2503882f0df84e/04_tennis_mock02.png" alt=""> <img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/80efeabd403349e399287ffd0a715703/04_tennis_img02.png" alt=""> <img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/faaa08b06f6d407f89e6751512f94f7c/04_tennis_img03.png" alt=""> <img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/835564de472546ba9542bf9cf470206d/04_tennis_img04.png" alt="">

<img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/0adc8550560b4377836913d55980494a/kankou_web_mock01.png" alt=""><h2 id="h307de768c3">海外のユーザー認知度を高める</h2>観光自治体様のウェブサイトを制作させていただきました。 ディレクション、コーディングを担当いたしました。 海外のユーザー認知度を高める為の施策で、英語サイトの構築です。 サーバーの設置やドメイン取得などのホスティングも担当し、海外サーバーでの運用をサポートしています。 WordPressのテンプレートを使用し、カスタマイズすることで予算を抑えつつ綺麗なデザインでの構築となりました。 <img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/7267388e2cb44dd9b20b6f53811e64b6/kankou_web_img02.png" alt=""> <img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/9dd03323791042e3b8ea1fea017f0509/kankou_web_img03.png" alt=""> <img src="https://images.microcms-assets.io/assets/57b17c208cfc45cfa97b51dd68b890f4/50767e6372434a7eaeff9e7f0eab6021/kankou_web_mock02.png" alt="">

#WORKS
実績紹介

お問い合わせ
CONTACT

#WORKS実績紹介

お問い合わせCONTACT

#WORKS
実績紹介

お問い合わせ
CONTACT