Support your website by
development.
Jamstackをはじめとする最新技術を使ったフロントエンド開発、承ります。 フロントエンド開発・ホームページ制作を埼玉でご依頼ならブラキオにお任せください。
株式会社ブラキオはWEBサービスの開発やホームページ制作および運用・保守を行っています。
モダンな技術でつくる高品質なソリューションを低価格でご提供します。 法人ではありますが、社長ひとりの会社です。
そのため安定した品質のご提供、細かいご要望への対応や迅速なやりとりができます。
SERVICE事業内容
WEBサービス開発
React,TypeScriptによるフロントエンド開発をメインにしており、特にComponentの設計を得意としております。
今まで業務委託としてジョインした複数プロダクトでの経験を活かして開発をいたします。また、フロントエンドのパフォーマンス改善やBFF構築もお任せください。
※単価については要相談
ホームページ制作
Jamstackを使用した高品質、高セキュリティ、高速表示のホームページ制作を得意としています。
また制作後の保守・運用もお任せください。ホームページ制作後、リリースしてからが本当のスタート。 サイトのリリース後の更新や画像の差し替え、もしものときの対応もいたします。
WORKS制作実績
ABOUT会社概要
| 会社名 | 株式会社ブラキオ |
|---|---|
| 代表者 | 木村 匠 |
| 設立年月日 | 2020年09月29日 |
| 所在地 | 埼玉県越谷市 |
| 法人番号 | 0300-01-138540 |
| 事業内容 | - WEBサービスのフロントエンド開発
- ホームページ制作 |
| 営業時間 | 月～金 9:00 ～ 18:00 |
| 資本金 | 100万円 |
PROFILEプロフィール
代表取締役
木村 匠
TAKUMI KIMURA
フロントエンドエンジニア
埼玉出身。2児の父で趣味はフットサル、バスフィッシング。子どもの影響で恐竜に詳しくなりました。 React、Next.js、TypeScript、GraphQL、Node.jsなどフロントエンドの開発をしています。その経験を生かし、バックエンドに外部サービスを利用したJamstackでのホームページ制作を得意としております。高品質、高パフォーマンスなwebサイト（ホームページ）が必要でしたらお気軽にご相談ください。 また、webインストラクターをしていた経験を生かし、執筆などもしています。今後はエンジニアの育成なども事業としてやっていければと考えています。
これまでの経歴
・ WEBデザイナー ・ WEBインストラクター ・ WEBコーダー ・ フロントエンドエンジニア
BLOGブラキオブログ
- エンジニアリングJamstack
WEBサイト（ホームページ）のページ速度が速いことで得られるメリット
結論から言うと、WEBサイトのページ速度（ページが表示されるまでの時間）はとても重要で、速ければ速いほど多くのメリットを享受することができます。ではそのメリットはというと・・・があります。これらはWEBサイトを運営する上で欠かせない項目ですよね。2018年1月にということが事前にアナウンスされ、2018年7月にスピードアップデート として導入されました。ですが、影響を受けるサイトは一部で、本当に遅いページだけがマイナスの影響を受け、であればマイナス影響を受けることはないでしょう。ページが表示されるまでに何十秒もかかってしまうのは良くないです。直帰率・離脱率について2017年と2018年のGoogleの調査をしたそうで、ページ表示速度が1秒から3秒になると直帰率が32%増加、6秒になると106%増加、10秒まで遅くなると123%増加すると報告されています。また、表示に3秒以上かかるモバイルページからは53%のユーザーが離脱しているとの調査報告がされています。ページ速度が遅いことでせっかくWEBサイトに訪れてくれたユーザーが内容を見ずにサイトから去ってしまうと言うことがわかります。実際に私たちもすぐに表示されないページは嫌ですよね。この調査からがユーザーが我慢をできるデッドラインと言うのがわかりますね。ページが表示されるまでの時間が3秒以上かかっているようであれば改善は急務かつ必須と言えます。弊社のブログでも以前に触れていますが（）弊社サイトで採用されているJamstackはページ速度が速いと言うのが特徴の一つです。速い理由については、今後記事にしていこうかなと思っていますが、簡単に説明をすると従来のWordPressを利用したCMSサイトの場合は、アクセスがあるたびにHTMLを生成をしてブラウザで表示できるようにしています。ですが、Jamstackの場合は事前にHTMLを生成をしておいてアクセスがあったらそのすでに用意されているHTMLを使ってブラウザで表示をさせています。都度生成をしないのでページを高速で表示される仕組みになっています。では実際に弊社サイト（）のページ速度を確認してみます。すると、かなり高速で表示されているのがわかるかと思います。弊社で使っているコーポレートサイト用のJamstackテンプレートではこのようにページが高速で表示されるようにチューニングを行っています。ホームページが必要、検討している場合はまずはご相談ください。
2022.03.22
- エンジニアリングNext.js
Next.jsでXMLサイトマップを作成する方法
XMLサイトマップというのはXML形式のファイルのこといいます。そのXMLサイトマップを設置することで、新規記事の公開やリライトによる更新情報をインデックスに素早く反映させ、検索結果に表示させることができます。設置したからといって上位表示に直結するわけではありませんが、クローリングが効率的になるということは、結果的にSEO上好ましい状態に近づくということになるでしょう。Next.jsでStatic GenerationをしていわゆるJamstackのサイトを作る際にデプロイ時に一緒にXMLサイトマップ（sitemap.xml）も作る手順をご紹介します。こちらのパッケージを使えば簡単にできてしまいます。設定ファイルを一つと、pacakge.jsonにscriptsを足せばビルド時にサイトマップが生成され流という便利なパッケージです。Next.jsでサイト構築するのならおすすめのパッケージです！！sitemap.config.jsファイルをプロジェクトの直下に作ります。オプションを一つ一つ解説をすると・・・siteUrl：サイトURLを指定します。これは必須項目です。generateRobotsTxt：robots.txt ファイルを生成し、生成されたサイトマップをリストアップします。デフォルトfalseです。outDir：生成するディレクトリを指定します。packge.jsonのscriptsに追記をします。おそらく しているところがあると思うのでその後に を追記します。下記のようにコマンドを叩いていただくとサイトマップの一緒に生成されます。ちなみに、弊社サイトだとこのような形で ディレクトリ内に生成されます。Google Search Consoleへサイトマップを登録します。Google Search Consoleのページに行ったら左メニューのサイトマップをクリックします。次にURLの入力欄があるのでそこにサイトマップのURLを入力してください。サイトのURL/sitemap.xml になるはずです。弊社の場合は です。
2022.03.19
- エンジニアリングJamstack
ヘッドレスCMSとは？現役フロントエンドエンジニアが解説
CMSというのは「コンテンツ管理システム」のことで、簡単にいうとブログのように記事などを投稿したりページを追加したりすることができるシステムのことをいいます。代表的なものだとWordPressがまさにCMSです。「プレビュー機能がないCMS」と言われます。もう少し詳しく解説をするとデータを配信しているだけのCMSのことをいいます。例えば、ブログデータを配信となると下記のような感じになります。このようなデータをヘッドレスCMSでは作成をし、配信をします。そして、JavaScriptなどのプログラミング言語でその配信されたデータを取得をし、HTMLやCSSを使いWEBサイトとして構築をしていきます。なのでWordPressの場合は配信と構築をWordPress内でしていましたが、ヘッドレスCMSの場合は配信と構築を分離して開発をすることができます。またヘッドレスCMSは国内、海外製も含め多種多様なサービスがあり、それらを利用して簡単に配信をすることができます。弊社で使っているヘッドレスCMSです。国内産なので日本語で書かれていて馴染みやすいです。また、UIもわかりやすく使いやすいですね。こちらも国内産ヘッドレスCMSです。リリースされたばかりで弊社ではまだ使っていないですが、無料で使える枠がmicroCMSよりも多いので今度試してみたいなと思っています。GraphQLに特化したヘッドレスCMSです。海外製のため日本で書かれていないので英語が読めないと難しいですね。クライアント様に管理画面として記事投稿をしてもらう運用だと採用は難しそうです。また、GraphQLということもあり設計がちょっと難しいですね。弊社で使っているホスティングサービスNetlifyにもヘッドレスCMSはあります。以前、GatsbyJSとNetlifyCMSを使ってコーポレートサイトを作らさせていただいたこともあります。海外製なのでやはりクライアント様に記事投稿をしていただくケースでは採用は難しいです。Google の提供する BaaS サービスである でヘッドレスCMS サイトを構築するサービスです。Firebaseとの連携が必須なのでFirebaseにホスティングしていたり、cloudfunctionsで少し凝ったことをしたい、お問合せの内容をfirestoreに保存したいなどのケースではこちらの方が良い場合もありそうです。弊社でもFirebaseを使うケースも出てきそうなので候補として頭の中に入れておきたいですね。
2022.03.18
- エンジニアリングJamstack
弊社サイト（ホームページ）で使われているJamstackとは何か？
弊社コーポレートサイトはJamstackという構成で作られています。Jamstackは高セキュリティで高速表示というメリットがあり、弊社ではお客様からのご希望がない限りJamstackでサイト制作をさせていただいております。ですが、そのJamstack。なかなか聞き慣れない言葉ですよね。なのでこの記事ではJamstackについて解説をしてみたいと思います。
2021.07.13
