CSSテクニックコミュのCSSデザインツールの果たすべき役割とは。

『CSSEZ』というWYSIWYG型のデザイン作成ツールを運営しています。添付した画像のようなデザインを、マウス操作で5分くらいで作成できるようなサイトです。
http://jp.cssez.com/

個人で運営しているため、なかなか他人からフィードバックを貰う機会がなくて悩んでいます。一人で考えても、なかなか適当な答えが見つかりません。そこで思い切ってこのコミュニティで助言を求めようと思いました。

CSSについて造詣の深い皆様、もしよろしければアドバイスを頂けないでしょうか。

今、悩んでいるのは、CSSEZのようなデザインツールはどのようなソースを出力するべきかという点です。

1.　<div>を多用してでもクロスブラウザを考慮するべきか、それとも<div>は最小限に抑えてソースの簡潔さを保つべきか。
2.　IE5用のCSSハック記述もソースに入れるべきか否か。

この二点です。出力するCSSと(X)HTMLはW3Cのvalidatorでvalidになるように考慮しています。また、できるだけユーザーが失望することがないように、吐き出すソースの質の向上について最大限努力しています。

ただ、「<div>を多用するか否か」など、思惑が衝突する部分でどちらへ舵を取るべきなのか決めかねています。

CSSコミュニティの中で、CSSデザインツールの果たす役割は、どのようなポジションが適切なのでしょうか。ハックも多用したデザインとしての完成系を提供するのが良いのか、それともベースデザインとして再利用・再編集しやすいような単純明快なソースを提供するのが良いのか。

もし、ご意見やアドバイス等ございましたら、ぜひお聞かせください。長文失礼致しました。

コメント(15)

最初
全て
最新の40件

[1] mixiユーザー 08月24日 22:12

> 1.　<div>を多用してでもクロスブラウザを考慮するべきか、
> 　　それとも<div>は最小限に抑えてソースの簡潔さを保つべきか。
> 2.　IE5用のCSSハック記述もソースに入れるべきか否か。
ユーザーがその都度オプションとして選べるようにする。

[3] mixiユーザー 08月25日 00:03

Meatianさん、飴☄ฺさん、貴重なご意見ありがとうございます。
そうですね。特に2番については、選択式にすることで解決しそうです。

>蛇足になりますが、1番も2番も開発前の要件定義の時点で考慮すべき問題ではないのですかね。。。

現在は、1番については簡潔さを優先し、2番についてはハックを自動で組み込むことはしていません。ただ、システム的には柔軟に対応可能な部分なので、今の状態で良いのかそれともクロスブラウザテクニックまで組み込んだほうが良いのかで悩んでいます。

大変参考になります。ありがとうございます。

[4] mixiユーザー 08月25日 00:46

ソースについては、いわば制作者の好み・またはそのサイトの利用目的、用途によって異なってきます。

利用目的とはビジュアル優先なのか、SEOに特化するべきか、はたまた両立を望むのか・・・

これはクライアントの要望によるので、それを受け止める制作者が柔軟に制作を行える「ツール」が必要です。

どうもクボケーさんが悩んでいらっしゃるのは制作者の立場の考えです。

クケボーさんは制作者の「手」や「足」となるものを作るのではないですか？
柔軟な「手」や「足」を作るべきかと思います。

ようは全部出来るものを作る事です★
「欲張りな！」と思うかもしれませんが、この世の中で中途半端では普及しません。

なんだか自分勝手に書いてしまってすいません（＾＾;）
でも、みんなが望むのはこういうものです♪

[5] mixiユーザー 08月25日 01:40

DTD選択
CSS level1のみ使用、level2まで使用、level3まで使用・・・選択
とかあったらいいと思う。

でも個人的に一番ほしいと思うのはユーザーが書いた(X)HTMLを解析して、
それにスタイルを適用させるもの。
全体的なレイアウトはエレメントをD&Dで配置していく感じ。

まぁ、実際作るとなると労力かかりすぎで、割に合わない。

製作者向けであるならば、
自分が製作者になって、実際に使う。
それで自分の作ったWebアプリに不満が出てきたら、それは大抵誰が使っても不満が出る。

まずは「使ってもらえるもの」よりも
"自分で"「使えるもの」を目指したほうがいい気がします。

まぁターゲット層次第ですけどね。

気になったこと、動作が遅いです。
それと、メニューが左下ってのは使いにくいなーと
マウスオーバーじゃなくてキーボードで開ければいいんだけど。。
会員登録はしてないので、全貌は分かりませんが。

[6] mixiユーザー 08月25日 01:59

