最初に
私は日本のホームページのテンプレート供給サイトを馬鹿にしています。
まず最初に感じるのが、どれもこれも似たり寄ったりの画面構成な事です。
はっきり言うと他人の物真似ばかりなのです。
ひどいサイトだと画像ファイルが全く無いので、デザインもへったくれもありません。
基本の配置だけを並べているだけなのに、自分の著作権の表示を消してはいけないだとか書いてあります。
日本人が人真似好きなのは昔からですが、昔の人は人の真似はしましたが、それを自分の著作権だなどとやたら言う事はありませんでした。
最近の日本人は、教科書の丸写し程度の作品を並べて、自分の権利だとか言っています。
やたら権利を主張するのはアメリカですから、アメリカの真似をしているのでしょうが、アメリカも結構ひどい部分の多い国だと私は思います。
色々な所で書いているのですが、アメリカの裁判制度を真似たやり方も日本には適していないと思います。
誰が何の目的でこんな制度を導入したのか知りませんが、アメリカの真似とは言っても中途半端で、迷惑するのは勝手に選ばれた市民でしょう。
ひょっとしたら、くじか何かで選ばれた人は、余程の理由がないと断れないのではないですか。
それこそ、人権も糞も無いような事を平気でやらせる制度をもっともらしく受け入れているマスコミにも驚くと共にあきれるばかりです。
改造テンプレート例１
日本のホームページのテンプレート供給サイトは、ゴミみたいなテンプレートしかないので、使ってみようと思うものは無いのですが、記事を書くために探していた時に１つだけ目に止まったサイトがありました｡
このサイトの作品は制作年が古く、その分構成も古めかしいのですが、全てにテンプレートらしさがあります。
取り合えず、今回の改造のきっかけとなった作品を見ていただきたいと思います。
それが、こちらのぺージになります。
人目見ただけでは何の変哲もないと言うよりも、どちらかと言えばみすぼらしい感じのするテンプレートだと感じる人が多いのではないでしょうか・
私が衝撃を受けたのは、そのデザイン感覚です。
2001年頃と言えばディスプレイの解像度も800×600で見ている人も多かったのではないかと思います。
その頃に、画面の半分を画像だけの表示領域だけにしてしまうなどという発想は誰が思いつくでしょうか。
今でこそ解像度が向上した上に、ワイド画面のディスプレイを使用している人が主流になっていますから、画面の一部が画像だけの表示にしても誰も何とも思わないですが、当時は顰蹙（ひんしゅく）ものだったのではないでしょうか。
逆に言えば、これだけディスプレイの解像度が変化したのに、全く従来のやり方しかできない（真似ばかりする）連中が滑稽にさえ思えてきます。
つまり、ホームページは、ヘッダー部分があって、メインコンテンツ部分があって、最後にフッター部分があると言う当たり前の構成が、本当にそれを当たり前にしなければならないのかと言う提案をこのテンプレートは問いかけています。
デザインの根本に必要なのは、こうした発想であって、新しい発想を持てない人はデザインには適しておりません。
人真似しかできない人は、テンプレート供給サイトを開くのはもっての他と言っても過言ではないと私は思っています。
どこを改造するか
発想が斬新的とは言っても、さすがに現在にはマッチしませんので多くの部分を変える必要があります。
取り合えず、現在の黒を基調としたデザインはそのままにして、バックグラウンドの画像を変更してみます。
元の画像を改造しても使えない事は無いのですが、テンプレートを使用すると言っても画像ぐらいは自前で用意するのは当り前でしょう。
私が前の画像からイメージしたのはパラボラアンテナでしたので、画像は電波望遠鏡を使いました。
フリーの画像があれば良いのですが、無い場合はサイト中を探しまわる事になります。
最近は公共機関でも画像を使用する場合は著作権の表示をしろとか書いてあるのが多いので注意が必要です。
例えば、公共物と思っていた国立天文台ハワイ観測所の画像を利用しようと思ってみたら、こんな事が書いてありました。
◆ 個人の範囲内でのご利用はご自由にできます。
※「個人の範囲内での利用」とは、ホームページにアクセスしている方の個人的な使用に限られます。「インターネット上の個人のホームページやブログ」等に掲載することは、ホームページやブログに大勢の方がアクセスできるという点から、「個人の範囲内での利用」には含まれません。ホームページでのご利用は、ご遠慮ください。
◆ 天文学の広報普及活動を目的とするご利用の場合は「画像等の使用許可申請書」にご記入の上、国立天文台まで申請をお願いいたします。
◆ 学校その他の教育機関における授業や試験問題へのご利用は、ご自由に行えます。お使いになる際は、著作権の明記をお願いいたします。 ( 例：国立天文台 提供 )
◆ 新聞社などの報道機関による報道資料としてのご利用は、ご自由に行えます。お使いになる際は、著作権の明記をお願いいたします。 ( 例：国立天文台 提供 )
学校とか報道機関なら良くて、個人は駄目（申請書が必要どうのこうの）らしいです。
ふざけた話で、誰が画像なんか掲載してやるもんか、糞くらえ国立天文台めです。
ちょっと気の利いた画像を使おうと思うと、自分では用意できない場合がほとんどですから、著作権の問題は常について回ります。
営利目的でもなければ、個人が細々と運用するホームページを訴える人（組織）は少ないとは思いますが、警告を受けたら画像の使用は停止する必要があります。
法律でも厳格に適用すれば抵触する事例が世の中には多いようですが、その内容にもよるとは思いますが、何が何でも守らなければならない程に厳密に運用しなければならないものでは無いでしょう。
頭の固い人には絶対に理解して貰えないと思いますが、私はそのように考えています。
自衛隊が法律の定める軍隊ではないように、解釈しだいはでどうにでもなります。
初心者のために、私が行った画像の変更方法を御説明します。
使用する画像は、検索サイトで検索して探した膨大な画像の中からピックアップしたものです。
(文字化けしていたサイトの記憶があるのですが、再度探しましたが見つかりませんでしたので、出所がはっきりしません。）
バックグラウンドの夜景画面はこの画像を使う事にしました。
黒い部分が多い事が採用の主な理由です。
画像を左右反転して、不要な部分を消去します。
画像処理をした画面です。
右側に文字が入りますので、できるだけ暗い部分をを多くします。
前述の画面に、この画面の電波望遠鏡の部分を切り抜いて合成します。
これは画像の編集ソフトを使用します。私は、GIMP2 と言うフリーソフトを使いました。
切り抜き方法の説明（やり方は色々あります）は省略しますが、検索すればいくらでも見つかります。
これで完成したのですが、山の高さが高過ぎると感じましたので下げました。
画像ギャラリーに展示するのでしたら月や星や星雲を空に描きますが、バック画像ですから不要です。
デザイナーだったら、電波望遠鏡の部分もイラスト化するでしょう。
これで一応完成です。
電波望遠鏡の画像ももう少し小さめの方がバランスが良さそうですが、面倒なので手抜きしています。
昼と夜の画像をミックスしたのですが、極端な違和感は感じませんでしたので、そのままにしました。
空と山を表示させることによって、見る人が奥行きを感じてくれます。
黒のバック画面は視認性が悪くなり易いので、昼の画面も作りました。
こちらは、望遠鏡以外の画面は手作りになります。
画像としては単調なためかアンバランスですが、文字が入りますので、そのままにしております。
テンプレートを見てイメージした画像の完成です。
パラボラアンテナの骨組みが、テンプレートの窓ガラスの格子にそっくりだと思いませんか。
CSSの作成
このテンプレートのスタイルシート（CSS）の内容です。
.font10pt { font-family: "Verdana", "ＭＳ ゴシック"; font-size: 10pt; line-height: 15pt}
.font8pt { font-family: "Verdana", "ＭＳ ゴシック"; font-size: 8pt; line-height: 13pt}
body {scrollbar-face-color: #FFFFFF;
scrollbar-highlight-color: #666666;
scrollbar-shadow-color: #666666;
scrollbar-dlight-color: #F3F8ED;
scrollbar-arrow-color: #666666;
scrollbar-track-color: #EEEEEE;
scrollbar-darkshadow-color: #EEEEEE;
}
a:link { color: #67e47e}
a:visited { color: #94b61f}
え、嘘でしょう・・と思うぐらいに少ないです。
フォントサイズとスクロールバーの表示とリンク表示しか書いてありません。
そう言えば、昔はスタイルシートに対応していないブラウザ何んてのもありました。
スタイルシートに書かないで、どこに書いているのかと言うとHTMLの中で指定しているのです。
文字フォントや文字カラー等もろもろです。
このテンプレートは、表示をTableで行っているのも特徴的です。
10年前は、インターネットエクスプローラーとネットスケープがお互いに競争の真っ最中で、同じタグを使用しても表示が異なるのはザラにありました。
どちらのブラウザでも安定して表示させるのは、Table を使用するのが最善だったのでしょう。
最近のブラウザでは、CSSに対応していないものはありませんし、以前よりはブラウザは安定して表示しますのでCSSを書き換えます。
* {
margin: 0px;
padding: 0px;
}
html{
margin: 0px;
padding:0px;
height:100%;
}
body {
background:color :#000;
background-image: url(../images/1605m.jpg);
background-position:-360px 100%;
background-repeat: no-repeat;
background-attachment: fixed;
overflow:auto;
scrollbar-face-color: #FFFFFF;
scrollbar-highlight-color: #666666;
scrollbar-shadow-color: #666666;
scrollbar-dlight-color: #F3F8ED;
scrollbar-arrow-color: #666666;
scrollbar-track-color: #EEEEEE;
scrollbar-darkshadow-color: #EEEEEE;
font-family: "メイリオ",osaka,"ＭＳ Ｐゴシック",sans-serif;
font-size: 95%;
}
a:link {
color: #67e47e
}
a:visited {
color: #94b61f
}
table{
font-family: "メイリオ",Verdana,Chicago,osaka,"ＭＳ Ｐゴシック",sans-serif;
font-size:96%;
}
#left_side {
background-position:0 100%;
}
#left_side table{
width:100%;
height:90%;
}
#left_side td{
font-size:180%;
line-height:140%;
vertical-align:bottom;
}
#left_side ul{
margin:0;
padding:0;
}
#left_side li{
margin:0;
padding:0;
list-style:none;
}
左右にフレームを使用しておりますので、左側を left_side として CSS を設定しています。
これで表示させて見たのが、こちらのぺージになります。
黒のバックグラウンドカラーでも、私の環境では支障なく読めましたので、使えそうな感じです。
ただ、全ページを黒のバックにするのには、抵抗があります。
そこで、昼の画面で表示させて見たのが、こちらのぺージになります。
雰囲気が全然異なります。
どちらも個性的なデザインにはなりましたが、やはり素人のデザインには限界があります。
改造テンプレート例２
最初に
同じテンプレート供給サイトの別のテンプレートを改造してみます。
本来は違う人の作成したテンプレートを使うべきでしょうが、何度も言うように日本のテンプレート供給サイトは人真似が多いのとデザインに個性がなくてとても改造して使う気にはなれません。
昔の日本人はもう少し自分に誇りを持っておりましたが、最近の人間はマニュアル（見本）がないと何も出来ません。
改造するテンプレートは、こちらのぺージになります。
一般向けのホームページには、ちょっと使い難い配色のテンプレートを選んで見ました。
もっと落ち着いた雰囲気のテンプレートがあるのですが、それは完成度が高くて改造する必要が少ないと感じましたのでこちらを選んでみたのです。
このテンプレートが完成度が低いという意味ではなくて、改造する余地があると言うか、改造する楽しみがあるとでも言えば御理解いただけるのではないでしょうか。
一目見て感じるのは赤系統の派手な色を使用しているにも関わらず、決して純色を使用していない事です。
赤とか青とか黄色の純色を使用すると目につき易く印象にも残るのですが、長く見ている事が出来ません。
アメリカ人の家は派手な色のペンキをべたべた塗っていますが、あれも外から見る分には目だって良いのかも知れませんが、家の中の配色を赤や黄色にしたら住んでいる人は疲れてしまうでしょう。
最近の日本人は、西欧の真似をしているのか、嗜好が変わってしまったのか、家にも派手なペンキを塗ったりする人が多くなりましたが、本来の日本人は自然の色の美しさを知っています。
例えば、木の木目模様の美しさを知っていますから、やたらそれにペンキは塗りませんし、逆にワックスを塗って木目の美しさを引き立たせようとします。
このテンプレートも、赤の派手さを取り入れながらも、如何にして疲れない配色にしようかと苦心している様を感じ取れるでしょう。
今でこそフルカラーのディスプレイは当たり前ですが、256色程度が一般的な年代に誰がこんな発想をするでしょうか。
多分、Web Safe Color以外の色を使用する事は、素人のやる事と言われたと思います。
私も当時は、その教えを忠実に守って配色を考えておりました。
現代もその教えを忠実に守っている人は多いでしょうが、私は最近では完全に無視しています。
その結果、私がイメージした通りの配色で見ていただけない方も多く居るとは思いますが、より多数の方が微妙な配色をみていただければ十分だと思っています。
個人が公開するサイトが、万人に対応するような構成にする必要は全く無いと思っているのですが、完璧でなければいけないと思っている正統派の人には絶対に理解してはいただけないでしょう。
このやり方を他人に勧める気はありませんが、他人からとやかく言われるのも御免こうむりたいです。
教科書通りにしていない人に、やたらいちゃもんをつけたがるのは日本人ぐらいではないでしょうか。
バックカラーの変更
赤系統の配色はそのままにして、配色をいじって見る事にします。
テンプレートを利用すると言っても、全く同じでは個性がありませんし、何よりも改造の楽しみを失ってしまいます。
それに日本人は人真似ばかりでけしからんと言っている本人が、人真似ばかりでは立つ瀬がありません。
このテンプレートでは、バックの色と表示画面を同系色にしていますが、私のディスプレイでははっきりとした区切りが出ません。
バックの色との対比を若干強調させたのが、こちらのぺージになります。
バックをややや暗く、ボディをやや明るく、金色の画像をやや強調しております。
デザインセンスのある人なら、もっと大胆に変更できるのでしょうが、ボケかかった頭ではこの程度が精一杯です。
自分にもう少しデザインのセンスがあったらなあと感じる時です。
このデザインを利用させていただいて、実際にログインページを作成してみました。
色々試行錯誤はしたのですが、最終的に完成した ログインぺージ がこちらになります。
中央のシルエット画像は、サイトで見つけた格好良い女性達の画像（全体画像の一部を抜粋）を使わせていただきました。
そのままでは目立ち過ぎますし、クレームも来そうですからシルエットにしたのですが、これでも問題があるでしょうか。
それにしても、女性達のコスチュームは誰がデザインしたのでしょうか。
半出しのおっぱいと褌をイメージさせる下着にはエロさを感じてしまいます。