WEBデザインの勉強と言うか、コーディングを避ける為にノーコードを勉強しようと始めた当ブログですが、当初の予定ではこれを最終的にWordPressと言う奴で再現と、なんとなく思っていました。世界の何割（三割?）かのwebページはWordPressで作られているとか聞くし、グーテンベルグ？と言うエディタでノーコードっぽく作れるかもとも思っていたのですが。
それにしてもコードを書く（グーテンベルグがどれぐらいのものか分からない）のは大変だし時間がかかりそうと思っていた所、ふと、STUDIO以外でhtmlを出力出来るサービスがもしかしてあるのでは？と思って検索。すぐに「Webflow」と言うサービスを発見。これもSTUDIOのようにノーコードでページを作成出来て、しかも最大の魅力として有料だけどHTML、CSS、JavaScriptが出力出来る！これを習得出来たらHTMLを出力してPHP化、WordPress化出来るのでは？と思い、とりあえず一旦STUDIOのページをWebflowで作り直してみる事にしました。
基本的に自分のホムペは無料で維持しようと思っているので、無料で再現出来るのか？と思っていたのですが、出来る所と出来ない所がありました。一番がページを2ページしか作れない事で、しょうがないのでトップページとブログのページだけ再現して、以下にSTUDIOで出来て、Webflowで出来なかった事をなんとなく上げて行きたいと思います。
先にも少し触れましたが2ページしか作れない。と、言いつつCMSのページが50ページ、50記事作れます。これの他に2ページなのでトップページと、blog一覧のページを作りました。他に、404のページと、検索結果のページ、パスワード保護されたページがある場合、入力のページを作れるようです。今回404は作っておきました。
Webflowはノーコードツールとして海外では一定のシェアがあるようですが、日本語版が無いので日本では流行っていないようです。一旦慣れるとSTUDIOとほぼ同じ操作感ですが、Webflowの方が出来る設定や機能が多いので、STUDIOしか知らないと何の機能なのか分からない箇所もあると思います。それと、設定内容がHTMLなどの用語で書かれているので、HTMLが一切分からないと厳しい。逆に分かると、英語が分からなくてもHTML等の言語と同じ設定が出来ると思います。
設定がHTML言語等と同じ事が出来るので、プラグラムを組んでいて「あれ？ここなんで上手く表示されないんだろう」と言ったエラーが、プログラムと同じ感じで起こるし、バグを治すのに時間がかかる気がします。STUDIOは融通が効くと言うか、結構適当にやっても思ったレイアウトが出来る気がしますが、こちらはHTML言語の通りにしか動かないし、HTMLの通りに動いてくれるので、治す時もHTMLを調べるとなんでバグってるのか分かったりします。
STUDIOでは自由に変えられたブレイクポイントが変えられません。1144を基本に、大きいサイズのブレイクポイントは何箇所か増やせますが、数字も変えられないし小さいサイズは増やす事も出来ません。おまけに「Container」と言うブロックは幅が940に設定されていて、中央に揃うようになっていて、これも変更出来ません。
地図やtwitterなどを埋め込むiframeが出来ないので、タイムラインやyoutubeのリストを表示させたりが出来ません。地図はgooglemapのAPIを使えるようですが、今回は設定していません。
STUDIOで新規追加されたページ検索の機能はこちらでも出来ますが、検索結果は有料プランじゃないと出ません。結果画面のデザインや設定は出来るようです。
スライダーはあるのですが内容をCMSにするのは裏技？で工夫しないと入らないようです。
記事の内容やタイトルを引用する事は出来ますが、長すぎるテキストを20文字まで表示と言った設定が出来ませんでした。なので、ボックスの幅を小さくしてはみ出したテキストは非表示やグラデーションでボカしています。
STUDIOではナビゲーションメニューをモーダルで表示させたりしていますが、こちらではドロップダウンメニューで付ける？ようです。モーダルも設定出来るようですが、STUDIOのように1ページ追加とはならないようで、何個でも足せるようです。
STUDIOでは無料画像やアイコンが、追加の項目から簡単に利用出来ますが、こちらではUnsplash等で自分でダウンロードしてきます。アイコンも無いのでフォントをインストールして使います。STUDIOで使えるアイコンと同じものを探したけれど、無いものもありました。バージョンが違う？あまり探してないので、あるかもしれないけれど。
記事を引用する時に、3記事ずつ表示させて「もっと見る」を押すと3記事出てくるみたいなボタンが付けられませんでした。こちらも工夫して設定している人が居ましたが、無料で再現出来るのか？とりあえず今回は記事が無いので付けていません。
記事中の文字に文字リンクを付けると何故か改行されるようです。
このページをシェアすると言ったボタンに固定ページのリンクを付ける事は出来ますが、CMSの内容を引用出来ないので、ページURLやタイトルをリンクさせる事が出来ませんでした。なので、blog記事をシェアするボタンが付けられませんでした。
モバイル用のメニューの中にCMS記事のリンクを入れていたのですが、パスワードと検索結果のページに設定するとエラーになりました。
と、色々書きましたが基本的にはWebflowの方が高機能だと思いますので、次はWebflowで出来て、STUDIOで出来なかった事を書こうと思います。ですが、どちらも無料でしかまだ使っていないので、どちらも有料だと同じことが出来る？かもしれません。やはり、一番の違いはSTUDIOは使いやすい。Webwlowはコードが出力出来る事かもしれません。
Webflowのblogは記事がコピペなのでデザイン的に割愛や変更している箇所もありますが、とりあえずは再現は出来ました。もう少し調整したり出来ることを追加してから、有料プランにして、無料で再現出来なかった所を追加修正、一度コードを出力して、その後でPHP化、WordPress化してみようと思います。
つづく。
←他の記事 →
