昨日、プロ仕様のランディングページを高速で作成できる、a-blog cms用テーマ「zeroichi_lp」をリリースしました。

https://zeroichi-works.com/lp/

WordPress・a-blog cmsのランディングページ案件を多数制作している、名古屋のzeroichiworks（ゼロイチワークス）稲葉さんとの共同開発です。

リンク先の紹介サイトも、もちろんこのテーマで作成しています。

zeroichi_lpの開発には、一年近くかかっています。開発に至った経緯や、特筆すべき点などを改めてご紹介します。

はじめにお願いしたいこと

私と直接関わりがある人には、さまざまな理由で、このテーマを必要としない人もいます。

そういう人に無理に買ってくださいとは言いません。ひとつお願いがあります。

zeroichi_lpのサイトを、シェア、口コミなどでご紹介ください。

成果が出るマーケティング、胸を打つライティング、魅了するデザインに力を注ぎたい人。

クライアントや新人スタッフに運用を任せたい人。

子育てとの両立などで制作に充分な時間をかけられない人。

無料サービス以上、フルオーダー未満の予算が精一杯のプロジェクトに関わる人。

みなさんの周りに必ずいる、そんな人達にこのテーマを知っていただきたいと思っています。

絶対の自信を持ってこのテーマをお薦めします。

ぜひ、宜しくお願いいたします。

開発に至った経緯

コーポレートサイト向けのa-blog cms用テーマ「echo_zero」をリリースしたのが一年前になります。

http://cms-skill.com/echo_zero_demo/

これもだいぶ納得が行くものではあったのですが、他にはない特徴を持つ、a-blog cmsらしいテーマを作りたいと思っていました。

昨年の5月の「a-blog cms Training Camp 2017 Spring」でユーザーセッションをした、zeroichiworksの稲葉さんが、最後にこんなことを言いました。

「a-blog cmsの機能は、ランディングページに適している。ランディングページの制作に特化したテーマを作ったらいいのではと考えているのだけど、誰か一緒にやりませんか」

同じことを考えている人がいたー！と、その場で手を上げたのが、このプロジェクトのはじまりです。

稲葉さんは、私が愛知で仕事をしていた頃からの知人です。WordBench Nagoyaのメンバーで、昨年のWordFes Nagoyaでは実行委員長も勤めていますが、WordPressにはこだわらず、合うと思った案件にはa-blog cmsもバリバリ使っています。

コーポレートサイトやポータルサイトが中心の私とは異なり、会員制サイトやランディングページの制作を多く手がけています。

その稲葉さんに、実際の案件にプロトタイプとなるテーマを納品しつつ、ランディングページにはどのようなパーツ（ユニット・モジュール・コンポーネント）が必要なのか、CMS構築が専門ではない人にはどのようなアプローチが必要か、ということを伺いながら作ったのが、zeroichi_lpです。

すばらしい企画を提供してくださった稲葉さんに、改めてお礼申し上げます。

今度北海道にいらしたときは、おいしいものおごります。

a-blog cmsに関する考慮

多機能なa-blog cmsで、私が「この機能は特筆すべき」と考えているのは、以下です。

これらは絶対に考慮しなければと思っていました。

• ウェブ制作の現実のフローに最適化されたテーマ構造

• ドラッグ・ドロップに固執しない（編集ミスを誘発しない）、安定したブロックエディタ

• 採用するCSSフレームワークに併せたクラス定義も可能な「編集設定」

• 顧客属性ごとにコンテンツの一部を書き換えられる「ルール」機能

• HTMLのみでユニット（ブロックエディタのブロック）を自作できる「カスタムユニット」

ユニットを縦に積み重ねる考え方で構成されているa-blog cmsのエディタは、ワンカラムが原則のランディングページとはとても相性が良いです。

某ランディングページ作成サービスのように、ページ内のパーツをブロック単位で選べて、かつ自由に並び替えられ、レスポンシブも意識した精細な調整ができるCMSは、a-blog cms以外ありませんでした。

ハイエンドな制作者に人気のCMSとはいえ、a-blog cmsの知名度は、まだまだWordPressに及びません。

a-blog cmsを知らない人、コーディングスキルがそれほど高くない人でも使ってもらえるよう、それぞれのランディングページ専用ユニットのUI・文言には気を配りました。

敢えて実装しないということ

テーマを作るにあたって、いくつかの機能は、実装しませんでした。

ランディングページに特化したため、月別アーカイブや検索も実装していません。

また、ページ全体の構造を変更できる「レイアウト」機能と、カスタムフィールドの項目数を自由に増減できる「カスタムフィールドグループ」も、a-blog cmsらしい機能ですが、実装しませんでした。

カスタムフィールドグループを使えば、「スライドショー」ユニットのスライド枚数や、「カード」ユニットのカード枚数をいくつでも増やすことができます。

ですが、「制限なく変えられる・増やせるのは、果たして良いことなのだろうか」というのが、稲葉さんと私の共通の見解でした。

ランディングページは、レイアウトの必勝パターンがほぼ決まっています。

スライドショーの枚数は一般に5枚が限度ですし（※）、カードは2・3・4枚が適切です。

開発元にはがっかりされてしまったかもしれませんが「考えることなく必勝パターンを作成できる」ことに、このテーマの価値を持たせています。

※そもそも私はスライドショーそのもののマーケティング効果に疑問を持っています。よほど魅力のある商品でなければ、二枚目以降は見られることはありません。ニーズが多いので実装していますが…

