dedede 金沢のシェアハウスのホームページ制作をリアルタイムで発信中
僕の地元である石川県金沢市に2021年5月にシェアハウス G-eight HOUSE がオープンします！
（制作中のため近日公開予定ですが、pass：cl-gate で途中経過をご覧いただけます。)
web制作に興味のある初心者向けの記事で、本案件を通して具体的なweb制作の流れを発信しています。
※無事クラウドファンディング達成できたそうです！！ご協力ありがとうございました^^
（※全回はアーカイブからご覧いただけます）
#9 スマホでのデザインについて
前回にブロックエディターでの構築方法について書きましたが、今回はその続きです。
スマホ表示の見た目も勝手にできるんじゃないの？ って思ったあなた、甘いです。笑
ブロックエディター（ノーコード）ではある程度設定なしでもスマホでそれなりのものは表示されますが、崩れる場合も少なくありません。今回は、そのスマホ版の設定（レスポンシブ設定）について説明します。
（工程としてはコーディングです）
- ヒアリング・要件定義
- ワイヤーフレームの制作
- デザイン作成
- コーディング
- 本番サーバーに移行
レスポンシブデザインとは？
レスポンシブデザインとは、すごく簡単にいうなら
スマホやタブレットでの表示も考慮したデザイン のことです。
PC表示時もウィンドおサイズを変えてもちゃんと動きますよね？それもレスポンシブデザインの一種です。
最近はwebページをPCyよりもスマホで見られる割合の方が多いので、むしろスマホみたデザインベースで作られることも少なくありません。デバイスごとの閲覧数ですが、目安はスマホ60%、PC30%、それ以外が10%というような感じです。
参照:https://fainpixar.co.jp/column/web-marketing/40827/
つまり、スマホ表示でのデザインは非常に重要とされています。
ブロックエディターでのレスポンシブ設定
とはいってもブロックエディターでのレスポンシブ設定はそれほど難しくありません。
右側の設定タブからある程度設定できます。上の動画は例として 特徴セクションの中身の表示についての設定です。
パネルブロックの設定でPC,タブレット、スマホの表示について、1行あたりの項目表示数 をそれぞれ3,3,1に設定しています。ここを変えれば簡単にスマホの表示を設定できるというわけですね。
ただし逆にいうと、ブロックエディター（ノーコード）ではこのレベルでの設定しかできません。
そして、細かいレスポンシブの設定もできるのがブロックエディターではなく、テーマ自体を作成して構築するコーディングなのです。
本案件では、このブロックエディターの弱さを補完するため、実はコードも少しだけ書いております。
コーディングで何をしてるの？
コーディングではブロックエディターではできないレスポンシブや、フォントの設定を主にやっています。
- 特殊フォントの使用
- レスポンシブによるる文字の行間
- 文字の大きさ
- その他修飾用デザイン
などなど様々です。cssというマークアップ言語を追加しているのですがそれ以外は使っていません。
ブロックエディターを全く使わない場合は、さらに html, JavaScrpt, PHP といった様々な言語も使います。
少しだけプラグラミングのコードの様子を公開しときます。500行くらいですがこれは非常に少ない方です！（ブロックエディターに対しプログラミングを追加で書きすぎると、保守性が悪くなってしまうためできるだけ少なくしています。）
まとめ
本回はレスポンシブデザインについての説明をしてみました。
制作ページの進捗についてはほぼ記載してませんでしたが、既に管理者様に確認しOKをもらっており
ほぼ完成してます。
次回はいよいよ最終回、サーバへのアップについて大まかな流れを書いていって最後にしたいと思います！
これまでの投稿で質問、コメントなどありましたら是非どうぞ^^
