つたえるために意味を考え、名前をつける

Photo via VisualHunt

ギルドワークスの佐々木です。

最近、ランディングページをRuby on Railsに組み込む仕事をよく行います。HTML/CSSで組んだマークアップを、haml( http://haml.info/ )やerbといった別の形式に変換して取り込みます。非常に簡単な作業なのですが、奥が深いところがあります。

奥が深いと言っても、組み込む際の形式変換作業自体は、変換ツール( https://github.com/haml/html2haml )もあるため、それほど手数はかかりません。実際に大変なのは、一度ビジュアルができあがってからの「 修正 」にあるように思っています。では、なぜ修正に手数がかかってしまうのか、少し考えてみます。

なぜ修正が大変になってしまうのか

ダミーテキストを入れてしまう

Photo credit: bburky via Visualhunt.com / CC BY

まず、「 ダミーテキスト 」をつけることが原因の一つだと考えています。

「ここにタイトルが入ります」「これはダミーテキストですこれはダミーテキストですこれはダミーテキストです」といったものを目にしたことはありませんか。実際に、 Googleで「これはダミーテキストです」と検索 すると、多数ヒットします。英語圏でも「Lorem ipsum」といった言葉で、ダミーテキストの文化がありますね。

こういったダミーテキストは、 とりあえず文字列を書いておき、レイアウトやカラーリングを先に決めてしまうため に存在していると考えられます。でも、考えてみると変ではないでしょうか。webページは、 つたえたいこと があって制作しているのに、つたえるために一番有効である「 言葉 」がまだ決まっていないのです。

もちろん、顧客や他のメンバーの都合で、ライティングが進まないなどもあるかもしれません。しかし、先にダミーテキストを使っていくら綺麗なレイアウト・カラーリングを仕上げても、後からあがってきた言葉を当てはめてみて「何か違う…」となってしまいがちです。それは、つたえる内容を込める言葉が決まっていないので、当然の結果で、修正の工数がかさみがちになります。むしろ、 デザイナーだからこそ提案できるライティング もあるように思います。

HTMLで安易なクラス名をつけてしまう

Photo via VisualHunt.com

HTML/CSSを実装する中で、img01、section01といった名前に意味のないクラスをつけてしまうことがあります。

しかし、実際に出来上がったビジュアルを見ながら要素や順番を改善していく中で、03が欠番になったり、05と02が逆転したり…といったことがよく起こります。結果、出来上がったHTML/CSSのソース内で奇妙な順番付けになってしまうケースが多くあります。

すべてのセクションや画像には、 つたえる内容にふさわしい名前 があるはずです。もちろん、それが最初から分からないことは多々あると思います。しかし、実装したものを見せてフィードバックを得る中で変更していくことは、よりよく つたえる ために必要な正しいもの探しになると私は考えます。

フィードバックを受けてよりよくしていくために

上記のようなことを踏まえて、ダミーテキストを書いたり、安易な連番クラス名をつけたりせず、 つたえるべきことに沿った名前をつける 。それが、結果的に修正コストを小さく保てると考えます。修正のコストが小さければ、フィードバックを受け取って、細かく改善でき、よりよくつたえることができるのではないでしょうか。