CMS

a-blog cmsの投稿画面用UIと既存スタイルの衝突を回避するCSSを公開します


a-blog cmsの魅力は、公開サイトからデザインの異なる管理画面へ移動せずにエントリーの投稿ができるところにあります。日本での利用を前提としたUIもわかりやすく、クライアントさんからの評価も高いです。

投稿画面のユーザーインターフェースのCSSも丁寧に作られているのですが、導入するサイトのCSSルールによっては衝突が起こる場合があります。

典型的な例が以下のようなサイトで、body要素のスタイルを参照しているa-blog cmsの投稿画面は、冒頭の画像のように見た目が崩れてしまいます。

  • bodyにセリフ系、デザイン系のフォントを指定している
  • bodyの文字サイズを「0.625rem(=10px)」として、各モジュールは「140%」などの相対%で調整している

これらをはじめとする細かい問題を回避するCSSをGistで公開しました。

a-blog cms バージョン2.6時点の、公開ページでの投稿フォームなどの既存CSSとの衝突を修正するための追加CSS

こちらからも、2017年1月19日時点のバージョンをダウンロードできます。


ファイルイメージ

acms_ex.css.zip

使い方

以下のとおり、本来の「acms.css」に続けて読み込んでください。

<link rel="stylesheet" href="/css/acms-admin.css">
<link rel="stylesheet" href="/css/acms_ex.css">

このCSSは、以下の問題の修正と、外観の調整を行います。

  • 本文のスタイルの影響をUIも受けてしまう問題を回避
  • 全幅レイアウトのサイトに組み込んだときにUIが広がりすぎる問題を回避
  • 管理ボックスのボタンサイズを固定
  • ユニット内のラベルのクラス名がbootstapと重複している問題を回避
  • acms.css以外のフレームワークを使用すると予期しない箇所で段組が解除されてしまう問題を回避
  • エントリーカスタムフィールドのラベルを長いタイトルにも対応させる
  • ファイルユニットになぜかインラインでwidthが入ってしまう問題を回避
  • ツールチップアイコンをエントリー・モジュールのカスタムフィールドでも使用できるようにする
  • 文字装飾ボタンを目立たせる

「本文のフォントをacms.cssのフォントに合わせる」「予期しない箇所で段組が解除されてしまう」「文字装飾ボタンを目立たせる」については必要ないケースもあると思うので調整してください。

また「ファイルユニットになぜかインラインでwidthが入ってしまう問題」については今後のバージョンで修正される可能性があります(先日リリースれた2.6.1.4では未確認です)。その場合はこちらは逆に不具合の原因になるかもしれません。


私はいちからすべてテーマを制作する案件だけでなく、すでに制作会社さんによってコーディングが終わったサイトにCMSを組み込む案件も多数請け負っています。この調整CSSは、そのような案件を通してちょっとずつ書き足していったものです。

個人的には10pxから文字サイズを調整する手法は開発者側の計算が楽になるものの、改修や外部サービスのパーツ追加に弱いので避けるべきと思います。

しかし、そういった導入先サイトのスタイルの問題だけでなく、最近のCSSフレームワークで見られる「ワイド画面でサイト全体の文字サイズが大きくなる」効果によって「良かれと思って作られているものがacms.cssと衝突する」というケースもあり、やはりサイトに応じて制作側が細やかに調整していくしかないと思います。

「そこまでするの?」「フォントなんて気にしなくても…」という意見もあるでしょうが、私は可能な限り徹底したいと考えています。はじめてのCMSを扱うクライアントの不安をできるだけ払拭するのが、CMS構築を担当する私の役割でもあるからです。

CMS

国内CMS7種のナビゲーション機能を比較してみた・2016年歳末版


これまでのコーポレートサイトのCMS構築において、ナビゲーション機能は重要度が高くありませんでした。公開後に変更されることが少ないので、HTML直書きでも充分だったのです。

しかし、コンテンツマーケティングの考え方が普及し、サイト公開後もナビゲーションの導線変更を検討するケースが増えてきました。
現時点の、日本国内の主要CMS6ブランド・7種類の「ナビゲーション機能」について改めて見直してみました。

