Blogブログ

2014.06.25

web制作

コーディングガイドラインのお話

はじめまして濟藤です。
最近ハマっているものはファミマのもちもちくるみパンです。
もちもちくるみパンをもぐもぐすることによって夜からの作業効率が10%増するんでおすすめです。

アンジップにはまだ入って日が浅い私でございますが 会社でもちもちくるみパン(ステマ?)を食べる以外になにをしているかというと各種デザイン、コーディングなどやってます。
もともとはDTP職を長くしておりましてWEB職はtableコーディングそろそろやめてフルCSSってやつにきりかえよかーみたいな時からです。(ざっくり)

あんまりいい紹介文が浮かばないので本題に(唐突)いきます・・

<!——-ここから本題——–>

先日アンジップではホームページ制作のお仕事の増加もあり、一度社内での作業均一化・コーディング業務の効率化を目的としたミーティングを制作に関わるメンバーで行いました。
SO!アンジップのコーディングガイドラインを作るのです。

「なにガイドラインとかめんどくさそー」って思ってやしませんか?
社内の中でコーディングガイドラインがあることによってどういう利点があるかを 簡単にあげますと…

  • 一つの仕事を同時に複数人が作業する場合に困惑しなくていい
  • 担当者不在時でも作業がしやすい
  • 作業途中で悩んでたことがガイドラインがあることによってなくなる(作業時間の短縮)

などです。

ガイドラインを作るにあたって私が思ったこと…それは、あんまりルールをガチガチにしてしまうと逆に非効率になってしまうかもという点です。
作業時間短縮に集中しすぎてめっちゃ雑い仕事になってもいけませんしね。
ただ、やはり仕事というのは時間とお金の関係性を意識しないとグダグダになるので、きちんと効率よく作業ができるようにガイドラインを作れたらなあと思いました。

兎にも角にも「こうやると作業が早くなるよ」とか「ここはこうすると迷わないよ」的な話を集めて、良案をみんなのルールにすればいいやんと思ったわけです。
かといって一から定義するのは大変なので、ある程度ベースとなるガイドラインは用意しましてみんなでいざミーティン╭( ・ㅂ・)و ̑̑ グッ !

_________
↑みんな真剣だあ

項目はというと様々あるのですが、 今回は「画像ファイル名の付け方にルールをつけたよ!」のお話をブログで書くことにします。 ファイル名って結構どんな名前をつけるか迷ったりしませんか? 英語に翻訳してみたり、日本語ローマ字の人もいますしね。

例えばicon画像の見た目でicon_green.gifとかicon_red.gifとかつけちゃって修正で「青色にして」って言われたらめんどくさいやつの代表格ですね(・∀・)icon_red.gifなのに中身青色とかややこしい〜

ここもガイドライン化することでファイル管理も楽になるし、後々画像差し替えなどの更新などがあったときもとっても見つけやすくなります。

ほんの一部ご紹介しますね。
例えば画像ファイルの名前を・・
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
例)トップページ(index.html)にあるボタンの名前
btn_index01.png
例)トップページ(index.html)にある背景画像の名前
bg_index01.png
例)会社概要ページ(company.html)にあるサムネイル画像の名前
thum_company01.png

など、識別名(表記は統一)から始まり、どこのページで使われてるかを書いて連番を振る。
増えたら連番数字を変える。
ファイル名の付け方に悩むことがなくなるので時短。
<img src=””>を一回参照(Dwの場合)すれば後はコピペで番号変えるだけで画像が呼び出せます。
ソート機能で名前でソートすると識別名ごとに並ぶので画像差し替えする際も探しやすいなどのメリットがあります。

たとえ「このアイコン青色にして!」といわれても icon_index01.gifとかの名前になっていればとってもらくちんですよね。
ファイル名とかhtml、cssを”icon_blue”とかに書き変えることもないです。

かなり短く書きましたがこんな感じで他の項目も決めていきました。
とはいえいろんな仕事をするたびにどんどん違う意見が出てくるものなので、アンジップでは定期的にミーティングを開いてガイドライン更新をしていこうと思っています。

長くやればやるほどコーディングって人それぞれのクセが出ます。
技術的な面は各自調べて勉強したり教えてもらったりしてあげていくしかありません。
ただでさえデザインによって毎回イレギュラーなことが起こります。
なのでガイドラインとして設定できるところというのはファイル名をつけるなどの「絶対毎回よくやること」部分なんですよね。

ガイドラインを設定することで全員が快適に作業ができますし 品質を一定ラインに均一化できるので、みなさんもぜひ導入してみてはいかがでしょうか (1人での作業でも後で自分が見た時にわかりやすいと思います。)

とはいえ・・アンジップもまだ始めたばかりなので ちゃんと運用できるかは、、、
みんなの意識にかかってきますよー!!

<!——-ここまで——–>

そんな第三期目のアンジップはガイドラインやチェックシートの見直しなどを行い、より高品質でお客様に喜こんで頂けるお仕事をするために日々邁進中です!
ホームページ制作・WEBシステム・各種印刷物デザイン等、なんでもお気軽にご相談ください!
>> 制作実績ページへ

【本日のBGM】
私は音楽を聞くのが大好きなのでブログの後に一曲づつ最近お気に入りの動画をはっつけていこうかとおもいます。
聞き方のオススメは【最後まで読んだのにもかかわらず聞きながら再度ブログを読み返す】です。


↑Robert Glasper Experiment – Calls ft. Jill Scott
8月のビルボード大阪での来日ライブ行ってきます◎

この記事を書いた人

blogger1

blogger1エンジニア

blogger1と申します。

最近書いた記事

Contactアンジップへのお問い合わせ

お問い合わせ・お見積りは無料です。
ホームページ制作・システム制作からブランディング提案まで全てお任せください。

お問い合わせはこちら