一旦完コピを目指して作成していたWebflowのホムペですが、なんとなく再現出来てその後、STUDIOでは出来ない機能を色々入れていたら、訳が分からなくなって来たので打ち止めにしました。出来る事が多すぎるのと、出来るけど実験以外ではこんな機能は使わないだろうと言うものも多い気がします。あと、触ってないボタンも沢山ある。HTML等詳しいと押さなくても分かると思いますが、押すとデザインが壊れそうなので押していません。
再現したい事が出てきたらまた触る気もしますが、ここで一旦、現状の無課金Webflowで出来て、現状の無課金STUDIOで出来なかった事をなんとなく上げて行きたいと思います。有料にしてコードを書き始めたら再現出来るのかどうなのかは不明です。
あちらのページのNavigationとサイドの要素をホバーさせると、回転したり跳ねるような動きをしますが、こんな動きが色々標準であって楽しいです。最下部の魚にもつけてみました。マウスをのせて外すと魚が逃げて行きます。ただ、ホバーってPCじゃないと意味無いんですよね。ページをロードした時にも少し動かしてみましたが、STUDIOと似た動きなのであまり違いが分かりません。Javascriptで動かすホバーとCSSで動かすホバーとで種類があるようです。
あちらのページのトップのタイトル文字にグラデーションをつけてみました。文字の透明処理はSTUDIOでも出来た気がします。
Webflowでは文字やボックスに使える単位が色々あります。%もそのウチの一つですが、STUDIOでは画面幅の100%で文字を入れて、ページサイズに合わせて等倍で縮小と言った事が出来ず、ブレイクポイント毎にサイズを調整するしかない（画像にするか）と思いますが、あちらでは自由にレイアウトが出来ます。これはデザインをする上でとても重要な気がします。マージンやパディングにも%等が使えるので、ページ幅に合わせて同じレイアウトを保つことが出来ると思います。
STUDIOでもスライダーが使えますが、あちらでは自動で動きます。また、ページ移動のエフェクトも選べるのでちょっと変えてみました。有料にするとSTUDIOでも出来るようです。
よく分からないのですがサムネイルをクリックすると大きい画像が出てきたり、登録してある画像を、スライドして見る事が出来る機能がありました。STUDIOでも出来るかもしれませんが、入れてみたかっただけなので動画のサムネイルと、詳細がスライド出来るようになっています。良かったら見てみてください。
先程のLightboxですが、ポストカード3枚の近くに地球の画像が転がっていて、それをクリックすると出てくるようにしています。地球の画像をマウスの動きに合わせて移動するように設定しているので、何処かに行ってしまって画面上に無いかもしれません。他にも、お問い合わせの所に配置してあるロゴが、ページの上下スクロールに合わせて左右に転がったり、ページのスクロール位置に合わせた処理もあちらでは出来ます。
Stickyポジションと言うのを初めて知ったのですが、ページをスクロールしていて、一部の箇所だけスクロールが止まったりと言う処理が出来ます。そう言えば色々なページで見かけますが、STUDIOで言う所のボックス配置を相対的にするか、固定にするかの所にStickyもあって、あちらではライブのイメージ画像や、blogページのナビゲーションの固定に使っています。良かったら見てみてください。
Stickyポジションを利用して、一定の位置までスクロールしたら下のセクションを固定、そこからページが横にスクロールして、終わったらまた通常の縦スクロールが始まる処理が出来ます。これもやってみたかっただけです。クライミングのイメージ画像の辺りまでスクロールすると出てくるので良かったら見てみてください。
トップのタイトル文字にかけているグラデーションですが、一つのグラデーションを二回繰り返しています。これを利用してお問い合わせのセクションの背景に、グラデーションで斜線を描いて繰り返し処理をしています。画像でも簡単に出来ると思うのですが、出来るだけ文字やデザインを画像にしたくない？気がするのでやってみました。
STUDIOではオブジェクトの変形にX軸、Y軸の回転がありますが、あちらではZ軸の変形も出来ます。パースも付けられるので奥行きを出したり出来るようですが、やってみて微妙だったので消しました。デザインによっては使い所があると思いますが、普段のデザインでもあまりやらない気もします。
標準で装備されているオブジェクトにタブとドロップダウンもありました。タブはSNS紹介のセクションで、タブレット以下のサイズに表示させています。ドロップダウンも画面サイズが小さい時にハンバーガーメニューで出てきます。他にもAfterEffectと連携させて動画のボックス？とかもあったのですが、手に負えないので使っていません。
STUDIOでは有料じゃないと入れられないgoogleアナリティクスですが、あちらでは無料です。これが使えるとなると、簡単なLPならもう無課金Webflowで良いかもしれないと言う気もしてきます。googleアナリティクス、入れたいですよね？あんまり見ない気もするけど、アクセスのワードとか、気になりますよね？
とりあえずここまで作ってWebflowを有料プランにしてコード出力、さくらサーバのサブドメインにアップロードしてみました。出力してみて分かったのですが、CMS部分は出力が出来ないんですね。あと、Webflowの有料にはサイトプランとアカウントプランと言う種類があって、多分ですがサイトプランをどんなに高いものを選んでも、アカウントプランを有料にしないとコード出力が出来ないようです。また、どんなに高いプランにしてもCMS部分が動く状態でコード出力が出来ない（当たり前か）気がします。とりあえず静的な要素はJavascriptやSEOも含め完全に再現されて出力されている（当たり前か）気がします。見た目が同じなので見てもしょうがない気もしますがこちらです。今後はこれをPHP化してお問い合わせとCMSが動くようにしてみたいと思います。
つづく。
←他の記事 →
