月々ランチ1回分より安い?小規模WebサイトにAWS Lightsailという選択肢

月々ランチ1回分より安い?
小規模WebサイトにAWS Lightsailという選択肢

前回の記事では、Webサイトを軽く運用する方法として「サーバーレス」という選択肢をご紹介しました。
ただ、実際のWebサイトやシステムでは、すべてをサーバーレスにできるわけではありません。
例えば、WordPressで記事を更新したり、会員情報や商品情報などのデータを管理する場合は、データベースを使った環境が必要になります。

実はAWSには、小規模なWebサイトやシステムでも使いやすいサービスがあります。
それがAmazon Lightsailです。

AWSってもっと高いものだと思っていました

AWSというと、

  • 大規模なサービス
  • 高度なインフラ
  • 専門知識が必要
というイメージがあります。

もちろん大規模なシステムでは高度な構成が必要になります。
でも、会社のホームページや小規模なシステムであれば、必要な機能に絞った構成で運用することもできます。
そこで選択肢になるのがLightsailです。

LightsailはWordPressだけじゃありません

Lightsailというと「WordPressを動かすもの」というイメージが強いかもしれません。
でも、実はそれだけではありません。
例えば、

  • WordPressサイト
  • Webアプリケーション
  • 小規模な業務システム
  • 開発環境
  • データベースを利用したシステム

などにも利用できます。
もちろん、サイトの規模や必要な機能によって構成は変わります。
「もっと効率的な構成はないのか」
「全部を高性能な環境にする」のではなく、必要なものに合わせて選ぶことが大切です。

一番安いサーバーならいいの?

では、とにかく一番安い構成にすればいいのか?
というと、そう簡単ではありません。
小さなサーバーでは、

「アクセスが増えたら表示できなくなった」
「処理が重くなってしまった」
「WordPress更新したらサイトが落ちてしまった」

なんてこともあります。
実際に、低スペックな環境で運用していたサイトが一時的に停止してしまうケースもあります。

その場合、「もっと高いサーバーに変える」だけが解決方法ではありません。
処理の見直しや、自動で復旧する仕組みを入れることで、必要以上にコストを増やさず安定運用できる場合もあります。

大事なのは安さより、サイトに合った環境選び

Webサイトやシステムは、それぞれ必要な環境が違います。

会社案内のサイトなのか、
WordPressで更新するサイトなのか、
業務システムとして使うものなのか。

目的によって、適したサーバーや構成は変わります。

サーバーからシステムまでまとめて対応します

クレッジでは、

  • AWS・Azure環境の構築
  • サーバー移行
  • WordPress環境構築
  • データベース構築
  • 小規模システム開発
  • 運用中のトラブル対応

まで対応しています。

「今のサーバー費用は適正なのか」
「もっと良い構成があるのでは?」
「サイトやシステムをどう運用すればいいかわからない」

そんな場合は、現在の環境や目的に合わせてご提案します。

AWS・Azureの構築について詳しくはこちら

デジタル化の窓口に『おすすめの システム開発会社 として掲載されました

デジタル化の窓口に『おすすめの システム開発会社 として掲載されました。
下記リンクとなります。
https://digi-mado.jp/article/136061/

Webサイト運営のサーバー費用、高すぎませんか?

Webサイト運営のサーバー費用、高すぎませんか?

近年、Webサービスや業務システムではクラウド環境を活用する企業が増えています。

企業サイトを運営していると、制作後にも継続的に発生するサーバー費用。
月数千円程度なら気にならないかもしれませんが、年間で考えると数万円〜十万円以上になるケースもあります。
「現在のサイト規模に対して、本当に今のサーバー構成が必要なのか?」
こうした見直しを行うことで、運用コストを最適化できる場合があります。

サーバー費用が発生する理由

Webサイトには、公開するためのサーバー環境が必要です。
一般的には、

  • レンタルサーバー
  • VPS
  • バックアップ環境
  • クラウドサーバー

などを利用します。
しかし、すべてのWebサイトに同じスペックの環境が必要というわけではありません。
会社案内サイトやサービス紹介ページなど、用途によってはよりシンプルな構成が適している場合があります。

新しいWebサイト運用の選択肢

