趣味Web 小説 2005-05-29

Advice332 市場へ行こう

ご依頼人と Web サイトのご紹介

三重県在住の飛那さんが運営する自作小説サイト。以前は二次創作のコーナもあったのですが、現在は休止中。このところずっと忙しいようで、このアドバイスも読まれるのかなあ……。3ヶ月も経ってからアドバイスされてもね、って感じかもしれませんけれども。

アドバイスの依頼を受けたのが2月18日、その後、4月7日にHPのデータが消えたぁあああああああああああ。うわぁあああああああもうダメだーーーという事件が起こったのだそうで、現在のウェブサイトは暫定的に修復されたものです。大変でしたね、お疲れ様です。「データが消える」という話、しばしば目にはしますが、いまひとつ私にはピンときません。そういうこともあるのでしょうか。アドバイスでは今後の予防策についても少々。

ご相談の内容

心配なのはMENUページのレイアウトです。やっぱりここが表になるので、いろいろ気を配ったりはしているのですが、なかなか上手くいきません。サイト全体の雰囲気もできればよろしくお願いいたします。

アドバイスいろいろ
1.レイアウト

問題があるかないか、という観点からいえば、とくに問題はありません。よりよくする余地はあるか、といえば、それはもちろんあります。ただ、お忙しいようなので、現状維持が無難かもしれません。

現在のレイアウトには2つの大きな欠点があります。

  • 画面全体を貫く(構成する)デザイン要素がない
  • サイト内の各ページごとにデザインが異なっている

これらの問題点の解決策を、具体例で示したのが「市場へ行こう」デザイン改善案です。CSS でレイアウトを指定していることがよくわかるように、CSS 切替スクリプトを設置しています。JavaScript が有効な環境では画面上部にスタイルを選択するセレクトボックスが表示されますので、「replay」と「no style」を切り替えて見た目の変化をご確認ください。

改善案は、元のデザインをなるべく活かし、簡単に真似できるものを目指したつもりです。

画面全体を貫くデザイン要素……といわれても、これはよくわからないかもしれません。改善案では、その最も簡単な例として、大見出しの下に画面を横切る線を1本、追加しています。たったこれだけのことで、画面が締まります。バラバラに配置されているような感じだった各構成要素が、ピシッと整列して見えます。

デザインの統一感については、改善案の表紙からリンクを辿っていただければ一目瞭然でしょう。2005年5月29日現在の市場へ行こうと比較してください。現在のデザインもそれなりに統一感に配慮したものなのだろうとは思いますが、もう少し徹底させることで清潔感・安心感・安定度が増し、落ち着きが演出されるわけです。

その他、あちこちに控え目な線を付加し、各要素の幅を明示しました。すると、本文領域の左右の端が明確になりますね。文字列の中寄せを排除し左寄せに統一した時点で左端は揃うわけですが、付加した線によって右端も揃って見えるようになり、デザインのがたつきが排除されます。字数の少ない行が連続するような場合、本文領域の右端が曖昧になりやすいのですが、このようなテクニックを使えば、端正な雰囲気を保つことができるわけです。

図解

注意! 線が多すぎると、画面がうるさくなります。ほどほどに使ってください。

2.スタイルシートをひとつにまとめよう

外部スタイルシートの活用法まではご存知のようですが、残念なのは、ウェブサイト全体でひとつのスタイルシートを使っていないことです。各フォルダに tmain.css というファイルがあり、フォルダ内の文書から参照しているのですが、その理由がよくわかりませんでした。必ずしも全体でひとつが唯一の正解ではなく、私の改善案でも表紙とそれ以外で分けていますけれども、基本的にはひとつにすることを勧めます。

画像ファイルの置き方などから考えて、リンクの相対指定について知識が不足している(あるいは思い込みによる勘違いがある)のではないかと思いました。HTML 文書だけでなく、画像やスタイルシートも相対指定でリンクできます。相対指定をうまく使って、なるべく少ない数のスタイルシートに装飾を任せてることをお勧めします。これを実現すれば、サイト内のデザイン統一も同時に達成できます。

上記は参考となる解説ですが、例えば第1階層にある「novel」フォルダ内の文書から同階層の「img」フォルダにある replay2.css を呼び出す記述は以下の通りです。

<link rel="stylesheet" href="../img/replay2.css" type="text/css">

最上位階層へ戻って、「img」フォルダにアクセスし、replay2.css を参照する、というわけです。

3.CSS デザインのステップ図解

