- WEBサービスのフロントエンド開発
- ホームページ制作

株式会社ブラキオはWEBサービスの開発やホームページ制作および運用・保守を行っています。Next.js, React, TypeScriptなどモダンな技術でつくる高品質なソリューションを低価格でご提供します。フロントエンド開発・Jamstackで作るホームページ制作をご依頼ならブラキオにお任せください。

JamstackをはじめとするNext.js, React, TypeScriptを使ったフロントエンド開発、承ります。
フロントエンド開発・ホームページ制作をご依頼ならブラキオにお任せください。

株式会社ブラキオ｜埼玉県越谷市のJamstackが得意なWEB制作会社

制作実績一覧

<p>この度、株式会社サイバー・バズ様のサービスサイトのリニューアルプロジェクトに携わらせていただきました。クライアント様内には専属のデザイナーがいらっしゃり、洗練されたデザインをご提供いただきました。リニューアルの背景には、「サービス内容や事業特性をより直感的にユーザーの皆様にご理解いただきたい」という強いご要望がありました。<br>その思いに応えるため、私たちはWordPressを基盤とし、Sassによる効率的なコーディングと、jQueryによる豊かなアニメーションを実装いたしました。技術スタックとしては、WordPress、Sass、そして動きのある表現に不可欠なjQueryを採用しています。<br>今回のリニューアルでは、既存サイトのスタイルを一部継承しつつ、新たなデザインと機能を融合させる必要があり、サイト全体の構成を整理することに多くの時間を費やしました。特に、トップページ全体にわたる複雑なアニメーションの実装は、技術的な挑戦の連続でした。マスクを用いた斜めからの要素表示をはじめ、細部にまでこだわったアニメーションによって、サイトに躍動感と奥行きを与え、ユーザーエンゲージメントの向上を目指しました。<br><br><img src="https://images.microcms-assets.io/assets/8bff96c5d9204d3083faff96106ef6b7/94392d65cf174352aa2a712657d320e0/image%2011.png" alt=""><br><img src="https://images.microcms-assets.io/assets/8bff96c5d9204d3083faff96106ef6b7/08959ff5e19c48acaae30f6b7e34c196/image%2013.png" alt=""><br><img src="https://images.microcms-assets.io/assets/8bff96c5d9204d3083faff96106ef6b7/3d22367bfa66442a96d2ac853eb6d060/image%2014.png" alt=""><br><br>大規模なリニューアルプロジェクトでありましたが、弊社のポリシーである「納期厳守」を徹底し、無事に納品を迎えることができました。クライアント様にご満足いただけたこと、そして何よりも納期内に完了できたことに安堵しております。<br>今回のリニューアルを通じて、株式会社サイバー・バズ様の魅力的なサービスが、より多くの方々にダイレクトに伝わることを心より願っております。</p>

株式会社サイバー・バズ コーポレートサイト

株式会社サイバー・バズ様のコーポレートサイトのコーディングを担当しました

<p>この度、株式会社〇〇（貴社名）は、NTTセキュリティ・ジャパン株式会社様のWebサイト改修プロジェクトに携わらせていただきました。<br>今回のプロジェクトでは、既存のNext.jsで構築されたWebサイトに対し、より使いやすいものとするため、ページ改修および追加のご要望をいただきました。]<br><img src="https://images.microcms-assets.io/assets/8bff96c5d9204d3083faff96106ef6b7/ee278f58dec44508a4d07a45352e69fa/image%208.png" alt=""><br><img src="https://images.microcms-assets.io/assets/8bff96c5d9204d3083faff96106ef6b7/51136f7b96614cb58aef0073b129701f/image%207.png" alt=""><br><img src="https://images.microcms-assets.io/assets/8bff96c5d9204d3083faff96106ef6b7/f833c88eb57f4df79942b82a0644e87d/image%205.png" alt=""><br><img src="https://images.microcms-assets.io/assets/8bff96c5d9204d3083faff96106ef6b7/bc39d371898b48c3ac9029e66c4f5d9e/image%206.png" alt=""><br></p><h3 id="h7e0d2cb135">デザインを最大限に活かし、スムーズな実装を実現</h3><p>今回の改修にあたり、NTTセキュリティ・ジャパン様よりご提供いただいた洗練されたデザインを忠実に実装することを重視いたしました。Jamstackアーキテクチャに特化した弊社の知見を活かし、Next.jsの持つポテンシャルを最大限に引き出すことで、<strong>高速かつ安定した表示</strong>、そして<strong>スムーズなユーザー体験</strong>を実現しています。</p><h3 id="hf2bb59807a">Jamstackへの特化が生んだ出会い</h3><p>NTTセキュリティ・ジャパン様がパートナー企業を選定されるにあたり、「Jamstack」に特化した技術力を持つ企業を積極的に探されていたとのこと。数あるWeb制作会社の中から、弊社の実績と専門性にご共感いただき、今回のプロジェクトをご依頼いただく運びとなりました。<br>今回のWebサイト改修を通じて、NTTセキュリティ・ジャパン様の情報発信力強化、そして顧客体験の向上に貢献できたことを大変光栄に思います。</p>

