ダッシュボードテンプレート「Tidemark」を作ってみた｜Web制作とCSS、そしてAI
1. Tidemarkを作ってみた
Web制作に使える、KPI・売上分析ダッシュボードのデザインテンプレートを作ってみました。
名前は「Tidemark（タイドマーク）」。
Tidemarkは、英語で「満潮線・潮の跡」という意味があります。
岸に残る水位の跡。そこから、「基準となる線」というイメージを重ねて、この名前を付けました。
今回Tidemarkを作るにあたっては、デザインだけでなく、「あとから編集しやすいテンプレートにするには、どうしたらいいだろう」ということも考えました。
その背景には、これまでのWeb制作で感じてきたことがあります。
レスポンシブデザインが当たり前になり、CSSフレームワークを使うことが自分のWeb制作に欠かせなくなったこと。
その一方で、CSSの書き方について少しずつ感じるようになった違和感。
そして、そこにAIが加わったことで、「これからのWeb制作は、もう少し違う作り方ができるんじゃないか」と思うようになったこと。
Tidemarkは、そんなことを考えながら作ってみたテンプレートです。
2. Web制作とCSSフレームワーク
私がWeb制作に携わるようになった2000年ごろ、当時は今のようにスマートフォンでWebサイトを見ることはなく、PCの画面を前提にサイトを作るのが一般的でした。
HTMLを書いて、CSSでレイアウトを整える。ブラウザによって表示が違ったり、思ったようにレイアウトが組めなかったり。今とは違う大変さもありましたが、基本的には、HTMLで構造を作り、CSSで見た目を整えながら、ひとつひとつコードを書いていました。
その後、スマートフォンが普及するようになり、Web制作の環境は大きく変わっていきました。
PCだけでなく、スマートフォンやタブレットなど、さまざまな画面サイズに対応する必要が出てきました。レスポンシブデザインが当たり前になり、Webサイトを作るときに考えることも増えていきました。
その頃、広く使われるようになったのがCSSフレームワークです。
私自身も、レスポンシブ対応を効率よく行うために、CSSフレームワークを使うようになりました。グリッドシステムやブレークポイントなど、あらかじめ用意された仕組みを使うことで、複数の画面サイズに対応しやすくなります。ボタンやフォームなどの基本的なUIも用意されているので、一からすべてのCSSを書く必要もありません。
CSSフレームワークを使うことで、Web制作はずいぶん楽になりました。
いつの間にか、私にとってCSSフレームワークは、Web制作に欠かせないものになっていました。
そんな中で、CSSの書き方にもさまざまな考え方が出てきました。
そのひとつが、Tailwind CSSのようなユーティリティファーストの考え方です。HTMLに複数のクラスを記述し、それらを組み合わせてレイアウトや見た目を作っていきます。
たとえば、
<div class="flex items-center justify-between px-4 py-3 text-sm font-medium">のような書き方です。
これはとても合理的な方法だと思います。
必要なスタイルをクラスとして組み合わせていくことで、CSSファイルに手を加えることなく、HTMLの中で見た目を組み立てていくことができます。
ただ、私はこうしたコードを見ているうちに、少しずつモヤモヤするようになりました。
「CSSって、HTMLとは分けて考えるものじゃなかったっけ？」
HTMLには、その要素が何なのか、どんな役割を持っているのかを書く。
そして、見た目はCSSで整える。私にとっては、そんな考え方が自然でした。
たとえば、
<div class="user-info">と書いてあれば、class名から「ここはユーザー情報を表示する部分なんだな」と読み取ることができます。
一方で、
<div class="flex items-center justify-between px-4 py-3 text-sm font-medium">と書かれていると、そこに何が入る要素なのかよりも、「どう見せるか」という情報が先に目に入ります。
もちろん、どちらが正しいという話ではありません。
Tailwind CSSにも、それによって得られるメリットがあります。
ただ、自分が慣れ親しんできたHTMLとCSSの関係とは、少し違う方向に進んでいるように感じていました。
3. 人にもAIにも編集しやすいテンプレート
そして今、AIの登場で、Web制作の世界もまた変わりつつあるように感じています。
AIを活用しながら、コードを書いたり、デザインを考えたりすることが、少しずつ身近になってきました。
そんな中で、
「AIと一緒にWeb制作をするなら、CSSフレームワークを使わなくても作れるんじゃないか」
と思うようになりました。
CSSフレームワークを使わずに作ってみる。
できるだけシンプルな構成にする。
READMEを用意しておく。
そうすることで、「人にもAIにも編集しやすいテンプレート」にできるのではないか。
それが、今回Tidemarkを作るときに目指したことです。
4. Tidemarkで目指したこと
Tidemarkを作るときは、デザインだけでなく、コードの構成や書き方についても、できるだけシンプルにすることを意識しました。
まず、クラス名には、その要素の役割や意味がわかる名前を付けるようにしました。
スタイルシートでは、色や余白など、全体で使う値をCSS変数にまとめ、あとから変更しやすいようにしています。
また、コードを必要以上に共通化しないことも意識しました。
共通化すればコードはすっきりしますが、あとから個別に変更したいときには、かえってわかりにくくなることもあります。少し重複していても、ファイルを開いたときに構造がわかり、必要なところを直接編集できる。そのシンプルさを優先しました。
ビルドツールなどは使わず、HTML / CSS / JavaScriptだけで構成し、HTMLファイルをブラウザで直接開いて確認できるようにしています。
READMEには、ファイル構成や使い方に加えて、コードの考え方や編集するときのポイントもまとめました。
人にもAIにも編集しやすいテンプレートであるように。
Tidemarkは、そんなことを考えながら作ってみたテンプレートです。
おわりに
Tidemarkのデモサイトは、こちらからご覧いただけます。
Tidemarkのすべてのファイルをダウンロードしたい方はこちら。
ご利用いただいた感想やフィードバックをお寄せいただけるとうれしいです。
