Bootstrap5ブレークポイント削減しスマホデザインのみに対応にする方法

Bootstrap5のグリッドを減らしてスマホデザイン(750px)に対応する方法を模索して試してみました。

私はスマホファースト型LP制作というプランをやっているのでスマホのデザインとレイアウトのままでPCサイト幅750pxに対応させる必要がありました。

▼ランサーズで販売中のLP制作ベーシックプラン(スマホサイト)パッケージ

当サイトのLP制作ライトプラン(スマホサイト)

MKデザイン制作所

私にお任せください! 以下のようなランディングページ(LP)制作ができます。 LPデザイン実績150件以上のLP専門webデザイナーがあなただけのオリジナルデザインでLPサイ…

Bootstrap5のブレークポイント

BreakpointClass infixDimensions
Extra smallNone<576px
Smallsm≥576px
Mediummd≥768px
Largelg≥992px
Extra largexl≥1200px
Extra extra largexxl≥1400px

スマホデザインのみに対応させたいならミディアム(md)とスモール(sm)だけ残す方法で良いかと思います。

他のlg、xl、xxlは消します。

Bootstrapで調節するSCSSは_variables.scssの中の以下のコードです。

$grid-breakpoints: ( 
  xs: 0,
  sm: 576px,
  md: 750px,
) !default;

$container-max-widths: (  
  sm: 540px,
  md: 720px,
) !default;

これでスッキリしました。

クライアントによっては初期状態のBootstrap5のブレークポイントが多すぎて横幅が可変されすぎるのを気になる人もいるのでスマホ、タブレット、PCと3つくらいのブレークポイントに調節した方がいいみたいです。

確かにBootstrapはブレークポイントが多すぎる。

LPサイトだとコーディングに工数と料金を費やせないことが多いのでレスポンシブ対応は3つまでと決めておいた方が良さそうです。

Bootstrap公式サイト

https://getbootstrap.jp/

余談ですがBootstrapはHTML5 doctypeの仕様じゃないと正常に動かないんですね。。

https://getbootstrap.jp/docs/5.3/getting-started/introduction/

最後に‥これからのweb制作のコーディングについて思うこと

今月受注したwebデザインリニューアル案件はBootstrap仕様HTML5で作成します、と言っておいてよかったと思いました。

Bootstrapはバージョン5になったことによってvanillaJSに採用したので脱jQueryは果たしたようです。

グリッドのみしかほとんど使ってないので気づきませんでした。

でも、私はLP案件でまだ動きにはjQuery使ってます。

現在は新規クライアントからは企業サイトのコーディングは基本的に行なっていません。

簡易的なポータルサイト(サービス案内サイト)でもなければwebデザイナー(画面デザインをメインにしてる人)1人が対応できる企業サイト構築は少ないと思われます。

昔の10年前のweb制作だと1人のwebデザイナーがデザインしてコーディングしてが普通でしたけど今の時代で品質的に通用しないんじゃないかなと思います。

広告に表示された地元のweb制作会社の企業サイトを見てたらwebデザイナー、DTPデザイナー、コーダー、エンジニアで役職分かれてました。ライターやアクセス解析するマーケッターを雇用する会社も中にはあります。地方でも都会と同様にweb制作は分業制が普通になってくると予想されます。

実際、少子化で人口減少してる日本だとデザインもコーディングもこなせる人材の確保が難しくなりますし。両方できる経験者を探すのは地方都市では困難で常に慢性的な人手不足になっているのを感じました。人手不足な地方の会社やフリーランスこそノーコード導入は必要になってくると思います。

webデザイニングの本に紹介されていたstudioで制作してる制作会社はデザイナー1人がstudioを使ってサイト納品しています。web制作会社もノーコード化は進めてます。

デザインとコーディングを兼業しなくてはならないし、元からコーディングが得意じゃないwebデザイナーの私にとっては昔も今もBootstrapは強い味方でしたね。グリッド機能が使いやすいので。

おすすめのweb制作書籍(Kindle Unlimitedだと月額980円なので書籍で買うよりお得です)

投稿者プロフィール

Mika
MikaLP専門webデザイナー
ブログでは主にweb/LPデザイン、WordPress(Lightningテーマ)、note、フリーランス、ランサーズなどの記事を書いています。

web制作会社退社後、ランサーズ(大手クラウドソーシングサイト)で実績220件以上の認定ランサーとしても活動中。

【プロフィールページを見る】

Follow me!

LP制作代行 フリーランス LPデザイナー LPデザイン依頼 WordPress ランディングページ 見積もり無料 料金価格

WordPressを活用した更新性の高いLP制作をしています。他、EC・楽天ショップなどの商品ページLPデザインなども承っております。

WordPressのLP以外にも通常のHTMLのLP制作の対応も可能です。

現時点で発注を考えていなくても、現在抱えていらっしゃる課題やお悩み、依頼を検討されているお仕事内容をぜひお聞かせください。
ご相談内容はメールフォームからお送りいただけますと幸いです。

制作のご依頼はこちらから

営業時間:平日9〜20時

営業日1日以内にご返信致します。
「資料DL・お問い合わせ」のフォームから自動返信メールで資料ダウンロード可能です。

WordPressのLP制作実績