4kaku design

マーケティングを勉強しているWebデザイナーのノート

書籍の写真

2016年6月30日(木)に共著で「実践!コンテンツファーストのWebサイト運用 a-blog cmsで始めるCMSプロトタイピング」という書籍を出版させていただきました。

著者サイドの取りまとめ役をやったおかげで、担当編集さんの次に書籍の内容に詳しいと自負しています。そんな目線で、開発スタッフとして書籍の見どころと使い方をご紹介したいと思います。(いまいの勤め先はa-blog cmsというCMSを作っています。なお本記事はいわゆるステルスしてないマーケティングです)

もくじ


「実践!コンテンツファーストのWebサイト運用」ってどんな本?


まず最初にWebサイトの「中身」であるコンテンツ(掲載するテキストや画像、その他の構成要素)を用意し、その内容を踏まえてシステム設計やビジュアルデザインをすることを「コンテンツファーストなWebサイト制作/運用」と定義しました。

本書では、国産CMS「a-blog cms(エーブログ・シーエムエス)」を使って「コンテンツファースト」を実践するための方法をご紹介しています。a-blog cms の解説書籍という側面がかなり強いです。


こんな方のために書きました!


  • 「伝わるWebサイト」を作りたい方
  • PHPが苦手なデザイナーさん、コーダーさん
  • 運用しやすい自社サイトがほしいWeb担当者さん
  • (職種を問わず)a-blog cms に興味がある方

基本的には、ある程度HTMLやCSSの知識がある方を対象にしています(ノウハウを紹介するあたりでソースコードが頻出しているため)。とはいえ、ある程度何をしているかがわかれば専門家に依頼することもできるので、Web制作者さんだけでなくWeb担当者さんにも読んでいただけたら嬉しいなぁと考えながら作りました。

プラグラミングが苦手なデザイナーとしてのおすすめポイント

a-blog cms を使うメリットのひとつに「PHPの知識がなくてもCMSの実装ができる」というのがあります。(書籍の帯にも書いてありますね。)たとえば、筆者自身は HTML と CSS ならなんとかなるけど、JavaScript や PHP には手が出ない「プログラミングがすごく苦手なWebデザイナー」です。しかし、(手前味噌ではありますが)そんな私でも a-blog cms なら一人でデザインから動的な実装までできます。そんなCMSを使った書籍なので、お仕事の幅を広げたいデザイナーさんやコーダーさんにはお勧めしたいです。

開発者向けドキュメントもありますが、一覧性が高い紙の本で学んだほうが向いているという方には書籍をおすすめします。Webサイトよりも書籍のほうが、初心者が体系立てて学ぶのには向いているんじゃないかと思います。ちなみに、5章「事例から学ぶカスタマイズ方法」はCMSのパワーユーザーさんによる書籍オリジナルコンテンツです。


各章の見どころと使い方


1〜6章の個人的な見どころと活用法をご紹介します。ちなみにCMSのプロフェッショナルである口田さんの見どころガイドも興味深いです。

1章(使うCMSを問わず)良いWebサイトってなんだろう?というお話

1章の前半は、a-blog cms は一旦置いておいて「お客さまの役に立つWebサイト」とは何かを最近のユーザーのWeb閲覧事情から読み解きます。後半は「コンテンツファースト」を実現するためのWeb制作のワークフローと「a-blog cms ならできるよ」というお話です。

1章については、Web制作のビギナーさんならCMS関係なくおすすめしたい内容です。

2章 a-blog cms をインストールするためのとっても丁寧なマニュアル

同梱インストールマニュアルではちょっと心配な方のために、親切丁寧なインストール解説を書いていただきました。レンタルサーバーは特定の1社を例に出していますが、ロリポップ(※PHPが動くプラン)などのお手軽なサービスでも同じ方法でインストールできます。

3章 制作者だけでなく運用者にも役立つ a-blog cms の取り扱い説明書

とあるユーザーさんのところでは、実際にWebサイトを運用するクライアントさん向けの操作マニュアルとしてもご活用いただいている(らしい)のが3章です。記事の書き方からテンプレートのカスタマイズ、メールフォームの作り方まで載っています。

