- TOP
- ブログ一覧
BLOGブラキオブログ
JamstackWEB制作Jamstackで使われるAPIを簡単に説明すると・・・
API（Application Programming Interface）とは、アプリケーションやソフトウェア間でデータや機能を共有するためのインターフェースです。APIを利用することで、異なるソフトウェアやサービスが相互にやり取りを行い、一連の機能を実現できます。APIは、プログラムが他のプログラムと通信するための規則やプロトコルを定めたもので、効率的な開発が可能になります。APIをもっと簡単に説明すると、レストランのメニューに例えることができます。レストランのメニューには、利用できる料理や飲み物が一覧で示されており、お客様が選択して注文することができます。APIも同様に、利用できる機能やデータが一覧で示されており、開発者が選択してプログラムに組み込むことができます。メニューから注文することで料理が提供されるように、APIを使ってリクエストを送ることで、機能が実行されたり、データが返されたりします。これにより、開発者は簡単にプログラムに機能を追加できるようになります。弊社ではWEBサイト制作時にJamstackという最新のアーキテクチャを採用しています。Jamstackは、JavaScript、API、Markupの頭文字を組み合わせた言葉で、ウェブ開発のアプローチの1つです。このアプローチにより、パフォーマンス、セキュリティ、スケーラビリティが向上し、効率的なウェブサイト制作が可能になります。Jamstackでの制作では、API（Application Programming Interface）が重要な役割を果たします。APIは、アプリケーションやサービス間でデータや機能を共有するためのインターフェースで、ウェブサイトの機能を追加・拡張する際に利用されます。例えば、ウェブサイトにお問い合わせフォームやログイン機能、ソーシャルメディア連携などを実装する際にAPIが活用されます。JamstackアーキテクチャにおけるAPIの利用は、セキュリティ面でもメリットがあります。従来のウェブアプリケーションでは、データベースやサーバーサイドの処理が直接ウェブサイトに組み込まれているため、セキュリティリスクが高まることがありました。しかし、JamstackではAPIを介してサーバーサイドの機能を利用するため、サーバーサイドの脆弱性に対するリスクが軽減されます。また、APIはアクセス制御や認証機能を備えているため、安全にデータや機能を利用できます。弊社では、Jamstackを活用してセキュリティに優れたウェブサイト制作を行っております。お客様のビジネスニーズに合わせた機能を迅速かつ安全に実装し、高品質なウェブサイトを提供いたします。
2023.04.11
WEB制作WEB制作におけるレスポンシブデザインの概要と対応方法
現代のWebサイト制作において、レスポンシブデザインは非常に重要な要素となっています。この記事では、レスポンシブデザインの概要、重要性、そして対応方法について説明します。レスポンシブデザインとは、デバイスの画面サイズや解像度に応じて、Webサイトのレイアウトやデザインが自動的に調整されるデザイン手法です。これにより、スマートフォンやタブレットなど、さまざまなデバイスで快適に閲覧できるWebサイトを実現します。近年、日本においてもスマートフォンやタブレットの利用が急速に普及しています。これにより、Webサイトのデザインや開発において、さまざまなデバイスへの対応が重要となっています。ここでは、日本におけるスマートフォン、タブレット、PCユーザーの割合について説明します。※注意: ここで示すデータは2021年時点のものです。最新の情報は適宜確認してください。日本におけるデバイス別のインターネット利用率は以下の通りです。これらのデータからわかるように、スマートフォンの利用率が最も高く、タブレットとPCの利用率はそれに続いています。また、複数のデバイスを併用しているユーザーも多いため、この割合は単純に足すことはできません。このような状況を考慮すると、Webサイト制作においては、スマートフォンやタブレットなどのモバイルデバイスに対応したデザインが不可欠です。レスポンシブデザインを採用することで、デバイスの種類や画面サイズに関係なく、快適に閲覧できるWebサイトを提供できます。これにより、ユーザーエクスペリエンスが向上し、SEO対策にも効果的です。レスポンシブデザインは、以下の理由から非常に重要です。レスポンシブデザインの実現には、以下の方法があります。レスポンシブデザインは、ユーザーエクスペリエンスの向上やSEO対策に役立つだけでなく、メンテナンスの効率化にも貢献します。フレキシブルグリッドレイアウト、フレキシブル画像、そしてメディアクエリを活用することで、さまざまなデバイスで適切な表示が可能なWebサイトを実現できます。これにより、ビジネスやオンラインプレゼンスを向上させることができるため、現代のWebサイト制作においてレスポンシブデザインは欠かせない要素となっています。
2023.04.10
WEB制作Jamstackホスティングサービスについての概要と弊社の取り組み
Webサイト制作において、ホスティングサービスは欠かすことのできない要素です。本記事では、ホスティングサービスの概要や種類、Jamstackとの関連性、弊社の取り組みについて説明します。ホスティングサービスとは、Webサイトやアプリケーションのデータやファイルを保存し、インターネット経由でアクセスできるように提供するサービスです。ホスティングサービスを利用することで、安定した運用環境を確保し、Webサイトやアプリケーションのパフォーマンスを向上させることができます。ホスティングサービスには、主に以下のような種類があります。弊社はJamsstackアーキテクチャを採用したWebサイト制作を得意としております。Jamstackで制作したWebサイトでは、ホスティングサービスが必須となります。Jamstackでは、静的ファイルをホスティングサービス上にデプロイし、高速かつセキュアな配信が可能です。弊社では、主にNetlifyを利用したホスティングサービスを提供しています。Netlifyは、Jamstackアーキテクチャに特化したホスティングプラットフォームで、高速な配信、自動ビルド、独自ドメインの設定、SSL証明書の自動発行など、多くの便利な機能が利用できます。また、Netlifyは、デプロイプロセスを簡単に管理できるため、効率的な開発・運用が可能です。弊社では、お客様のご要望に応じて、オーダーメイドでホスティングサービスの選択が可能です。例えば、Amazon Web Services（AWS）やGoogle Cloud Platform（GCP）など、他のクラウドベースのホスティングサービスを利用することもできます。お客様のビジネスニーズや予算に合わせて、最適なホスティングサービスを提案・実装いたします。まとめると、ホスティングサービスはWebサイト制作・運用において重要な役割を果たします。弊社では、主にNetlifyを利用して高速かつ安定したWebサイトの提供を行っており、お客様のご要望に応じてオーダーメイドでホスティングサービスを選択することができます。これにより、お客様のビジネスに最適なWebサイト環境を構築することが可能です。
2023.04.09
WEB制作オーダーメイドWebサイト制作の特徴と費用について
弊社では、お客様のニーズに合わせたオーダーメイドのWebサイト制作を承ります。ライトプランやスタンダードプランとは異なり、より独自性の高いデザインや機能を取り入れることが可能です。オーダーメイドの制作プロセスは、基本的な流れはライトプラン、スタンダードプランと同様ですが、以下のようなご要望に応じてカスタマイズが可能です。オーダーメイドのWebサイト制作における費用は、ご要望の内容や機能によって異なります。まずはお客様からのご要望をお伺いし、それに基づいたお見積もりを提示させていただきます。お客様が費用に納得された上で、制作を開始いたします。オーダーメイドのWebサイト制作では、お客様の独自性を大切にし、競合他社と差別化されたホームページを実現します。弊社は、お客様のビジネスに最適なWebサイト制作をサポートいたします。
2023.04.08
WEB制作Webサイト（ホームページ）は公開してからがスタート
Webサイト（ホームページ）の制作が終わり、公開されると、その後の保守・運用が非常に重要となります。公開してからが本当のスタートであり、定期的なメンテナンスやアップデートが必要です。この記事では、保守・運用の重要性とその内容について詳しく解説します。Webサイトは、一度公開されると、多くのユーザーが訪れます。そのため、常に最新の情報を提供し、問題が発生した際には迅速に対応することが重要です。また、サーバーやCMSのバージョン管理、データのバックアップなど、技術面での運用も不可欠です。定期的な保守・運用により、Webサイトのデザインやコンテンツが最新の状態に保たれ、ユーザーエクスペリエンスが向上します。これにより、訪問者がWebサイトで過ごす時間が増え、コンバージョン率も向上する可能性があります。保守・運用により、サーバーやCMSのセキュリティを維持・向上させることができます。これにより、ハッキングや情報漏えいなどのリスクを最小限に抑えることができます。適切な保守・運用により、WebサイトのSEO対策が最適化され、検索エンジンの評価が向上します。これにより、検索結果での順位が上昇し、アクセス数が増加する可能性があります。定期的な保守・運用により、Webサイトで発生するバグや不具合を迅速に修正することができます。これにより、訪問者に対して良好な印象を与え、リピート率を高めることができます。保守・運用を通じて、Webサイトのコンテンツを最新の情報に更新し、新しいコンテンツを追加することができます。これにより、訪問者に対して付加価値を提供し、ブランド力を向上させることができます。定期的なデータバックアップにより、万が一のトラブルやデータロスが発生した場合でも、バックアップから復元することができます。これにより、Webサイトのダウンタイムを最小限に抑え、訪問者の信頼を保ちます。保守・運用を通じて、Webサイトの表示速度やレスポンシブ対応などのパフォーマンスを最適化することができます。これにより、訪問者の離脱率を減らし、コンバージョン率を向上させることができます。総合的に見ると、Webサイトの保守・運用は、ユーザーエクスペリエンスの向上、セキュリティの確保、検索エンジンの評価向上など、Webサイト運営において重要な要素をサポートします。適切な保守・運用により、Webサイトの成果を最大化し、事業目標を達成することができるでしょう。Webサイト（ホームページ）の保守・運用は、公開後のスムーズな運営を実現するために欠かせません。ブラキオではご希望のお客様に運用・保守のサポートをさせていただいてます。制作の流れと保守・運用の内容、費用についてはこちらをご覧ください。
2023.04.06
エンジニアリングJamstackWEBサイト（ホームページ）のページ速度が速いことで得られるメリット
結論から言うと、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.jsNext.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
- TOP
- ブログ一覧