オリジナル絵中心でしばらくやってきたものの、このところ版権もの（二次創作）が増えつつあるイラストサイト。管理人の朱（シュウ）さんは美術系への進学を目指す中部地方在住の女子高生。デッサンの練習を積んでいるだけあって、片足立ちポーズのイラストもなんのその。
なるほどこれなら倒れないね、と頷けるレベル。
正直、これは偉いですね。素人が趣味でやってるイラストサイトというのは、絵の「味」で勝負してしまうケースが非常に多いわけですよ。やろうと思えばきちんとデッサンできますよ、というならいいけれど、単に技量がないだけの方が大半でしょう。そういう方がいい絵を絶対に描かないというつもりはありません。ただ、基本的にですね、ものの形を把握し、表現する力があるのは大きな強みです。
とまあ、そんな朱さんのサイトにアドバイスできることがあればよいのですが。
メインコンテンツとなるイラストの展示の仕方などにもう少し工夫したほうが良いと思ってますし、全体的に見にくいなぁと最近悩んでいるのでお願いに来ました。どのような事でもいいので、お時間あるときにご指摘お願いします。
難しいご依頼ですね。ざっと拝見しましたが、なるほど工夫の余地はいろいろあるにしても、致命的な欠点はない。「もう少し」というあたり、ヒントがほしいということなのでしょうが、さて……。
……。
……工夫の余地はいろいろある、と私は書きました。その理由は、現状が非常にシンプルな仕上がりになっているからです。装飾の余地は多々ある、ということは、見ればわかる。では、具体的にどうしたらよいのか。そこが難しい。たいてい私のアドバイスは、何らかの欠点を克服する方法の提示として書かれるわけです。今回は、そこがどうもピンとこないわけです。
個人的には、一番気になるのは文字の大きさ。けれども、これはいっても仕方ないことか、とも思うわけです。私のような閲覧者に向けて作られているウェブサイトじゃないわけですし。この非常に小さな文字を好む閲覧者が、朱さんの望む閲覧者なんですよね、おそらく。
じゃあ配色? これもなかなかよくできています。ちょっと色数が多いかな、という印象はありますが、きちんと検討していくと、「ああ、ここのオレンジは、目次の色と対応しているわけね」という感じで、どれも一応、説明がつくように思われました。しいていえば目次の「絵」という字、この緑色はもう少しくすんだ色にした方がいいでしょう。さすがに読みにくいように思いました。
以上、おしまい。……と、これでは3ヶ月もお待たせした面目がたちませんので、もう少し書き足します。
いきなり改善（?）案を示します。クエスチョンマークをつけているのは、これが使いまわしの手抜き案だから。Advice332 にもソックリの改善（?）案が登場しています。
とはいえ「Le Petit」の現在のデザインをある程度まで活かしたつくりにしたつもりなので、まずはご確認ください。サイト全体の改善案を作るとたいへんなので、一部のページは省略しました。しかし主要なコンテンツについて一通り処方箋を示しておりますので、アドバイスとしてはこれで足りているのではないかと思います。
まず配色については、あまり気にしないでけっこうです。シンプルに色数を減らした改善案となっていますが、何もここまで減らすことはない。モノクロ基調となっているのも、安全策に過ぎません。暖色系でまとめられ、ぬくもりのある「Le Petit」のデザインは、今後も大切にされたらよいと思います。
文字サイズはスタイルシートで 12px と指定してあります。そのため、IE では文字サイズの調整に左右されず常に 12px で表示されます。これは一般の IE ユーザが「インターネットオプション→ユーザ補助→Web ページで指定されたフォントサイズを使用しない（にチェックする）」という設定をしていないことによります。
12px という文字サイズは、原本において推奨文字サイズ設定「中」を選んだ結果よりも大きいのですが、この程度で妥協するのが賢明でしょう。文字サイズ調整ができないケースの最たるものは画像化文字ですけれども、主要なポータルサイトで使われている最小の画像文字サイズは 9px です。しかしそれらは短い文字列の表現に限られています。単純に参考にはできません。
そこで Yahoo!JAPAN トップページを IE6 にて文字サイズ「中」の設定（以下同）で閲覧しますと、本文の文字サイズが 12px で表示されます。Yahoo! ニュースでは、トップページ本文の文字サイズは 12px で、個別記事本文の文字サイズは 16px です。
日本一多くの人が利用している Yahoo のデザインは、ひとつの指標となります。12px 以上の大きさの文字なら読むことができて、一番読みやすいのは 16px というわけです。だから 12px で固定しても、基本的には致命的な問題とはなりません。とくに朱さんのウェブサイトは、同年代の女の子を主な読者層として見込んでいます。視力の問題で文字サイズ「固定」では困る方には、IE のユーザ補助機能をお勉強していただくという方針で構わないと考えます。
原本の問題点は、文字サイズ「最小」の設定で閲覧すると文字サイズが 8px になってしまい、非常に読みにくいことです。小さい文字の好きな女の子の何割かは、ふだんからブラウザの文字サイズ設定を「小」や「最小」に設定しています。ちょうど「最小」にしていると Yahoo! ニュースの個別記事本文が 12px で表示されるのですね。ちなみにトップページの本文は 10px 程度の表示となります。
文字サイズ「中」で小さい文字で表示したい人と、「小」「最小」を使っているけど小さくなりすぎて読めないのも困る人の両者が幸せになれる方法は何かないだろうか? そのひとつの答えが、文字サイズの 12px 「固定」（＝IE ではユーザ補助の設定無しに文字サイズを変更できない設定）なのです。
スタイルシートで本文の文字サイズを固定することの是非はさておき、「図解の中の文字サイズをどの程度にするべきか」という問題は、多くの製作者が避けて通れないものです。実際問題として、16px は大きすぎて使えないことが多いはず。ではどこまで小さくしてよいのか。12px 以上あれば、まあ安心でしょう、というのが今回の話です。
フレームの切り方には定石がありまして、基本的に％値で切りません。メニューフレームは幅固定、本文側を自由幅に設定します。なおこのとき、メニューフレームの幅は 350px 以内に収めるべきです。
これらの定石には一定の根拠があります。
ブラウザを小さくしていったとき、％値の指定ではメニューと本文領域の両方に横スクロールバーが発生しかねません。これは最悪の事態です。そこでメニュー側を幅固定とします。なぜか? 本文の幅を固定してしまったら、ブラウザの表示領域を大きくしたとき、非常にみっともないことになるからです。
……ただしこれは原則論。インラインフレームは幅固定が基本ですし、本文を固定幅の領域の中に表示するデザインも、最初からそうと狙ってつくったなら、しばしばよいものとなります。基本的には、本文領域は可変幅でつくることが多いし、そうすることを勧めます。とくにデザイン上の工夫を用意することなく、本文よりテキスト量が少ないであろうメニューを広大な可変幅のフレームの中にぽつんと置くのは感心できません。
フレームのメニューを固定幅とすると、文字サイズとの兼ね合いが問題となりがち。そこでプロがどうやっているかと思って企業サイトを見て回りますと、たいていメニューの文字を画像にしています。でなければ、今回の改善案のようにスタイルシートで文字サイズを px 単位で決め打ちしていますね。たいていそのいずれかです。
とまあそういったわけで、改善案ではフレームの幅を 280px としております。これなら 640×480 の小さなディスプレイでも本文領域が過半を占めますから、いちおう格好がつくかな、というところ。
初級者には大人気の中寄せですが、慣れてくるとやめるのがふつうです。なぜかといったら、まず文章が読みにくい。そして、左寄せ基本でレイアウトした方が、結局のところいい結果が得られるからです。
この理由について考えるヒントが Advice312 にあります。デザイン要素の配置が作り出す暗黙のライン（Advice312 では「補助線」と称しています）が、中寄せではうまく整わないのです。
中寄せにすれば中心軸はハッキリするのですが、1本のラインでデザインを支えるのは困難です。ウェブデザインの基本はボックスです。上下左右4本のラインを意識するのが定石。中寄せにすると、左右のラインがガタガタになって、ボックスが成立しないんですね。丸い積み木のようなもので、それでは不安定で使えないわけです。
というわけで改善案では、徹底して左寄せにこだわっています。微調整をしていないので、一部、「やっぱりここは中寄せの方が……」という箇所もあるかもしれません。ただ、「とりあえず左寄せ」でも、案外、悪くないじゃないか、ということを訴えたいわけです。何の工夫もありません。ただ左寄せにしているだけなのです。その結果、デザインはどう変化したでしょうか? 原本より整って見えませんか?
原本では PNG のイラストが多数用いられていましたが、転載版の原本と改善案では、すべて JPEG 形式へ変換しております。
一般にイラストは PNG または GIF 形式、写真は JPEG 形式がよい、とされていますが、じつは水彩やグラデーションなどの表現を駆使したイラストは JPEG 形式が最適です。GIF や PNG が特異なのは、塗り絵のようなイラストだけです。勘違いしやすいところなので、よく注意してください。
単に画像の形式を変換するだけなら、ViX のような画像管理ソフトで十分対応できます。今回、私も ViX で形式変換しております。しかも素人目には劣化を認識できないレベルの圧縮なのに、ファイルサイズは6～7割減少しています。
私は、ホームページビルダーの「どこでも配置モード」が嫌いです。できれば、「標準モード」を勉強してほしい。本当をいえば、HTML をきちんと勉強されてから、便利ツールとして HPB を使っていただきたい。
とはいえ実際には「勉強せずにウェブサイトを作るため」に HPB を買っている方が多い。まあそれは仕方ないことです。「どこでも配置モード」で作ったからといって「Le Petit」の価値が下がるわけでもない。それが現実でしょう。だから、別にいいんです。朱さんは「どこでも配置モード」を使い続けていい。
ただ、私の改善案が、どうして様々なレイアウトのページを扱いながらも、画像素材は原本と同じものを使いながらも、サイト全体の統一感という点で原本よりまとまっているように見えるのか。そして「どこでも配置モード」を使うとき、どうしてこれを真似するのが簡単でないか。
そのあたりを説明し、納得していただくことができないのが残念ではあります。ま、私の改善案だって、「所詮この程度」ですから、忘れてくださって構いません。
アドバイスは以上です。
