-
-
alter.jsで
PCサイトを自動に！スマホサイトをPCサイトに自動変換する
JavaScriptライブラリです。
いま制作現場で起きている課題
-
PC/SPでのアクセスシェアとコストの逆転
アクセスシェアは2割以下なのに、PC対応にかかるコストはスマホの5割増し。
-
PC/制約が多く、SPが思い通りにならないレスポンシブ対応
レスポンシブの制限でSP/PCどっちつかずの最適化になる。
-
流入は少ないが、やめられないPCサイト
いくらシェアが少なくてもPCサイトを無くす決断は難しい。
こんなお悩み当てはまっていたら
改善の時期です！
-
圧倒的に流入はスマホメイン。
PCは捨てられないが、
レスポンシブも意外と高いな... -
スマホサイトだけでリリースしたが、
やっぱりPCの対応も必要になってきた -
更新性が高いサイトだから、
今後はPCにかかるコストをもっと抑える
手法を検討している。 -
現状のPCメインのレスポンシブ対応だと
スマホ側の表現に限界がある...
そのお悩み
alter.jsで
解決できます！
alter.jsで
実現できること
スマホサイトをPCサイトに自動変換！
PCサイトの重荷から解放されます！
-
スマホ中心のサイト運営に！
PC制作を自動化することで、スマホ中心のサイト運営にシフトします。
-
PC運用が不要に！
スマホサイトを更新するだけ。運用も自動的にスマホとPCが連動。
-
コスト配分の最適化！
制作も運用もスマホ中心になることでPCにかかる作業コストを大幅に削減します。
-
ビジネスが加速！
スマホ中心のシンプルなサイト制作・運用でビジネスが加速します。
alter.jsの特徴
-
作るのはスマホサイトだけ！
PCサイトは自動変換でコスト削減
企画、デザイン、コーディングもスマホサイトだけ。だから思い通りのスマホサイトを実現でき、コストを大幅に削減できます。
-
ノンプログラミング！
GUIツールでPCデザインも自由に変換
PCサイトは自動変換だからって犠牲にはしません。細部までこだわったデザインをノンプログラミングで調節できます。
-
3行コードを足すだけ！
簡単導入でシステム担当への確認不要
サーバーもインストール作業もいりません。JavaScriptを読み込む３行のコードを足すだけなので、制作・運用部門で導入判断できます。
alter.jsの仕組み
alter.jsは、HTML5で制作されたスマホ用のコンテンツをブラウザ内でPCの幅に自動的にレイアウト調整します。 これにより、簡単に素早くサイトの１ソース・マルチデバイスを実現します。
-
HTML5の構造からコンテンツを
二列化する
alter.jsの基本変換は、HTML5の構造を読み取り、スマホで一列に並ぶコンテンツを二列化してPC幅のコンテンツにします。 デバイス毎にCSSを書いたり、特殊なクラスの記述は不要です。
-
画像は同じ大きさ、フォントは
適正サイズ
画像サイズとフォントサイズの調整は、レスポンシブウェブデザインでの大きな課題の１つです。 alter.jsでは、画像はスマホと同じ大きさに保ち、フォントはPCで読みやすいサイズに自動調整します。
-
GUIツールで後から変換調整が可能
Chromeのアドオンとして提供されるGUIツールで、変換結果の確認だけでなく、デフォルトの変換結果をノンプログラミングで変更できます。変更した設定値はファイルとして書き出し、ファイルをアップロードするだけで変換調整できます。
-
スマホ側の微調整やA/Bテストにも活用
alter.jsのGUIツールで、PCサイトだけでなく、スマホサイトの文言やスタイルを一時的に変更できます。しかも元ファイルを編集する必要はないので、制作会社に依頼することなく、スマホサイトの微調整も可能です。
alter.jsの事例
ー RIZAPイノベーションズ株式会社様 ー
既存スマホサイトも１日でPC対応！
スマホサイトのみを作成し、PCでもスマホサイトの横幅のまま表示していたが、PCでは左右の余白が大きかったり、インターフェースがスマホ向けの部分もあり、課題を感じていた。 最小限のコストでPCに対応できる方法がないかを検討していたところ、alter.jsを導入することで解決した。
-
スマホで1カラムもPC幅に合わせて
自動で2カラムに
店舗情報と地図がPCの時に横並びになるように自動展開。
-
スマホのカルーセルをPCでは自動展開して
タイル状に
カルーセル内の複数画像をPCサイトでは一覧できるように展開。
ご検討の流れ
-
STEP01
フリー版をダウンロード
無料で30日間利用できるフリー版をサイトからダウンロード。
-
STEP02
サンプルサイトでお試し
パッケージ内のサンプルサイト、またはリファレンスに従って、スマホサイトを作成。
-
STEP03
GUIツールでPC表示を確認
GUIツール（MFEdit）上でPC変換結果を確認、必要に応じて微調整を試す。
-
STEP04
お見積・ご契約
alter.jsを利用する開発者数を連絡し、見積書を発行。ご契約。
よくあるご質問
-
Q. 製品説明やデモの依頼はできますか？
A. はい、お気軽にまずはお問い合わせください。都内近郊以外の場合はWeb会議でのご説明となる場合があります。
-
Q. 料金はいくらですか
A. デベロッパーライセンスでは、開発者1名につき年間5万円となります。その他のライセンスについてはお問い合わせください。
-
Q. 導入にはインストールが必要ですか？
A. いいえ、システムインストールは不要で、JavaScriptのライブラリファイルを配置するだけです。レスポンシブで作成するのと大差ありません。
-
Q. これはクラウドサービスですか？
A. いいえ、JavaScriptライブラリでお客様のWebサーバに配置するだけです。システムとしてのつなぎ込み等は不要です。
-
Q. スマホサイトのデザイン制約はありますか？
A. いいえ、デザイン上の制限はありません。コーポレート、EC、会員サイトなど、どんなサイトにもご利用できます。
-
Q. 既存のスマホサイトにも使えますか？
A. はい、利用可能です。専用エディタ（MFEdit）を使うことで、タグの追加をすることなく一時的に変換を試すこともできます。
いますぐ！
フリー版を
お申し込み！
-
-
alter.js一式
GUIツール（MFEdit）を試せるサンプルサイト
alter.jsの使い方がわかるリファレンス
コラム
技術者必見！
レスポンシブと決定的な違い
-
メディアクエリは使わない
alter.jsの大きな特徴は、HTML5のタグ構造を読み取り、スマホでは縦1列で並んでいるコンテンツを自動で2列に再配置します。その為、コンテンツ制作の際にメディアクエリを使って、PC用のCSSを記述する必要がありません。フォントサイズの調整も自動で行われますので、制作時はHTML5の正しい書式通りにスマホ用のHTML/CSSを作成するだけとなります。
-
見通しが良くメンテナンス性が高い
コンテンツメディアクエリを使ったレスポンシブWEBデザインの場合はPCとスマホの両方を考えるので、メンテナンスを重ねていく時に、HTMLを綺麗に保とうとするとCSSのメディアクエリに絡んだ箇所が複雑・冗長になったり、逆にCSSをシンプルにしようとすると、HTML構造が歪になる場合があります。
alter.jsでは、スマホ用のHTML/CSSをメンテナンスしていくので、HTMLの中にPCコンテンツを隠しながら混ぜるような事はする必要がありません。また正しいHTML5の構造でコンテンツを維持することが、alter.jsの変換に対して高いパフォーマンスをもたらすので、必然的に質の高いHTMLが保たれます。
ぜひ、サンプルサイトの
ソースをご覧ください。
alter.jsで
PCサイトを自動に！
スマホサイトをPCサイトに自動変換する
JavaScriptライブラリです。