コーダーが先に考えるべきはデザインより「運用」かもしれない話

こんにちは。かずです。

サイトの制作をしていると、当然かもしれませんが
ピクセルパーフェクトやアニメーション、パフォーマンスに意識が向きがちです。

もちろんどれも大事ですが、それよりも先に「サイトの運用」を考えるようにしています。
今回は、コーダー視点で感じる「運用を考えた実装」の話を書いてみます。

制作期間より公開してからが長い

サイト制作は当然ながら作って終わりではありません。
更新、修正、バナー差し替え、お知らせやブログの追加などなど・・・
公開後の運用期間のほうが圧倒的に長いです。
でも制作側は、どうしても「まず公開すること」に意識が寄ってしまいますよね。
ただ、「綺麗な実装」と「運用しやすい実装」は違います。

・デザイン通りのピクセルパーフェクト
・CSS設計も綺麗
・アニメーションも凝っている

これらが出来ていても管理画面で更新しづらかったり、少しテキストが変わるだけでレイアウトが崩れるなら、運用しづらくなってしまいます。
実務であれば、ピクセルパーフェクトより、ホームページの担当者が何も気にせず更新できるほうが重要な場面が多いのかなと思います。

実際によくある事例

例えばワードプレスを使ったホームページの場合です。

投稿タイトルが長いと崩れる

制作時は綺麗でも、実運用では長いタイトルが普通に入ります。
ちょっと長いタイトルが入るだけで崩れたら困っちゃいますね。

画像サイズがバラバラ

更新担当者は、毎回綺麗にトリミングしてくれるとは限りません。
そもそもトリミングがわからないなんてこともあります。

改行位置が想定と違う

ちょうどいい文字量は運用ではほぼ維持されません。
文字数に指定があったりすると更新が億劫になってしまったりもします。

つまり、デザイン通りに入る前提で作ると、あとで崩れる可能性大です。

コーダーができる運用対策

運用を考えると、コーダーができることも変わってきます。

・長文でも崩れない
・画像比率が違っても耐える
・要素数が増減しても成立する
・管理画面をシンプルにする
・更新箇所を明確にする

これらを意識するだけで、運用しやすくなります。
例えば、「aspect-ratio」を使って画像の比率を一律にしたり、「line-clamp」で行数制御したり、「Grid」を使って要素数変化に耐えやすくしたりなどなど。崩れにくい設計のほうが、運用面では価値があると思っています。

更新する人は制作者ではない

これは結構大事でかつ忘れがち？ですが、
実際に更新する人は、HTMLを知らないし、画像サイズも気にしないし、CSSも見ない人がほとんどです。
だからこそ、多少雑に更新しても壊れない設計が必要になります。
運用を考えると提案の質も変わります。それを意識すると、

・このUIは更新大変そう
・この構成は崩れやすそう
・ここはテンプレート化したほうが良さそう

など、実装前の見え方も変わりますよね。
結果的に、ただ作る人ではなく、運用まで考えて提案できる人でありたいと思っています。

まとめ

ホームページは、公開した瞬間から運用することになります。
なのでコーダーも、デザインの再現だけや実装技術だけでなく、「どう運用されるか」まで考えながら作ることが、大事だと考えます。
長い目で見れば綺麗に作るより、壊れず運用できるのほうが価値が高い場面も増えていると思います。

それでは！