Webサイトのデザイン時での注意点について

質問

サイトデザインについて、Webデザインにお詳しい方、是非ご意見をくだださい。

もしあなたがサイトをデザイニングする際、どういった点に注意して制作されますか？
Webデザイン特有の注意点とはなんでしょうか？

普段デザインする時に、注意している点、気にしなければならない点、気をつけている点・・・などなど、Webデザイン特有の注意点を教えてください。

制作順序が云々、費用が云々は関係なく、あくまで純粋なデザイン時の話しです。

複数でもかまいませんので、具体的なご意見をください。

＜詳細・経緯＞
現在、サイト関連のデザインを外注させて頂いた場合の、最低限のチェックシートを作っております。

ブランドカラーは打ち出せているか、競合との差別化はできているか、コンセプトと合っているか、文字や文章は自然な可読性があるか・・・etc

などの最低限チェックしておきたい内容のシートです。

基本的なデザインの判断基準は、仕事柄Web以外のデザインに多数関わっているので既にあるのですが、Webデザイン特有の判断基準がわからず、Webデザイン専用のチェックシート作りで悩んでおります。

何を最低限注意しなければいけないのか、サッパリわからないのです。

そこで知人のWeb以外を専門としている複数のデザイナー様に相談させて頂いた所、Web以外は比較的類似している点が多いけど、様々種類の制約がものすごく多いWebだけは特殊だから、やはり数をたくさんこなして粋も甘いもわかっているその道の専門家に聞いたほうが良いよ、とアドバイスされました。

ですが私にはWebデザイナー様の知人がおらず、まさか発注予定デザイナー様達に聞くわけにもいかず、困り果て、ここで相談させて頂くに至りました。

これを拝見されたお詳しい方、私はWebデザインの素人で申し訳ございませんが、ぜひご教授お願いします。

よろしくお願いいたします。

回答No.1

zozokegatatu · ベストアンサー

Webの場合は　視覚が重要なデザインになります。本のように文面を多くかいても
長い間モニターを直視しませんからね。　コピー　詳しくはこちらと目で見て直感的に理解できるように
します。

むかしはアホみたいにフラッシュ使いまくったりしてたところが受けましたが
いまは、邪魔にならないデザインが受ける傾向です。

私のトコでは、ベースカラーは３から5色のカラーで限定します。
文字もデザインの一つで1色　つまり白黒使ったら　あと２～３色で全てを補います。
無論写真を5色化するようなことはしませんが、メインとなる写真のカラーをベースとして
チグハグしないカラーで作っていきます。
単色でも濃淡の違いで　うっとおしくない色彩に出来ます。

たくさんボタンを散らさず　内容は単数ページ程度にします。
詳しく書いたら書いた出、こんどはパンフレットも営業も要らないページになってしまったら
お客さんに質問をさせる余地がないですからね。

お礼

ご回答ありがとうございます。
お礼が遅くなってしまい、申し訳ございません。

＞Webの場合は　視覚が重要なデザインになります。
＞本のように文面を多くかいても
＞長い間モニターを直視しませんからね。　
＞コピー　詳しくはこちらと目で見て直感的に理解できる
＞ようにします。

そうなんですね！！
コピーを上手くつかい、直感的な理解をさせる。それは私が作っているサイトの対象ユーザーにはすごくマッチしてるかもしれません。

【直感的で誰にでも理解できるコピー】

大変勉強になりました！

＞私のトコでは、ベースカラーは３から5色のカラーで限定します。
＞文字もデザインの一つで1色　つまり白黒使ったら　
＞あと２～３色で全てを補います。

なるほど！！！
確かに、カラフルすぎるデザインは画面を通すとすごく見ずらいです。
【文字色も含め使用カラーは３～５色以内】
大変参考になりました！ありがとうございます！

＞たくさんボタンを散らさず
＞内容は単数ページ程度にします。
＞詳しく書いたら書いた出、こんどはパンフレットも
＞営業も要らないページになってしまったら
＞お客さんに質問をさせる余地がない

申し訳ありません。これが上手く理解できなかったのですが、ようは、お客様との接点を得るために詳しすぎない内容にした方が良い、という事でしょうか？
もしそうなら、これは要検討すべき非常に深い事ですね。

接点さえあれば高確率で落とせる営業人員がいるのであれば、確かにユーザー側からどんな小さな事でも問い合わせでも得る努力をしたほうが良いですもんね。
む、難しい・・・。

ちなみに、無駄な質問や問い合わせをさせない・させたくない、という場合も様々な理由からそれなりにあると思うのですが、そう言った場合はどうしたら良いのでしょうか？
ガッツリ詳しく記載したほうがよいのでしょうか？

無知で申し訳ありません。

