Yuto Kakuta

DXやプロ人材の派遣を行う、INTLOOP株式会社様のコーポレートサイトのコーディング、JSアニメーションを制作しました。

『LOOP（円）』をモチーフとしたデザインで、円が拡大縮小するあしらいが各所に散りばめられています。

トップページにある、スクロールに応じて背景の円が拡大縮小していく動きは、最も気持ちよく動くようにスピード感やサイズ感を何度も調整しました。

Webデザインギャラリーサイトにも掲載いただいております。

Web Design Clip：https://webdesignclip.com/intloop-com/

SANKOU!：https://sankoudesign.com/web/intloop/

茨城県 龍ケ崎市でお米の生産をされている、横田農場様のコーポレートサイト制作をメインで担当しました。

かわいいイラストが特徴なので、GIF風のアニメーションやホバー時の細かい動きにこだわっています。

また、グラフィカルなレイアウトのため、レスポンシブ時にイラストなどの要素が不自然なサイズ感にならないようにしました。

自分がいつも見ている、WebデザインサイトのS5-Styleさんにも掲載されました。

Webデザインギャラリー S5-Style：https://bm.s5-style.com/20210301/17024

同時に、EC-CUBEを用いてECサイトも制作いたしました。

横田農場ECサイト：https://yokotanojo.co.jp/shop

株式会社マイナビ様の採用サイト制作における、ローディングアニメーションとトップページ ファーストビューのループアニメーションを担当しました。

カラフルな面が、動画に被ったり剥がれたりするスピード感やタイミングを何度も調整し、より気持ちのいい動きに落とし込んでいます。

※現在、本サイトは一部改修されており、制作時とは異なるためテスト環境のリンクを掲載しています。

現行サイト：https://www.mynavi.jp/saiyou/

横浜の不動産会社、リブレ株式会社様が運営しているVR売却のサービスページを制作しました。

「家を売る」ことに慣れている人は多くありません。

その時に感じる、先行きの不安さ、不透明さがバッと開けていくようなイメージで、ローディングアニメーションを作成しています。

また、出現アニメーションを要素の形ごとに変えることでポップな印象を与えています。

「実際に住んでいる部屋」と「本サービスで片付いている部屋」を比較して見せるためにcomparison-sliderを使用しました。

VR売却と同じ、リブレ株式会社様のCATAREL HOUSEというサービスのLPを制作しました。

縦に2分割するローディングアニメーションからファーストビューに繋がる箇所や、ファーストビューのスクロールの挙動など、JSアニメーションでいかに綺麗に見せられるかに注力しました。

細かい点では、画面右上のCONTACTボタンはホバー時のグレーの面も、吹き出し型にマスクされる必要があり、この挙動の実装にやや手こずった印象があります。

愛知県のアウトレット家具販売会社、プラスリビング様のECサイトを制作しました。

サイトはShopifyで構築しています。

家具だけでなく小物や雑貨も取り扱っているため、送料設定が複雑化することが懸念されていました。

また、実店舗がある地域については自社配送を行いたいというクライアントの要望で、都道府県より詳細な市区町村で送料が区分できる「Parcelify」というShopifyアプリを使用しました。

家具と小物を同時に購入した場合などの送料を、実際にかかる費用との開きがなるべくないようにするため、クライアントへ現在の送料計算方法を提案しました。

配送料：https://plusliving.shop/pages/delivery-guide#tab-four

商品一覧ページの絞り込み機能、カートページの配送日希望機能などもアプリを利用して実装しています。

東京の中野坂上にある税理士法人、株式会社エヌエムシイ様のサービスサイトを制作しました。

一般的なWordPressで作られたサイト構造にプラスして、「Simple WordPress Membership」というプラグインを利用して会員登録機能を実装しました。

NMC journalという投稿記事を、会員属性（経営者・会計士・NMCサービス利用者 等）によって読めるものを切り分けています。

デフォルトのSimple WordPress Membershipは、有料会員か無料会員かによって会員属性を振り分けますが、今回はどの会員属性も無料のため入力された会員コードをもとにフックを使い、属性を振り分けています。

また、クライアントの運用時は、WordPressの知見にばらつきのある複数人が管理画面を利用するため、管理者によって不要な項目は非表示にしたり、記事検索をスムーズにできるよう絞り込み機能をつけるなど、管理画面のカスタマイズも細かく行いました。

東宝ハウスグループ様の横浜西口店のサイト制作を行いました。

物件検索等の機能実装は東宝ハウス様のシステム会社様が行い、フロント面を担当しております。

各要素のインタラクションにおいて、「物件を探す」というユーザーの行動を妨げず、かつリッチ感を感じるような、ちょうどよい落とし所を目指して制作しました。

コーポレートサイトの制作と同時に、ECサイトのリニューアルも行いました。

EC-CUBEの経験は浅かったものの、各ページのコーディングに加えて、商品選択や送料計算関連のプラグインを実装しています。

コーディング以外にも、送料計算方法が複雑でユーザーにも分かりづらかったため、米の品種×商品重量×商品数量をもとに新たな送料計算方法を提案し、採用いただきました。

ヤングジャンプで連載されている「ドラフトキング」の世界観をもとに、野球クイズが楽しめるキャンペーンサイトを制作しました。

回答の正誤を保存し、正解数に応じた結果発表ページへ遷移するといった実装を行っています。

主にイラストなどの画像を利用しているため、コーディングの自由度は低い中でも、ユーザーにゲームを楽しんでもらうために細かいインタラクションの実装を心がけました。

ツバキ神田鍛冶町 様のサイトを制作しました。

グラフィカルなサイトのため、レスポンシブ時の各要素サイズに気を配ってコーディングを行なっています。

リブレ株式会社様のコーポレートサイトを制作しました。

ローディングアニメーションにて、動画ファイルで制作されたアニメーションとコーディングされた六角形メニューのサイズが、どの画面サイズで見てもズレが無いように細かく調整しました。

物流施設の賃貸・管理等を行う、株式会社シーアールイー様のコーポレートサイトを制作しました。

WordPressの実装に加え、IR情報更新システムとの連携を行っています。