NTTセキュリティ・ジャパン株式会社

NTTセキュリティ・ジャパン株式会社様のNext.jsサイトを刷新 - Jamstackの強みを活かした柔軟な改修と機能追加

<h2 id="h99d6c01819">WordPress採用サイト フルリニューアル事例：情報量と動きで魅せる、新しい企業の顔</h2><p>この度、WordPressで構築されていた既存の採用サイトをフルリニューアルいたしました。以前は1ページのみで、新卒・中途採用への導線を中心としたシンプルな構成でしたが、今回のリニューアルでは、企業の魅力を多角的に伝えるための情報が大幅に追加されました。<br><img src="https://images.microcms-assets.io/assets/8bff96c5d9204d3083faff96106ef6b7/ed0d2efdac424640b22c6912a819af80/image%202.png" alt=""><br><img src="https://images.microcms-assets.io/assets/8bff96c5d9204d3083faff96106ef6b7/5d8a3b3f933849c0a3fe0295818bc8fb/image%203.png" alt=""><br><img src="https://images.microcms-assets.io/assets/8bff96c5d9204d3083faff96106ef6b7/b09c20462d4a4047b806a75d75269ebe/image%204.png" alt=""><br><strong>リニューアルのポイント</strong></p><ul><li><strong>充実した情報発信:</strong> 企業情報、事業内容はもちろんのこと、求職者にとって最も関心の高い仕事内容や社員インタビューを新たに掲載。これにより、企業のリアルな情報を届け、応募意欲の向上を目指しました。</li><li><strong>導線の最適化:</strong> 以前のサイトから引き続き、新卒サイトや中途採用ページへのスムーズな導線を確保。情報量の増加と導線の分かりやすさを両立しました。<ul><li><strong>こだわりのコーディング:</strong>WordPressの投稿機能を丁寧に整備し、効率的な情報更新と管理を実現しました。</li><li>スタイリングにはscssを採用し、保守性と拡張性の高いコードで美しいUIを構築しました。</li><li>サイト全体にわたるアニメーションの実装は、今回のリニューアルにおける大きな挑戦でした。パララックス効果や、要素が画面内に現れた際に動き出すinViewアニメーションなど、細部にまでこだわったインタラクティブな表現により、ユーザーエンゲージメントの向上を図りました。</li></ul></li></ul><p><strong>担当範囲</strong><br>本プロジェクトでは、弊社は<strong>コーディング</strong>をメインで担当いたしました。デザインに基づき、WordPressの構築から、scssを用いたスタイリング、そして複雑なアニメーションの実装までを一貫して行いました。<br><strong>制作の裏側</strong><br>今回のリニューアルでは、クライアント様からの「サイト全体に動きのある表現を取り入れたい」というご要望が強く、パララックス効果や多数のinViewアニメーションの実装に多くの時間を費やしました。各アニメーションがサイト全体の雰囲気を損なわないよう、細かな調整を重ね、実装と検証を繰り返すことで、情報と動きが調和した魅力的な採用サイトを実現いたしました。</p>

株式会社サイバー・バズ 採用サイト

株式会社サイバー・バズ様の採用サイトのコーディングを担当しました

