写真素材を配布しているウェブサイト。管理人のユキさんは東京生まれ東京育ちの高校生。飼い主に似てかわいい犬を大切にしているのだとか。大学への進学を希望されているそうなので、そろそろお勉強がたいへんなのかな?
サイトデザインの善し悪しと、素材とサイトの雰囲気に違いがあるのか、を客観的にみていただきたいです。そして利用規約（素材ページの入り口にあたるもの）は見やすいかと、素材自体の技術（簡単なことで構いませんので）いくつかお願いいたします。
悪くはないです。イメージマップのインパクトは強くて、ちょっと目を引くデザインになっていますよね。ただ、手放しでは誉められないかな、という感じはします。手を加えた方がよいのではないかと思われるポイントを、いくつかご紹介します。
まず、目次側フレームにスタイル設定して、目次画像の周囲の余白を消すと、スッキリしますよ。同時にメニュー画像を小さくしてメニューフレームの幅を削減すると、例えばブラウザのサイドバーを表示しても圧迫感のないデザインとなります。また画像形式が GIF なのに拡張子が .jpg になっているのも気持ち悪いので、改善案では画像形式を JPEG 形式に変更し、43KB から 26KB へ軽量化しています。適切な圧縮率を選択すれば、JPEG 形式でも軽い画像を作ることは可能なのです。
次に、本文フレームにスクロールバーを表示します。スクロールバーの色指定は IE にしか効果がないので、他のブラウザのことはとりあえず考えないことにしまして、とりあえずスライダの枠線くらいは表示してもいいのではないでしょうか。
BODY {
SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #696969; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #ffffff; SCROLLBAR-DARKSHADOW-COLOR: #696969
}
というわけで、上記のスタイル設定を、次のように変更しました。
html,body
{scrollbar-face-color:#fff; scrollbar-highlight-color:#d5a690; scrollbar-shadow-color:#d5a690; scrollbar-3dlight-color:#000; scrollbar-arrow-color:#d5a690; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#000;}
改善案では本文の文言自体が大幅に変更されていますが、そのあたりの事情は後述。
スクロールバーが邪魔に見える感覚は間違っていないと思います。しかし、だからといってスクロールバーを消してしまうのが正しいのかというと、大いに疑問です。全く表示しないのではなくて、ある程度おとなしいデザインとすることで妥協する方がよいと思います。
だいたい以上の2点を変更することで、より多くの人にとって使いやすいデザインとなります。
世の中には、画像を扱えない環境（例えば音声系ブラウザ）や、フレームに対応できない環境（例えば携帯電話の内蔵ブラウザ）もあります。そこまで対応しようと考えると、抜本的なデザイン改訂が必要になりますが、現実問題として、そうまでする必要はないように思います。すぐにできること、簡単なことで、利用しやすい環境を広げることに役立つという観点から、2点に絞ってアドバイスいたしました。
サイトのデザインはかなり「さっぱり」していまして、メニューの画像ひとつでイメージを強烈に規定しています。したがって、メニュー画像が配布している素材と同系統かどうかということを考えていけばよいわけです。
結論からいえば、概ね同系統といってよいのではないでしょうか。素材には幅があるので、全てがどうこうというのは難しいわけですけれども、大筋で一定の空気をまとっています。ザラっとした、カタい雰囲気。ノイズを活かした仕上げ。都会のダークサイドをフィーチャー。カッコよくまとまっていますよね。
残念ながら、これはダメですね。長過ぎます。「読まないでいいよ」と閲覧者に宣言しているようなものですよ、この長さは。
たいていのウェブサービスやソフトウェアの利用規約なども、こんな感じですよね。ダラダラと長い。読む人なんて、どうせ滅多にいないでしょ、と利用規約を書いた人自身も思っていて、だからわざと読み飛ばしやすいような工夫をしていたりするわけです。本当に真剣に読んでほしいなら、利用規約をきちんと読まないと正解できないクイズなんかを用意すればいいんですよ。全問正解しないと先へ進めない、とかですね。でも、誰もそんなことはしない。
利用規約がこれほど長くなった背景には何らかの理由があるのでしょう。私なら、思い切って短くしますけれども、そうはできない理由があるなら、それはそれでかまいません。ただしその場合、「別ページに用意した利用規約をよく読んでからご利用ください」とした方がいい。常連さんに毎日、あんなに長い利用規約を読ませようとするのは、あまり性格のいい人のすることではないと思います。
利用規約（the terms of use）
to English．．．here
＊黒い太字で表示してある単語は別ウィンドウで解説しております。
不明な単語がありましたらクリックしてみてください。
（→単語集）
＊使用可能サイトであるかの大まかな判断はこちらを参照してください。
＊ 非営利目的でのご使用を主としてお使いください。
＊本サイトの素材は商用サイトの利用は基本的には禁止しております。
（HP作成代行、商用、オンラインショップ、営利目的サイトなどでの利用希望の方は必ず事前にお問い合わせしてください）
＊宗教・違法・また１８歳未満が閲覧できないような出会い系サイトやアダルトサイトでの使用はお断りしています。
＊本サイトはすべての素材の 著作権を放棄していません。
＊個人的な素材利用であればリンク・ご報告共に必要ありません。
ご好意でしていただける場合はメールフォームか掲示板での 事後報告をしていただけると嬉しいです。感想もお待ちしております。
＊画像の 直接リンクは絶対に禁止です。
＊サイト内の素材を使用して起こったいかなる損害・トラブル・不具合に本サイトは一切責任をおいません。ご注意ください。
＊非営利目的とした個人利用であれば印刷もしていただいてもかまいません。
＊ただし ２次配布を行う場合は 著作権表示が必要となります。
＊ 拡張子の変更もしてくださってもかまいません。
写真画像を主に扱っていますのでほとんどがＪＰＥＧ、またはＰＮＧ形式です。利用する際に重かったり表示速度が遅かったりする場合はＧＩＦ画像への変換をお勧めします（画像は粗くなります）
＊規約違反と思われるサイト、また他に不明な点（素材の使用合否が不明な場合等）がありましたらフォームでお願いします。
フォームでの質問等はＡページで回答しています。
尚、利用の際の事後報告の場合はＡページには表記されません。
サイトでの利用
＊こちらはリンクは必要ありませんがご報告だけお願いします。ご報告はメールフォームか掲示板でお願いいたします。
＊強制はありませんがリンクを貼ってくださると嬉しいです。
貼ってくださる方は"こちら"を参照にお願いします。
加工について
＊加工する場合は必ずメールフォームでご報告をしてください。事後報告でかまいません。
＊加工した画像にも当サイトの素材によるものなので 著作権表示は必要です。
再配布（２次配布）する場合も当サイトからであるという 著作権表示を必ずお願いします。こちらも事後報告でかまいません。
＊バナー台としての加工もかまいません。
＊加工される方は必ず "こちら"をご覧ください。
（＊素材は画像にカーソルをあわせて右クリック、「名前を付けて画像を保存」でダウンロードできます。）
現行の利用規約からテキストを抽出すると上記の通り。じつに長い。これを私がリライトした例を示します。
かなり話が端折られていますが、実際問題としては、これで十分でしょう。
あと、これはとくにお勧めするわけではないのですけれども、私のように「著作権を主張しない」と決めてしまえば、いろいろ気楽になります。悩みや心配そのものが、きれいさっぱりなくなりますから。みんな勝手に使えばいいよ、それでどうなろうと知ったことじゃない、と。そういった道もある、ということです。
とくにいうことはない、といいますか、私は画像の加工を苦手としていますので、意見するほどの技能を持っていないわけです。PhotoshopElements の操作が複雑すぎて嫌になって放り出し、ずっとホームページビルダー付属のウェブアートデザイナーを愛用している、というエピソードひとつとっても、そのあたりの事情は理解できましょう。
と、これで終ってしまっては申し訳ないので、「画像の見せ方」についてひとつだけ。
背景画像をチェックしていて気になったのですが、基本的にはどの画像も角への配置を狙っているんですよね。なのに、お試し画面では全体に画像が敷き詰められてしまうわけです。素材の印象を不当に落としてしまう結果となっているのが残念です。そこで、右下に画像が配置される改善案を作ってみました。
今回、私はいくつかの改善案を示しました。じつは、それらはパッと見てすぐに真似できるようにはなっていません。ソースを見ても、何がどうなってそういった見た目になっているのか、よくわからないだろうと思います。
とくに素材ページ改善案は理解しがたいでしょう。私は JavaScript には疎いので、スタイルシートを切り替えることで背景画像を交換する手順を採用しています。そのため、素材ページの改善案を使うためには、まずスタイルシートのお勉強が必要なのです。ところが、スタイルシートをちゃんとお勉強するには、そもそも HTML のお勉強が必要なので、これは長い道のりとなります。
ただ、この苦労を受けて立つか逃げるかということは、今後の更新や、あるいは新サイトを立ち上げる際の労力にじわじわと効いてきます。もちろん、例に漏れずこの道も、究めようとしたらどこまでも時間を吸い上げられます。適当なところで見切りをつけなければなりません。では目安としてどれくらい勉強したらいいのかということになりますが、私は最近、以下の2サイトをご紹介するのが常となっております。
非常に飲み込みの早い方でも、お勉強に1日はかかります。ふつうは、1日2時間×1～2週間くらいのコースになると思ってください。そして勉強したことを活かしてサイトのリニューアルをするには、さらに1ヶ月かかるのではないでしょうか。だから、とりあえず過去ログはそのままにして、これから新しく作るページだけは新しい方法で作っていこう、と割り切るのがお勧めなのですが、それはまた別の話。
とにかく、お勉強というのは、そんなに簡単じゃない。ただですね、九九のようなもので、いったんわかってしまえばその後はラクなのです。「さざんがく（3×3＝9）」をいちいち「3＋3＋3＝9」とやったら気が狂う。その気が狂うようなことをやっているのが、現状であるとお考えいただきたい。
小学校2年生だか3年生だかになるまで、私たちは九九を知らなくても平気でした。九九を習ってしばらくたっても、九九を覚えた価値を実感できなかった。それから年月が経ち、今や九九なしでは気が狂う世界にいる。HTML や CSS について勉強するというのも、同じような話なのです。
ユキさんが現在、ご存知なのは、とにかく何でもいいからお望みの見た目を実現できればそれでいい、というレベルの技能です。それは足し算の世界です。3つのことをするには3つの手間をかけなきゃいけない。100個の文書のデザインを変えるには、100個の文書全部に手を加えなければいけない。
HTML と CSS というのは、本当はもっと便利な道具なのです。100個の文書の見た目を変えるのに、たったひとつのファイルに手を入れればいい。そう、掛け算の世界なんですよ。3×100 なら算術記号は1つで足りますが、3+3+3+3+……+3 とやったら、99個の算術記号が必要です。圧倒的な差があるのです。当サイトのように、約2000もの文書からなるウェブサイトをリニューアルすることを想像してください。ユキさんの慣れ親しんだ方法だけでは、気が狂うわけです。
きちんと学び、正しく技術を用いていけば、自然とデザインも改善されます。ユキさんのウェブサイトは、デザインにおおよその統一感はあるものの、微妙な不整合が随所にあります。それはなぜかといったら、デザインを統一的に制御する仕組みではなく、それぞれの文書にそれぞれの装飾を行い、なんとなくセンスで統一感を作り出していく方針だからです。結局、その場その場の判断は少しずつずれていき、コンテンツごとにあまり意味のないデザインの差異が生じています。
現在のやり方を維持する限り、この問題は根絶できません。何度潰しても、またどこかから湧いてきます。時間無制限のモグラたたきのようなものです。そんなこともあって、私はこの問題について、必ず対処せよとは申しません。ユキさんはけっこう頑張ってサイトの統一感を出しており、一定の水準をクリアされています。これでいいじゃないか、と思うのも事実なのです。
だから、現状に問題があるから、という言い方ではなくて、ウェブサイト作成が楽になりますよ、という利点を強調したい。今後、ひょっとすると5年とか10年くらい、興味が続くかもしれないわけです。今のサイトはなくなってしまうとしても。そうであれば、どこかで、できればそれも早い内に、勉強した方が得なんです。
そういわれてもね……というのが実際のところでしょう。ま、それはそれで仕方ない。興味がわいたら、ちょっとつまみ食いしてみてくださいな。
アドバイスは以上です。