オリジナルイラスト、小説、サイト作成メモなどを主なコンテンツとする個人サイトです。管理人の如月ニイチさんはどんな方かというと……これがよくわからないんだなあ。今回、コンテンツの内容やウェブサイトの運営方針についてはアドバイスを依頼されていないので、管理人の人となりはそれほど重要な情報ではないのですが、それでもやっぱり、どんな方向性の改善案を示すかという点で少し気になるところではあるんですよね。
ま、あえて情報を伏せているものを無理に聞き出すほどのことではないので、サクッと本論に入りましょう。
見易さ、使いやすさ。特にtextコンテンツは1pの文字量、文字サイズが妥当かどうかが気になります。また、自分以外の方の閲覧不具合がないか等。それと、サイト全体があまりにもそっけない雰囲気ではないか…また来たいと思えるサイトにするには？ というようなことを教えてほしいと思っています。欲張りですみません。
ご多忙でしょうがこれからも精進したいと思ってますので辛口のアドバイスをお願いします。
見た目について意見せよ、というご依頼と解釈いたしました。
たいへん具体的なアドバイス依頼なので、箇条書きでポンポンポンと書いていけばいいかな、と思ったのですが、どうも言葉足らずの感が否めず、また私自身、「こうしたらいいよ」と書きながら「本当かなあ?」と自分の言葉に疑いを持つに至り、解説用のサンプルを作成しました。
このサンプルは、ほぼ原本そのままの HTML 文書に、2種類の代替スタイルシート「plan A」「plan B」とスタイルシート切替スクリプトを付加したものです。サイトの表紙のほか、「Text」「Labo」「Contact」もトップページのみ用意してありますので、ある程度、サイト内を見て回る感覚を再現できるでしょう。原本のスタイルシートには「default」と名づけてあります。あちこちのページで適宜スタイルを切り替えてみてください。
原本では「Labo」のスタイルシートがサイト本体とは別に用意されているので、サンプルもそのようになっています（つまり、「Labo」の「default」スタイルは、見た目はそっくりながら、他のコンテンツの「default」スタイルとは異なるファイル）。「plan A」は「default」の改修案なので、これも「Labo」とそれ以外で、別のスタイルシートを用いております。これに対し「plan B」は全ページにひとつのスタイルシートを適用しています。
原本が「Labo」のみ特別のスタイルシートを用いているのは、他のコンテンツと HTML 文書の構成が異なっているためです。ブログツールのテンプレートカスタマイズが不十分、もしくは class 属性値や文書構成などのデザイン方針に混乱がある、といった原因が考えられます。
他と異なる表示結果としたいならともかく、そっくりな見た目となるよう苦心されているのですから、二度手間です。スタイルシートはひとつにまとめて、HTML 文書の構成を1種類にした方がよいでしょう。ブログとサイト本体、HTML 文書の改修が簡単なのはどっち? 当然ブログ側ですよね。テンプレートをいじれば全部まとめて変更できるわけですから。適当に折を見て、ブログのテンプレートをカスタマイズされることを勧めます。
ちなみに、ブログのテンプレートにサイト本体のスタイルシートを組み込む方法は簡単ですよ。テンプレートに直接 <link href="http://（中略）.css" rel="stylesheet" type="text/css"> などと書き込んでしまえばよいわけです。
「plan B」で見て回っていて気付いたのですが、ナビゲーションに未整備・混乱があるようです。トップに戻れないページ（Text）があったり、変なロゴのせいで「俺的グッジョブ」というタイトルが2つ重なって表示（BBS）されたり。とりあえず、トップに戻るリンクはサイドバーの「Top」に統一した方がいいですね。
CGI は「Labo」だけちょっと惜しいですが、全体的にかなり頑張ってカスタマイズされていますよね。でも、できればもう一歩進めてほしいところではあります。「BBS」も「Link」も、表紙や「Labo」と HTML の構造を揃えることができるはずなのです。class 属性値や id 属性値をもう少しだけ整理して、最終的には1種類のスタイルシートでサイト内の全コンテンツのデザインを制御できるようにすると、後々楽になります。
お絵描き掲示板は色調以外はカスタマイズ不能なのでしょうから仕方ないとして、メールフォームが小窓扱いになっているのはちょっと謎。別に不都合はないのですけれども、何もわざわざメールフォームの利用に心理的制限を高く設定する必要はないように思います。
私のようなアンチ・コミュニケーション志向なら話は別ですけれども、メール大歓迎ならトップページの下の方にでも置いておけばいいような気がするのですね。ちょっとカスタマイズできる CGI を用いて、送信完了ページからトップへ戻れるようにしておけば十分でしょう。非常に簡素で設定・設置が簡単なメールフォーム CGI として私があちこちで使ったのが Formmail v1.20 ですが、これはそのまま使うと HTML が汚いのでカスタマイズが少し面倒でしょうか。
おそらく現在使用されているのは phpContact でしょう。私が調べた限りでは、とくに小窓を使う必然性もなく、どこのページにも組み込むことができそうでした。「Labo」や「Gallery」などと組み合わせて、それらの全ページから感想メールを出せるようにしてみてもいいかもしれませんね。まあ、労多くして何とやらになりそうなので、とくにお勧めはしませんが……そういう作業をすること自体は、楽しいかもしれません。
掲示板も含め、コミュニケーション系コンテンツをわざわざ深い階層に置くのはもったいない。「Contact」の注意書きは簡単なものですし、あの程度なら掲示板の最上部に記載しても不都合ないように思われます。あるいは私なら、掲示板のサイドバーの下の方に配置しますね。
読んでほしい人は読まない、読まなくていい人だけが読むのが注意書きです。不愉快な発言を削除する際に、錦の御旗となればそれでいいのであって、とくに目立たせる必要を感じません。お絵描き掲示板は不運にも（?）投稿者が少ないので、うるさく規約を表示する必要もないでしょう。
とにかく、私がもし掲示板への書き込み大歓迎の方針でサイトのデザインをするなら、表紙から1クリックで掲示板へ移動できるようにするはずです。サイドバーに「BBS」「メールフォーム」「お絵描き掲示板」と3つも並べるのは、そりゃ私だって嫌です。だからメールフォームは表紙の一部に取り込んでしまうし、お絵描き掲示板は自分以外どうせほとんど誰も使うまいと割り切って「Gallery」へもっていきますね。そうしてサイドバーには「BBS」だけ残すというわけ。
問題あり、と判断しました。ただし、アクセス数には関係ないレベルかな、という気はします。デザインというのは、ちょっとやそっとよくても悪くてもアクセス数には影響しません。
さて、「default」をベースに私がデザインを改修した「plan A」をご確認ください。「plan A」の方が見にくいと感じるようであれば、以降のアドバイスは無意味なので、読む必要ありません（だからナビゲーションの話を先にやったわけです）。
如月さんのウェブサイトが見づらい理由は多々ありますが、決定的にまずいのは行間が詰まっていることです。この1点をどうにかするだけで、相当に見やすさは改善されます。如月さんは p 要素に line-height:1.4; を指定しており、そのおかげで小説は問題なく読めます。
textコンテンツは1pの文字量、文字サイズが妥当かどうかが気になります。
一番心配されていた部分は、及第点といえます。文字サイズはかなり小さいと思いますが、許容範囲でしょう。もちろん私ならもっと大きくしますけれども、絶対に何が何でも大きくした方がいいというレベルではない。1ページあたりの文字量も、適切に設定されているのではないでしょうか。
しかし残念なのは、テキスト本文以外の部分が、かなり見づらいことです。肝心のコンテンツにたどりつくまでのところに、難があります。というわけで、「plan A」では冒頭に以下のスタイルを設定しています。
*
{margin:0; padding:0; font:normal normal normal 100%/1.6 osaka,verdana,'ＭＳ ゴシック',sans-serif; font-weight:inherit; text-decoration:none; text-align:left;}
全称セレクタで line-height:1.6; を設定しているわけです。あとはこれでレイアウトやバランスが崩壊しないよう、あちこちを調整していけばよいということになります。
行の高さを読みやすい値に設定する他に、気をつけた方がよいことは何か?
もちろん回答は無数に存在するわけですけれども、せっかくスタイルシートでレイアウトするなら、ということで私は2番目に「適切な余白の設定」を挙げたいですね。
余白といってもいろいろありまして、とくにここで注目していただきたいのは、メニューと h2 要素のスタイル設定です。「default」と基本的には同じスタイルなのに、不思議と「plan A」の方には窮屈な感じがない。のびのびとした開放感があります。それはなぜか? 配色の調整も効いてはいるのですけれども、決定的に重要なのはわずかな余白の存在なのです。わずか 0.5em の余白が、こんなにも印象を変えるのですね。
まずは小さなところから、というわけで h2 要素の padding 設定をご覧いただいたわけですが、余白の活用には大技もあります。といっても、私が紹介するのは趣味レベルですぐに活用できる簡単なテクニックですから、ご安心ください。
「plan A」では body 要素に設定した padding が全体の構成に大いに寄与しています。body 要素には紺からグレーに変化する大きな背景画像を敷き詰めていますが、コンテンツ表示領域の背景は無地のグレー。メニューと h2 要素をコンテンツ表示領域の端にくっつけ、さらに 1px の線で余白との境目を強調しています。
余白といっても、必ずしも地続きで延長していく必要はないんですね。場合によっては、明確に線で区切って余白を強調してもよいわけです。
あれれ、おかしいぞ? と疑問が出てくるかもしれませんね。メニューや h2 要素を端までくっつけてしまったら、窮屈な感じが甦ってしまうのではないか? というあたり、心配になるのは当然です。じつは、原則は簡単なのです。
これは素人がデザインする場合の目安であって、一定以上の技能がある方なら、こうした制約を軽々と飛び越すことができます。とはいえ、プロのことはプロに任せておけばよいのです。趣味は趣味なりの基準で物事を考えていけばよいのではないでしょうか。そこそこきれいなデザインを実現できたなら、それで満足していいと思います。当サイトも、一見して素人の作とわかるデザインで充足し、ほぼ進化の歩みを止めております。
Opera8 と Firefox1.0.6 と WinIE6 でざっと閲覧した限りでは、問題ないようでした。
たしかにそっけないといえばそっけないですね。デザイン面からいえば、配色と画面構成の華の不足が問題です。
「plan A」ではヘッダーの背景画像を画面端まで繰り返し表示することで青色の帯を確保し、body 要素の背景画像も青つながりを意識し、メニューもチラッと青が顔を出すデザインとし、未訪問のリンク色も青系統に変更しています。モノクロ、しかも黒が目立つ画面を、いくらか青系統へ引っ張る試みです。更新履歴の背景画像も差し替え、華やかさを多少なりとも演出してみました。大差ないとはいえ、幾分クールな雰囲気にはなったかな、と思うのですがいかがでしょうか。
まあ、見た目をいじったくらいでは、本質的なそっけなさは解消されません。根がまじめで、事務的に懸案を処理していくスタイルでサイトを構築されている以上、デザイン的な対処は気休めにしかなりません。かといって、サイト運営のスタイル自体を変えていくのが正しいかというと、それもまた疑問ですね。個性にあった運営スタイルというのがあるわけで、自分が気楽に自然に振舞えるやり方を維持すれば、。それでいいのではないでしょうか。
管理人さんの人柄がいいからといって、必ずしもアクセス向上につながるというものではありません。そっけなくても、多くの人に愛されるウェブサイトはたくさんあります。難しく考えない方がよいと思います。
この質問は回答不能ですね。まあ、他の人に意見を求めてみれば、それこそうんざりするくらいたくさんの意見やアイデアが得られるでしょうけれども、どれも気休めに過ぎない、と断言してもよいでしょう。
一見してひどいと思えるウェブサイトなのに、妙に人気があるというケースはいくらでもあります。1日に100人や1000人しか訪問しないというレベルにおいては、正直いって「何でもあり」です。「こんなウェブサイトはダメだ!」という言説の全てに、あまりに多くの例外が存在するのです。7000万人のネットユーザの内、たった100人だけに気に入られればいいという話なのですから、「何でもあり」なのは当然といえば当然なんですね。
まあ、気休めは気休めなりに役に立ちますので、ダサいホームページ作成マニュアル凝縮版に目を通したりするのも面白いかもしれません。この手のテーマについて考えたり、お勉強したりなさる際には、見返りを期待しないことが大切です。頑張っても何の結果も出ない（アクセス向上につながらない）のがふつうなのです。
EMT さんのアドバイスはていねいで素晴らしいわけですが、いくつか異論があるので書き留めておきます。
まず、未完成のコンテンツは目次に載せるな、ということはよくいわれますけれども、本当かな? と思っています。リンク先を表示してみたら「工事中」だった、といったケースに遭遇すると、たしかにまあ不愉快ではありますけれども、すごく興味深い内容のあるサイトだったら、やっぱり許すと思うんですよね。そして、どうでもいいサイトの場合、不愉快なことなんてひとつもなくたって、すぐに飽きて訪問しなくなってしまう。
というわけで、どうでもいいことなんじゃないか、という気がしています。それに「俺的グッジョブ」の場合、リンク先が工事中なのではなくて、そもそも建設予定コンテンツは単に案内が掲載されているだけで、リンクも何もないわけです。こういうのがあっても、誰も全然困らないのではないでしょうか。
次に、メニューはコンテンツの前に表示すべき、との意見について。ページ内目次ならコンテンツの前になきゃおかしい。そういう意味においては、メニューが先に来た方がいいのですが、他のページへ移動するためのナビゲーションは、コンテンツの後ろでいいと思うんですよね。とくにブログではやたらとこのナビゲーションがリッチになっているわけで、肝心のコンテンツより長かったりする。そんなものをコンテンツの前に置くのは馬鹿馬鹿しい気がします。
といいつつ、私がナビゲーションを本文の前においているのは、最小限度のナビゲーションは閲覧者を安心させると思っていること、そして私自身、コンテンツが全部表示される前に簡単なナビゲーションが表示された方がありがたいと思っていることによります。見出しを見ただけで「あ、間違った」と気付くことがあるのですが、このとき必ずしもブラウザの「戻る」機能がベストとは限らない。ナビゲーションをたどってサイト内を移動した方が好都合なことも多いのです。
ちなみに閲覧者に安心感をもたらすのは、文書の冒頭に戻ればナビゲーションがあるよ、という告知の効果です。実際にそれを使うかどうかは別として、ナビゲーションの存在と位置を知っておくのは悪いことではないと考えています。ようするに、うるさくない程度であれば、ナビゲーションが本文の前に（も）あることには、それなりに利点があると思っているわけです。
とはいえ、HTMLは本と同じようなもので目次があり見出しがあり本文がありますので、それに沿ってサイトのタイトルから順番に配置していってそこからCSSでデザインなさるといいと思います。普通はサイト名・メニュー・見出し・文章となります。
という解説は、どうなんでしょうか。トップページだけに限っていえば、まあそうかな、という感じはします。ただ、この意見に影響されて（?）ブログのサイドメニューを本文の前に配置することには賛成しません。
続いて CSS の書き方について。これは別に反論ではなくて、補足情報。結局のところ、自分が読みやすい、わかりやすいと思う書き方でいいのです。多くの人が読みやすいと思っている書き方は、一度は試す価値があるでしょう。それは否定しません。ただ、やってみてしっくりこなかったら、元に戻してもいいと思いますね。
私は非常に改行の少ない書き方を採用しています。それはなぜかといったら、なるべく少ないスクロールで全体を見渡したいからです。記憶力に難があるので、1画面の中にできるだけ多くの情報を表示しないと、スクロールバーをいじくるばかりで時間が過ぎてしまう。それに、プロパティごとに改行してもしなくても、私から見てとくに見やすさに差がない。……これは極端な例ですが、ともかく趣味のサイトでは自分しかソースをいじらないわけですから、他人のセンスは参考程度でよいはず。
最後にデザインセンスの話。EMT さんのアドバイスは、お勉強の先を目指す場合の話でしょう。趣味レベルのスキルアップでよければ、お勉強すればある程度の進歩は見込めます。デザインの世界は理論と法則が無数にありますので、私や如月さんのような素人さんは、先人が苦労して見出したデザインのエッセンスをお手軽に利用すればよいわけです。ノンデザイナーズ・デザインブック Second Editionはとくにお勧めです。
将来的な課題として。
スタイルシートによるレイアウトを勉強してしばらく経ちますと、CSS の記述がどんどん複雑化して、わけのわからない状態となっていきます。
最悪なのは class 属性値や id 属性値が無節操に増殖し、スタイル設定のバッティングが生じることです。
一時的な現象としては致し方ない面もありますが、落ち着いた段階でスタイル設定を総点検されるとよいでしょう。原点に戻るのです。
最近、私もスタイルシートを整理しなおしました。整理し終えた状態を以下に示します。途中で飽きたので、不完全な箇所もありますが、傾向はつかめるかと思います。
@charset "Shift_JIS";
/*-- position,width,height,float,display,margin,padding,color,background,font,border,etc. --*/
/*-- common --*/
*,#ln li
{margin:0; padding:0; color:#333; background:transparent; font:normal normal normal 100%/1.5 Times,"Times New Roman","ＭＳ Ｐゴシック",Osaka; font-weight:inherit; border:none; text-align:left; text-decoration:none; vertical-align:baseline; list-style:none outside;}
html
{background:#fff url("/x/etc/img/x-walk.png") no-repeat fixed right bottom;}
body,.break
{padding:0 30px;}
body
{padding-bottom:5em;}
h1,h2,h3,h4,h5,h6,strong,caption,th
{font-weight:bold;}
h1
{margin:0 -30px; padding:1.2em 0.8em 0.1em; font-size:160%; color:#ddf; background:#006 url("/x/etc/img/x-h1bar.png") left top;}
h2,h3,h4,h5,h6
{margin:1em 0 0.8em; padding:0.1em 5px 0;}
h2,h3,h4
{color:#446;}
h2
{margin:1em -30px 0.8em -30px; padding:0 10px; font-size:130%; background:transparent url("/x/etc/img/x-hdg.png") no-repeat left top; border-top:1px solid #446;}
h3,#gn
{border-width:1px; border-style:solid; border-color:#bbb #777 #777 #bbb;}
h3
{margin-left:-15px; font-size:110%;}
h4
{margin-left:-10px; font-size:105%; border-bottom:1px solid #779;}
h5
{margin-left:-5px; border-bottom:1px dashed #779;}
h6
{padding-left:0; border-bottom:1px solid #def;}
p,ul,ol,pre,blockquote,table
{margin:0.5em 0 0.5em 0.5em;}
p
{text-indent:0.8em;}
pre,.source,.longsource
{text-indent:0; padding:0.5em; font-family:"ＭＳ ゴシック",monospace; border:1px solid #600;}
ul li
{list-style:disc outside;}
ul ul li
{list-style:circle outside;}
ol li
{list-style:decimal outside;}
dl,dd blockquote dl,dd dl.lv3
{margin:0.5em 0;}
dd dl
{margin-left:-0.5em;}
li,dt,dd,li ul,li ol
{margin:0.2em 0;}
li
{margin-left:2em;}
dt
{padding-left:0.5em;}
dt
{background:#ddf; border-top:1px solid #99c;}
dd
{margin-left:2em;}
blockquote
{padding:0 0.5em; border:2px dashed #699;}
q,em,strong
{padding:0 0.3em;}
q
{color:#366; border-bottom:1px dashed #699;}
em,strong
{background:#eef;}
table
{border:1px solid #669; border-collapse:collapse;}
td,th
{padding:0 0.4em; border:1px solid #99c;}
th
{background:#eef; text-align:left; vertical-align:top;}
th,.start-tag,.end-tag
{white-space:nowrap;}
table.fig td
{text-align:right;}
textarea,input,#ln,.sss
{border:1px solid #446;}
a
{padding:1px 1px 0; border-bottom:1px solid #c96;}
a:link
{color:#300;}
a:visited,a:active,a.note:hover
{background:transparent;}
a:hover
{padding:0 0 0; background:#ddf; border:1px solid #99f;}
a.note,a.note:visited,a.note:hover
{color:#779; font-size:10px;}
img,#address address,a.note,a.note:hover
{border:none;}
img
{vertical-align:text-bottom;}
del,hr,.hidden,.break #ln
{display:none;}
ins
{background:#eee;}
/*-- class,id --*/
#deztec
{padding:0 0 5em;}
.lv1,.lv3
{float:left;}
.lv1
{width:49%;}
.lv2
{padding:0 10px 0 30px;}
.lv2 h2
{margin-right:-10px;}
.lv3
{width:50%;}
.break,.end,#address
{clear:both;}
#gn,#ln,.sss
{background:#fff;}
#gn
{position:absolute; right:0; top:0em; margin:0; padding:0.2em 1em 0.1em 0.5em; z-index:1; border-width:0 0 1px 1px;}
#gn li,.memo li,#address li,#address address
{display:inline; margin:0; padding:0 0.2em;}
#ln
{width:17em; float:right; margin:0 -30px 1em 1em; padding:1em 1em 0.5em 0.5em; border-width:0 0 1px 1px;}
#ln ul li
{margin-left:1em;}
.sss
{position:absolute; right:1em; top:2.5em; margin:0; padding:0.5em 0.5em 0.2em; z-index:1;}
.longsource
{height:200px; overflow:auto;}
#address,address
{margin:1em -30px; padding:0.25em 30px; display:block; color:#000; background-color:#eef; text-align:right; border-style:solid; border-width:thin 0; border-color:#ccd;}
簡単に説明しますと、まず class や id によるスタイル設定の分岐をオマケ扱いとし、まず自分が使いそうな要素のデフォルトスタイルを一通り設定するのです。段落はこんな見た目にしよう、リストはこうしよう、引用は……。それからおもむろに、ナビゲーション用などの特別なスタイルを設定していきます。その際、なぜその箇所のスタイルは特別なものでなくてはならないのか、ということを問い直していきます。こうすると状況が整理され、見通しが大幅に改善されます。
スタイルシートがこのように整理されていると、マークアップも簡単になります。なぜなら、特別なスタイル設定が必要な箇所以外の部分、すなわち日々更新される記事の本文は、class 属性値などをいちいち考えずにシンプルにマークアップできるようになるからです。
如月さんの作成された文書を見ますと、例えば小説の本文は p.text で段落がマークアップされているわけです。それはおかしいと思うのですね。段落の中身はテキストに決まっているのであって、むしろテキスト以外の何かが p 要素としてマークアップされている方が異常なんです。であれば、本文領域で用いられるふつうの p 要素に class 属性は不要なはずです。ナビゲーションや注釈など、本文以外の箇所に用いられる p 要素だけに class 属性を付加するべきなんですね。
こうした意識が浸透しますと、class 属性などはテンプレート的に使いまわされる箇所に追いやられ、日々の更新ではスタイル設定の都合を考えずに、素直なマークアップができるようになります。日々の更新が class や id から開放されると、ようやく素直にスタイルシートに感謝できるようになってきます。
アドバイスは以上です。