保育AI事業に注力しているユニファでは、今後AI関連の記事を多数公開していく予定です。 それに先立ち、これから増えていく記事を見やすく・更新しやすく届けられるよう、新たに記事ページ用のテンプレートを設計しました。 今回は、その設計のポイントについてご紹介します。
どんな記事でも破綻しないように
記事の内容って、毎回ちょっとずつ違いますよね。 写真が多い回もあれば、逆にテキスト中心の回もある。
そういったコンテンツのばらつきに耐えられるように、
文字量の目安
画像の使い方
見出しの階層ルール
といった「デザインのレギュレーション」をある程度定めています。 ルールがあることで、それに従って記事を作成してもらえばどの記事も整って見えるし、運用がラクになります。
スマホで読まれる前提で設計した“読みやすさ”
このページは、スマホでの閲覧が中心になることを前提に設計しています。 だからこそ、一番大切にしたのは「スマホで読んでもストレスがないこと」。
具体的には、
- 行間や文字サイズを最適化し、長文でも目が疲れにくいように
- セクション間には適度な余白を設けて、窮屈にならないように
- 1画面に詰め込みすぎず、読み進めやすいリズムを意識した構成に
スマホの小さな画面でも、無理なく読み続けられる設計を丁寧に整えています。
コーディングでは「更新のしやすさ」を最優先
今回は「いずれCMS化する」ことも見据えていたので、HTMLやCSSを毎回いじらずに済むように、再利用できるパーツを意識して設計しました。
- セクションごとにコンポーネントっぽく設計
- 命名は BEM（Block Element Modifier） を採用
BEMを使うことで、 「どこが親要素で、どこが子要素か」「どこを変えればよいか」が分かりやすくなり、 複数人で触る場合でも迷いが少なくなります。
補足：BEMってなに？
BEM（Block Element Modifier）は、CSSの命名ルールのひとつです。 構造的にスタイルを管理できるようになることで、
- 再利用しやすい
- 可読性が高い
- 修正時に迷わない
というメリットがあります。 チーム開発や長期運用にも向いていて、今回のテンプレート設計にはぴったりでした。
この記事テンプレートで実現したかったこと
ざっくり言えば、このテンプレートは 「たくさん記事が増えても、毎回ラクに・見やすく更新できるようにするため」の土台づくりです。
特別なことをしたわけではなく、「どんな記事でも破綻しないように」 「読む人にとってストレスがないように」 という、ベーシックだけど大事な部分を丁寧に整えた、という感じです。
おわりに
たくさんの記事が公開されていくなかで、一つひとつの作業を軽く、でも質は保つために、テンプレートの力はとても大きいと感じています。
運用しやすく、見ていて気持ちのいい記事ページを作って保育AIの良さをたくさんの人に知っていただきたいです！
保育AI Information lookmee.jp
ユニファでは一緒に働く仲間を募集しています！採用サイトをぜひチェックしてみてください！ jobs.unifa-e.com