<p>この度、株式会社ホウセイ建設様のホームページを全面的にリニューアルいたしました。<br><strong>技術スタック:</strong> Jamstack, Next.js, Netlify, microCMS<br><strong>リニューアルの目的:</strong><br>お客様より、施工事例が探しにくく分かりづらいという課題をお伺いし、以下の点を主な目的としてリニューアルを実施いたしました。</p><ul><li>施工事例の見やすさと分かりやすさの大幅な向上</li><li>トップページのデザインリニューアル</li><li>お問い合わせへの導線強化によるコンバージョン率の向上</li></ul><p><strong>主な改善点:</strong></p><ul><li><strong>施工事例Before/Afterの明確化:</strong> 各施工事例において、リニューアル前後の状態を比較しやすいよう、写真や解説を大幅に改善いたしました。劇的な変化や細部にわたるこだわりが一目で伝わるよう工夫しています。</li><li><strong>動画による臨場感の創出:</strong> テキストや静止画では伝えきれない現場の雰囲気や技術力を動画で表現できるよう、動画埋め込み機能を実装いたしました。これにより、お客様はよりリアルな施工イメージを持つことができます。</li><li><strong>カテゴリ構造の最適化と一覧性の向上:</strong> 煩雑になっていた施工事例のカテゴリを再構築し、絞り込み検索機能も導入いたしました。一覧画面のデザインも刷新し、目的の事例にストレスなく辿り着けるよう改善いたしました。</li><li><strong>トップページの刷新による第一印象の向上:</strong> ホウセイ建設様の強みや魅力をダイレクトに伝えるため、デザインを一新いたしました。施工事例への導線を強化し、最新情報や実績が分かりやすく配置されています。</li><li><strong>コンバージョンを意識した導線設計:</strong> 各ページからのお問い合わせへの導線を最適化いたしました。ボタンのデザインや配置を見直し、お客様がスムーズにお問い合わせいただけるよう改善いたしました。</li></ul><p>今回のリニューアルにより、ホウセイ建設様の卓越した技術と豊富な実績が、より効果的にお客様に伝わるものと確信しております。お問い合わせ数の増加、ひいては事業成長に貢献できるよう、引き続きサポートさせていただきます。</p>

ホウセイ建設株式会社

ホウセイ建設株式会社様のコーポレートサイトのリニューアルをさせていただきました

<p>大人の女性向けに落ち着いた雰囲気を演出した、リラクゼーションサロンのウェブサイトを制作しました。黒とゴールドを基調とした高級感あるデザインで、癒しと特別感を伝える仕上がりを目指しました。<br></p><h3 id="h2d93e4c9c1">技術的ポイント</h3><p><br><strong>Jamstack構成</strong><br>フロントエンドには高速で柔軟な開発が可能な <strong>Next.js</strong> を採用。<br><strong>microCMS</strong> を利用することで、クライアントが簡単にコンテンツを更新できる仕組みを提供しました。<br><br><strong>デザイン</strong><br>外部のプロフェッショナルデザイナーに依頼し、黒とゴールドを基調とした洗練されたデザインを実現。<br>大人の女性が共感しやすい、高級感と落ち着きを両立したビジュアルを重視しました。<br></p><h3 id="hdadc0eaacf">特徴</h3><p><br><strong>モバイルファースト対応</strong><br>サロンを検索する多くのユーザーがスマートフォンからアクセスすることを想定し、スマホでの操作性を最優先に設計。<br><br><strong>スムーズな運用</strong><br>microCMSにより、サロンメニューやキャンペーン情報をスムーズに更新可能。</p>

女性専用サロン マリアンヌ

女性専用サロン マリアンヌ様の店舗サイトのコーディング、CMS化を担当しました

<h2 id="h0cec524e55">制作の経緯</h2><p>以前Jamstack構成でコーポレートサイトを作らさせていただいていて、今回はデザインをリニューアルということでご依頼いただきました。デザインについては社内で制作をされていたので実装のみの担当です。デザインリニューアルに合わせてコードもリニューアルできればということでNext.js12系から14系にしてApp Routerを採用しました。<br>Next.js、microCMS、CloudflareでJamstack構成になっています。</p><h2 id="h75eac3dc3a">担当したこと</h2><ul><li>コーディング</li><li>CMS構築（Jamstack）</li></ul><p><br></p>

株式会社Buzzjob

株式会社BuzzJob様のコーポレートサイトのコーディング、CMS化を担当しました