表紙の改善案で CSS 切替が機能にしている場合、セレクトボックスから「STEP1」~「STEP7」というスタイルを選択できます。順番に切り替えていきますと、私の CSS 製作ステップを簡単に追うことができます。

/* STEP1 */

html,body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,div,blockquote,q,a,em,strong,del
{margin:0; padding:0; font-size:100%; line-height:1.4; font-style:normal; font-weight:normal; text-decoration:none; background:transparent; color:#333;}
body
{padding:2% 5%; background:url(bg_f.jpg) fixed no-repeat right bottom;}
.selectstylesheet
{position:absolute; z-index:100; right:10px; top:10px;}

/* STEP2 */

h1
{margin:0 -5%; padding:0 5%; border-bottom:1px solid #333; font-size:250%; font-weight:bold;}

/* STEP3 */

p#counter
{margin:-2em 0 4em 16em;}

/* STEP4 */

div#menu
{clear:left; width:50%; float:left;}
div#info
{width:40%; float:left;}

/* STEP5 */

p.history
{line-height:1em;}
p.notice,dd
{font-size:90%;}
ul,form
{margin:2em 0;}
li
{margin:0.3em 0; list-style:none;}

/* STEP6 */

a
{color:#36c; border-bottom:1px solid #def;}
a:visited
{color:#333;}
a:hover
{color:#000;}
del
{text-decoration:line-through;}

/* STEP7 */

h2
{margin-top:2em;}
em
{font-weight:bold;}

これは単なるオマケですが、何かの参考になれば幸いです。

4.全体の雰囲気

配色に疑問を感じるページがいくつかありました。ひょっとするとそれは、最近、若い女性の間で流行っているカラーだったのかもしれません。その場合は、以下の記事を読み飛ばしていただければと思います。

だいたい配色に困ったら白地に暗灰色の文字にすればうまくいくものです。モノクロ系でまとめてしまう。それで少し寂しいなと思ったら、青を使う。あるいはワンポイントの背景画像にパステルカラーの何かを持ってくる。センスに自信がなくても、この定石に従えば、そこそこの見た目になります。今回の改善案は、この基本に忠実に作りました。白背景、暗い灰色の文字、リンクは青(ただし少し灰色風味)、背景画像は淡いピンク色。

これでサイト内を統一すれば、なんとなくいい感じになります。個性に乏しいのは、さすがに我慢するしかない。ただ、背景画像の選択次第で、ある程度は自分の主張を出すことができます。コーナ毎に背景画像を変えてみるのもよいでしょう。body 要素に class 属性を指定して、背景画像と対応させていけばいいわけです(という説明が意味不明でしたらご相談ください)。

5.データを守るために

「データが消える」という状況が、私にはよくわかりません。私はパソコンとコンパクトフラッシュとサーバにデータを置いています。そしてパソコンのデータは定期的にバックアップを取っています。

もしサーバ上で操作を誤ったり、あるいはサーバのトラブルでファイルが消えた場合には、パソコンまたはコンパクトフラッシュのデータをサーバにアップロードします。逆にパソコンで操作を誤ってファイルを消してしまった場合には、サーバからデータをダウンロードしてきます。もしパソコンで操作を誤ったことに気付かず、壊れたファイルをサーバにアップロードしてしまった場合には、コンパクトフラッシュからデータを復旧します。それも不可能な場合は、パソコンのバックアップデータから復活させます。

パソコンで原稿を作り、それを FTP ツールでサーバにアップロードするならば、以上のように不測の事態においても簡単にはファイルが全消滅することはありえません。かくいう私も、「パソコンで操作ミス+壊れたファイルをアップロード」という失敗は何度もやらかしています(つまり「データが消える」ではなく「データを消しちゃった」)。ついついチェックがいい加減になってしまうのですね。その際、いつも私を窮地から救ってくれたのがフロッピーディスクに保存していたバックアップデータでした。

「趣味のWebデザイン」はデータ量が数十メガバイトもあるので、さすがにもうフロッピーには保存できません。そこで活躍しているのがコンパクトフラッシュで、いつもこの「最後から2番目」の防波堤に助けられています。

飛那さんがどのような製作手順を踏んでいらっしゃるのかわかりませんが、最低でもローカルとウェブの2箇所にデータを保存されることを勧めます。データの保存箇所は多ければ多いほどよいのですが、手間との兼ね合いを見つつ適切なレベルでファイルを守っていただければと思います。以上です。

余談・アフターサービス

Information

注意書き