近年では、クラウドサービスを活用したWebサイト運用も増えています。
その一つがMicrosoft Azureの「Azure Static Web Apps」です。
静的なWebサイトを効率よく公開できるサービスで、サイトの種類によっては従来とは異なる運用方法を検討できます。
ただし、サイト構成や必要な機能によって適した方法は変わります。

大切なのは「安いサーバーを選ぶこと」ではない

Webサイト運用で重要なのは、単純に一番安い環境を選ぶことではありません。

  • 更新頻度
  • 必要な機能
  • セキュリティ
  • 将来的な拡張性

などを考慮して、自社サイトに合った環境を選ぶことが大切です。
「現在のサーバー費用は適切なのか」
「もっと効率的な構成はないのか」
と感じた場合は、一度環境を見直してみるのも一つの方法です。

クラウドを活用したWebサイト運用をご検討の方へ

クレッジでは、AWS・Azureなどのクラウドサービスを活用したWebサイト環境の構築・運用についてご相談いただけます。
サイトの目的や運用状況に合わせた環境をご提案します。

AWS・Azureを活用したクラウド環境構築について

WordPressログイン障害対応

WordPress管理画面へログインできなくなったサイトに対し、管理者アカウントの復旧対応を行いました。
通常のパスワード再設定が利用できない状況だったため、データベース(MySQL)を確認し、管理者情報を復旧。新たにログイン可能なアカウントを作成することで、管理画面へのアクセスを再開しました。
WordPressの管理画面トラブルに対して、原因を確認しながらサーバー・データベース側から復旧対応を実施しています。

対象
WordPress
対応期間
約3〜4時間
対応内容
ログイン障害対応、管理者アカウント復旧、データベース確認
対応技術
PHP、MySQL、phpMyAdmin

AWS Lightsailを活用した低コストサーバー環境構築

AWS Lightsailを活用し、低コストで運用可能なWebサーバー環境を構築しました。
低価格プランの限られたリソースでも安定した運用ができるよう、必要な機能に絞った環境構成と軽量化を実施。サーバー負荷を考慮した設定を行い、コストを抑えながら効率的に運用できる環境を構築しています。
また、画像アップロード時の自動圧縮機能を導入することで、ストレージ容量や通信量を削減。サーバー構築から運用を考慮した環境まで一貫して対応しました。

インフラ
AWS Lightsail
サーバー
Webサーバー環境構築
対応内容
AWS環境構築、サーバー設定、軽量化、運用最適化

GPS端末位置情報確認システム

GPS端末から取得した位置情報を確認・管理できる位置情報システムを開発しました。
管理画面では、GPS端末情報や位置情報の確認、履歴データの管理などを行える機能を実装。さらに、利用者がアプリから位置情報を確認できる環境を構築し、端末管理から情報確認まで一元化できるシステムとして提供しています。
また、AWS Athenaを活用し、蓄積された位置情報データをコストを抑えながら高速に検索・分析できる仕組みを実装。大量のデータを効率的に活用できるシステム構成を実現しました。
画面設計からフロントエンド・バックエンド開発まで対応し、業務利用にも対応できる拡張性を考慮したシステム開発を行いました。

システム
GPS位置情報管理システム
開発言語
TypeScript、Node.js
フレームワーク
Nuxt.js、AWSサーバーレス
対応内容
位置情報システム開発、管理画面開発、アプリ連携、データ管理機能

AI活用によるブログ連携ECサイト構築

GPS端末の販売および位置情報確認サービスを提供するためのECサイト構築を行いました。
お客様ご支給のデザインをもとに、EC機能だけでなく、GPS端末の位置情報を確認できるシステム連携まで含めた開発を実施しました。商品の購入からサービス利用までをスムーズにつなげることで、ユーザーの利便性向上を図っています。
また、ChatGPTを活用したブログ記事の自動生成・投稿環境を構築し、継続的な情報発信による集客施策にも対応。サイト運営にかかる負担を軽減しながら、コンテンツ拡充によるアクセス向上を支援しています。

サービス
ECサイト
開発言語
TypeScript、Node.js
フレームワーク
Nuxt.js
対応内容
ECサイト構築、GPS位置情報システム開発、AIコンテンツ生成環境構築

SWELLでオリジナルデザインを実現!Smart Sliderの使い方

「お客様から『こんな動きのあるトップページにしたい』とデザインデータをもらったけど、SWELLだけではうまく再現できない…」

