- TOP
- ブログ一覧
BLOGブラキオブログ
JamstackWEB制作エンジニアリングJamstack開発の下請けをお探しですか？ブラキオがあなたの強力なパートナーに
Web制作の世界は常に進化しており、新しい技術が次々と登場しています。その中でもJamstackは、より高速でセキュア、そしてスケーラブルなウェブサイトを実現するための革新的なアプローチとして注目を集めています。しかし、新技術の導入は不安や挑戦を伴うもの。そんな時、ブラキオがパートナーとして、皆さんのJamstackにおける挑戦を全力でサポートします。ブラキオは、フロントエンド開発における豊富な実績を持ち、Jamstack開発においても皆さんをテックリードとして支援できます。コーポレートサイトからwebサービスまで、あらゆるフロントエンド開発のお手伝いをします。また、コーディングだけのお仕事も大歓迎です。プロジェクトの成功は、良いコミュニケーションから始まります。ZoomでのオンラインMTGや、Slackなどのチャットツールを通じて、いつでも柔軟に対応させていただきます。まずはお問合せいただければ、お見積もりを含め、具体的なご提案をさせていただきます。Jamstackでのウェブサイト制作は、多くの可能性を秘めています。ブラキオと一緒に、新たな挑戦に踏み出しませんか？あなたのビジョンを現実のものとするために、全力でサポートさせていただきます。
2024.04.10
ReactNext.jsNext.jsにおけるページ内スクロールの実装ガイド
Next.jsを使用したウェブサイトで、ページ内スクロールを実現したいと思ったことはありませんか？例えば、ウェブサイトのナビゲーションバーに「SERVICE」や「ABOUT」のようなリンクがあり、ユーザーがそれらをクリックすると、ページ内の対応するセクションに自動的にスクロールするといった機能です。弊社の上部にあるメニューがこのページ内スクロールを実装しています。よろしければ試してみてくださいね。まずは、実際に試してみて、その振る舞いを体験してみましょう。このような機能を簡単に実装するためには、というライブラリを利用するのがおすすめです。まずは以下のコマンドでインストールしましょう。そして、以下のように呼び出して使用します。ここでのimport文では、という形でエイリアスを設定しています。これは、という名前がNext.jsの と名前が重複してしまい、混乱を避けるためです。そして、メニューリンクからスクロールさせたい要素への移動を設定するために、その要素にのようなIDを指定します。これにより、ページ内スクロールを簡単に実装することが可能となります。以上がNext.jsでのページ内スクロール実装の基本的な手順です。この方法を試して、ウェブサイトのナビゲーション体験をより良いものにしましょう。
2023.05.14
WEB制作JamstackなぜJamstackでWEB制作の仕事を受けようと思ったのか
私自身もともとWordPressでweb制作の仕事を受けていた。プラグイン依存、CSS設計問題、サーバー代などのコスト面 etc。賛否両論あると思うけど、個人的にはしんどかった。また、業務委託先でReactでサービス開発をずっとやっているのでJamstackでできたらと思っていた。なので、趣味でGatsbyやったりNetlifyCMSやったりして試していたりはしたが、趣味では良いけどクライアントに納品するものとしてと考えると難しいなという印象だった。特に基本が英語なので、どうしても敷居が高くなってしまう。あとはリテラシーが高くないと無理かなとも率直に思った感じ。Jamstackを実際の案件でやりたいけど二の足を踏んでいたという状態だった。そうこうしているうちにmicroCMSの存在を知って「あ、これなら案件でいける」と思い、実際の案件に投入することに決めた。なぜJamstackでWEB制作の仕事を受けようと思ったのかは「microCMS」が比重を多く占めるのだけれど、Jamstack案件をここ数ヶ月で立て続けに3サイト作ったので実際の業務でやったプラクティス的なことをまとめる。フロントエンドエンジニア御用達のprettier、eslint、TypeScriptが使えるの最高。ReactやVueでサービス開発をしたことある人なら問題なくJamstackいける。これはかなりの利点だと思っていて、ある程度フロントをかじった人ならweb制作で受注をして稼ぐことが容易になったと思う。firebase, Amplifyなどがあるけど迷うならNetlifyで良い。デプロイの設定が楽だし迷うこともない。また、お問合せが簡単に作れるのも魅力。ちなみに、firebaseでお問合せを作ろうと思うとCloud Functionsに書かなければいかず有料になってしまう。Amplifyもそんな感じかな？？やったことないからわからない。例えばDBに溜め込むとかしたいならfirebaseを選ぶけど、一般的な中小企業のコーポレートサイトならほぼほぼNetlifyで良い。またそういったコーポレートサイトであれば無料で済む。ただ、泣きどころはTokyoリージョンがNetlifyにないため若干遅い。これはゆくゆくは解決されるのではと思っているけど・・・。デプロイの可否をSlackに通知できたり、お問合せがあったらなど各種連携が取りやすいので運用フェーズに入った時に絶対に必要になるから必ず設定すべし2021/01/14 追記どうやら以前の価格改定により無料枠ではSlackやメールなどの通知ができなくなっている。ちなみに、無料枠である私のアカウントはできる。もしかしたら改訂前にアカウント持っていた場合は通知ができるのかもしれない。アカウント持っている方はホスティングしたサイトを選択 > Site settings > Build & Deploy > ページ下部のDeploy notifications > Add notification で確認した方が良い。notificationができるのであれば下記のように選べるようになっている。もし今後アカウントを取得してNetlifyで通知したい場合は「pro」にしなければならない。microCMSのまわし者みたいだけど、まじでmicroCMSが今のところ一番良い日本語だし、UIも日本人にわかりやすく受け入れられやすいどのクライアントにも言われたけど「記事作成したんだけどプレビューできないんですか？」そんなに難しいことをせずに実装できるので絶対に入れるべし`[https://your-service-name.netlify.app/draft/?id={CONTENT_ID}&draftKey={DRAFT_KEY}](https://your-service-name.netlify.app/draft/?id=%7BCONTENT_ID%7D&draftKey=%7BDRAFT_KEY%7D)` を叩くプレビュー用のページがあれば良いだけ。APIのエンドポイントごとの設定なので注意すべしこれやっておかないと「記事更新したのにサイトに反映されてないんですけど！」と連絡来てしまう。私はNextJSでしか開発をしていないが多少の知識があれば満点ないしかなりの高得点は簡単に出る基本的にはlighthouseで採点 > 注意されたとこを直すフローで良いが、service-workerに関してはプラグインを入れればすぐに解決できてオフラインでも閲覧できるようになる。あとは、やはり画像は重いことが多いので、画像サイズには注意する必要がある。画面いっぱいまで画像を広げたい時などは、簡単に済ますなら画質をある程度落としてしまうし、もしくはsrcset属性を使って最適化するように心がける。また、[TinyPNG](https://tinypng.com/)などを使って圧縮もするようにする。これはstg/prdで分けて開発をしにくい点にあると思う。プレビュー機能の実装である程度は補えるとしても、開発者としてはstgは欲しいなと思う。graphcmsではenvironment-endpointsとして `master` と `dev` でエンドポイントのだしわけが可能なよう。が、残念ながら思いっきり英語なので実務では難しい。(microCMSさんお願い！！！)## 個人的に今後やっていきたいこと今後は案件をもっと獲得できるようにするつもり。また、それに合わせて外注も増やさざるをえないかなと思っていて、外注しても一定の品質が保てるようにしたいので開発フローの整備等をしていきたい。
2023.04.20
WEB制作CSS【それでもCSSは破綻する】 CSSの設計手法と書き方を考える
それでもCSSは破綻する。書くこと自体はとても簡単なCSSですが、その一方で、CSSの設計が簡単に破綻してしまいます。破綻しないためにCSSの設計手法と書き方のノウハウをご紹介できればと思います。以前の記事とかぶるとこも結構あるのですが、全体的にまとまっているので特に初心者〜中級者の方に見てもらえたら嬉しいです。これは極端な言い方ですが、今まであったデザイナーでCSSできると言った人で本当にできる人あまりいないです。どちらかというとCSSは難しいと言った人の方ができる方が多いです。CSSが簡単だと思われてしまう要因の一つがCSSを書くこと自体は言語としてはかなり簡単な部類に入ります。このようなコードをツラツラ書いていけばHTMLに対してスタイルをつけられますよね。書き方としてはごくごくシンプルです。シンプルであるがゆえに管理するのが難しいのです。前置きはこれくらいにしてここから先はCSSがいかに難しいことについて触れていきたいと思います。何が難しいかと言うと一つだけです。そう「破綻」しやすいんです。では、「**CSSの破綻**」とはなんでしょう？例えば「新しくスタイルを書いたのに適用されない」とか「!importantが乱用されている」とかが挙げられます。破綻というとなかなか難しいですが、複数人で複数人で同じCSSファイルを編集していると起こりやすいです。具体的には・・・似たようなコードもしくは同じコードが重複してしまっている状態。セレクタ名が同じものが乱立している状態。上記を解消するために詳細度を深くしてなんとかスタイルを割り当てている状態だったり「!important」を乱用している状態。上記のようなことが起きているようなCSSのコードは完全に破綻しています。では**「破綻のしない」良いCSSのコード**ってどんなのなんでしょう。よく言われるのが・・・セレクタ名には.aとか.cなど自分だけがわかるものは基本NGです。あとは、クラスセレクタに日付が書いてあったり、「new」とか書いてあるのが見かけることがあります。もうこれは末期ですね。おそらく破綻してます。例えばタイトルならば.title、バナーを配置する場所なら.banner-areaなどクラス名を見ただけでなんとなくどんな使い方がされているかわかるものがいいです。サイト内のどこに配置しても大丈夫なように作られている方がいいでしょう詳細度と関連してくるのですが、詳細度を深くしすぎるとのちのちスタイルの上書きする際に困ります。例えばタイトルであれば、文字の大きさの違うパターンや色違いパターンなどが作りやすい方がいいです。ポイントは5つあります。一つずつご紹介します。まとめられるものがあるならばまとめた方がいいですね。ファイルサイズ節約にもなります。運用の時に付け足す時もそっとまとめてあげるといいですよね！！下記のコードは実際に僕が出くわしたコードです。見た時正直びっくりしました。以前担当していた方が書いたんでしょうけど、同じスタイルじゃん・・・。なんでこうなったかは理解に苦しむんですが、これもクラス一個で各ページ使い回せばいいだけですよね。idセレクタ、クラスセレクタ、タイプセレクタと異なるセレクタが混在していると、マークアップが変わった時に対応ができません。こちらはBEMという書き方をしていますが、後ほど詳しくご紹介します。下記の「Bad」のやり方はわかりやすいっちゃわかりやすいんですが、再利用性に欠けます。というのもh1にしか使えないので、たとえば、マークアップ的にh2の方が適切の場合はスタイルを適用できないですね。cssのテクニックとして「body」タグにクラスをつけてコンテンツのスタイルをページごとに変更したりします。でもこれって「body」タグにクラスに依存しすぎてしまっていて再利用しづらいし、拡張もしにくいですよね。たとえば、デフォルトのヘッダーとメニュー詳細ページでヘッダーのスタイルを変更したい場合、以下のような書き方をします。でもこれって、運用していくなかで新しくページを追加して（LPとかね）詳細ページと同じヘッダーでって場合どうしますか？パターンとしてはdetailと同じスタイルをLP用につくるか、LPのbodyにdetailを付与ですよね？後者の場合ってめちゃくちゃ気持ち悪いですよね。detailページでもないのにbodyにdetailって・・・このパターンでCSSを書くとページが増える度にセレクタを書き加えなければいけませんね。これをBEMでセレクタを書くとめっちゃわかりやすくなります！！ポイントはページ単位で切り分けないでプロパティごとに切り分けた方がいいかなと思います。これまでのことを気をつけても更新作業などをしていればほぼ100%破綻します次に紹介するのは**CSSの設計**です。自由に書けるCSSだからこそルールを設けてみんなで守りましょうというものです。実はCSS設計の手法ってたくさん存在しています。それぞれ特徴があったりしますが基本的な考え方としては**破綻のしにくいCSSのコード**を書きましょうというのは変わりません。自分のやりやすいものやそのWEBサイトにあったものを選ぶのがいいと思います。今回は「**FLOCSS**と**BEM**」をご紹介します。FLOCSSというのは、日本人が考えたCSSの設計手法です。実は、「」という本を書いた谷さんという方が考えたものです。BEMは、セレクタの書き方の考え方です。賛否両論ありますが、HTMLのタグを見ただけでどんなスタイルかわかりやすいというメリットがあります。デメリットとしてはセレクタが長くなりがちです。まずはFLOCSSの基本としてサイトのCSSディレクトリの中身を分けます。これで、どこにどんなスタイルを書くかわかりやすくなりますね。ちなみに、今回はSassを使っている想定にしています。これはなぜかと言うと`import`する際にCSSの場合と言うように書くのですが、このimport文だとサイトの読み込みに時間がかかってしまうんですね。そこでSassを使うと実際にページに読み込まれる時にはいimportし終わっていて一つにまとめられたCSSファイルが生成することができます。importの書き方はと言うようにできます。Sassを使う方がメリットもたくさんあるので興味のある方はぜひ使ってみてください。横道にずれてしまいましたが、ディレクトリの構成は以下のようになります。ここはbase.scssやreset.scssなどサイト全体の下地になる部分を書きます。ここはサイトの基本レイアウトを書く場所です。例えばheaderやfooterなどここではサイト全体で再利用性の高いスタイルを書きます。componentは再利用性の高いパーツを書く場所です。特徴としてはどんなサイトでも大概あるパーツを書くことが多いです。例えば、ボタンスタイル、タブスタイル、見出しスタイルなどprojectも再利用性の高いパーツを書く場所なんですが、componentととの違いは、このサイト特有のパーツの場合はここに書きます。例えば、グラフスタイル、ドロップゾーンなどここはいつでもどこでも使えるスタイルです。基本的には1セレクタに1プロパティになることが多いです。app.scss内に各ファイルをimportします。FLOCSSではなんの属性なのかHTMLのコードを見ただけですぐにわかるように接頭辞をつけることを義務付けしています。こちらはjQueryなどと併用する時によく使われます。例えばボタンを押すと出てくるUIなどは.is-showなどのクラスセレクタをつけたりします。.js-はjs(jQuery)と関わっているのか表す接頭辞です。これはJSで動くなど何かしら操作したときなどにセレクタで呼び出しますが、その際はスタイルで定義されたセレクタを使うのではなく必ず「.js-hoge」などで行うことを義務付けします。そうすることで文書構造、スタイル、スクリプトを完全に分離することができてHTMLを見るだけで何が行われているのか、残さなければいけないセレクタなのかわかりやすくなります。idセレクタとクラスセレクタが基本的にはよく使われるセレクタですが、idセレクタはあまり使わない方がいいです。実はidセレクタには問題点があります。というのも詳細度と関連してくるのですが、基本的にidセレクタは詳細度がかなり強いです。なので、スタイルを上書きしなければいけない場合にどうしてもそれ以上の詳細度にしなければいけません。さらに、1ページに一回しか使えないので、再利用性にかけます。先ほどのdrawerのコードであまり見かけないセレクタの書き方がありました。これが実はBEMの書き方です。そしてBEMのセレクタの書き方には3つの要素でできています。その頭文字をとってBEMと言います。これはdrawerなどのパーツなどの塊を表します。FLOCSSではこのBlockごとにCSSのファイルを書いていくのがいいでしょう。これはBlock内に存在する要素を表します。drawerで言えばボタンやコンテンツですね。これは状態を表します。例えば、背景の色が違うパターンなど注意！.is-や.js-とは使い方が違います。セレクタでBlockとElementのつなぐ方法はアンダースコアを二つつけます。Modifierの前にハイフンを二つつけます。先ほどもご紹介したようにBEMのデメリットはセレクタが長くなりすぎます。こういったケースが頻発するのでcomponentを小分けしていくといいです。そうすると小さい単位のcomponentごとに各componentを組み合わせて使いまわすことが可能になります。ここまでやっても**CSSは破綻**します。そうですねこれでも80%以上の確率で破綻します。複数人いる場合には特に！！そのサイトやサービスに置けるルールを記します。記載する内容は作る人や企業によってまちまちですが、基本的なものとしてはよく使われるcomponentに関してはコードをまとめておくといいです。下記のは僕が作ったフレームワークのものですが、なんとなくの雰囲気はつかめるかなと思います。[Document](http://takumi0901.github.io/flanky/)あくまで「しにくい」です。せっかく作ったガイドラインを無視したりする人がいれば「破綻」します。大体の企業では何かサービス作るにあたってあらかじめガイドラインが設けられていることが多いです。なので、そのサービスに途中から参加する場合などはガイドラインを読み込み、実際のCSSコードを追って理解を深めるのがいいと思います。
2023.04.19
JamstackWordPressWordPressとJamstackの違いについて
WordPressとJamstackは、ウェブサイトやウェブアプリケーションの構築に使用される異なる技術です。それぞれの主な違いは以下の通りです。それぞれの技術にはメリットとデメリットがあります。以下に、WordPressとJamstackの主なメリットとデメリットをまとめました。
2023.04.14
WEB制作Netlify弊社で使っているNetlifyお問合せの実装方法をコード付きで解説
弊社のコーポレートサイトは、現代のウェブ開発に適したアーキテクチャであるJamstackを採用しています。Jamstackの利点を最大限に活用するために、ホスティングサービスとしてNetlifyを選択しました。Netlifyの特徴の一つは、お問い合わせフォームの実装が容易であることです。特に、弊社のコーポレートサイトではNext.jsフレームワークを使用しており、以下のライブラリを組み合わせてお問い合わせフォームを実装しています。これらのライブラリを利用することで、シンプルかつ効率的にお問い合わせフォームを実装することが可能です。react-hook-formは、Reactアプリケーション向けの軽量で効果的なフォームバリデーションライブラリです。フックを使用して状態を管理するため、クラスコンポーネントを使わずにフォーム状態を管理できます。また、再レンダリングの最適化により、パフォーマンスが向上します。axiosは、PromiseベースのHTTPクライアントで、ブラウザとNode.jsの両方で動作します。シンプルなAPIと高い柔軟性を提供し、RESTful APIとのやり取りが簡単になります。また、インターセプター機能やリクエスト/レスポンスの変換など、機能が豊富です。以下は、Next.js、react-hook-form、axiosを使用してお問合せフォームを実装する例です。下記のようにformタグに を付与するとNetlify サイトの管理パネルで送信のを開始できます。 は、HTTPリクエストのヘッダーにコンテンツタイプを指定しています。このコードは、リクエストの本文（ペイロード）が フォーマットでエンコードされていることを伝える役割があります。 は、フォームデータをエンコードする際に一般的に使用されるコンテンツタイプです。このフォーマットでは、キーと値がURLエンコードされ、 で区切られます。例えば、以下のような形式になります。下記についてはNetlify側でformを受け取るために必要な設定です。こんな感じでNetlifyを使えば簡単にお問い合わせを実装することができます。弊社のコーポレートや今まで制作させていただいたお客様のホームページでも同じような実装をしています。
2023.04.13
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
- TOP
- ブログ一覧