CGイラスト・ファンアートを発表されている Web サイトです。管理人は東京出身の時永マサタカさん。[KISS JAPAN]は時永さんの個人サークルで、今年10周年。残念ながら、オフラインでの活動は休止中とのこと。
トライガンの二次創作がイラストのメインとなっているわけですが、オリジナルキャラのレントくんの存在が、このサイトの面白いところ。レントくんは3次元にもなっていて、そのあたりの様子は「スーパードルフィー日記」に紹介されています。スーパードルフィーというのは、あの金食い虫で有名な人形のことです。ハマると大変らしい。私は実物を見たことがありませんが……。
はじめまして。「KISSJAPAN WEB LINE」というサイトを運営しております。漫画のファンアートやオリジナルのCGイラストの展示や、CGイラストの描き方などを公開しているサイトです。
なるべく見やすく分かりやすいサイトにしよう…と思っているのですが、自分ではどうにも見やすく分かりやすいサイトになっているのかよく分かりません。また、趣味のサイトとはいえ独りよがりな雰囲気のサイトの様な気もするのです。が、どこをどう直せばよいのか、よく分からないのです。そこで、色々なサイトを見ていらっしゃるプロの方からのアドバイスを頂きたく、書き込みさせていただきました。その他にも何か問題点があれば、お願いいたします。
大変お忙しいことと思いますが、いつになっても構いませんので、どうぞ宜しくお願いいたします。
まさか3ヶ月も待たされるとは思っていらっしゃらなかったろうと思います。ごめんなさい。
また、私はプロではなくて、趣味でお勉強している人間です。「趣味のWebデザイン」というタイトルは、私自身のスタンスを現すものです。というわけで、以下は話半分に読んでいただければと思います。
- 英語版について
KISSJAPAN WEB LINE には日本語版と英語版が用意されています。大学の研究室などを除けば非常に珍しい試みで、興味深く拝見しました。英語版の更新が滞っているのはご愛嬌なのでしょうが、目次だけでなく、コンテンツまで作りこまれていることには感心しました。ところどころ英語に違和感があるのですが、私も英語は不得意なので、具体的に指摘することは避けます。
英語版を閲覧していて気になったのは、ギャラリーからリンクされている文書が日本語版と共通になっていることです。画像へ直リンクしているものと混じっており、アレ? と思いました。英語版の目次では日本語版と共通のコンテンツ（日本語が使われているコンテンツ）について事前にアナウンスしているだけに、不徹底な印象です。目次と同様の注記をするか、画像への直リンクに変更するべきでしょう。
その他の問題については、日本語版とセットで意見いたします。
- HTML の使い方について
日本語版がフレームを多用しているのに対し、英語版はシンプルな作り。じつは日本語版もフレームによる画面分割でにぎやかさを演出しているのであって、ひとつひとつの文書はシンプルなレイアウトを採用しています。
テーブルレイアウトを基本としている場合、こうしたデザイン手法に到達することは珍しくありません。画面全体は派手に見えても、本文は改行と太字と記号だけで整形する、など。Strict HTML＋CSS という手法に思い入れのある方の作成する文書の多くが、全体としてはアッサリした印象なのに、本文の装飾がけっこうにぎやか（きちんと見出しやリストや強調などを使っていくと、自然とそうなってしまう）なことと対照的です。（→余談）
charset=x-sjis といった昔懐かしい（現在は基本的に使われない）文字コード指定や、いくつかの文書のソースに登場している Adobe という文字列、ていねいにインデントされたソースなどから考えて、時永さんは Adobe 製の WYSIWYG 系 Web サイト作成ソフト（Page Mill または Golive の古いバージョン?）をご使用になっているのかな。CSS など一部は直接ソースに記述されているようですが、全体としては WYSIWYG で作っているのだろうと思います。
私は、WYSIWYG 型ソフトの使用者には、とくに HTML の勉強を勧めていません。どうも思い通りにならない、面倒なことが多い、そういった悩みが生じてからで十分だろうと思っているからです。中途半端に勉強しても、むしろひどいことになりがちなのであって、勉強されるのであれば、きちんと勉強なさってほしい。ただ、例えば当サイトのソースを KISSJAPAN WEB LINE のソースと見比べたなら、素人目にも「けっこう違うなあ」とわかるくらいの差異があることに気付かれるでしょう。そういったことを知るのは、悪いことではないと思います。
例えばトップページの最上部にグリーンの帯があります。幅100％のテーブルに背景画像を指定して実現しているのですが、私なら body 要素に CSS で背景画像を指定します。そうすれば、帯のためのテーブルは不要となります。CSS を外部ファイルにして、サイト内の多くの文書で再利用すれば、「最上部に帯をつける」というデザインでサイト内を統一できます。この方法なら、CSS ファイルを書き換えるだけで全文書の帯の色をグリーンからオレンジに変えることができ、グリーンの帯とオレンジの帯が混在する現在のデザインの問題点を原理的に解消できます。
……という説明では全く要領を得ないでしょうが、とりあえず CSS の外部ファイル化について、次の記事を参照されることを勧めます。今、各文書にいちいち CSS を記述している非効率を一挙に解消するための知識が手に入るはずです。HTML の勉強はさておき、CSS の外部ファイル化だけは知って損しません。
- 余談
CSS だけ勉強した人が div 病に罹るのは、単に不勉強だからというよりも、「画面のレイアウト以外に興味がない」「本文なんて改行と太字と記号で十分だと思っている」といったあたりに根本的な原因があるのだと思います。そもそも、本文をきちんとマークアップすることに意義を感じていない、という。大半のブログツールが記事本文について貧弱なマークアップ支援機能しか持っていないのも、この文脈で理解できます。需要がないから、機能が用意されない。
ただ、blockquote 要素だけは例外的に市民権を得つつあり、一歩前進、といったところでしょうか。ブログ以前は引用に blockquote 要素を使わない人が大半で、ユーザスタイルシートなどを用いていると、斜め読みしたときに引用部分を筆者の文章と勘違いすることがしばしばでした。（→本文）
- デザインの改善について
以下、いくつかの切り口を提示します。
ご相談の中で
なるべく見やすく分かりやすいサイトにしよう…と思っている
と書いていらっしゃいましたが、たしかに、致命的な問題はひとつも見つけられませんでした。英語版の目次でリンクを探すのにちょっと手間取ったのが、少し気になったくらいです。ただ、こうすればもっとカッコよくなるのにと思う箇所はたくさんありました。そういったことについて、書いていきます。- テーマカラー
グリーンとオレンジがテーマカラーなのでしょうが、使い分けが不明瞭なのが残念なところ。トップページは上下の帯が緑ですが、現在の日本語版では、基本的に画面上部の帯はオレンジですよね。英語版を見ると、上下のグリーンの帯は以前のデザインの名残なのでしょう。こういったデザインの基本的な枠組みには、一定の制限を設けるべきです。あっちのページとこっちのページで、レイアウトの基本設計が異なるのは、見栄えがよくありません。
非常に大規模なサイトの場合、コンテンツ毎にデザインを変えることはあります。しかし基本的には、きれいに整って見える Web サイトを作りたい場合、デザインルールの設定は必須です。コンテンツの背景色はホワイト、と決めたら、全部の文書でそうするのです。「ダウンロード」では左端にオレンジの帯、「オリキャラ」では全面オレンジ、「CG講座」では上端にグリーンの帯、「日記」は帯なしの全面ホワイト、「牧師絵板」では全面グレー、「リンク」ではグレーの背景＋上端にオレンジの帯……見事にバラバラ。それでも何とかまとまりを失っていないのは、2つの工夫があるからです。
- フレームによりコンテンツを移動しても変化しない部分を画面内に配置していること
- 全部には共通しないけれど、いくつかのコンテンツで共通しているモチーフがどのページにも用意されていること
偶然なのか、狙い通りなのかわかりませんが、綱渡りに失敗してはいません。ただ、本来であれば、やはりもっと安定した路線を選択するべきでしょう。つまらないと思われるでしょうが、共通化していいデザイン要素は、どんどん共通させていくのです。
英語版のデザインよりは日本語版のデザインの方が面白いし、配色も落ち着いていると私は思います。ですから、私なら、トップページからオレンジを中心とした配色でまとめていくでしょう。また、オレンジは帯状にして映える色ですから、背景色はホワイトまたはグレーにします。無難なのはホワイト、グレーの場合は難易度が上がります。
- 帯のデザイン
基本は濃いオレンジと明るいオレンジのストライプなのですが、ベースとなる画像を使い回して加工しているのではないらしく、コンテンツ毎に似て非なる画像が用いられています。繰り返しになりますが、とくに理由がないのであれば、帯のデザインは統一してしまった方がよいでしょう。
もちろん、完全に統一してしまう必要はないわけです。例えば、オレンジの帯の下に、もう1本、コンテンツ毎に色を変えた帯を引くのは、問題ありません。大切なことは、デザインルールがちゃんと存在して、その中でバリエーションを作っていくことです。思いつきでいろいろな帯を作ってみたのだけれど、結果的に似た雰囲気でまとまりました、というのでは、なかなかうまくいかない。時永さんはセンスで一定のラインを死守されていますが、危ない橋を渡っているのです。
さて、いろいろなデザインの帯がある中で、私が最もお勧めするのが、壁紙配布ページの帯です。単純なストライプではなく、ちょっとした「動き」がありますので。Web デザインは、ややもすると水平垂直ばかりになってしまい、斜めの線が出てきません。曲線や斜線は、Web でちょっと人目を引くには、便利なデザイン要素です。どうしようかな、と迷ったら、「どこかに曲線や斜線をいれられないかな?」と考えると、面白いアイデアが浮かんでくるかもしれません。
ただし、壁紙配布ページの帯をそのまま使うのはもったいない。上下を反転した方がいいと思います。ナビゲーションフレームと帯を連続的に表示し、フレーム分割が持っているバラバラ感を抑え、一体感を演出するわけです。上下を反転しない場合、右上の白い部分がナビゲーションフレームとコンテンツフレームを分断する谷間となってしまいますし、せっかくの斜線も帯の中に取り込まれて開放感がありません。
また、壁紙配布ページの帯は、タイトルを画像文字にしていないのが災いして、文字サイズを変更するとヘンな表示結果となります。IE のユーザ補助機能を用いると、CSS で固定された文字サイズも、可変に戻ってしまうのです。もちろんそんな機能を使う方は多くないことが予想されますが、コンテンツのタイトル部分は、帯と一体化した画像文字を使った方がバランスがよいと思います。（Strict HTML＋CSS なら、h1 の背景画像を工夫して云々、という話になりますが、今回は割愛）
- 日記や掲示板のデザイン
何でもかんでも統一しなきゃいけない、というわけでもなくて、日記や掲示板は、やはりそれなりに独自のデザインでよいのです。日付やスレッド毎に、何らかの枠囲いのような装飾がないと読みにくいでしょうから。
とはいえ、例えば上端に帯を入れるとか、背景色はホワイトだとか、そういったデザインルールは、きちんと押さえるのが望ましいといえます。基本に忠実に、その上で追加すべき装飾を追加する。レンタル CGI の場合、あまり自由度がなく、どうしようもないのかもしれませんが、可能な範囲で頑張ってみることをお勧めします。現状はちょっと残念で、もう少し何とかなるんじゃないのかと思います。
- ギャラリーのナビゲーション
日本語版のコンテンツの中で、なぜかギャラリーだけナビゲーションフレームが外れます。この理由がよくわからない。
私なら、ナビゲーションフレームを残します。左端の青銅色っぽい細い帯も残す。とくにフレームを外す理由が思い当たらないのです。
また、考えどころなのが、ギャラリーのナビゲーションです。メインコンテンツであるトライガンのファンアートのサムネール表示が初期状態として設定されているのは正解だと思いますが、他のコンテンツへの目次が微妙に目立たないように見えるのは、私だけでしょうか?
なるほど、流れとしてはあっているのです。トライガンを一通り見終わると、その下のコンテンツに気付く、というのは自然です。自然ですが、本当にそれでいいのかな、と。
ナビゲーションには、主に2つの方向性があります。
- 1．閲覧してほしい順にコンテンツを並べる
例えば、最新の日記を目立つところに置くのは、閲覧順を重視したナビゲーションの考え方によるものです。日記を読むのに、いちいち年を選び、月を選び、日付を選んで記事にたどり着くのでは疲れてしまいます。
- 2．情報の構造とコンテンツの階層を表示する
一方、古い日記を整理・分類して一覧表示する場合には、情報の構造をコンテンツの階層がきちんとわかるようなナビゲーションが必要です。最新の日記から、「前日の日記」といったリンクを押し続けるナビゲーションしか存在しない場合、1年前、2年前の日記にたどり着くころには嫌になっているでしょう。
ギャラリーのナビゲーションを考える場合にも、この2つの流れを考えなければなりません。まずお見せしたいのがトライガンのファンアートだから、それが目立つようなナビゲーションにした……それはよいのです。ただ、情報の構造は以下のようになっているわけです。
- ギャラリー
- トライガン
- その1
- その2
- 漫画
- オリジナル
- 絵日記ログ
- トライガン
それほどコンテンツが複雑多岐にわたっているわけではありません。だから私なら、「トライガン＞その1」のサムネールを並べる前に、他にこんなコンテンツがあるよ、ということを示します。あるいは、サムネールの前と後の両方に、他のジャンルへのリンクを用意します。スペースを有効活用すれば、ほとんど邪魔にならないはずです。
ブログの場合、最近の記事が表紙にずらずら並ぶ一方で、画面の上の方にカレンダーも表示するのが一般的ですよね。私の備忘録でも、月別ログへのリンクをはじめの方に用意しています。フィーチャーしたいコンテンツを目立たせることは大切なのですが、邪魔にならない範囲であれば、情報の構造や階層を先に提示した方が、全体の見通しがよくなります。
- 左寄せ・中寄せ
構成要素の配置にブレがあるのが気になります。基本的には左寄せだと思うのです。ただ、一部目立たせたいものだけ、ブロック単位で中寄せしている。それはいいのですが、AGHCTBMCLT のタイトル画像群はみな中央に配置されているわけです。グリーンの三角マークをうまく使った凝った画像で、それ自体はいいのですが、どうもページの中で浮いている感じがするわけです。それは何故か?
いろいろ説明はありうるわけですけれども、ひとつの大きな要因は配置です。
帯のデザインについて、改善案を示しました。そちらをご覧いただければおわかりの通り、私はコンテンツのタイトルを左寄せにすべきだと考えています。「文字は左寄せ」というデザインルールを設定し、みな左寄せにした方がいい、と。
意外に思われるかもしれませんが、文字の配置方向は左が一番安定し、次が右、中央寄せは最も不安定です。ブロック単位であれば中央寄せもアリなのですが、文字は左右いずれかに寄せるのが定石です。画像文字のような重くて目立つデザイン要素が中央にあると、デザインは不安定になりやすいのです。下に大きなテーブルなどがあって、ど真ん中に重石があると安定する、というケースは例外です。ふつう、そういうのはサイトの表紙くらいでしかお目にかかりません。
- サイトマップがあるといいかも?
コミックのコーナや、同人活動のコーナなど、「あまりアクセスがないから」なのかどうか、いささか予測のつきづらいところからしかリンクされていないコンテンツがあります。ナビゲーションは単純明快な方が見やすいわけで、マイナーコンテンツは主要なナビゲーションの外に置く、という方針も一概に否定はできません。ただ、やっぱりそれならそれで、「その他」みたいなコーナを作るか、さもなければサイトマップのようなものを用意した方がいいのではないかと思いました。
とはいえ、せっかくそういうものを作ってもほとんど利用者がいないのが、マイナーコンテンツのマイナーたるゆえんなのですが、作者自身が忘れ去ってしまわないために、という理由付けもアリではないでしょうか。また、実際にサイトマップを作らないまでも、手元にあるチラシの裏か何かに現状を書き記すだけでも、サイトの構成をよりわかりやすく、見やすく改善していくためのヒントが得られます。
- ディレクトリ構造とサイトのメンテナンス
余計なお世話、ではありますが、サイトの構造とファイルのディレクトリ構造は、ある程度一致していた方が、管理が楽になります。とくにギャラリーは大変なことになっているので、例えば「トライガン」でディレクトリを作り、その中に「01」「02」……とディレクトリを作って、順番にファイルを入れていくと、非常にファイルの管理が楽になるはずです。
といっても、最初から将来の発展について予測が立つことは滅多になく、また一度決めた構造を修正するのは、なかなか面倒なものです。だからこれは、もし可能であれば、という留保付での提案になります。
思いつくままにだらだらと書いていったら、こんなに長くなってしまいました。ひとつかふたつでも、参考になる話があれば幸いです。
