Bootstrap5のグリッドを減らしてスマホデザイン（750px）に対応する方法を模索して試してみました。
私はスマホファースト型LP制作というプランをやっているのでスマホのデザインとレイアウトのままでPCサイト幅750pxに対応させる必要がありました。
▼ランサーズで販売中のLP制作ベーシックプラン（スマホサイト）パッケージ
【LPデザイン/コーディング/フォーム】ネットショップ、Web広告用のLP制作します|ランディングページデザインの外注・代行|ランサーズ
ランサーズで見積もり・カスタマイズの相談を承ります
当サイトのLP制作ライトプラン（スマホサイト）
MKデザイン制作所
ランディングページ（LP）制作はお任せください 以下のようなランディングページ（LP）が作成できます。通販・美容系・不動産、フィットネスジム、様々な業種の企業様から…
MKデザイン制作所 | LP（ランディングページ）制作代行サービス Bootstrap5のブレークポイント
| Breakpoint | Class infix | Dimensions |
|---|---|---|
| Extra small | None | <576px |
| Small | sm | ≥576px |
| Medium | md | ≥768px |
| Large | lg | ≥992px |
| Extra large | xl | ≥1200px |
| Extra extra large | xxl | ≥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公式サイト
余談ですが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円なので書籍で買うよりお得です）
投稿者プロフィール
- LP専門webデザイナー
-
フリーランスLP専門デザイナーです。
お仕事のご相談はお気軽にお問い合わせください。
インターネット経由で全国からオンライン経由で受注しています。
ブログではweb/LPデザイン、フリーランス、ランサーズのことなど記事を書いています。
最新の投稿
制作のお問い合わせはこちらから
24時間以内にご返信致します
（平日9〜18時まで※土日除く）
【宣伝】ランサーズでLP制作パッケージ販売中
※当サイト経由と違って別途手数料が発生します。ご興味があればお気軽にご相談ください。
