cmsで制作するサイトのデザインを考えるための4つのポイント2019年12月13日こんにちは。普段はあまり表に出ないアップルップルの中の人のデザイナーです。cmsで実装するWebサイトのデザインを担当しています。cmsのことコードの書き方とか細かいことはいいからざっくり分かるように教えて!新しいCMSを導入するのにあたってハードルになるのは学習コストかなと思います。エンジニアはそのCMSのことを勉強して実装方法を習得しますが、実際に実装するわけではないデザイナーも、そのCMSのことをある程度学習しなくては、デザインができません。デザイナー向けのドキュメントなんてありませんし、エンジニアと同じドキュメントを見て学習するには、ややこしい用語やらなんやらでてきて時間がかかりすぎるし、どこまでそのCMSのことを勉強するべきなのか悩むところではないかなと思います。cmsのこの部分だけ把握しておけばデザインができるポイント」を解説したいと思います。cmsのテンプレートもその考え方が適応されます。詳細ページ(だいたい記事というかコンテンツが置かれるページ)この3パターンを基準にテンプレートファイルが置かれるため、この3パターンを基準にデザインを作成すればOKです。cmsには「ブログ」の他に「カテゴリー」も存在します。この「ブログ」と「カテゴリー」は、実装上ではできることが異なるため、使い分けされますが、デザインをする上ではこの2つは特に区別しなくて大丈夫です。実装する上でブログを使ったりカテゴリーを使ったりするので、「ブログ」と言われても「カテゴリー」と言われても、「コンテンツの区分けなんだな」ぐらいに思っておきましょう。ブログ内にはブログ・カテゴリーが作成できます。カテゴリー内にブログを作成することはできません。設置することができます。ブログやカテゴリーに、3種類のテンプレートが適用できます。サイトの階層構造としては、こんな形でデザインを作っていけます。cmsの特徴とも言えるブロック型のエントリー更新システム。「ユニットグループ」は「ユニット」をグループ化し、例えば特定のユニット群を2カラムにレイアウトしたり、背景色をつけたりするなどができる機能です。こちらについては必要があればスタイルを用意する程度でOKです。ここについてはエンドユーザーの方が利用する部分であり、難しい操作はないので、どのような動作になるのかは、ablogcms.ioなどで実際に触ってもらうのが早いかなとは思いますが、デザインを作るべき項目をリストアップしておきます。ユニットのデザインのパターン例エントリーユニットテキストユニット見出し(大/中/小)本文(フォントサイズと行間の設定)リスト(ul/ol)引用(blockquote)画像ユニット・地図ユニット全幅(1/1)、半幅(1/2)、(1/3)...その他のユニットテーブルユニット動画ユニット(必要であれば。デザインを用意する必要はあまりないかもです。)ボタンユニット(必要があれば。ボタンのスタイルを用意します。)またこの他にも、コンテンツによって必要なユニットの種類があれば、追加することもあります。弊社では、コンテンツの内容に合わせて以下のパターンをよく追加しています。cmsでサイトを動的にするためのパーツのようなものです。cmsは基本的にhtmlで実装されるため、HTMLのテーマファイルに、この「モジュール」と呼ばれるパーツのソースコードを設置して、動的サイトとして動作させます。「モジュール」には様々な種類があり、一般的なWebサイトで使いたくなるような機能のものはだいたい揃っています。動的な部分はだいたい「モジュール」が設置されていると考えておけばOKです。デザインする上で知っておきたい存在のモジュールこの他にもたくさんありますが、まずはこの3つを覚えておけば大丈夫です。この他に使用するモジュールがあるようであれば、実装を担当する方やディレクターの方に詳細を聞いてください。Entry_Body(エントリー本文)モジュール上記でも散々話題に上がっていたエントリーです。実はモジュールですので任意の場所に設置することができます。entryのテンプレートファイルに設置されます。Entry_Summary(サマリー)モジュールエントリーの一覧を表示するためのモジュール。indexのテンプレートに設置されます。XDをお使いの方はリピートグリッドを使うとこのサマリーモジュールのデザインをさっと作れます。Topicpath(トピックパス)モジュール現在地を表示するためのモジュール。こちらもモジュールが用意されているため、動的にできます。1ページずつ書く必要はありません。固定の入力枠を任意で作れる/カスタムフィールドカスタムフィールドは特定の箇所に、固定の入力枠を用意できます。用途としては、例えばパターンが決まった情報がある場合に、カスタムフィールドを作成してそこに入力することで、一覧ページで意図した情報に意図したスタイルを当てることができます。入力できる内容は、フォームで設定できるものならなんでも。テキストはもちろん、チェックボックス、ラジオボタン、プルダウン、画像のアップロードも可能です。カスタムフィールドが設置可能な場所は、ブログ、カテゴリー、エントリー、モジュール、ユーザーです。cmsでは、インストールした時点で同梱されているテンプレートファイルがあり、基本的にはそのファイルをカスタマイズしていき、サイト制作を行います。XDファイルを配布していますので、よりスムーズにデザインを行えるかなと思います。よろしければ是非ご活用ください。まとめ少し長くなってしまいましたが、デザインをする上では、この辺りを把握しておけば基本的には大丈夫なはずです。ここに書いていないことが制作の際に登場したら、チームのエンジニアさんやディレクターさんに確認お願いします。端折って書いてしまっている部分もあり、分かりづらい部分もあるかと思います。ablogcms.ioを利用するなどして少し触ったりすることもオススメです。制作の際、チームのエンジニアさんやディレクターさんと情報共有する際の一助になれば幸いです。追伸:文字ばかりで分かりづらいですので、後日図などを追加するかもしれません。期待しない程度にお待ちください。