私がconcrete5に魅了されたワケ | 女子デザイナーのうぇぶノート

こちらの記事はconcrete5 Japan Advent Calendar 2014の7日目の記事です。
6日目の@OleinDesignさんのMAMPを使ってconcrete5をローカル開発環境にインストールしてみるに引き続き、
「私がconcrete5に魅了されたワケ」と題して、コンクリの魅力をご紹介したいと思います。

以下文中では、concrete5のことを親しみを込めて「コンクリ」と呼ばせて頂きます。

出会いは今年2014年の2月

実はコンクリと出会ってからまだ1年も経ってません。

千葉コワーキングスペース201で開催された勉強会に参加したのがきっかけでした。
あの時は菱川さんと多生さんがはるばる千葉まで来てくれました。
私はというと、とりあえず、なんか勉強会があるから参加してみよ。くらいの軽い気持ちで。
コンクリの「コ」の字も知らず。
本が出たことも知らず・・・。
菱川さんに本を借りて参加したっけ。

約4時間くらい、ハンズオン形式での勉強会でした。

何ができるか、どうやって使うかの話を聞き、オリジナルテーマの作成方法をその場でやってみて、
これは画期的だ！と感動したのを覚えてます。

「受注予定のあのサイトは、これを使おう」
とすぐに思いました。

そして初めて作ったサイトが千葉の食と音楽のイベント「食楽ICHIBA」のサイトでした。

試行錯誤を繰り返し、コンクリの本と、フォーラムの質問と回答を頼りに
なんとか形にすることができました。
そして、サイトのWEB担当の方からも高評価で、レクチャーはおよそ1時間。その後は特に質問もなく内容が組み込まれてました。
きっと来年のイベントも担当の方が自分で内容を追加変更して行くのかなと思うと、やっぱりコンクリで作ってよかったなと思う。

と、脱線しましたが、実際にサイトを制作したことで私のI♡concrete5生活が始まりました。

色んな場所で色んな方がコンクリの良い所紹介してますが、
私も、私なりに、魅了されてしまったコンクリのステキポイントをいくつか紹介したいと思います。

サイトマップが目で見える

私の中ではこれが1番の魅力ポイントです。

私はWEB業界4年目ですが、会社勤めの時から中小企業のサイトを制作することが多く、
CMSを利用せずに静的HTMLでのサイト制作がほとんどでした。
営業から上がってくるのは、サイトマップとトップページのワイヤーフレーム。
これを元にデザインして、コーディングして、という制作の流れが染み付いてます。
今でも、やはり、サイトの構成を決めるためにサイトマップは作ってクライアントとすり合わせるし、見積りもそれに沿って作ってるし。
デザイン起こすにしたって、どんなページがあって、どこへのリンクが必要かとか分からないと作れない。
サイトマップがあってこそのWEB制作と思ってます。（言い過ぎ!?）

なので、コンクリを初めて使った時にサイトマップが管理画面から見えることにまず感動しました。
しかも、サイトマップの画面でページを新規作成していき、サイトの構成を作っていくというのが、
とっても分かりやすい仕組みだと思ったのです。

ついつい比較対象にWordPressを持って来てしまいますが、
実はWordPressで一番苦手な所がサイトの構成が目に見えにくいことなんですね。

目に見えない構造を想像するのはとても難しい作業です。

そして、これは常々言ってますが、WordPressは予期せぬページが沢山できる。

これは一体どこからどうやって生成されたページなのか…
もう、頭が壊れます。

でもコンクリの場合はサイトマップの画面で自分で作ったページがサイトを構成します。
作ったページしか出てきません。

信じられるのは目に見えるものだけ。

プラスもマイナスもない。
正直な御方。
ステキ過ぎます。

ナビ、パンくず、新着記事一覧の表示が簡単

他のCMSでも同じような機能があるとは思いますが、
静的HTMLで制作していた私にはこれも画期的でした。（次元の違う話みたいですが…）
リンクの貼り間違え、貼り忘れでモヤモヤ。新着記事を追加すると、トップページの一覧も修正して…と。

これもブロックと呼ばれる機能を設置するだけ。表示内容も編集画面から設定するだけ。

超簡単！

グローバルナビもフッターのテキストリンクも自由自在。
「オートナビ」ブロックという機能を使用します。
自動的に指定した構造のナビが完成します。もちろんリンク切れも無く、ページの追加忘れも無い。
だって、サイトマップにあれば出るし、なければ出ないから。

