こんにちは、ごく普通のグラフィックデザイナーです。立体やWebではなくてほとんど紙媒体専門です。ノベルティーなんかも極たまにありますが、エディトリアル系が多いです。
2020年にコロナの影響で会社がテレワークになり、3年ほど自宅で仕事をしながら、Webデザインに仕事を広げようと少し勉強を始めました。デザインはまぁ出来る事にして、コーディングやアクセス解析、SEOなんかがチンプンカンプンで挫折しかけていたのですが「STUDIO」と言うノーコードでWeb制作出来るツールを発見して、すぐにページを作れるようになりました。簡単でした。
ですが、実務で使うとなるとガラパゴス的な仕様が気になり、他のツールを探した所、すぐに「Webflow」を発見。こちらの方が歴史が古く出来る事も多いのですが、STUDIOほど簡単ではなく、多少理解に時間を要しながらも大体は把握して、その後シェア率の高い「Wordpress」に発展させる事を画策している所です。もしも今からノーコードでWeb制作を、と思っているならいきなりWebflowを使うよりもSTUDIOを使ってみた方が感じを掴めると思います。STUDIOだけで完結出来るなら、STUDIOが一番手っ取り早くて簡単でした。両方やってみて、両方とも受注、納品までしてみましたが出来る事も限られるけれどSTUDIOは簡単で良い。
Webflowは有料プランによってはhtml、css等コードを出力出来るので、それをWordpressの言語？であるphpに変換してアップロードする事は知識がなくてもそんなに難しくは無く、この時点でノーコードツールを利用してWeb制作、Wordpress化、もしくは単純にページを制作して公開すると言う事は完成しました。
ですが、Webflowからコードを出力すると、お問い合わせフォームやブログ機能などのCMSが省かれて機能しません。それを補う方法として「Udesly」という変換ツールを使うと、Webflowで作ったままの状態でWordpressで公開、blog記事やお問い合わせ等も使える状態までノーコードで移行出来ます。これはこれで問題は無いのですが、このツールを使うとノーコードツール程度のコードの知識しかない人は、更新やちょっとした変更をするにも大変でした。何処を弄ったら良いのか分からない状態でファイルが出力されるので、一度Webflowに戻って作業をして、出力、再アップロードをしなくてはならなくなり、スマートさに欠ける気がします。
なのでWebflowが出力したコードを直接自力でphpに変換して、機能しないCMSやお問い合わせの部分を自力で補い、管理出来るようにしたい。そこでコードを調べたりしている時に「ChatGPT」を発見。チャット形式でAIに質問をして部分的にコードを出力させてコピペ。これでノーコードツールでのWeb制作、汎用性の高いWordpressでの運用が格段にハードルが下がりました。
STUDIOもWebflowも独自のドメインや自分で取得したドメインを利用してそのままページを公開して、問題なくお問い合わせやblogの運営も出来ます。SEOやアクセス解析等も問題なく設定出来るし、Wordpressを利用しないのであれば何も問題ありません。これから先、他にもっと有能なノーコードツールも出るだろうし、今あるツールが素晴らしい発展をする事もあるだろうけれど、仕事で受注する事を考えると現在シェアの高いツールを使えるに越したことはないと思うので、このblogを更新していなかった数（5）ヶ月、ちょっとずつphpを追加していき、なんとか自力で移行しました。その間にWebの仕事も受注したけれど、ノーコードツールはやっぱり簡単。今まで紙デザインばかりでしたが、コーディングを外注しなくても一人で完結して納品まで行ける。コロナでグダグダだった間にリモートが定着して、仕事の仕方も変わったように思います。
多分ですが、ChatGPTを使わずにWebflowのコードで省かれている部分を、Wordpressに対応されるにはかなりの知識が必要だと思います。検索して簡単に出てくる事もあれば、細かい所は隠されていたり、なかなか辿りつきません。また、こちらはノーコード専門なので知識が少なく、何が書かれているのか分からなかったりします。そこでChatGPTに質問するわけですが、その前にまず、htmlをphpに変換するくらいは、もしかしたらググった方が分かりやすいかもしれません。とりあえず、質問としては「Webflowで出力したhtmlをWordpressで使いたいからphp化したいんだけど、追加するコードと手順を教えて」みたいな感じで聞いてみます。試しに聞いてみたら良くわからない事を言ってきたので、ここはググって変換する事を勧めます。この、ちゃんと正解を言っているのか、なんかズレた事を言っているのかの見極めですが、初めのうちは全然分かりません。それで、言う通りにやるとエラーが出たりするので、エラーコードや内容を入力するとだんだん精度が高まったり、正解に近い答えを出してきたり、自分でもなんとなく分かってきます。そして、ここはチャット形式なので前の質問を覚えている内に、連続で質問していくと精度があがる時もあります。
一旦phpとしてWordpressに変換出来たら、今度は省かれているコードを探していきます。Webflow上で自分でつけたクラス名やセクションを頼りにコードを見ていくと、省かれているCMSなんかが””で値が何も入っていない状態になってるのが分かります。そこで、そのセクションをコピーして「このコードを利用して、コードを出来るだけ変えずに、WordpressでCMSの記事を読み込むphpのループコードにして、CMSで記事を出力するphpのコードに変換して」みたいに聞いていきます。ここでのコツとして、多分ですがアホの子供に言いくるめるように同じ単語を何度も、日本語がおかしくてもクドいぐらい繰り返すと、良い結果が得られる気がします。そして同じ箇所にコピペしてトライアンドエラーを繰り返して、なんとか移行したのですが、思ったよりも時間がかかりました。結構、良くわからない事を言ったり、致命的なエラーが出たりします。ですが、結局は足りない部分を補うだけなので必要なコードは大体一緒で、CMSで記事を取得するのであればほぼ一緒だし、自分でも何箇所か変換させていると、ここは聞かなくても、これで動くかな？と言う事も分かってくるので、何度かやって慣れるしかないかもしれません。そして一回変換が終わった今、正解が一通り分かったので、次に仕事で変換する時はこのコードを使えばそのまま多分使えるし、一回やったらもう終わりです。完成しました。
何に時間がかかったかと言うと、Webflowで出力したコードと言うよりも、Wordpress固有の機能である「メニュー」とか「ウィジェット」と融合させるとcssが上手く行かずに、それで時間がかかった気がします。Webflowからのただ単純に変換だけなら、もしかしたらスムーズに行くかもしれません。また、他のツールをまだ使った事がないので分からないのですが、コード出力出来るノーコードツールが他にもあるようなので、もっと良いものがあるかもしれません。
AdobeXDとFigmaの進化にも期待しているのですが、とりあえずFigmaのWebflowプラグインは今の所ぜんぜんダメでした。
ChatGPTは本当に凄い。コード出力でしか使った事はないけれど、Webflowの操作について質問してもちゃんと答えてくれるのにちょっとビックリしました。Webflowでこのボタンを押して、この設定をこうしたらこうなりますよなどと具体的に指示が来るので、何処まで知ってるの？と言う感じです。
ためしに、Webflowでは多分実現出来ない（出来るかもしれないけれど）「次の記事を表示するボタンをnextCMSと言う名前のClass名で、色が黒、文字が白で、サイズが高さ20px、幅が40pxでパディングが10px、文字サイズが14pxで設置するためのコードと、設定を教えて」とか？質問したらfunctionとcssのコードを出力してくれました。それをページに設置するコードを追加で教えてもらって、全部コピペしてみたらそのまま使えるようになりました。ChatGPT凄い。エラーが出まくって手に負えなくなった時に、このコードの間違っている所教えて？と質問すると解決してくれたりもします。使い方は色々ですが、これは良い。
と言う事で、ググったりチャットしたりで変換もなんとかなりました。そして一回やれば次からは応用が効くのでかなり楽に出来ると思います。
これからは実用的な、ウィジェットを追加したり、CMSの良くあるアーカイブを追加したり、色々追加したりで研究していくつもりです。おすすめのプラグインとかも教えてくれるし、ChatGPTはノーコードからのステップアップには欠かせないのでは無いでしょうか。発展させなくていいのであれば、別に要らないけれど。
今回追加したWebflowからWordpress変換のための補足コード
- メニューをWordpressで追加するためのコード
- ウィジェットをWordpressで追加するためのコード
- メニューとウィジェットにCSSを反映させるためのコード
- トップページのお知らせで、最新記事を取得するための追加コード
- 記事一覧ページで記事を2種類表示させるコード
- 著者名、タグ、日付等で記事一覧を表示させるアーカイブページのコード
- 各記事ページで記事を出力させるコード
- 過去記事の一覧を画像だけ出力させるコード
- 過去記事の一覧をタイトルだけ出力させるコード
- 次の記事、前の記事を出力させるボタン設置
- 問い合わせフォームの設置
- SEO等プラグインの設置
お終い。
