前回のストーリーで、Payload CMS(管理画面から、サイトの文章や画像を自分で更新できる仕組み)を使ったサイトで、公開した途端に画像が全部消えた話を書きました。その後、同じサイトに新しいランディングページ(1枚ものの紹介ページ)を足しました。なお、これは架空のブランドを使った検証用のデモです。
今回は、画像が消えなかった
校舎の写真、ロゴ、キャッチコピー、申込ボタン。管理画面からアップロードするものは、前回痛い目を見たものと同じ種類です。身構えていましたが、一度も消えませんでした。前回直した土台は、応急処置ではなく、ちゃんと土台として効いていました。
部品があるなら、裏側にもあっていい
画面を作るとき、ボタンやカードは「部品」として切り出して使い回します。それなら、裏側の管理画面の項目にも同じ考え方があっていいはずだと思いました。会社のサイトは、トップ、ビジョン、会社情報、実績、読み物と、業種が違っても驚くほど似た構成です。数えられる範囲なら、一つずつ「型」にして並べればいい。そこで、型を並べる「棚」も作りました。
1週間で、型が増えた
9月17日にLPの型、21日に棚の型、22日にお知らせの型と、約1週間で、管理画面の項目が3つ増えました。棚とお知らせの型は、先に作ってあったブログの型を土台にしたので、設計に悩む時間はほとんどありませんでした。型を一つ持つと、次の型を作る時間が縮む。部品の使い回しと同じことが、裏側でも起きていました。
小さな失敗
最初は小さかったロゴを、見やすくしようと大きくしたのが始まりでした。幅を決めて大きくしたため、縦横の比率が違う画像に差し替えた途端、文字が画面からはみ出しました。高さを決める形に直したところ、その後は何度差し替えても崩れませんでした。
並べたのに、読めない
お知らせの型を棚の2枚目として登録し、説明も丁寧に書きました。ところが、自分でカードを押すと、書いた説明ではなく、いきなり実際のページに飛びます。説明を読む場所が、作られていなかったのです。1枚目のときは、見せたいものがそのページ自体だったので気づきませんでした。並べることと、読めるようにすることは、別の仕事でした。
説明を読める専用のページを作り、実際のサイトは「見に行くボタン」として本文に添える形にしました。今は、カードを押すと、何を作ったか、どう考えたかが読めます。
型は、増やすほど次が速くなる。でも、読まれて初めて意味がある
管理画面から更新できるサイトは、「更新する人」のためのものに見えます。でも、更新した中身を読むのは、サイトを見に来た人です。作る側は両方の立場に立たないと、並べたのに読めない状態を作ってしまいます。型を増やして速くなるのは作る側だけの話ではなく、読む人に届けるところまで含めて、初めて意味があると思います。
型が揃ってきたので、次は、その型を使ってページを作る側に回ります。次回は、デザインの元データ(Figma)から画面の部品を作り、型を組み合わせて、複数のランディングページを素早く作っていく話を書きます。
Qiitaの記事のURL
https://qiita.com/kuros-works/items/7653a1cebfd88e455567
コーポレートサイトのURL
https://www.kuros-works.com/