2016-12-30追記

ユーザーの皆さんから情報をいただき、下記を修正しました。
不備が多く申し訳ありません…m(__)m

  • Movable Type: Object Treeプラグインの情報を追加
  • a-blog cms: ナビゲーションのカスタマイズについて追記
  • concrete5: フラットビュー、ページ検索機能について追記
  • baserCMS 4: ブログ・フォームを複数追加について追記
  • Drupal: 「リンクの一覧」画面について追記

この記事には続きがあります

Work

有限会社リーグラフィさんと、a-blog cmsで住宅ブランドのサイトを制作しました



こちらは、a-blog cms Advent Calendar 2016の12日目のエントリーです。今年の更新は早いですよ!

札幌の制作会社、有限会社リーグラフィさんと、株式会社ジョンソンホームズ様の住宅ブランド「ナチュリエ」のサイトをa-blog cms 2.6.1でリニューアルしました。

ナチュリエ ていねいに育てる、自然素材の家

私はa-blog cmsの構築・技術サポート全般と、サイト内の一部のJavaScript制作を担当しています。

投稿画面も含めたサイトの全容は、先月の「a-blog cms Training Camp 2016 Autumn」でご報告させていただきましたが、あちらは合宿に参加された方だけの特典ということで、私のブログでは主に、構築面で考慮したことなどをご紹介します。


チーム構成



リーグラフィCSS Nite LP46「ビジュアル・ドリブンのデザイン」などに出演している、デザインとUXを得意とする会社です。

ディレクションを担当した平澤さんは、a-blog cmsについては勉強を始めて間もないので、ひと通りの構築までできる水越さんが間に入る形で、三人でどのような構成にすべきか仮テーマを組みつつ、相談しつつ進めていきました。

a-blog cmsはコーディングの自由度が高い分、先にがっちりHTMLを組んでから作ると(いわゆるウォーターフォール)、公開後の運用がしづらいなどの認識違いが起きやすい側面があります。やはりアジャイルを得手とするチーム向けのCMSと思います。

使用しない機能は見せない

逐一打ち合わせをしているうちにわかってきたのが、以下のようなことでした。

  • コンテンツごとにデザインが大幅に異なり、事例などではかなりの入力項目が必要となる
  • 関連付けのキーとなっている店舗情報は全ブログに出す
  • しかし、特定のコンテンツで使用しているフィールド・ユニットは、他のコンテンツでは使用しないことが多い

これに伴い、投稿画面をできる限り「使用しない機能は見せない」方針で設計していきました。

a-blog cmsは投稿画面をカスタマイズできますが、無計画に改変するとバージョンアップ後に大変なことになります。変更点をコメントで書いておいたり、HTML構造が変わっても致命的なエラーとならない、jQueryのツリー解析による書き換えを駆使しました。



例えば、a-blog cmsの管理ボックスの「エントリー作成」ボタンは、押す前に実際に更新したいページへ移動する必要がある(すごくすごくバージョン3までには直してほしい)仕様なのですが、ナチュリエのサイトでは選択しただけで目的の投稿画面へ移動できる、プルダウンリストとしています。

カスタムユニットの活用

a-blog cmsは、既存の画像・YouTube・GoogleMaps以外にも、完全自作のユニットを作ることができます(もちろんPHPもJSも書きません)。
バージョン2.1から実装されていた機能ですが、先述の「使用しない機能は見せない」にのっとって今回はじめてフル活用しました。


建築日記専用ユニット

たとえば「建築日記」のコンテンツでは、画像のようなパーツしか使われていません。

https://www.naturie.jp/works/Mdf20160725134119-286.html

このコンテンツの日記パーツは、建築中は新しい順、建物が完成すると古い順に並ぶという、旧サイトからのルールがありました。 そこで、入力画面をわかりやすくでき、かつ楽に並べ替えられるよう専用ユニットを作っています。


関連エントリー

オーナーインタビューに、Kさんというご夫婦が出てきます。内装がかわいいです///

https://www.naturie.jp/voice/sapporoownervoice1.html

