デザイナーのうえつです。
仕事内容はというとデザインだけをしているわけではありません。
ホームページは作ったら終わりではないので、更新作業も行なっております。
更新作業とは、すでにできあがったホームページに新しいページを追加したり内容を変更したり、不具合が出れば修正したりなどさまざまです。
過去にデザイナーは、コーディングもできた方がいいというお話をしましたが簡単な更新などはここで活かされます。
例えばバナーを入れたい、修正したいなどの依頼が来た場合デザインの部分だけ作ってコーダーに渡すより、自分で修正したほうが断然早いです。
また簡単なテキスト修正や画像を複数並べたいなどの依頼などに対応する場合、どこにどう記述すれば実現するのか、どこのどのファイルを触ればよいのか、コーディングの知識は必要になってきます。
コーディングはデザインとはまったく別物と思われがちですが、コーディングもユーザーがみるページを作成するわけなので、デザインの一部なのです。
マージン（余白）のとり方や文字のサイズ、行間などバランスを取ることは重要なデザインになります。
ざっくりですが、以下の3点は私が更新の際に特に気をつけているポイントです。
- バックアップを取ること
- スクリーンショット（キャプチャ）をとること
- 検証ツールでシミュレーションする
バックアップを取ること
当然ですが触る前にバックアップをとることです。
これはテキスト一文字修正する時でも必ずとります。
なぜならたった一文字修正しただけかもしれませんが、間違ってどこか消してしまったとか、違うものをコピペしてしまったなどのヒューマンエラーは起こり得るからです。
またバックアップを取るメリットは、元に戻せるだけではありません。
ファイルには大切な情報がたくさんつまっています。
そのなかのひとつが年月日時分秒です。
「この情報によって、修正前はいつ更新された情報なのかがわかります。
このファイルは5年前から更新されていないな」とか、「一週間前に更新されているな」というのがわかると、例えばなにかページに問題があった場合、前者なら5年前からおかしかったが気がついていなかったという情報がわかります。
また後者なら一週間前からおかしかったなら、一週間前誰がどういう修正を加えたことでそうなったかが割り出せたりして解決が早いんです。
スクリーンショット（キャプチャ）をとること
つぎに、修正前のページのキャプチャをとります。
わたしはChromeにサイトのページが上から下まで撮れるアドオンを入れていますのでボタン一つで撮っています。
これは自分を守るためでもあります（笑）
例えば自分が修正を加えた後、どこか他の部分で問題があった場合、それが自分の修正が原因なのかはたまた元々そうだったのか目視的にすぐわかるからです。
バックアップと通ずるものはあるのですが、目視的にわかるのは良点だと思います。
修正箇所以外のところで、もし崩れていた場合それが自分の修正が影響で壊れたのか、もともとだったのか知ることで差分を確認する余計な工数がかからずに済みます。
検証ツールでシミュレーションする
chromeの検証ツールはサイトのソースを疑似的に直接書き込んだり、サーバーに上げることなくスタイルをつけたりして、その結果をリアルタイムに見ることができます。
なので自分がこんなふうに組み立てたいという最終形を目指して調整が可能です。
とはいえ、実際に反映しているわけではもちろんないので、リロードしたらシミュレーションした部分は消えてしまいます。
せっかく色々試して、確認したのに・・最初からやりなおし・・とならないようにしたいですよね。
シミュレーションした部分と、する前と、実際ファイルに記述してサーバーにあげてリロードしたもの、とそれぞれ別タブで開いていると比較できるので便利です。
もし、ファイルを上げてリロードして検証ツールで組み立てたものと違っていたら記述漏れがあるということなので、リロードする前の状態で記述を確認すれば、また1から検証しなくていいので時短になります。
デザインする時間を確保したいなら、早く、正確に更新作業を終わらせることがポイントです。
コーディングが不得意でもchromeの検証ツールを使いこなせば、思ったように表現でき、どんどん勘所もよくなるので楽しくなってきますよね。