<p><img src="https://images.microcms-assets.io/assets/8bff96c5d9204d3083faff96106ef6b7/2b4ac78c00d24230b90f517e3c5c53f6/withlive3.png" alt=""></p><h2 id="h0cec524e55">制作の経緯</h2><p>以前までのホームページのデザインがCMS化もされておらず運用もしにくかったのでご依頼いただきました。デザインについては社内で制作をされていたので実装のみの担当です。サイトの雰囲気に合わせてふんだんにアニメーションをつけてかっこいい感じです！<br>Next.js、microCMS、CloudflareでJamstack構成になっています。</p><h2 id="h75eac3dc3a">担当したこと</h2><ul><li>コーディング</li><li>CMS構築（Jamstack）</li></ul><p><br></p>

株式会社WithLIVE

株式会社WithLIVE様のコーポレートサイトのコーディング、CMS化を担当しました

<p><img src="https://images.microcms-assets.io/assets/8bff96c5d9204d3083faff96106ef6b7/58dacfb499424f21b8568bad073e40f1/image.png" alt=""><br><img src="https://images.microcms-assets.io/assets/8bff96c5d9204d3083faff96106ef6b7/c681f73dfdac4213815d17045f5e9d4f/image.png" alt=""><br><img src="https://images.microcms-assets.io/assets/8bff96c5d9204d3083faff96106ef6b7/21e606d102894cdab4b3e3b663742f44/image.png" alt=""><br></p><h2 id="hd18819c9c0">制作をした経緯</h2><p>自分の趣味であるバスフィッシングの釣果を管理するために作りました。「いつ釣れて」「いつ釣れなかったか」「何で釣ったか」などがわかるように！また投稿した釣果をInstagramへボタンひとつで投稿できるようにしています。<br>*現状は完全に個人用のアプリとして使っています。いずれ一般公開も考えていますが、もうちょい先になりそうです（2023/4/17現在）。</p><h2 id="h472e370268">技術的なこと</h2><ul><li>Firebaseを使って釣果の保存、呼び出し</li><li>Storageに画像を保存する</li><li>AuthenticateでGoogle、Facebookやメールアドレスなどでログインが可能</li></ul><p><span style="color:#374151">当社はFirebaseを活用したウェブサービス開発に長けております。また、顧客管理アプリケーション、整骨院や美容院向けの予約システムなど、幅広い業界向けのシステム制作も手掛けております。ホームページ制作だけでなく、多様なシステム開発も得意としておりますので、お気軽にお問い合わせください。</span></p>

Sunadoru「スナドル」

Firebase、Next.jsで制作！釣果管理アプリ

<p><img src="https://images.microcms-assets.io/assets/8bff96c5d9204d3083faff96106ef6b7/aaad61912b724660a612c7b514fa3c95/house2.png" alt=""></p><h2 id="h0cec524e55">制作の経緯</h2><p>以前までのホームページのデザインが古くまたWordPressで構築されていたのですが、PHPのバージョンも古くWPのバージョンアップもできない状態だったので、デザイン、構成も含めたコーポレートサイトのリニューアルをご提案させていただきました。Next.js、microCMS、NetlifyでJamstack構成になっています。</p><h2 id="h75eac3dc3a">担当したこと</h2><ul><li>ディレクション</li><li>コーディング</li><li>CMS構築（Jamstack）</li><li>※デザインは外注</li></ul><p><br></p>

ホウセイ建設株式会社様のコーポレートサイトのコーディング、CMS化を担当しました

<p><img src="https://images.microcms-assets.io/assets/8bff96c5d9204d3083faff96106ef6b7/74f26beb246742d98e92fd544c5e077f/masunao-3.png" alt=""></p><h2 id="h0cec524e55">制作の経緯</h2><p>今までコーポレートサイトがなくまずは名刺がわりとして、また今後採用を強化したいのでその土台としてホームページが欲しいということで今回担当させていただきました。近日中には採用ページの追加とエントリー用のフォームも作成予定です。Next.js、microCMS、NetlifyでJamstack構成になっています。</p><h2 id="h75eac3dc3a">担当したこと</h2><ul><li>ディレクション</li><li>コーディング</li><li>CMS構築（Jamstack）</li><li>※デザインは外注</li></ul><p><br></p>

株式会社マスナオコーポレートサイト

株式会社マスナオ様のコーポレートサイトのコーディング、CMS化を担当しました

