サイト全体の画像を、一度に見直した作業

• 一覧で見ると、揃っていない箇所が分かる
• 重いものから直すと、効果が出やすい
• 役割の無い画像は、消した

記事が増えてきたので、画像をまとめて見直した。手順と結果を書く。

まず数えた

何枚あるか分からなかったので、先に数えた。

• 合計の枚数
• 使われている枚数
• どこからも参照されていない枚数

3つ目が予想より多かった。差し替えた古い画像が残っていた。

一覧で並べて見る

次に、使っている画像を一覧で見た。

• 縮小して、並べて表示する
• 単体では気づかない差が見える
• 浮いているものが分かる

3つ目が目的だ。並べないと、揃っているかどうか判断できない。

浮いていた画像

実際に浮いていたのは、この種類だった。

• 作った時期が違うもの
• 色の方向が違うもの
• 比率が違うもの

3つ目が一番目立つ。比率が違うと、並べたときに高さが揃わない。

容量を測った

重さも確認した。

• ファイルごとの大きさを並べる
• 大きい順に見る
• 上位の数枚が、全体の多くを占めていた

3つ目が分かれば対処は簡単だ。上位数枚を直すだけで、大半が改善する。

重かった原因

大きいファイルの原因は、だいたい同じだった。

• 表示する幅より、何倍も大きい
• 透過が不要なのに、透過できる形式
• 画面を写したものを、縮めずに置いていた

3つ目が多い。画面を写したものは、そのままだと大きい。

直した順番

作業は、効果の大きい順にやった。

• 重いものを縮める
• 比率が違うものを揃える
• 参照されていないものを消す

3つ目は最後にした。消すのは戻せないので、他が終わってからやる。

消す前の確認

消す作業は、慎重にやった。

• 参照されていないことを、2回確認する
• 控えを取ってから消す
• 件数が多くても、まとめて消さない

3つ目を守った。条件を1つ間違えると、使っている画像まで消える。

役割を書き出す

残す画像について、役割を確認した。

• 何を伝えるために置いているか、1行で書く
• 書けないものは、消す候補にする
• 書けたものは、残す

2つ目で、装飾のために置いた画像が見つかった。

揃える仕組みに寄せる

手で作った画像を、仕組みで作る形に寄せた。

• 同じ比率、同じ余白で作る
• 色は分野ごとに決める
• 以後は、仕組みから出す

3つ目を決めると、今後は揃った状態が維持される。

見直して分かったこと

作業を通して分かったことがある。

• 画像は、増えると管理できなくなる
• 最初にルールを決めておけば、見直しは要らなかった
• ルールが無いと、1枚ずつ判断することになる

2つ目が教訓だ。後からまとめて直すのは、手間が大きい。

決めたルール

今後のために、ルールを決めた。

• 比率は1つに固定する
• 幅の上限を決める
• 役割が書けない画像は、置かない
• 差し替えたら、古いものを消す

4つ目が今回の原因だった。差し替えただけだと、古い画像が残り続ける。

かかった時間

作業時間も記録した。

• 数えて現状を把握するまで — 短時間
• 重いものを直す — 半日
• 消す作業 — 慎重にやって、さらに半日

3つ目に時間がかかった。戻せない作業は、確認の時間が占める。

確認に使った見方

作業中の確認方法も決めていた。

• 一覧ページで、並べた状態を見る
• スマホの幅で、切れ方を見る
• 通信を絞った状態で、読み込みを見る

3つ目で、重い画像の影響が分かる。速い回線では、差が見えない。

今後の手間を減らす

同じ作業を繰り返さないための対策も入れた。

• 画像を置く場所を、1か所にまとめる
• 名前の付け方を決める
• 差し替えたら、古いものをその場で消す

2つ目が効く。名前で用途が分かると、参照の確認が速い。

まとめ

• まず数えて、現状を把握する
• 一覧で並べないと、揃っているか判断できない
• 重いものは上位数枚を直すだけで、大半が改善する
• 消す作業は最後に、控えを取ってから
• 比率と幅の上限を決めておけば、見直しは要らなかった