このエントリーは 「a-blog cms Advent Calendar 2023」 21日目の記事です。
本年は、a-blog cms awards 2023 のデザイン賞をいただきました。
デザイン賞をいただいた「越後長野温泉 嵐渓荘」様のサイト制作時のデータを使って、
弊社で行っているユニットのデザインなどについてご紹介できればと思います。
デザインのお話の前に
サイトの制作を行うワークフローの中で、
ユニットのデザインを作るタイミングは、どのタイミングで行いますか？
弊社ではちょうど真ん中くらいのタイミングで行います。
大まかに制作開始してからの流れを書くと、以下のようになります。
・a-blog cmsインストール
・基本ユニットインストール
・原稿やサイトコンテンツ作成、原稿の入れ込み
・トップページと基本ユニットのデザイン作成
・下層ページとオリジナルユニットのデザイン作成、トップページコーディング
・その他のコーディング、フォームなど
・検証～納品
サイトによってワークフローが変わりますが、大枠としては上記の流れで行います。
メリットは、デザイン制作に入る段階で掲載内容がほぼ全てある状態なので、制作途中でのサイトコンテンツ変更によるデザイン変更があまりないことです。
デザイナーとしても、内容があった方がデザインがしやすいですし、前後のコンテンツの関係がわかるので項目間の装飾などがやりやすかったりします。
コンテンツファーストのサイト制作が行えて、デザイナーにも優しいワークフローになっているのではないかと思います。
ユニットの考え方について
弊社では大きく分けて以下のように3つのユニットセットとして設定しています。
「基本ユニット」
a-blog cms内に基本的に入っている「テキスト」「テーブル」「メディア」などのユニットと、
弊社で基本としているユニットをセットにしたものです。
サイトに必要になるユニットを集めたものになります。
「オプションユニット」
オプションと言っていますが、アーカイブのようなユニット集です。
過去に作成したユニットを汎用性のあるものにしたものや、特定のジャンルのサイトには必要になるものなど、基本ユニットには入れないが、すでに構築してあるユニットたちです。
「オリジナルユニット」
そのサイトでのみ使用するユニットで、サイト制作時に新しく作るユニットたちです。
「基本ユニット」はどのサイトにも使用するので、ワークフローの初めに入れておき、サイトの構成によって「オプションユニット」から追加や、「オリジナルユニット」として新しく作成するようにしています。
最終的にはそのサイト専用のユニット集が出来上がります。
なお、基本ユニットをインポートする時に「ユニット確認用」というすべてのユニットを使ったエントリーを作成します。
※エントリーインポートの機能を使用し、基本ユニットが全て入っているものをインポートすることで時短ができます。
制作時は社内の表示確認などに使用し、納品時にはお客様にも共有し、お客様が更新される際も、どのユニットを選択するとどんな表示になるのか確認できるようにしています。
ユニットデザインについて
それでは、簡単にですがデザインのお話です。
弊社ではトップページのデザインを制作するタイミングで、基本ユニットのデザインも制作します。
この段階で、下層ページのヘッダー部分や、共通パーツについても一緒に制作します。
ユニットデザインとしては、はじめにa-blog cmsの基本ユニットとして入っている、「テキスト」「テーブル」「メディア」といったユニットのデザインを制作します。
以下の画像はテキストユニットのデザイン（一部）になります。
「テキスト」ユニットでは「本文」をはじめ、「見出し」としてh2～h5タグが挿入された場合や、「リスト」としてul・liタグが挿入された場合などを想定して、
フォントサイズや行間、装飾といったところをデザインします。
※装飾のパターンが必要になった場合や他のパターンが必要になった場合などはオリジナルユニット制作時に行います。
続いて、弊社で基本ユニットとしている各ユニットのデザインを制作します。
以下の画像は「画像＋テキスト」というユニットのデザイン（一部）になります。
画像とテキストを左右配置できるユニットです。
画像は「左右どちらに配置するか」「サイズ感をどのくらいの割合にするか」「静止画かスライドショーにするか」を選択できるようになっているので、各パターンの表示になった際のイメージを作成します。
また、ユニットの「グループ」機能を使って、背景を変更できるようにしましたので、
そのデザインパターンもいくつか作成します。
以下のグループが選択された場合は左上と右下に泡のような装飾が付くようになります。
このような流れで、各ユニットのデザインを制作していき、「基本ユニット」集を作ります。
その後、社内やお客様とミーティングを重ね、「オプションユニット」からユニットを追加したり、「オリジナルユニット」を制作し、そのクライアント専用のユニット集を作り上げます。
a-blog cmsのカスタムユニットでオリジナルのユニットを作ることができますので、ユニットごとのデザインはもちろんグループとの組み合わせなど、発想しだいで色々な表現が可能になりますね。
共通で使用できるユニット集を作っておくと、デザイン面においても構築面においても効率化を行えるかなと思います。
チカラを入れてデザインを作るコンセプトページとのメリハリもつくのではないかと思います。
皆さまも独自のユニット集などお持ちかと思いますが、何かの参考になれば幸いです。