回答No.9

神崎 渉瑠（@taloo）

広義のWebデザイン、とくにHTMLコーディングの話です。
質問文の狭義のデザイン（カラーリングやレイアウト）ではありません。

>No.7お礼

たとえば、対応ブラウザをIE8以上で料金は何円、と見積もりを出したとして。
依頼主がIE6以上を要求している場合、私では依頼に応えられない、という事になります。

http://okwave.jp/qa/q7816539.html
こんな風に、特定のブラウザでだけ、表示が他のブラウザと大きく異なる事があります。
そういうのも含めて検証する、さしずめ手数料をいただいています。

たとえばこんなやりとりがありました。

私「Firefox等の最新版などに対応します。」
依頼主「それで全部ですか？」
私「有名な物は全部ですが、無名も含めれば違います」
依頼主「全部にお願いします」
私「全部とはどのくらいですか？」
依頼主「私にはよくわかりません。あなたが知っているブラウザ全部でお願いします」

仲介業者（制作会社）からこういう内容で依頼されたときは、あんた私に依頼する気ないだろ、とは思いましたけどね。

---------------
HTMLの品質の話の例。

それぞれのHTMLがあるとします。
CSSにより、表示は同じです。

どちらのHTMLの品質が高いでしょうか。

(1)
<ul>
<li><a><img src="diary.png" alt="日記"></a></li>
<li><a><img src="aboutus.png" alt="自己紹介"></a></li>
</ul>

<ul>
<li><a>日記</a></li>
<li><a>自己紹介</a></li>
</ul>

(2)
<header><h1>タイトル</h1></header>
<nav>ナビゲーション</nav>
<section>コンテンツ</section>
<footer>著作権表記等</footer>

<header><h1>タイトル</h1></header>
<section>コンテンツ</section>
<nav>ナビゲーション</nav>
<footer>著作権表記等</footer>

(3)
<header>
<h1>社名</h1>
</header>

<heaer>
<figure><img src="logo.png"></figure>
<h1>社名</h1>
</header>

<heaer>
<h1>社名</h1>
<figure><img src="logo.png"></figure>
</header>

(3)はロゴマークの表示方法が、<img>かCSSのbackground-imageかの違いです。
印刷すると<img>は印刷されますが、CSSのほうは印刷されません。（プリンタ設定で背景を消すようにしている場合。）
まあ、ロゴマーク（商標）の扱いをどう考えているか（消えても良いのかどうか、消すべきかどうか）はその人次第だとは思いますが。

-------------
(2)の具体例です。
デザインに合わせてHTMLを作った方が簡単にできる事もあります。
対応ブラウザを増やすならなおさらです。

たとえば、

<nav>ナビ</nav>
<section>コンテンツ</section>

この２つの要素を横並び（ウインドウの左端）にする場合、
「ナビ　コンテンツ」
の順番で並べたいならnav{float:left}で完成します。

「コンテンツ　ナビ」
という並びにするなら
単にnav{float:right}としただけでは「ナビ」がウインドウの右端に行ってしまうためNGです。
ならば、

<section>コンテンツ</section>
<nav>ナビ</nav>

と書き直して、section{float:left}とした方が簡単に完成します。

こういう「デザインのためのHTMLを作らなない」というものも、それなりの技術が必要だと、私は思っています。
もっとも、CSSのコピーペーストでできるんですけどね。

ちなみにデザインのためのHTMLという考え方、手法は、つまりはテーブルレイアウトです。

<table>
<tr><td>ナビ</td><td>コンテンツ</td></tr>
</table>

<table>
<tr><td>コンテンツ</td><td>ナビ</td></tr>
</table>

ナビゲーションを右にするか、左にするかというのは、よくあるパターンですが、
ページの上にするか下にするか、というのもままあります。

お礼

重ね重ね丁寧にご回答頂き、ありがとうございます。
お礼が遅くなってしまい申し訳ございません。

＞仲介業者（制作会社）からこういう内容で
＞依頼されたときは、
＞あんた私に依頼する気ないだろ、
＞とは思いましたけどね。

ひ、ひどいですね・・・。
そんなひどい仲介業者もいるとは思いませんでした。
その仲介業者のお客様、騙されてないといいですね・・・。

＞HTMLの品質の話の例。

～

＞ナビゲーションを右にするか、左にするかというのは、
＞よくあるパターンですが、
＞ページの上にするか下にするか、というのもままあります。

大変具体的でわかりやすいご説明、ありがとうございました。
すごくイメージがわきました。

本当にとても参考になりました、ありがとうございます！

回答No.8

ORUKA1951

