PR

CSSとサイトデザインの私的復習2

サイトのデザインをどのようにするかというのは毎度の悩み。サイト構成は簡単にできる。くわえて負荷やサーバーを考慮したサイト構成も。しかし問題はデザインだ。

スポンサードリンク

将来を見据えたデザイン

ある研究によればデザインに拘るユーザは思いのほか少なく、コンテンツが優良であれば気にしないという統計も報告されている。また、サーバーの 負荷を減らすためにページ全体を読みこませるのではなく、非同期通信などと組み合わせて素早く更新させる技術などは、双方にメリットがある。

しかし、実際利用していて味気ないデザインとそこそこのデザインのものがあれば、後者を利用したくなるもの。エンジニア共通かもしれないが、デ ザインが苦手と言われるし、おそらく実際そうだ。デザインよりも機能を追求するからかもしれない。筆者もデザイン系のサイトは使いにくくて嫌いだ。また、 各システムがデフォルトで唯一持っているデザインを統一する能力がないなどが理由だ。

そもそも、デザインをどのように作成し、保管し、使うのかを改めて考え、調べてみた。そこで得られた回答の多くは、まずHTML で基本デザインを作成(システム非依存)し、それを各システムの要求するフォーマットとして流しこむことが良いとされるものが多かった。

デザインが固定される事による統一感は利用者にとっても信頼感やユーザビリティに優れる。また、場合によっては同一のCSS や.js の読み込みを行わせることで不要な通信を減らすこともできるかもしれない。

命名規則

結果的にはおそらく最も多く利用することになるだろうWordPress のオリジナルテーマに突入していくわけだが、すでにあるものを子テーマなどとして改造していくことも考えられる。

WordPress のテーマには特に決まったCSS 命名ルールは無いのだろうか。配布されている幾つかのCSS をK2E Editor をCSS 対応させるために読み込んだが、バラバラだったように思う。

ちなみに、命名するだけでリッチな表現にしてくれるというフレームワークらしいものは利用価値がありそうだ。(これはむしろCakePHP などに入れたい)

また、幾つか調べていくとjQuery など初期状態で有効になっているものを上手く利用せよという意見や、子テーマを使えという意見もあり、とても参考になる。

WordPress のテーマ作成については以下が参考になる:
  • WordPress自作テーマ作成(1) | Maruc Blog Project
  • WordPressのオリジナルテーマを作ってみよう

また、HTML にid などを指定するだけで基本デザインを作成しておき、以下に読み込ませることで簡単にCSS を作成する手助けをしてもらうこともできる:

  • HTML文からスタイルシートのひな形を抽出する「PrimeCSS」 | Blog.IKUBON.com
すでにあるデザインをベースに作成するなら色を抜き出してくれるツールが便利:

すでにあるHTML デザインをほとんどそのまま読み込めるらしいCMSもある:

コメント