Kさんの家は「フォトギャラリー」「建築日記」にも掲載されています。これらを結びつけることができれば多方面からナチュリエの事例を見てもらえます。水越さんから「a-blog cmsの関連エントリー機能を使えないでしょうか」と提案を受け、実装しました。


事例同士を関連付けた状態

通常、関連エントリーではエントリーのタイトルと概要が表示される前提となっていますが、事例ではリンク先URLを正規表現で条件分岐にかけ、インタビュー・フォトギャラリー・建築日記のラベルがついたボタンに切り替えています。

CSVインポートを採用するメリット

ナチュリエの旧サイトは、フルスクラッチのCMSで運用されていたため、データのエクスポート機能がありませんでした。
しかし、a-blog cmsには高精度なCSVインポート機能があります。実際のサイト内のHTMLから情報を拾っていく必要はあるものの、そこさえクリアできれば行ける!と目算を立てました。

画像カスタムフィールドのCSVインポートフォーマットが公開されていないという難関がありましたが、検証の結果、他のCMS以上に簡単に実装できることがわかりほっとしました。CSVインポートのサンプルデータはGitHubで公開していますので、ご自由にお使いください。

https://github.com/webbingstudio/acms_inport_test_500

CSVインポートは以下のメリットがあるため、最近はどのCMSの案件でも積極的に導入しています。

  • CMSの種類・端末・環境を問わず導入できる
  • Web制作の知識が浅いスタッフにも作業を依頼できる(インターンさん外部スタッフさんありがとう ToT )
  • スプレッドシートで見ることで「不備があるデータ」「移行不要なデータ」を可視化できる

まとめ

特にa-blog cms関連でお話ししたいことはこのようなところです。他にもcookieと連動してのコンテンツ切り替えなどもしていますが、これはa-blog cmsの公式ハンズオンにもあるので、皆さんも検討してみてください。

a-blog cmsでの大規模なサイト制作に関わるのは、今回がはじめてでした(ちょちょいなら何度かありましたが)。a-blog cmsならではの構築面での注意点、自分のテーマ制作のヒントも多く得られたと思います。
リーグラフィの皆さんありがとうございますm(__)m

ウェビングスタジオでは制作会社へのCMS構築面の技術提供なども行っています。どうぞお気軽にご相談ください。

ってこのサイト、お問い合わせフォームがないですね( ˙-˙ )
mail[ atmark ]webbingstudio.com
です。すいませんリニューアルせねば。

Work

イラスト教室「あっという間にできる!マイキャラ作成講座」のサイトを制作しました

イラスト教室「"あっ"という間にできる!マイキャラ作成講座」のサイトを、a-blog cmsベースで制作しました。

東大阪のイラスト教室 【"あっ"という間にできる!マイキャラ作成講座】 現役イラストレーターが直接指導

「マイキャラ作成講座」は、大阪府のイラストレーター・境目朋子さんが「絵が苦手な人」を対象に、過去十数回開催しているイベントです。
「うまく描く方法を知る」のではなく、「今の味を生かしつつ、かわいく見せるコツを知る」「キャラクターを通して自分を知る」ことに重点を置いています。


好評につき、個人事業主向けのビジネスコースを追加することになり、境目さん・協業のデザイナーさんと相談しながら、文章や案内のさせかたをずいぶん推敲しました。

私は制作会社から依頼を受けることがほとんどで、お仕事の内容をブログで書くのは久しぶりです。
a-blog cmsの特徴を生かして構築をしていますので、いくつかご紹介します。


イベント・セミナーサイトで考慮すること

私が関わった案件で特に多いのが、イベント・セミナー案内のコンテンツです。内容や方針によってテーマの仕様が全く変わってしまうので、既存フォーマットを使うのが難しいのです。

カスタムフィールドを多用するため、あとでのやり直しはダメージが大きいです。少なくとも、制作前に以下の点ははっきりさせなければいけません。