No.2です。
　乱文をお読みいただいたようでありがとうございます。
　私は、HTMLにはプレゼンテーションに関わる記述は一切しないようにしています。これをすると、
・将来、まったく異なるデザインにして欲しいといわれたときにHTMLまで書き直さなければならなくなること。
・HTMLの修正が難しくなること
・スタイルシートが訳かわからなくなる。

　などの理由からです。将来にわたってメンテナンスができるか否かに関わってきますからね。
　Webサイトのデザインは、印刷物やカタログのデザインと同じ要素を持っていますが、それとは、まったく異なる部分があります。

　たとえば、下記のようなHTMLの場合、本人は無論、誰でも文書構造はわかりますし、もちろん検索エンジンも正確に内容を理解してくれるでしょう。
　それでいて、スタイルシートは最初にデザインを決めるよりは、はるかにデザインの自由度はとても高く、レスポンシブデザインでユーザーエージェントごとにデザインをまったく変えることも可能になります。
・ナビゲーションをページトップまたはページ下に移動(absolute)、ないし固定(fixed)
・プルダウンにするかしないか
・ナビゲーションの背景に画像を置き、そのうえにクリッカブルマップ上にリンクを置く
・マウスオーバーで画像を切り替える。
・ヘッダーを上部に置き、本文は３カラムないし２カラムで表示する。
・小さなディスプレイには本文のみ表示す。
のような全体の配置も自由自在に操れます。
　また
・ユーザーがフォントサイズを変えたらデザインが崩れた
・携帯電話で見ると訳がわからない
・印刷したら画像ばかり
なんてこともないです。
div.header{height:200px;margin-bottom:300px;}
div.footer div.nav{position.absolute;top:200px;left:0;width:100%;}
div.footer div.nav ol,div.footer div.nav ol li{display:block;list-style:none;margin:0;padding:0;}
div.footer div.nav ol{width:70%;margin:0 auto;postion:relative;}
などと書かれているだけで、HTMLを見なくても何をしようとしているか理解できるでしょう。
　これがWebデザインなのです。

★よく誤解されるのですが、どのように「表示されるかを優先するのでHTMLは正しくなくても良い」と思っている人が多いのですが、これはまったく変な話で、HTMLを正確にマークアップしたほうが、はるかに簡単でHTMLもCSSもわかり易くシンプルになり、はるかにデザインの質も高くなるのです。