知識不要とうたっている以上、
メインターゲットはCSSデザインにあまり詳しくない人だと思います。

そうなると、重要なのは以下の点だと思います。
・クロスブラウザ（IE6以上、Firefox2、Opera9）対応
・SEO対策
・ビジュアルの美しさ

他の方も指摘されていますが、要件定義が甘いです。

個人で使うのを前提とするのか、商用利用も含めるかでも実装すべき機能は変わると思います。

もしメインターゲットが私の冒頭の発言とおりでしたら、指摘事項が多すぎます。メインターゲットの認識があっていなければ、指摘しても無駄ですので、回答を聞いてからにします。

実際にレイアウト後、アカウント作成して保存するまでの時間が長いです。プログレスバーにして、進行状況がわかるようにした方がいいかと思います。LOADINGと表示されて、輪がぐるぐる回るのは不安を感じました。

保存されるまでの時間の目安ってどれぐらいでしょうか？
実は今しがたアカウント作成→保存としてから3分以上LOADING画面が出続けています。(WindowsXPsp2+IE7）
auth_create.phpでスクリプトエラーになっているのと関係あるのでしょうか？

[7] mixiユーザー 08月25日 11:12

参考になるご指摘ばかりで、とてもありがたく思っています。

最初に私が悩んでいたのは「システム側がCSSテクニックやCSSハックも含めてソースを生成するべきかどうか」という問いでしたが、それよりもっと根本的なサービスとしての案件定義の部分に問題があるようですね。

すろさんがおっしゃった、

>まずは「使ってもらえるもの」よりも
>"自分で"「使えるもの」を目指したほうがいい気がします。

というのは、実は現在の私の開発に対する最大のモチベーションになっています。一先ず自分が使いたいものを作れば、全てが無駄になる心配がないからです。これはKojiさんがおっしゃった、「サービスの高機能化」に近い流れだと思います。

ただ、サービスとしてどの層をメインターゲットにするかということを考えると、FUMINGさんがおっしゃった「CSSデザインにあまり詳しくない人」が最適であると認識しています。そうなると、機能が多すぎるのは逆に使い勝手の悪いサービスになる可能性もあります。

そこに少なからず乖離が生まれるわけです。そこを曖昧にしている点が皆様のおっしゃる案件定義の甘さという部分につながるのではないかと私なりに考えました。

まだ迷っていますが、私としては「CSSデザインにあまり詳しくない人」にターゲットを絞るのが適切かなと少し考えています。

>もしメインターゲットが私の冒頭の発言とおりでしたら、指摘事項が多すぎます。

FUMINGさん、もしよろしければそのいくつかでも結構ですのでお聞かせいただけないでしょうか。

それと、いくつか挙がった機能面、UI面での不具合や使い勝手の悪さについては、改善点がはっきりしていますので、きちんと改善したいと思います。ご指摘ありがとうございます。

[8] mixiユーザー 08月26日 23:06

メインターゲットについて

なかなか参考になるトビですね。細かい話しは
他の方にお任せして「メインターゲットのみに」
絞り込んでお話しいたします。

システムを使用するメインターゲットについては
対象にしている層より「少し高いレベル」に
設定しておくのがいいのかな？と考えます。

「ＣＳＳデザインにあまり詳しくない人」

という人が使ってみて上手くいったら
「もう少しレベルを上げよう」という欲求に対して
応えてあげられるところまで作っておくのが
長い目で「使える」ツールになるような気がしています。

私もとあるＣＭＳシステム設計の際に
同じような目にあったことがありますので、参考までに。

『CSSEZ』を使ってみて、サクッとできて書き出しもできる
あとから自分でカスタマイズもできるので、今後もっと
ブラッシュアップしたら使えるいいシステムになると
期待しています。

その後の経過をまたお知らせくだされば幸いです。

[9] mixiユーザー 08月27日 10:56

指摘して頂きたいとのことですので、指摘させて頂きます。

UI面での指摘は受けていると思いますので、プルダウンの文字が途中で切れているとかは指摘済みだと思います。

１．ターゲットにあった言葉を適切に選べていない。
・ページの背景を指定する場所で、画像の繰り返しで「X軸」「Y軸」って言われても、どういう意味なんだろうって思います。学生さんにはなじみがあるかもしれませんが、社会人になって、数学からしばらく離れた人間にはなじみのない言葉です。「横方向」「縦方向」という感じで言い換えた方がいいと思います。
・warapper（大枠）とありますが、これについてももう少し説明がいるかと思います。どの部分を囲う部分なのかの説明が欲しいです。

２．フォント周りの指定について
・選択肢に固有のフォント名指定をしないを加えて頂きたいです。
・line-heightが%固定は、いろいろ不具合が出やすいので、決めうちなら、倍（要するに単位なし）で。

３．ヒットする判定が小さいのか、特定の機能を選ぶつもりでクリックしたのが、編集画面を閉じているというのは勘弁してください。これは指摘を受けていると思われますが・・・

４．このシステムが動作環境を示してください。
これは、サービスイン前の検証をされたかにもつながりますが、保存に失敗するブラウザがある以上、要再検証です。今、会社のマシンでも確認しましたが、WindowsXPsp2+IE7では保存できません。
★クボゲー★さんがどのような環境で検証したのかもあわせてお聞かせください。

[10] mixiユーザー 08月29日 19:02

返事が遅くなり、申し訳ありません。

>subkyotaさん
ありがとうございます。「対象にしている層より少し高いレベルに設定」ですか。大変参考になります。意識したいと思います。

>FUMINGさん
1番「言葉の選択」については、おっしゃるとおりですね。使用する言葉・用語について再検討したいと思います。

2番「フォント周り」について、line-heightは単位も選択可能にしたほうが良いかもしれませんね。その辺りのシステムとしての統一感をもう少し徹底して出すようにします。

3番については、不具合ですね・・・。私の技術的な限界とUI面での使いにくさが原因でしょう。解決策を考えて見ます。

4番について。検証した環境はWindowsXP+Firefox2.0, IE6.0, Safari3.0.2, Opera9.21です。ただ、ご指摘いただいた「保存に失敗する不具合」は、実は環境に関わらず時々発生している問題です。

個人で運営しているサービスのため、コストを抑えるために画像保存サーバーを外部サービスに頼っています。現在使用しているのは、ImageShack http://imageshack.us/です。こちらが落ちていたり、つながりにくい時にエラーが発生するようです。

エラー処理をもう少しきちんとしなければいけませんね。ご指摘ありがとうございます。

突っ込み所が多すぎてご迷惑をおかけしたかもしれません。いただいたご指摘は、本当に的確なものばかりで、大変参考になります。本当にありがとうございます。

[11] mixiユーザー 08月31日 11:17

ご指摘させていただける知識もないのでアレですけど
いつもこのトピックを拝見させてもらってました。
とてもすばらしいツールだと思います。
大変かと思いますが是非頑張って作り上げてください！！

[12] mixiユーザー 08月31日 11:38

根本的なことですが、

「ＣＳＳデザインにあまり詳しくない人」

というのは、おそらくWEBコーディング自体をあまり詳しくない人だと思うので、ターゲットユーザーはライトユーザーからテーブルレイアウトが分かるユーザーまで、ネットユーザーのほとんどのユーザーが対象となると思います。

そうなると、ターゲットは低く設定しなくてはなりませんので、もっとわかりやすい操作方法や言葉の選定を模索しなくてはならないのではないでしょうか。

[13] mixiユーザー 09月02日 17:22

>hiroさん

励まし言葉、ありがとうございます。そう言って頂けると、開発に対するモチベーションもすごく高まります。ここで頂いたアドバイスを参考にして、今後も改善していきたいと思います。

>kiminyさん

やはり操作方法と言葉の選定が、このサービスのキモのようですね。今後は、まず言葉使いを見直して、できるだけ平易な言葉と入れ替えようと思います。

後は、ドラッグ&ドロップでのレイアウト変更など、もっと直感的な操作を模索していきたいです。

貴重なアドバイスをくださり、ありがとうございます。

[15] mixiユーザー 01月29日 12:58

初めまして。
ツールを使ってみましたが、このままでもスタートページの大まかなデザインには充分使えそうな感じですね！
ただ、上記の方々のご意見の通り、サイトアップには手作業にて修正が必要で素人がこのツールでCSSデザインを完成させるには、もっと機能強化が必要だと思います。

僭越ながら、サイト運営について意見を言わせて頂きますと、
・オリジナルサイト（ブログ以外）のデザインもできる点を強調した方が良いと思います。（良く読むと書いてありますが、書き出すまで心配でした。）
・個人的には、『Ninjaブログ』や『Blogger』、『Zen-Cart』等にも対応して頂けるとありがたいです。（特に『Zen-Cart』は困っている方が多いです。）
・寄付金が充分に集まっていればいいのですが、現在クリエイティブコモンズ（表示）になっている『作成したデザインのライセンス』を利用者に有償で譲渡すなど、柔軟に対応されてはいかがでしょうか？支払う側からすると、寄付金よりその方が払いやすいですよ。

以上、運営方針も含めて今後のご活躍に期待しています。

ログインすると、みんなのコメントがもっと見れるよ