後述のWebサービスでテスト環境を作り、3章を片手に実際に使っていただくのがおすすめです。

4章「コンテンツファースト」を実践するためのワークフロー

1章で紹介した「中身重視のWeb制作」の具体的な方法をご紹介しています。設計からデザイン、実装までやっているのは当たり前ですが、個人的なおすすめは「運用しやすい仕組みを作る」方法を紹介しているセクションがあること。せっかくCMSを導入するなら、運用者さんのリテラシーを問わず更新してほしい!ホームページを育ててほしい!という制作者さん向けの内容です。

5章 パワーユーザーの皆さんによるアイディアの見本集

5章はスペシャリストのユーザーさんによる実際の制作案件での活用事例です。a-blog cms をある程度使えるようになった中級者の方がメインターゲット。「a-blog cms でこんなこともできるんです!」というひと捻りした提案にお役立てください。

Webサイトを見ればひと目でわかる「ユーザーの行動をもとにコンテンツの表示切り替えをする」「14ヶ国語へのグローバル対応」の方法から、見映えからはわからない運用者向けの心遣いである「スムーズに管理画面にアクセスするボタン」「コンテンツ改善のサポート」の実装方法まで、開発スタッフもびっくりするアイディアが詰まっています。

6章 ちょっと難しいけれど、使いこなせば Webマーケティングに役立つ応用編

6章は応用編ですが、細やかな説明をこころがけたので初心者さんにも最新機能をお試しいただけるはずです(とはいえ根気が必要ですが……)。「バージョン管理」はちょっとした手間で記事の管理がラクになるおすすめの機能です。

本記事では、ノンプログラマー目線で書籍とCMSをご紹介していますが、プログラマーさんにはぜひ巻頭対談「開発者から見たa-blog cms これからのCMS」をご覧いただきたいです。(PDFで試し読みできます!)


この本を片手に、a-blog cmsを使ってみるには


読むだけではなかなか知識が定着しないので、実際に手で覚えるのがおすすめです。特に3章で紹介されている内容はぜひ実際にHTMLを編集して動かしてみてください。

a-blog cms 開発者向けドキュメントも合わせてご覧いただくと効果的です。(ソースのコピペもできます!)

Webサービスで30日間トライアルできます


Webサービス「ablogcms.io」は、a-blog cms を手軽に試していただくためのWebサービスです。メールアドレスを入力するだけで、30日間使えるテスト環境が用意されます。SFTP接続もできるので、HTMLとCSSのカスタマイズもできます。

インストール時にいくつかテーマ(テンプレート)を選べるんですが、ここでは「simple2016」をおすすめします。初心者さんが勉強しやすいように最低限の機能で作られた入門用テーマです。


レンタルサーバーやローカルへのインストールもOK


レンタルサーバーを自前で契約していたり、MAMPXAMMPなどのローカルでCMSを動かせるツールがあれば、手元に a-blog cms 環境を作れます。a-blog cms は有料CMSですが、トライアルなら無期限無料でできます。(※無課金だと検索エンジンに引っかからなかったり、アラートが出たりするので注意)


おまけ デザイナー目線の装丁すてきポイント


デザイナーの端くれ(兼、装丁ファン)として感動した装丁の素敵なところをご紹介します。

  • タイのイラストレーターNut Daoさんによるキュートな表紙イラスト!
  • 本文は特色使用の2色刷り!5章は5色刷り!(綺麗なオレンジがかった赤色です)
  • カバーは白色度トップクラスの高級アート紙・ハイマッキンレーアート!(タイトルロゴを見るとわかりやすい)
  • 帯は包装紙や封筒にも使われるキャピタルラップ!(上品で触り心地の良い質感)

最近のWeb系技術書は可愛い装丁のものが多いのですが、そのなかでもとても目を引く素敵な装丁にしていただきました。エディトリアルのデザイナーさんってすごい。



以上、a-blog cms 初の解説書籍のご紹介でした。本屋さんでお見かけの際は、ぜひお手にとってみてください!