• このエントリーをはてなブックマークに追加

そもそもどうやって整理整頓しておけば効率が上がるのかがわからない人が多い。これは部屋をどうやって整理整頓しておけば片付くようになるのかと似ています。模様替えするときも入れ替えを行うときも整理整頓が上手でなければ早く終わらないです。

整理整頓・まとめのコツ

よく似たもの、目的が近いもの、機能の同じものを同じ場所にかためたり、あるいは同じ名称や法則の近い名称などをつけてまとまり、グループ化する。

ファイルの名称

ファイルの名称にルールが決まっていないと、番号を自動で割り当てたり、その場限り、例えばコンピュータの画像であれば、computer.jpgとしてしまうと、どういったコンピュータの画像なのかということが不明。ボタンを表すならbtnをつけたり、写真ならimgやphotoなどを頭につけて目的や種類で識別できるように名称を工夫したほうがいい。

文字数は長過ぎないように注意する。30文字を超えるような場合は注意。ハイフンやアンダーバーなどを使って、識別が細分化されるようにする。

例)

  • btn
    • ただのボタン
  • btn-add
    • 追加ボタン
  • btn-add-address
    • 住所追加用のボタン

フォルダの名称

画像はimgやimagesなど。CSSはcssなどでフォルダを作成する。そして、さらにどこに何を入れたのかがわかるように、そのフォルダ内で目的ごとに分けるためのフォルダを作成する。

例)

  • images
    • common
      • btn-home.png
    • index
      • t-news.png
  • css
    • common.css
      • cssは画像と違い1ページにいくつも必要なことはあまりないためこのようにファイルをcssに直接配置する事が多い
    • index.css
    • company.css

ファイルの置き方

ファイルは、フォルダの目的に合わせて配置する。全く違う場所に違うものを設置しないように注意する。整理整頓は、ルールに沿ってそれを守って運用して初めて意味がある。

フォルダの置き方

目的ごとにルートのフォルダから分ける。または、ファイルの種類ごとにフォルダを分ける、そしてどこに何を使っているのかがわかるように分類化する。

デザインにおける整理整頓

ファイルやフォルダと同じく、ナビゲーションや本文、見出しなどの機能はそれぞれにまとめる。ナビゲーションに入れたほうがいいのに、他の場所に転々とリンクのボタンがばらばらに配置されていると使いづらい。似た機能やカテゴリーはまとめる。