WordPressテーマSWELLを使ってサイト制作をしているWEBデザイナーやコーダーの方なら、一度はこんな悩みにぶつかったことがあるのではないでしょうか。SWELLは扱いやすく美しいデザインが作れるテーマですが、標準機能だけでは表現しきれない、こだわりのスライダー演出を求められる場面も少なくありません。

そんなときに頼りになるのが、プラグイン「Smart Slider」です。この記事では、SWELLでお客様の要望デザインを実現するために、Smart Sliderの基本的な使い方から実装のコツまで、初心者の方にもわかりやすく解説していきます。

「Smart Slider」を使用した弊社の制作実績はこちら。

SWELLでスライダーを実装する前に知っておきたいこと

まずは、SWELLでスライダーを実装する前に押さえておきたい基礎知識から見ていきましょう。

SWELLの標準スライダー機能でできること・できないこと

SWELLにはブロックエディタ上で使えるスライダー機能が用意されており、シンプルな画像の切り替えであれば標準機能だけで十分対応できます。ただし、以下のような要望には対応が難しい場合があります。

  • ⚫︎ 画像内の文字やボタンを自由なタイミングでアニメーションさせたい
  • ⚫︎ スライドごとに凝ったエフェクト(フェード、ズームなど)を細かく変えたい
  • ⚫︎ レイヤーを重ねて動画のような演出を作りたい

こうした「凝った動き」を求められたときは、専用プラグインの活用をオススメします。

スライダー実装プラグインSmart Sliderが選ばれる理由

Smart Sliderは、直感的な操作画面で細かなアニメーションやレイアウトを設定できるスライダープラグインです。
デザイナー・コーダーの視点で見ると、次のようなメリットがあります。

  • ⚫︎ コードを書かなくてもマウス操作だけで実装できる
  • ⚫︎ レイヤーごとに表示位置やアニメーションを個別調整できる
  • ⚫︎ テンプレートが用意されており、ゼロから作らなくてもよい

「動きのあるデザインを再現したいけれど、開発コストはあまりかけたくない」というときに、非常に頼れる選択肢です。

導入前に確認すべき動作環境・注意点

プラグインを追加する際は、以下の点を事前に確認しておくと安心です。

  • ⚫︎ WordPressおよびSWELLのバージョンが最新の状態になっているか
  • ⚫︎ 他に導入しているプラグインとの競合が起きないか
  • ⚫︎ 本番環境に反映する前に、テスト環境で動作確認を行っているか

特にサイトの改修案件では、既存プラグインとの相性トラブルが起きやすいため、事前確認を丁寧に行うことをおすすめします。

Smart Sliderの基本的な使い方

ここからは、実際にSmart Sliderを使ってスライダーを作成し、ページに設置するまでの流れを紹介します。

Smart Sliderのインストール

まずはプラグインを導入します。

  • 1. WordPress管理画面の「プラグイン」→「新規追加」を開く
  • 2. 「Smart Slider」を検索してインストール・有効化する
  • 3. 管理メニューに追加された「Smart Slider」から設定画面を開く

スライダーの作成方法(画像・テキスト・エフェクト設定)

スライダー本体の編集画面では、次のような設定が可能です。

  • ⚫︎ スライドの追加・削除、画像のアップロード
  • ⚫︎ テキストやボタンをレイヤーとして自由に配置
  • ⚫︎ 各レイヤーごとのアニメーション(表示タイミング・動き方)の設定
  • ⚫︎ スライド切り替え時のエフェクト選択

SWELLの固定ページ・投稿へのスライダー埋め込みについて

作成したスライダーは、以下のいずれかの方法でSWELLのページに設置できます。

  • ⚫︎ Smart Slider側で発行されるショートコードをコピーして、ブロックエディタの「ショートコード」ブロックに貼り付ける
  • ⚫︎ 固定ページ(投稿ページ)の編集画面にある「SmartSlider」をクリック、スライダーを選択します。※テキストエディタ、ブロックエディタどちらにもあります。

設置後は、必ずプレビューで表示崩れがないかを確認しましょう。

オリジナルデザインをSWELL×Smart Sliderで実現するコツ

最後に、実務でよくある要望パターンをふまえた実装のコツをご紹介します。

