FLEX font - LAYOUT(flexfontレイアウト) flex - font - layout.js 無料ダウンロード 商用利用 使い方 ログイン
レスポンシブの
コーディングを簡単にする魔法のツール
LPでもSEO対策が出来る!
レスポンシブのフォントサイズがズレない。
メディアクエリでは出来ない、
『フォントサイズの無段階変更』が可能になるツール。
1サイト・どれだけページ作っても
980
多くのWEB
デザイナーが絶賛
今まで
なかった!
影
Flex font-LAYOUT animation Web デザイナー必見。 あなたのデザインを自由に活かす
全く新しいレイアウトツール誕生。
LPのSEO対策 Wordpress対応
画面サイズが変わってもテキストの位置がズレない
画像上にテキストを自由に配置出来る
選択できるテキストだから、LPのSEOに有利(選択してみて下さい)
画像だけのLPよりGoogle広告の品質スコアが高くなる
メディアクエリでは出来ない、『フォントサイズの無段階変更』が可能になります。
画面サイズが変わっても、 テキストがズレない!! なぜ?
画像の上に配置したテキストが
まるで画像と一体化してるかの
ように伸縮するからです。
LPのSEOとデザインを両立するレイアウトツール。LPで画像の文字をテキスト化するSEOや、レスポンシブサイトでメディアクエリを使わない等のCSSのスリム化にも役立ちます!

無料SEO対策LP制作ツール

簡単にSEO対応のLPが制作できる「SEO対策LP制作ツール」です。
画像の上にテキストをレイアウトしてSEOに強いFFL(flex font レイアウト)の基本レイアウトが制作できます。


→ SEO対策LP制作ツール

編集モードの説明動画 / ランディングページの作り方

flex font レイアウトの編集モードの説明動画です。
練習用SAMPLEファイルは Free Download のページからダウンロードして下さい。

基本レイアウトの作成は、先に → LP制作ツール をご利用下さい。


→ もっと詳しく

画面サイズを拡大縮小しても文字がズレないか、レスポンシブでよく使われるフォントサイズ指定で実験してみました。

↓動画で確認

画面サイズを拡大縮小すると、ff はズレませんが、vw,rem,em はズレることが確認できました。
その他、%,px も同様にズレます。vwは、黒のFlexbox(コンテナ)にcssで設定されているmax-width以上に画面サイズが大きくなるとズレます。

ランディングページ一覧

登録依頼はこちら tosou-kumamoto.jp ランディングページ一覧 katazuke-home.jp ランディングページ一覧 aquelajapan.com ランディングページ一覧

ユーザーの声

メインビジュアルのテキストにも使えるのは、かなりLPのSEOに有利だと思いました

せっかくSEOにも強い良いキャッチコピーを考えてメインビジュアルをデザインしても、今まではテキスト化せず画像のままでLPにUPするしかありませんでした。または、レスポンシブでテキストのレイアウトが崩れても何とかさまになるように余白の多い背景画像を使ったりして対応していました。
flex font レイアウトを使って、背景とテキストがズレないのでデザインの制限がかなり減りました。SEO向けのキーワードをバンバン載せてLPをデザインできるし、メディアクエリで何段階にも画面サイズを分けなくて良くなったので、あまり頭を使わなくてもよくなりました。レスポンシブのパズルから解放されました。
今は、780pxのみの分岐で、デザインもPCとモバイル(スマホ・タブレット等)の2種類のみで済ませています。



シンプルで使い易い。

私は50代のグラフィックデザイナーでWEBをコーディングするのは苦手な方ですが、難易度の高い事をお客様方から要求されて作って行かないといけなくなり苦労していました。でもこのツールを使うことですごく簡単にできました。今ではLPの制作スピードがかなり速くなってきました。



ランディングページのA/Bテストに必須

弊社では、各パーツのサイズ・色・位置などを変え、多種多様なデザインでのA/Bテストを繰り返すLPのコンバージョン率最適化(CRO)を行っております。小さな変更が多岐にわたり混在しますので、御社ツールを使用してブラウザ上でデザインを迅速に調整し新しいデザインパターンを構成しております。



マウスのサムボタンは絶対おすすめです!!

このサイトで知ってChromeのデベロッパーツールで直接LPをデザインするのにハマりました!
Logicoolのマウスのサムボタンに↑↓キーを設定すると、スタイルの数値変更が超簡単になります。作業スピードも格段に上がります!!
私は先にテンプレートとなる画像を背景画像に設定して、それを下敷きにしてテキストをブラウザ上でレイアウトする方法を多用していますが、サムボタンでフォントサイズや位置をピクセル単位(時にはそれ以下)で動かして行って、背景画像とテキストがピタッ!と重なった瞬間が気持ちいいです!



テキストの縁取りを良く使わせて頂いています

特に、ff_text_decoration.css の「縁 丸」.fuchi_maru_01em_ffffff と「明朝」.mincho と「縦書き」.tategaki の組み合わせが気に入っていて使うことが多いです。ほとんどの画像にテキストを重ねられるので便利ですね。このCSSシリーズのバージョンアップを期待してます!!



使ってよかった!!

以前は画像のみのLPにリスティング広告をかけていて、広告専用のページだからテキストとか関係ないと思っていましたが、キーワードをLPに入れると確かに広告の表示回数が増えました。
メインビジュアルのテキスト化でLPのSEOも兼ねられるようになって、クライアントからも大変喜ばれました。ありがとうございました。



コーディングが早くなった

レスポンシブサイトを制作する際は、今まではフォントサイズにvwやremを使って、メディアクエリのブレイクポイントを5個程度設定していたが、フレックスフォントを使って768px1個のみに変更。
タブレットっとスマホのデザインは1つにまとめて簡素化できました。cssの設計にかかる時間がほぼ半減した。



webフォントを使用したこだわりのLPが制作できるようになった

いつもお世話になっております。Adobe CCに付属のモリサワのwebフォントを使用してLPの画像の文字をテキスト化するようになって、デザインの制限がかなり少なくなり自由度が増えたましたので、日々気持ちよくデザインが出来ています。
コーダーも簡単で良いと大変喜んでおります。コーダーとの打ち合わせの中で、「それはテキストでは無理です。画像にしましょう。」というやり取りがいつもありましたがかなり減ったと思います。お互いにストレスが減って制作ペースもかなり上がりました。
SEOも好調に伸びていますので営業も喜んでおります。引き続きこれからもよろしくお願い致します。



flex-font-layout.jsは、ターゲット要素のサイズに合わせてフォントサイズを自動変更する、メディアクエリ不要のフォントサイズ自動変更マルチデバイス対応 JavaScript です。
LPをテキスト化したい方はコチラ → レスポンシブのコーディングを簡単にしたい方もコチラ → js 無料ダウンロード → 使い方
お問合せ
ページトップへ