コーダー・デザイナーの願いを叶える

これは「画像全面」ユニットのスクリーンショットです。

このテーマの考慮点について説明するのに、ちょうどいいユニットです。

追加クラス・追加属性

ユニットの先頭には「追加クラス」「追加属性」という入力欄があります。

これはすべてのユニットに付いていて、包括しているdivにクラスと属性を付与できます。

ここまで書いたらコーダーの方はわかると思いますが、同じユニットでもそれぞれに別のクラスを付けて、追加CSSで見映えを調整できるということです。

また、このテーマはCSSフレームワークを搭載しているので、クラスの欄に「bg-first bg-fade」と書くと、メインカラーの薄い網掛けが入りますし、「p-y-sm」と書くと、上下余白がほぼゼロになります。

たとえばJimdoでは、余白をピクセルで指定する機能があります。ピクセルで指定できるとわかりやすかったかもしれません。

しかしこのテーマはあくまでプロ用なので「スタイルはクラスで指定すべき」「調整したい部分は余白だけじゃない」という、現実のCMSカスタマイズ事情を優先しました。

画像オプション

一部の、画像の見映えが重要なユニットは、レスポンシブイメージを採用しています。

多くのCMSテーマ（echo_zeroもですが）は、この手の画像はCSSのbackgroundでは位置しているため、モバイルで閲覧すると、メインビジュアルの大半が欠けてしまいます。

デザイン的には、高解像度では超横長、スマートフォンでは正方形に近い方が、メインビジュアルとしては美しく見えます。

「写真素材がクライアント指定となっている案件が多いので、この問題をなんとかしてほしい」と稲葉さんから要望があり、導入しやすくなったレスポンシブイメージで解決することにしました。

また、画像に文字を入れたい・凝ったフォントを使いたいという要望にも対応できるよう、タイトルを代替テキストにできるオプションも実装しています。

白黒反転

画像全面・動画全面ユニットは、文字の色反転ができます。動画は網掛けの有無も選択できます。

メインビジュアルが白っぽいのに、上の文字は黒背景・白文字前提、というテーマがとても多く、私自身がフラストレーションを感じていたためです。

他のユニットでも実装することを考えましたが、流石にキリが無くなるので、画像が全体を占めるユニットだけとしました。

そのテーマ、見出しにspanを書けますか

このテーマを作るもっと前に、札幌のリーグラフィさんのお仕事を手伝いました。

リーグラフィさんはデザインに強い会社なので、ウェブフォントを駆使して、タイポグラフィにこだわるサイトを数多く作っています。

そのときに、見出しの文字が1文字単位でspanで囲まれていることに気付きました。

ウェブフォントを使用して、かつスマートフォンでの見た目も意識すると、目立つ見出しは文字レベルでカーニングやサイズ調整を行わなければならないのです。

先頭にアイコンを付けたいケースもあるでしょう。

なので、このテーマも、テキストはもちろん、見出しにもインライン要素を書くことができます。

マーケッター・ウェブ担当者への配慮

マニュアルは順次執筆中ですが、「画像素材の推薦サイズ」というページを用意しています。

このテーマで最もバランスが良く見える写真の縦横比、望ましい最低サイズをすべて記載しました。

https://zeroichi-works.com/lp/manual/images.html

また、「ページを編集する」のページでは、a-blog cmsの基本機能と、設定すると何が起こるのかの解説もしています。

https://zeroichi-works.com/lp/manual/edit_basic.html

他にも「この機能を使うとこのような活用ができる」「こういう問題が起きる可能性がある」という注意書きも記載しています。

マニュアルを「テーマの使い方の解説」と考えると、これらは必要ありません。

ですが、このテーマをCMSに詳しくない人、ライティングに詳しくない人、デザインに詳しくない人にも使ってもらいたいので、制作ノウハウも記載しています。ここでも「必勝パターン」が出てきています。

もちろん「ぬはははは！戯言を。その常識を超えることこそ、クリエイターの矜持よ！」と思ったプロフェッショナルな方は、ガンガンカスタマイズしてみてください。

全国のすばらしい制作会社さんが、よってたかってこのテーマを使い倒してくれる未来にも、私は激しく期待しております(* ´Д` *)

おわりに・CSSフレームワークの話

今夜はゆっくりするつもりだったのに、この記事を書くのに三時間半かかってしまいました。もう書いていたらきりがなくなってきてしまったので、この辺にしたいですが、最後にzeroichi_lpに含まれている、CSSフレームワークの話をします。

このプロジェクトとは別に、CMSテーマ制作に最適化したCSSフレームワークの開発を続けています。ここ一年間の案件のCSSはそのフレームワークからフォークして作っています。

zeroichi_lpがもっとも最近に分化したものです。

マスター側はさらに変わり、クラス名にFLOCSSと同じ接頭辞がつくようになったり（このテーマは混乱を招く可能性があるのでクラス名をシンプルにしています）、コンポーネントが整理されたりしていますが、基本的なデザイントークンは同じです。

zeroichi_lpの開発はこれで一段落、山をひとつ越えましたが、この先にもまだまだたくさん、登りたい山が見えています。

皆様にこのテーマのフィードバックをいただき、それを通して、次の目標をいただければうれしいです。

価格・ソースとも非公開となりましたが、デモサイトのアカウントはいつでも発行できます。

ご検討中の方は、お申込みフォームからお知らせくださいませ。