★ウェブデザイン技能検定の過去問 ( http://www.webdesign.gr.jp/kentei/publication.html )を見ても、下記の様にマークアップされているはずです。
　この過去問を見れば、Webデザインで何が重要かがわかるでしょう。

以下、私が良く行うマークアップの例・・
[例]・・HTML4.01
<body id="TOP">
　<div class="header">
　　<h1>見出し</h1>
　</div>
　<div class="section">
　　<h2>本文見出し</h2>
　　<div class="section">
　　　<h3>見出し</h3>
　　　・・・【中略】・・・
　　　<div class="aside">
　　　　・・・コラム・・・
　　　</div>
　　</div>
　　<div class="nav" id="contentTable">
　　・・・この本文の目次・・・
　　</div>
　　<div class="aside" id="News">
　　・・・新着情報・・・
　　</div>
　</div>
　<div class="footer">
　　<div class="nav">
　　　<ol>
　　　　<li><a href=""></a></li>
　　　　<li><a href=""></a>
　　　　　<ol>
　　　　　　<li><a href=""></a></li>
　　　　　　<li><a href=""></a></li>
　　　　　</ol>
　　　　</li>
　　　・・・【中略】・・・
　　　</ol>
　　</div>
　　・・・文書情報・・・
　　<address></address>
　</div>
</body>

[例] HTML5
<body id="TOP">
　<header>
　　<h1>見出し</h1>
　</header>
　<section>
　　<h2>本文見出し</h2>
　　<section>
　　　<h3>見出し</h3>
　　　・・・【中略】・・・
　　　<aside>
　　　　・・・コラム・・・
　　　</aside>
　　</section>
　　<nav id="contentTable">
　　・・・この本文の目次・・・
　　</nav>
　　<aside id="News">
　　・・・新着情報・・・
　　</aside>
　</section>
　　<nav>
　　　<ol>
　　　　<li><a href=""></a></li>
　　　　<li><a href=""></a>
　　　　　<ol>
　　　　　　<li><a href=""></a></li>
　　　　　　<li><a href=""></a></li>
　　　　　</ol>
　　　　</li>
　　　・・・【中略】・・・
　　　</ol>
　　</nav>
　<footer>
　　・・・文書情報・・・
　　<address></address>
　</footer>
</body>

お礼

ご回答ありがとうございます。
お礼が遅くなってしまい、申し訳ございません。

＞HTMLにはプレゼンテーションに関わる記述は
＞一切しないようにしています。

～＞将来にわたってメンテナンスができるか否かに
＞関わってきますからね。

大変勉強になりました。
確かに、デザインを変えたい場合にHTMLにまでデザインを意識したコーディングをしていては、ちょっと変えるというよりは作り替えに近い作業になってしまいますよね。

＞よく誤解されるのですが、
＞どのように「表示されるかを優先するので
＞HTMLは正しくなくても良い」と思っている人が多いのですが、
＞これはまったく変な話で、
＞HTMLを正確にマークアップしたほうが、
＞はるかに簡単でHTMLもCSSもわかり易くシンプルになり、
＞はるかにデザインの質も高くなるのです。

なるほど！
とても参考になりました。今、CSSをいかにシンプルにさせるかを急務としているのですが、なるほど、HTMLも一緒に見なおしたほうがよさそうですね！
大変貴重なご助言、ありがとうございます。

＞★ウェブデザイン技能検定の過去問
＞を見ても、下記の様にマークアップされているはずです。
＞この過去問を見れば、
＞Webデザインで何が重要かがわかるでしょう。

これは全く知りませんでした！！ためしに３級の部分をチラ見してみましたが、自分がいかに基礎ができていないか痛感させられました・・・。
タグ関連についてはだいたいわかったのですが、IPv4？DHCP？なんちゃらゲートウェイ？何語だそれは？というレベルで・・・もはや問題の文章すら理解できませんでした(笑)
とてもおもしろそうなので、とりあえず３級をクリアできるぐらいには勉強してみます！

＞以下、私が良く行うマークアップの例・・
＞[例]・・HTML4.01
＞<body id="TOP">
＞　<div class="header">
＞　　<h1>見出し</h1>
＞　</div>

～
＞・・・文書情報・・・
＞<address></address>
＞</footer>
＞</body>

大変わかりやすく、素人の私でもすごく具体的なイメージができました！
早速参考にさせて頂きます！

わざわざ本当にありがとうございました。

回答No.7

神崎 渉瑠（@taloo）

三たび失礼します。

HTMLの話をすると、
ビタミンの記載順はABC順、つまり

<li class="a">A</li>
<li class="b6">B6</li>
<li class="e">E</li>

としておいて、CSSでB6が左端、Aが真ん中、Eが右端になるようにするのがいいと思います。

良いといっても、おそらくSEOにも影響はない、音声ブラウザで読み上げたとしても、「A、B6、E」と「B6、A、E」の順番になるだけ、ただそれだけだと思います。
しかもCSSは、display: inline-boxだけではできませんからそれ相応の知識や技術が必要になり、複雑になります。

HTMLレベルの話をするなら、何を持って「良い」のか考えれば考えるほどわからなくなりますけどね。

まあ、根本的な所は教えられる物ではないと思います。
それでお金を稼いでらっしゃるわけですから。
それに、「青にしたら良いですか？赤にしたら良いですか？」と聞かれて、「今の状態であれば青が良い」と答えられるかもしれませんが、じゃあ、別のサイトで「青が良い」と言えるのかというとそうではありません。
１つ１つ違う物を、一般論で説明できないですよ。

過去ログに、グローバルナビは<header>に入れるべきか、<footer>に入れるべきか、という質問もありましたが、
私なら状況に応じて判断してください、と答える程度ですね。

私が制作依頼を受けたときは、どちらの順番（どの方法）で作るかは料金との兼ね合いです。
私はデザイナーではなく技術屋（コーダー、プログラマー）ですし、技術の安売りをするつもりはありませんので。
ただ、安い料金で依頼しておいて質が悪いと言われても、それは困りますが。

箱を作ってくれと言われて、依頼料が安いからプラスチックで作った、依頼料が高いからアクリルで作ったとか、そういうレベルです。
プラスチックは脆い、質が悪いというのであれば、安い依頼料でもアクリルで作ってくれる人を捜してください、となります。（最近は技術の安売り合戦ですから、探せばいくらでも見つかると思います。）
ま、そんなことをやってるから依頼が来ないんでしょうけどね。
目薬のキャップがABS樹脂になったら買いたくなるのか、と言われても、気にした事がありません。

お礼

重ね重ねご回答ありがとうございます。

＞HTMLレベルの話をするなら、
＞何を持って「良い」のか考えれば考えるほど
＞わからなくなりますけどね。

その通りですね。
初心者の私から見ればもっとわかりません。

最近は悩んだすえ、経験も浅く知識も貧相な私の現段階では、コーディングだろうとデザイニングだろうとSEOだろうと、【良い要素】を追求するのは次のステップにして、今は【悪い要素】を徹底して排除する基礎固めしかないなぁと実感しております。
何が良いかはわからない事だらけですが、何が悪いか・悪くなる可能性があるのか、というのだけはなんとなくわかってきました(笑)
そのため、今回デザインだけ外注しようと思い、その外注用のデザインチェックシートを作ろうと想った次第です。

＞ただ、安い料金で依頼しておいて
＞質が悪いと言われても、それは困りますが。

不勉強で本当にすいません。
例え話しのこれがまったく理解できませんでした。

安い料金で依頼して出来上がりの質が悪いと言う依頼者の、何がよろしくないのでしょうか？
むしろ、安い料金で依頼してきた依頼者に、その料金だと質が悪くなりますよ～というのを理解させずに作品を作ってしまった受注者のほうが、よっぽどよろしくないと想ってしましまいした。
どうやら例え話が上手く理解できません・・・。

無知で本当に申し訳ありません。

回答No.6

神崎 渉瑠（@taloo）

連続失礼します。

先の解答の画像。
B6が青地に白抜き文字になっていますが、白地に青文字、枠線を青にしたならどうでしょうか。

（いろいろ省略）
.vitamin li {
background-color: white;
border: 1px solid black;
display: inline-box;
}

.vitamin .b6 {
border-color: blue;
color: blue;
}
.vitamin .a {
border-color: red;
color: red;
}
.vitamin .e {
border-color: orange;
color: orange;
}

<ul class="vitamin">
<li class="b6">B6</li>
<li class="a">A</li>
<li class="e">E</li>

上の方が青基調、下の方が白基調で統一されますが、なにか物足りないと思います。
私がデザインしたら、たぶんborderを使った色表現だけの物足りない、つまらないものになると思いますね。

「第２類医薬品」が重要語句だからcolor: redにしよう、なんてしたら、たぶんデザイン破綻じゃないでしょうか。

買いたくなるデザインの代表は、やっぱり「インターネットで稼ぐ方法教えます」のサイトだと思います。

いまでこそ詐欺の代表と言われていますが、
なぜあれだけ、同じデザインが反乱したかというのを考えれば、やはり「欲しくなるデザイン」だからだと思います。
文章を読んでなくても、稼ぐ方法云々に興味がなくても、「今すぐクリック」と書かれている場所を押したくなりますから。
ぶっちゃけ、「このボタン押下禁止！」と書かれていたら押したくなるという、あの心理に似ていると思います。

雑談っぽくて済みません。ご参考まで。

お礼

ご回答ありがとうございます。

手元に全く同じ目薬があるので驚きました(笑)
とてもわかりやすいご説明、ありがとうございました。

＞複雑なCSSを作ろうが、簡単なCSSで作ろうが、
＞完成品（見た目）が同じなら同じ物と見なされます。
＞なら、難しいCSSをくむよりも、
＞簡単に仕上げた方が良いんじゃないでしょうか。
＞それだけのことだと思います。

なるほど！そういう事ですね！！！
なんとなくですが、わかってきました。

＞本物のデザイナー、プロのデザイナーであれば、
＞買いたくなる、欲しくなるデザインというのが
＞最も重要視すると思います。

そうですね、それはかろうじて理解できました。
買いたくなる、欲しくなる・・・。ん～～～～。

＞買いたくなるデザインの代表は、
＞やっぱり「インターネットで稼ぐ方法教えます」
＞のサイトだと思います。
＞いまでこそ詐欺の代表と言われていますが、
＞なぜあれだけ、同じデザインが反乱したかというのを考えれば、
＞やはり「欲しくなるデザイン」だからだと思います。

なるほど！！
似た形が多いという事は、そのデザインには何かしら良い部分がある。という事ですね。王道には王道たりえる意味がある。
とても参考になりました！

＞文章を読んでなくても、稼ぐ方法云々に興味がなくても、
＞「今すぐクリック」と書かれている場所を押したくなりますから。
＞ぶっちゃけ、「このボタン押下禁止！」と書かれていたら
＞押したくなるという、あの心理に似ていると思います。

なるほど！！！
その心理的テクニックは古くから使われてますからね。上記と同じく古くから疲れているなら何かしらの意味がありそうですね。早速それは試してみたいとおもいます。

＞まず、デザインを作ります。
＞そのデザインの中で、このパーツは見出し、
＞このパーツは箇条書き、このパーツは、、、
＞と決めていき、それに対応したタグを使用します。

おお！それはすごく作りやすい方法ですね！
参考にさせて頂きます。

詳細なご助言、誠にありがとうございました！

回答No.5

神崎 渉瑠（@taloo）

人が見て良いと思うのは、あくまでビジュアルであって、HTMLコードではありません。

複雑なCSSを作ろうが、簡単なCSSで作ろうが、
完成品（見た目）が同じなら同じ物と見なされます。

なら、難しいCSSをくむよりも、簡単に仕上げた方が良いんじゃないでしょうか。
それだけのことだと思います。

私は他の方とは異なるアプローチで製作しています。

まず、デザインを作ります。
そのデザインの中で、このパーツは見出し、このパーツは箇条書き、このパーツは、、、と決めていき、それに対応したタグを使用します。
その後、CSSで、最初のデザインと同じになるように調整していきます。
（添付画像 http://pv.wi-wi.jp/okwave/q7813282/image.jpg 参照。）
デザインが最初にあるので、理論的には見た目重視で何でも出来ます。
よほどの事がない限り、<body><p><img></p></body>というような無粋な事はしません（笑）
もちろん、動作（アニメーション）であっても、同じ作り方です。
右から左に動いていくこのパーツは<p>か<ul>か、、、というのを決めてからHTML化します。
あらかじめ表示されている物でなければ、<div>をJavaScriptで動的に生成になるんですけどね。

最初にデザインを作りますから、

>ブランドカラーは打ち出せているか、競合との差別化はできているか、コンセプトと合っているか、文字や文章は自然な可読性があるか・・・etc

基本はこういう内容になります。
コンセプトと同じかもしれませんが、
・質素か、豪華か
・可愛い、かっこいい、
・やわらかさ、堅さ（プライベート的というか、公式的というか）
そういうのも考慮します。

私は本物のデザイナーではないので、「ぱっと見ただけで買いたくなるデザイン」というのは作れません。
が、本物のデザイナー、プロのデザイナーであれば、買いたくなる、欲しくなるデザインというのが最も重要視すると思います。

・枠線の色を赤から青にすると買いたくなるという人が３割増える、
・商品の写真を右、説明文を左にすると、、、
とかそういう話ですが、こういうのはたぶん、天性の感覚的な物か、アンケートを何十何百も行って統計を取った結果だと思います。
10年やそこらで身に付く物ではないと思いますし、それが出来る人はまあ、表現は悪いですが、稼げる人、でしょうね。

そういう「デザイン」（狭義のデザイン）は、HTMLタグがどうこうという話は全く関係ないと思います。

お礼

ご回答ありがとうございます。

上記の欄にて併せたお礼をさせて頂きます。

回答No.4

shockatz

#3です。

CSSという仕様は、われわれ日本人にとって残酷です。
HTMLならタグがあるし、Javascriptならキーワードがありますが、CSSでは、さまざまな要素にclassやidで「名前」をつけないといけません。しかも英語です。
「名前」という言葉が示す通り、その用語は名詞型であるべきです。
また、CSSでは「カスケーディング」という名称が示す通り、上から下へスタイルが「継承」されている概念があります。したがって、名前付けもその概念に従うべきです。
要するに、CSSは「概念」を「名詞型」で「階層的」に表さすべきだと考えます。
英語サイトは、一見乱雑に名称がついているように見えますが、日本人だとミススペルが怖いような長い連結名刺をガンガン使ってきます。
奴らは、あれを見て楽にわかるのです。

なので、悲しい日本人としては、
・きちんと「階層化」しないので重複定義が発生して長くなる
・英語力がないと「概念」を「名詞系」で伝えられないので意味不明に。
・作った本人が自分の「概念」定義を記憶理解できず、冗長に。
といった具合で、CSSでは「英語力」「表現力」「簡潔さ」というのは結びついた概念です。

幸か不幸か、CSSは多重定義や冗長定義してもいっさいお咎めなし、というトンデモ仕様だし、だいたい他人の書いたCSSを直すことも稀なので、共同作業の経験が少ないコーダのCSSは、必ずオレ流になります。

ゴミみたいなCSSなら、まだテーブルや、画像ばかりのHTMLのほうがマシだと思います。いやほんとに。

お礼

重ね重ね、ご回答ありがとうございます。

＞・きちんと「階層化」しないので重複定義が発生して長くなる
＞・英語力がないと「概念」を「名詞系」で伝えられないので意味不明に。
＞・作った本人が自分の「概念」定義を記憶理解できず、冗長に。

大変参考になりました。
ということは、idやクラス名などは、階層化を意識した誰でも理解できる名詞での名称をつけることが、大切だということなんですね。

＞幸か不幸か、CSSは多重定義や冗長定義しても
＞いっさいお咎めなし、というトンデモ仕様だし、
＞だいたい他人の書いたCSSを直すことも稀なので、
＞共同作業の経験が少ないコーダのCSSは、
＞必ずオレ流になります。

＞ゴミみたいなCSSなら、まだテーブルや、
＞画像ばかりのHTMLのほうがマシだと思います。
＞いやほんとに。

理解できる部分と、理解できない部分がありました。
CSSが無駄に長いという事は、記述量が多くなる→そのぶんだけ読込速度も遅くなる→結果表示速度が遅くなる＝だからよろしくない、というのはあれから自分なりに調べてみてなんとかわかりました。
もしかしたら他ほ方がCSSをいじる可能性があるのであれば、可能な限り誰でも理解できる記述にするべきであるというのも、わかりました。
併せ、どこかで複数の方がおっしゃっていたのですが、検索ロボットがタグを判断する際も、きとんと意味のある英語だとこのタグが何かを理解するから読み取りやすい、というのもわかってきました。

わからないのが、ゴミみたいなCSSのでの具体的なデメリットです。
さすがに、初心者でもHTMLでテーブルレイアウトするというのが、SEO上も表示上もよろしくないというのは、調べてわかりました。
自分が作ったコードも、これは一切やってません。

ただ、かりに多少記述が多くて多少スペルミスがある状態のCSSをゴミみたいなCSSと定義したとしても、それでも検索ロボットからも認識され表示上も問題ないなら、それによるデメリットはSEO上も表示上もないんではないか？
と素人発想的に想ってしまいました。
もちろん、多重定義されたり小分けしすぎて異常に長い記述、意味不明唯我独尊なidやclass名が良くないのはわかります。
ただ、実際それで一切問題なく検索インデックスされ、中には上位表示にもなっているサイトだって多くある。
もちろんそれはサイトの量やキーワードやなんやかんや他の要素が強かったとしても、現実として今そこに存在している。

となれば、shockatz様のおっしゃるそのゴミみたいなCSSだと、具体的に何がどうダメなんでしょうか？
と、素直に想ってしまいました。

例え認識されていてデザイン上問題なくても、SEO上でマイナス要素などがあるのでしょうか？
正直、素人の私ではSEOの対策関連でプラスにもっていく事は経験も知識も技術も足りないので、ただ一点、マイナス要素の徹底した排除に全力をかたむけたコーディングやライティング、デザイニングをしています。

なので、そのゴミCSSのマイナス要素が非常に気になります。
初心者的質問で申し訳ありません。shockatz様はお詳しそうなので、再度、ぜひ私めにご教授を頂けると幸いです。

回答No.3

shockatz

自分もWebデザイン（デザインとコーディング）を外注する立場ですが、気をつけていることは、ズバリ「HTML/CSS/Javascriptコーディングのシンプルさ」です。
端的にいえば「ファイルの短かさ、単純さ」。
上手な方のWebデザインは、画像がほどよく凝っており、その分、HTML・CSSが単純です。

ビジュアルに関しては、他のデザインと特段、変わることはないと思いますが、Webの場合、「それをどうやって組み立てているか」が非常に重要で、修正が入ったり、ページが追加されるときに、容易に内容を把握できなければいけません。

デザイナが作るサイトの中には、テキスト量が増えたとたん体裁が狂ったり、積木細工のように１箇所の修正が全体を破壊するものが多々あります。
これは、デザインの視覚的要素とは無関係で、制作者の技量の「バランス」が色濃く反映される部分だと思います。
最近はCSSが理解不能に複雑・肥大化しているものが多く、これにIDやクラス名の名付けセンスが悪くイミフだったり、英語のミススぺルが加わうと、吐き気を催すような状態になります。

複雑な画像は、Photoshopのような最強ツールで何とかできますが、CSSだけはエディタで手直しするくらいしか対応策がなく、ゴミCSSにはお手上げの状態になりますので、ご注意を。

CSSが長大で名前付けがダサい場合、そのWebデザインは、はっきり言って低品質です。

お礼

ご回答ありがとうございます。
お礼が遅くなり、申し訳ございません。

＞ズバリ「HTML/CSS/Javascriptコーディングのシンプルさ」です。
＞端的にいえば「ファイルの短かさ、単純さ」。
＞上手な方のWebデザインは、画像がほどよく凝っており、
＞その分、HTML・CSSが単純です。

そうなんですね！！大変参考になりました！
あ、あぁ、耳が痛いです・・・。今回、コーディングは初心者の私がしております。各種ブラウザや端末チェック、コーディングチェック等はオールクリアしておりますが、ファイルの短さ単純さというのが難しく、悩ましい限りです。

極限まで単純化すると修正作業が入った際、非常に管理しずらく、かといって管理しやすいようにすると行数やコード数が増える・・・

何かファイルを短くしたり単純化する決定的なコツはあるのでしょうか？

今回の質問とは全く関係のないコーディングの質問になってしまったので、別で再度質問を上げた方が良いでしょうか？

＞最近はCSSが理解不能に複雑・肥大化
＞しているものが多く、
＞これにIDやクラス名の名付けセンスが悪く
＞イミフだったり、
＞英語のミススぺルが加わうと、
＞吐き気を催すような状態になります。

と

＞CSSが長大で名前付けがダサい場合、
＞そのWebデザインは、はっきり言って低品質です。

についてですが、それによる具体的なマイナス要素を詳しくご教授頂けませんでしょうか？
初心者で申し訳ございません・・・。

よろしくお願いします。

回答No.2

ORUKA1951

＞サイト関連のデザインを外注させて頂いた場合の、
　「外注する場合」という言い回しから、ひょっとして、受注側の立場と読み取れなくもないのですが(^^)
　元々ウェブ(HTML)は、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より

　という生い立ち、目的から、【ウェブデザイン】は、単に視覚系メディアを利用するユーザーによる「見た目」のみならず、点字端末やプリンター、テキストブラウザ、検索エンジンによる利用も含めてのデザインになります。たとえばaural--スクリーンリーダーがどのように読み上げてくれるか

　まあ、これらは後回しにしても、検索エンジンがページの内容を正確に理解できるようにマークアップされているかが最重要課題になります。
1) Lynxなどのテキストブラウザで確認してみてください。
「Lynx などのテキスト ブラウザを使用して、サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）。 ( http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=35769 )」
　スタイルシートなどが一切ない状態--まったくデザインされていない状態で、利用できるか?--デザインと言う言葉と矛盾しますが、それが最も重要

