dedede 金沢のシェアハウスのホームページ制作をリアルタイムで発信中
僕の地元である石川県金沢市に2021年5月にシェアハウス G-eight HOUSE がオープンします！
（制作中のため近日公開予定ですが、pass：cl-gate で途中経過をご覧いただけます。)
無事クラウドファンディング達成できたそうです！！ご協力ありがとうございました^^
（※全回はアーカイブからご覧いただけます）
#8 デザインを実装していこう
前回にコーディング（実装）の準備が終わったので、今回から実装に入っていきます。
- ヒアリング・要件定義
- ワイヤーフレームの制作
- デザイン作成
- コーディング
- 本番サーバーに移行
ノーコードでの実装_ブロックエディタとは？
既に何回か書いてますが、本案件はコーディングはほぼせず、ノーコード（厳密にはローコード）で実装していきます。近年、コードなしでもサイト作成ができると言われていますが、それらのページは基本的にブロックエディター という概念のもとで作られています。
さて、突然ですがレゴブロックで遊んだことはありますか？？
レゴブロックでは普通の基本ブロックの他にも、”人”、”動物”、”車”、”大砲”… 既に出来上がっている様々なブロックを使って大きなものを自由に作りますよね。ざっくりうと、ブロックエディターによるサイト制作もそれと同じです。
既に用意されているいくつかのブロックを組み合わせて、最終的に全体のホームページを作るといった感じです。
実際に下の動画で雰囲気がわかると思います。
ブロックで構成されたページの紹介
それではいくつかセクションのご紹介。
まずはFV（ファーストビュー）のセクションについてです。
こちらのセクションは ４つのブロックで構成されています。
- セクションブロック（親要素）
- 画像ブロック（ロゴ_子要素）
- 段落ブロック（見出し_子要素）
- ボタンブロック（お問い合わせ_子要素)
※段落ブロックというのは、普通の文章を記入するブロックのことです。
次は金沢×シェアハウス の説明セクション
- セクションブロック（タイトル_親要素）
- セクションブロック ブロークングリッド（サブ見出しと画像含む_子要素）
- 段落ブロック(説明_孫要素）
次は特徴セクション
- セクションブロック（タイトル_親要素）
- パネルブロック（写真、タイトル、テキスト含む_子要素）
- ボタンブロック（詳細ページへのボタン_子要素）
3つのセクション見てみてどうでしょうか？？
たったこれだけで構成されています。あとはこれらを右がわの設定タブで少し編集しているだけですね。
ブロックエディターでweb制作て簡単じゃない？
ブロックエディターは使い方と基本概念さえ覚えてしまえば、作ること自体は非常に簡単です。これが今の時代誰でもホームページを作れると言われる所以ですね！
ただし、初心者にありがちなんですが作ることだけに専念しすぎて、重要な事項や記載すべき項目を書いていないページというのが最近よく見られます。 そのために、最初の要件定義やワイヤーの作成、デザインの工程などがあるのです。
ページを作れること ≠ 顧客の売り上げに貢献できるページであること
初心者の方はこれをよく認識した上で、学べき項目を考えてweb制作に取り組みましょう。
まとめ
本回でブロックエディターについての制作動画を交えながら進捗を紹介してみました。
今回、web制作に興味のある方に伝えたかったのは、以下２点。
- ローコードの実装自体は初心者でも可能。
- ページを作れることと、意味のあるホームページを作れることは全然違うので注意
初心者の方で、本記事で少しでもweb制作に興味が湧いたならば、使とりあえずやってみることをお勧めします。
ただし、案件を取りに行こう！と思うときには、上記2点目の壁があることは心に留めておきましょう。
さて、シェアハウスのページ自体は実はすでに95%程度できているのですが、重要そうな箇所をピックアップして引き続き投稿していきます＾＾
こちらから実際のページが見れます。（制作中のため近日公開予定ですが、pass：cl-gate で途中経過をご覧いただけます。)
次回はレスポンシブ（スマホなどでの表示）についての説明とコーディングしている箇所について書いていきたいと思います！