レスポンシブ対応でスマホ・PC両方で崩れないデザインにする方法

スライダーはPCでは綺麗に見えても、スマホで崩れてしまうケースが少なくありません。次の点を意識すると安心です。

  • ⚫︎ デバイスごとにレイヤーの表示・非表示を切り替えられる設定を活用する
  • ⚫︎ 文字サイズや余白は、実機に近いプレビューで必ず確認する
  • ⚫︎ 画像は端末サイズに応じて最適なものが表示されるよう設定する

よくあるデザイン要望別・実装テクニック集

お客様からのご要望として多いパターンと、その考え方をまとめました。

  • ⚫︎ フルスクリーン表示にしたい:スライダーの表示エリアを画面幅いっぱいに広げる設定を活用する
  • ⚫︎ 動画を背景に使いたい:動画レイヤーを使い、テキストやボタンを上に重ねて配置する
  • ⚫︎ 文字を段階的にふわっと表示させたい:レイヤーごとにアニメーションの開始タイミングをずらして設定する

いずれも、レイヤーの重なりと設定調整がデザイン再現のカギになります。

表示速度・SEOへの影響と対策

動きのあるスライダーは魅力的な反面、画像や動画の容量によっては表示速度に影響を与えることがあります。
制作時には以下を意識しましょう。

  • ⚫︎ 使用する画像はできるだけ軽量化してから設置する
  • ⚫︎ 不要なスライドやエフェクトを増やしすぎない
  • ⚫︎ 表示速度に関する各種チェックツールで、公開前に確認する

サイトの見た目だけでなく、快適に閲覧できるかどうかも、お客様満足度を左右する大切なポイントです。

まとめ

SWELLの標準機能だけでは表現しきれない、こだわりのスライダー演出も、Smart Sliderを活用すれば実現しやすくなります。
今回ご紹介した手順やコツを参考に、お客様の要望にしっかり応えられるWEBサイト制作にぜひ役立ててください。

クレッジの制作実績はこちら

AWS / Azure クラウド基盤の設計・構築・移行の新規受付を開始しました

システム開発会社様、インフラの見直しを検討中の企業様へ。
この度、AWSおよびMicrosoft Azureを用いたクラウドインフラの設計・構築案件の新規受付枠を拡大いたしました。
「オンプレミスからクラウドへ移行したい」「セキュリティと可用性を担保したインフラを構築したい」「クラウド全体のコストを最適化したい」など、インフラに関する課題をプロのエンジニアが解決します。

詳しくはこちら
お知らせへ戻る

AWS・Azureを活用したクラウド環境構築について

AWS・Azureを活用したクラウド環境構築について

近年、Webサービスや業務システムではクラウド環境を活用する企業が増えています。

AWS(Amazon Web Services)やMicrosoft Azureなどのクラウドサービスを利用することで、 サーバー環境を柔軟に構築でき、事業の成長やサービスの拡張にも対応しやすくなります。

AWS・Azureとは?

AWSとAzureは、世界中で利用されている代表的なクラウドサービスです。

サーバー、データベース、ストレージなど、Webサービスやシステム運用に必要な環境を クラウド上で構築することができます。

クラウド環境構築で大切なこと

クラウドを利用する際は、単純にサーバーを用意するだけではなく、 利用目的に合わせた設計が重要になります。

  • アクセス数に合わせたサーバー構成
  • セキュリティ対策
  • バックアップ環境
  • 将来的な拡張性

用途に合わせた構成を考えることで、無駄なコストを抑えながら安定した環境を構築できます。

Webサイトやシステムに合わせた環境づくり

Webサイト制作やシステム開発では、デザインや機能だけではなく、 裏側のサーバー環境も重要なポイントになります。

クレッジでは、AWS・Azureを活用したクラウド環境の構築や、 Webサービスに合わせたインフラ設計を行っています。

対応できること

  • AWS環境の構築
  • Azure環境の構築
  • Webサイト・システム向けサーバー設定
  • クラウド移行の相談
  • 運用環境の改善

クラウド活用についてお気軽にご相談ください

「今のサーバー環境を見直したい」 「AWSやAzureを使いたいけれど何から始めればいいかわからない」 など、お困りの場合はお気軽にご相談ください。

詳しくはこちら

メールでのお問い合わせ lineのiconLINEでのお問い合わせ