最近よく聞く「ノーコード」という言葉。
その名の通り、コーディングをせずともサイトが実装できるとあって、制作界隈でもポピュラーな手法になりつつあります。

ただ、コーディングを生業としてきた筆者にとってはかなりの脅威。
コーディング不要？今まで勉強してきたことが全部不要になってしまう…？！
このまま何もせずにはいられない！ということで、ノーコードを使ってみて味方につけてしまいましょう！という記事です。
※この記事では権利の関係上、実案件ではなくテスト用のキャプチャを掲載しています

まずは学習しよう！

まずは概要を大枠で理解します。
実案件で進める必要があったので、手っ取り早く、YouTubeで学習です。

おおお…？要素の配置をしながら、同時にパディングやマージン（要素につける余白のことです）、画面幅も設定できる…？
これはさながら、デザインとコーディングを同時に進めているような感覚です！
従来のデザインfix→コーディング→CMS実装…という手間を考えると、かなりの時短になりますね。

基本の使い方を覚えよう！

基本は<div>のブロックの中に、画像やテキストを置いていきます。
左右配置なんかもかなり感覚的に置くことができます。おおっ！便利…

これ、昔のテーブルコーディングにも似ているそうですが…、スクールで習ったけど、実践では使わず筆者はぎりぎり分からない世代です（汗）

ヘッダーなどの絶対配置はどうするのか？と思いましたが、きちんとその設定もありますね！
ただ、数値はpx固定のみで、上下中央とか左右中央ができないようです～キャッチコピーとか真ん中に置きたいぞ！という時困るかも。

この調子で、どんどんブロックを組み合わせてページを作ってゆきます！

お問い合わせ実装

すでに用意されているパーツを使えば、管理者当てメールの実装まで含めても10分程度で完了してしまいます。
テキストボックス・ラジオボタン・等基本的なパーツはすべて準備されていて、エディタにドラッグ＆ドロップするだけ。
エラーメッセージは、ブラウザ標準のものが表示される仕様なようです。
ただ、無料版だとCSSやJSのカスタマイズは一切できないので、この仕様でOKです！という承諾をユーザに得てから実装に着手したほうがよさそうですね。

レスポンシブ

個人的には、レスポンシブ対応が時間が掛かってとても苦手意識があったんですが…、
ブレイクポイントを設定して、基本操作と同じく画面幅や余白を細かく設定していけば完成です。
レスポンシブに限って言うと、通常コーディングよりも2時間プラスで掛かったという結果になりました。デザインの難易度や、慣れもありそうです～。
ただブレイクポイントは無限に増やせるわけではないので、例えば複雑なデザインを実現したいときに細かい設定ができないのは少々不便に感じました。

完成！

ついに！完成いたしました～！！
時間を計測していたのですが、なんと、、通常コーディングの約64％の工数で完成してしまいました！！
圧倒的時短！そしてこの操作性！目から鱗とはこのことです。笑

まとめ

正直、触ってみる前は「本当にノーコードでサイトが作れるの？」「クオリティが担保できないんじゃない？」と疑心暗鬼な気持ちでいっぱいでした（笑）
ただ、実際に触れてみると想像以上にメリットも多いことが分かり、目的によっては通常コーディングと使い分けてもいいのかもなという気持ちに。

Web制作古参としては、次々と登場する新たな技術やツールは脅威にも感じます。
が同時に、味方につけてしまえば新たな制作手法を増やしたり、時間短縮にもつながる大きな味方にもなり得ます。

過度に怖がることなく上手に取り入れて、「なんでもやってみる」という実験マインドを忘れずに！
柔軟にこれからの制作の波に乗っていけたらと思います！