開始条件
イベントは、公開=受付開始とはならないことがあります。「準備中」を設けておいた方がいいです。
終了条件
JSかPHPで自動で時限処理をする場合、工数がかさみます。その場合は手動でもいいでしょう。
一覧ページの並び順
募集開始日順、開催日順のどちらかが定番ですが、現在の日付から開催日に近いものを優先してほしいとか、重要イベントをピックアップしたいという要望も出るはずです。
早割の有無
早割条件がある場合は、早割料金と諸条件のフィールドが必要です。
申し込み先
申し込みフォームが自社サイトの場合でも、まれに外部サービスで募集を行うことがあります。

修正しやすくするための対処


手作り風のデザインにすると、どうしてもマークアップが複雑化し、a-blog cmsのユニット機能をすべてのページに利用できなくなります。

境目さんの場合、「熱心な参加者が多いので、専用ページを設けて、参加者の声を今後も追加したい」とご要望がありました。
なので、ページ内で参加者の声を出しているパーツだけ「カスタムユニット」を作り、HTMLがわからなくても簡単に追加や修正ができるようにしています。

カスタムユニットについては解説記事を書いてますので参考にしてください。

望みのパーツをどこにでも。制作者も更新担当者も幸せにする、a-blog cmsの「カスタムユニット」の使い方 | CMS | ウェビンブログ

今後もフィードバックを受けて調整することになるかもしれません。それがプログラミングなしでできるのが、a-blog cmsのいいところです。

スマホ対応


先述の通り、新しくできた「ビジネスコース」を強めに出しています。
なので、講座開催予定の先頭に必ず、随時募集している「ビジネスコース」を出すようにしました。

ところが、スマートフォンは画面が小さいので、開催予定のファーストビューがいつもビジネスコースのみになってしまいます。これはこれで良くないです。


そこで、ビジネスコースの表示場所だけが異なっている「スマートフォン用のテーマ」を用意して、PCとスマホでファーストビューが変わるよう調整しました。

このテクニックについては、先日発売の「実践! コンテンツファーストのWebサイト運用 a-blog cmsではじめるCMSプロトタイピング」の5章、テリムクリさんの事例として詳しく載っています。買ってくださいねー :D


「echo」の話


このサイトの基本構造は、半年近く保留になっている、有料テーマプロジェクト「echo」の、a-blog cms版のベースでもあります。

echo - プロの制作者のためのフレームワークテーマ

a-blog cmsは、2.5〜2.6の間にテーマ制作に関わる機能が追加され、テーマをいちから考え直していました。今回の境目さんのサイトで、ようやくフォーマットが固まった感じです。

今年は札幌へ帰ってからも、a-blog cmsの案件が一番多い状況です。なんだかうれしいです。
a-blog cmsに興味を持ちましたら、ぜひぜひ、ウェビングスタジオへご相談くださいね。

CMS

CMS使うなら必読!「実践! コンテンツファーストのWebサイト運用 a-blog cmsではじめるCMSプロトタイピング」の見どころガイド

a-blog cms関連書籍 出版記念セール
明後日までにライセンスを2個買うと本がもらえます :D

執筆をお手伝いした、a-blog cms初の専門書「実践! コンテンツファーストのWebサイト運用 a-blog cmsではじめるCMSプロトタイピング 」がいよいよ発売となりました。
私は2章の導入と初期設定、査読を担当しました。


企画がはじまったのは一年ほど前ですが、その間に「簡単セットアップ(インストーラー)」が完成し、大幅に導入のハードルが下がりました。この手の書籍で最も大切な「運用」が充実したのを、執筆した立場からしみじみ喜んでいます。
すばらしい企画に参加させていただき、改めて益子さんとアップルップルの皆さんにお礼を申し上げます。

この本はCMSの書籍としては珍しく、システム名が小さく書かれています。「a-blog cmsの使い方」だけでなく「これからのWebサイト運用において、CMSで何ができるのか」に重きが置かれています。
「自分は(WordPress|Movable Type|baserCMS|concrete5|Drupal)だし」と思っている人ほど読んでください。

a-blog cmsは高機能です。また、本を読むといってもなかなか時間的に難しい人もいるでしょう。
もちろん全部読んでほしいですが。全部読んでほしいですが。(大事なことなので二回言いました)本書の見どころを、ピックアップしてご紹介します。

この記事には続きがあります