<h2 id="h0cec524e55"><img src="https://images.microcms-assets.io/assets/8bff96c5d9204d3083faff96106ef6b7/aec347778e6c496db217bc38df56b7b3/cap06.png" alt=""><br>制作の経緯</h2><p>新卒採用のデザインを流用しつつ中途採用のサイトも必要とのことで制作させていただきました。<br>また運用契約もさせていただいており、テキストの修正や画像の追加・差し替え、WordPressのバージョン管理などもさせていただいています。</p><h2 id="h75eac3dc3a">担当したこと</h2><ul><li>ディレクション</li><li>コーディング</li><li>CMS構築（WordPress）</li><li>※デザインは外注</li></ul><p><br></p>

株式会社サイバーバズ中途採用サイト

株式会社サイバーバズ様の中途採用サイトのコーディング、CMS化を担当しました

<h2 id="hcf83e1357e"><img src="https://images.microcms-assets.io/assets/8bff96c5d9204d3083faff96106ef6b7/ff1fe6f46e0d423d8b5f48c78d677dc6/cap04.png" alt=""></h2><p><img src="https://images.microcms-assets.io/assets/8bff96c5d9204d3083faff96106ef6b7/5ff7f1d7edb84b3884e80c8d256c5895/cap05.png" alt=""></p><h2 id="h0cec524e55">制作の経緯</h2><p>2019年にコーポレートのリニューアルと合わせてWordPress化とデザインのフルリニューアルをさせていただきました。また毎年テーマも違うのでそれに合わせてデザインのマイナーアップデートを担当させていただいおります。<br>また運用契約もさせていただいており、テキストの修正や画像の追加・差し替え、WordPressのバージョン管理などもさせていただいています。</p><h2 id="h75eac3dc3a">担当したこと</h2><ul><li>ディレクション</li><li>コーディング</li><li>CMS構築（WordPress）</li><li>※デザインは外注</li></ul><p><br></p>

WORKS制作実績

株式会社サイバー・バズ様のコーポレートサイトのコーディングを担当しました

NTTセキュリティ・ジャパン株式会社様のNext.jsサイトを刷新 - Jamstackの強みを活かした柔軟な改修と機能追加

株式会社サイバー・バズ様の採用サイトのコーディングを担当しました

ホウセイ建設株式会社様のコーポレートサイトのリニューアルをさせていただきました

女性専用サロンマリアンヌ様の店舗サイトのコーディング、CMS化を担当しました

株式会社BuzzJob様のコーポレートサイトのコーディング、CMS化を担当しました

株式会社WithLIVE様のコーポレートサイトのコーディング、CMS化を担当しました

Firebase、Next.jsで制作！釣果管理アプリ

ホウセイ建設株式会社様のコーポレートサイトのコーディング、CMS化を担当しました

株式会社マスナオ様のコーポレートサイトのコーディング、CMS化を担当しました

株式会社サイバーバズ様の中途採用サイトのコーディング、CMS化を担当しました

株式会社サイバーバズ様の新卒採用サイトのコーディング、CMS化を担当しました

ホームページ制作なら
ブラキオにお任せください

WORKS制作実績

株式会社サイバー・バズ様のコーポレートサイトのコーディングを担当しました

NTTセキュリティ・ジャパン株式会社様のNext.jsサイトを刷新 - Jamstackの強みを活かした柔軟な改修と機能追加

株式会社サイバー・バズ様の採用サイトのコーディングを担当しました

ホウセイ建設株式会社様のコーポレートサイトのリニューアルをさせていただきました

女性専用サロン マリアンヌ様の店舗サイトのコーディング、CMS化を担当しました

株式会社BuzzJob様のコーポレートサイトのコーディング、CMS化を担当しました

株式会社WithLIVE様のコーポレートサイトのコーディング、CMS化を担当しました

Firebase、Next.jsで制作！釣果管理アプリ

ホウセイ建設株式会社様のコーポレートサイトのコーディング、CMS化を担当しました

株式会社マスナオ様のコーポレートサイトのコーディング、CMS化を担当しました

株式会社サイバーバズ様の中途採用サイトのコーディング、CMS化を担当しました

株式会社サイバーバズ様の新卒採用サイトのコーディング、CMS化を担当しました

ホームページ制作ならブラキオにお任せください

女性専用サロンマリアンヌ様の店舗サイトのコーディング、CMS化を担当しました

ホームページ制作なら
ブラキオにお任せください