2) 文法的に間違っていないか
　The W3C Markup Validation Service ( http://validator.w3.org )
　Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html )
　　「よくできました」でなくても良いですが、大きな減点はないように

3) アクセシビリティ・ユーザビリティに配慮されているか?
　WAIアクセシビリティガイドライン ( http://www.doraneko.org/wai/contents10/19980918/Overview.html )

4) ブラウザ非依存性が保たれているか? --特定のブラウザでしか利用できないのはダメ
　 ディスプレイ幅に対する対処は?

　など、以下は、あくまで極論ですが、サイトにたくさんの訪問者が訪れ、かつそれが利用される要素は、見た目の華やかさではなく
1) 内容が充実しているか--これはデザイナーではなく原稿を出す側の責任
2) 利用しやすいか--必要な情報にすぐたどり着けるか、
3) その情報は必要十分な内容か？--これはデザイナーではなく原稿を出す側の責任
　なのです。古臭いデザインですが、Wikiぺディアはもっとも利用されているサイトですが、あなたはデザインでWikiを訪れるわけではないですよね。

依頼する側からすれば、最低限
ウェブマスター向けガイドライン - ウェブマスター ツール ヘルプ ( http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=35769 )
　くらいは判断できるほうが良いでしょう。

お礼

ご回答ありがとうございます。
お礼が遅くなり、申し訳ございません。