そしてパンくずだって「オートナビ」ブロックの標準機能で作れちゃって、（5.6系では）パンくず用のCSSも用意されてて勝手に横並びにきれいに表示してくれちゃう。最高。
ここでももちろんページ構成が間違われることなく、適切に表示される。

あぁ、これもサイトマップのおかげ。

ニュースの新着一覧や商品一覧だってなんのその。
「ページリスト」というブロックを使用します。
一覧表示の並び順の設定はもちろん、サムネイル、公開日時、説明文なんかも簡単表示。

なんせ気が利く方なの。
ステキすぎ。

実際のサイト表示を見たまま修正できる

これは大きな特徴の一つですが、やっぱりいいですよね。
新規でページを作る時はまぁ、別にどこから作ってもいいんですけど、これは修正の時に力を発揮すると思うんですよ。

ページの内容確認中に、誤字脱字に気づいて修正となった時、同じ画面で修正できるって、便利だし時短だし、まず、迷わない。

コンクリの場合は、そのページを開いたまま編集を押すと、そのページのまま編集モードになって、
修正する記事のブロックを編集して、保存したら、もう実際の画面が表示されてるのです。
ページを「移動する」という作業が必要ないのが素晴らしいです。

修正画面が別の場所にある時は、
まずその修正画面自体がどこにあるかを探さないといけなくて、
そして、その直したい文章がどこにあるかをまた探して、
直した後にまた実際の画面に戻って確認する。
ってな事になるわけですよね。
そこでまた間違いに気づいたらまた戻って…と、
どんだけあちこちのページに移動させるのかと。
移動してる間に忘れるわ。

なんていう暴言も、コンクリは言わせないのです。
煩わしい操作がないので、思ったことをすぐに実行できます。

思いたったが吉日。フットワークは軽いほうがいい。
そのくせ効率良くて効果的で、精神的にも健康。
素敵です。

ページのレイアウト・デザインをページ毎に選べる

企業のサイトをデザイン制作していると、結構ページ毎にレイアウトが異なったりすることがあります。

基本は2カラムなんだけど、商品一覧は画像並べてサイドバーなしで、とか。
リクルートはデザインを大きく変えて、とか。

そんな時、コンクリなら簡単にページのレイアウト・デザインを作れて、ページ毎にどのレイアウト・デザインを使うかを設定できます。ページに合わせてお着替えです。

制作時にどうするかというと、このページのレイアウト・デザインのことを「ページテンプレート」と呼びますが、サイト全体のテーマ作成時に、このページテンプレートを必要なレイアウト数だけ作成すればいいのです。
もし全ページ同じレイアウトなら、ページテンプレートは1つあれば良いし、2カラムとサイドバー無し、なら2つ。
リクルート用にデザイン変えるならもう一つ。
と、大枠のレイアウトだけを考慮して、ページテンプレートを作ればいいのです。

テンプレートベースで、ページのデザインが決まっていく。
なんか、、、dreamweaverのテンプレート機能みたい…
と思って取っ付きやすかったのです。スミマセン。すみません。

とにかく機能的でオシャレさん。
ステキ。

まとめ

というわけで、大変魅力的で素敵な方のご紹介でした。
まだまだあるんですが、キリがないのでこの辺で。。

しかし、こんなに褒めることになるとは私も予想してませんでしたが(笑)

でも、本当に、デザイナーの方には一度は使ってみて欲しいです。
コーディングってなんだっけ？CSS組むだけだっけ？
と思うかもしれません。
そして少しやり始めると、色々やりたくなってきて、コーディング好きの方はちょっとPHPも楽しく見えてくるかもしれません。
魅惑的なヤツです。

そしてそして、このコンクリの日本語版をサポートしているコンクリートファイブジャパンの皆様と、そこに携わっている皆様も本当に素敵な方ばかりです。
勉強会でも快く相談に乗ってくれますし、
フォーラムでも質問すると皆さん真摯に素早く回答してくださいます。
この場を借りてお礼申し上げます。
皆様いつもありがとうございます！

そして、私も少しずつアウトプットしていこうかと思ってます。
その第1歩がこの企画への参加でもありました。
デザイナーという立場から、同じ制作側の方のお役に立てるような記事や勉強会などでアウトプットしていけたらと思います。あー言っちゃった。

そして、12月8日のアドベントカレンダーは

満席のコンクリートファイブアドベントカレンダーはまだまだ続きます！
8日目はkmgr24さんによる『concrete5と「パッケージ」について』というテーマの記事です。
どんなお話が聞けるか楽しみです♪

以上、しまだがお送りしました。