Bootstrap5のグリッドを減らしてスマホデザイン（750px）に対応する方法を模索して試してみました。
私はスマホファースト型LP制作というプランをやっているのでスマホのデザインとレイアウトのままでPCサイト幅750pxに対応させる必要がありました。
▼ランサーズで販売中のLP制作ベーシックプラン（スマホサイト）パッケージ
【WordPress/HTML対応】御社の販売力アップに貢献できるLP制作をします|ランディングページデザインの外注・代行|ランサーズ
ランサーズで見積もり・カスタマイズの相談を承ります
当サイトのLP制作ライトプラン（スマホサイト）
MKデザイン制作所
よくある質問 Follow me! @mk_designillust 投稿者プロフィール MikaLP専門webデザイナー LP制作代行サービスをしています。 ブログではweb/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円なので書籍で買うよりお得です）
投稿者プロフィール
最新の投稿
WordPressのランディングページ（LP）制作を依頼してみませんか？
もちろん通常のHTMLのLP制作の対応も可能です。
WordPressのランディングページ（LP）はワードやパワポ感覚で編集が簡単に行えるためお客様ご自身で修正や更新が行えます。