＞「外注する場合」という言い回しから、
＞ひょっとして、受注側の立場と
＞読み取れなくもないのですが(^^)

私の言葉が悪かったようで、余計な誤認をさせてしまい申し訳ございません。
私が依頼主であり発注者で、サイトのデザイン以外の制作は私がしています。
サイトももちろん私の会社に所属させるサイトと、私個人のサイトです。

＞1) Lynxなどのテキストブラウザで確認してみてください。

ありがとうございます！
実際テキストブラウザではまだ確認しておりませんでした。一応CSSを切った状態で確認し、サイトの日本語も文章も問題ない順序、構成にはなっておりました。
まさかこんな事が最も重要とは・・・。
大変参考になりました！

＞2) 文法的に間違っていないか

ありがとうございます。
ここは、コーディングの段階でチェックしました。一応HTML５とCSSでチェックし、一切の問題点もなくクリアできました。

＞3) アクセシビリティ・ユーザビリティに配慮されているか?

このサイトは存じませんでした。大変参考になりました！
ありがとうございます。

＞4) ブラウザ非依存性が保たれているか?
＞特定のブラウザでしか利用できないのはダメ

一応、IE７～９、Chrome、Firefox、Opera、Safari、Dolphin、はそれぞれチェックし一切の問題点もなくクリアできました。
実は以前、別の質問でORUKA1951様よりご助言を頂いたので、IE７も見捨てずやりました(笑)
IE対応用に【paddingを極力使わずmarginで対応するなどチョッとした工夫でカバーできる】とは本当で、paddingをやめただけで悩み倒して諦めていた全てのズレがなくなりました！！その節は本当に本当にありがとうございました！！

＞依頼する側からすれば、最低限
＞ウェブマスター向けガイドライン
＞くらいは判断できるほうが良いでしょう。

なるほど！分かりました！コーディングも外注する場合は、これも最低限のチェック内容にしようと思います！

大変参考になるアドバイス、ありがとうございました。