Topページというのは、そのサイトの入口であり、顔である。一番作っていて楽しいのは、もしかしたらTopページかもしれない。だからこそ、Topページについてもう一度考え直してみよう。

はっきり言って、これはかなり非道い。順を追って、これを改善していこう。

　「NacciFanHP」…まぁ、なっちファンだという事は伝わる。が、そのまんま。何の独創性も感じられない。
しかもタイトルバーには「なっちを応援するページ」という、全然違うタイトルが。どっちが本当の題名だ？！
あと名前に「HP」とか「ページ」って付けるのも、そろそろ辞めた方が良い。そんなの言わなくても判るから。

　…ダサッ！
まず、「虹色グラデーション」と「無闇な立体化」は、シロウト臭さ丸出しなのでアウト。
さらに、ロゴの周りが四角く白抜きになってて格好悪い。

　写真の好みは置いておくにしても、この写真だと、誰のファンなのか判りづらい。
あと、写真を四角いまま貼り付けるのも、あまり格好良いとは言えない。

　「爽やかな夏のイメージ」にしたかったのは判る。が、書いた文字が全然見えない。
こんな背景なら無い方がマシ。訪問者に対する嫌がらせだ。
背景に派手な写真はテクスチャを設定するのは最悪のパターンだと覚えておこう。

　上からタイトル、画像、コンテンツへのリンク、説明文などを順に置いている、ごくスタンダードなスタイル。
特に悪い…という事はないが、ツールが自動的に作った様な没個性的なレイアウトなので、もう少し工夫が欲しい。

　「日本人の血液型、A型が一番多くて良かったねぇ」というカンジ。私の様な典型的B型人間には非常に「ウザイ」。
HP作成ツールに入っていたから使ってみたかった…というのは解る。でもウザイんだよ。
ネットをやってる人の殆どは「画面は早く表示される方が嬉しい」。
　そして、文字のスクロールも非道い。文章の内容にスクロールさせる必然性が全く無い上、３行も同時にスクロールさせてるので目が文字を追いきれない。しかもスクロール速度まで違うなんて、まるで読んで欲しくないかの様だ。

　この手の「目立たせたい、賑やかにしたい」という制作者の想いのこもった画面効果は、大抵の場合訪問者にとって「見づらい、ストレスがたまる」だけの迷惑な代物なので、余程の事が無い限り使わない方が良い。

　以下、代表的な３つのパターンを例にして説明する。

　とにかく「可愛さ」を強調したい人向け。
　色はピンクやブルーなどが多用される。
　少女漫画の表紙的なイメージ。
　今回は、アイドルらしさを強調する為、淡いパステルカラーで明るいカンジで作ってみる。

　シックに、シンプルに、大人っぽいイメージにしたい人向け。
　色は主にモノトーンやセピアカラーなど。
　古い映画のポスターや、大人向けファッション雑誌のイメージ。
　今回は、北海道の雪をイメージして、白っぽく繊細なカンジで作ってみる。

　流行りのデザインコンシャスなオシャレなデザインにしたい人向け。
　色はオレンジ、パープル、グリーンなどの、少々ヴィヴィッドな原色をよく使う。
　CDジャケット、若者向け流行雑誌、フライヤーなどのイメージ。
　レトロフューチャー、オールディーズといった、3〜40年前のアメリカの流行を彷彿させるデザイン。
　今回は、青を基調にして、海を彷彿させる爽やかなカンジで作ってみる。

　一般的に良く使われる単語としては、何か場所を意味する言葉…「ワールド（世界）」「ランド（国）」「スペース（広場）」「ステーション」「ハウス（家）」「ルーム（部屋）」「クラブ（倶楽部）」「ショップ（店）」「スクエア」「ボックス」、 あとは好意的な感情や表情を表す言葉…「ラブ」「ラブリー」「キュート」「スマイル」など。
これらを使え、と言ってるのではなく、より個性的な名前を付けたければ、逆に避けるべき単語という事にもなる。

　単語を考えたら、その中のいくつかを組み合わせて、良さそうな熟語を作る。
もちろん１つでもピンとくる単語があったら、その単語を名前にしても良いだろう。

　上に挙げたベタベタな単語を使っても嫌味がない。「なっち」と「ハート」を組み合わせて「なっちんはーと」、なっちから連想される単語「トウモロコシ」と場所を意味する「村」を組み合わせて「もろこし村」など。
なるべくひらがなやカタカナを多用すると、可愛い感じになる。
今回は例として、マンガ「ラブひな」風に、「ラブなつ」と名付けてみる。

　漢字だけか、英語だけの名前が格好良い。「InnocentSmile」「NorthWind」「室蘭伝説」みたいな。
そのまま何かの商品名になりそうなネーミングにするのがポイントだ。
今回は北海道がテーマという事で、「室蘭伝説-Nacci-」と名付ける。

　ちょっとひねったカンジの名前が良い。
「キューティー」を「ＱＴ」と表記して「ＱＴ７２３」とか。
今回は夏がテーマなので、ハワイの有名な店「ABC STORES」をもじって「ABE STORES」と名付ける。

　それから、基本的にイラストや写真が色々入った「素材集」は、使えば使うほどダサくなるので使わない方が良いが、フォント集だけは持っていた方が良い。文字は本来とても美しい形状をしているので、ちょっと色や配置を考えてやるだけで、高価なツールや絵心が無くても凄く良いロゴデザインが出来上がる。

　断っておくが、もちろんタイトルロゴなど別に作らなくても構わないし、現にこの「AM」にロゴは無い。ただ一応、どんな方法でどんな風に作ると良いかを説明しておくだけの事である。

　試しに今回は、直接絵を描いたりせず、文字の色を少し変えてやる程度のアレンジで色々なロゴを作ってみよう。

　虹色の様にカラフルにすれば綺麗になると思うのは間違いで、１〜２色を基本に、濃淡を付ける位でデザインすると良い。もし寂しければ妙な立体化は避け、ちょっと影をつけてみたり文字を縁取りすると良い。
《サンプル》
難しい事はやってない。フォントにポップ調のゴシック体を指定して、可愛い色の基本であるピンクと水色のツートンで文字を書き、それぞれ少し濃い色で縁取りして、淡い影をつけただけのロゴだ。でも、それっぽく見えるだろう？！

白を基調にした、繊細でシックなデザインにしたい。
《サンプル》
白地に明朝体の白い文字で題名を書き、そこにグレーの影を落とせば出来上がり。
まるでエンボス加工された北海道名物のホワイトチョコの箱みたいだ。

これは、ハワイのABCストアのロゴをパクるだけなので、簡単。
《サンプル》
青い円を少し立体化して、文字を書くだけ。無茶苦茶チョロい。

　なお、最新CDのジャケットをそのままトップ画像にするのは、ありふれ過ぎるのでお薦めしない。
また「可愛くて気に入っている写真」ではなく、全体のデザインに合った画像を選ぶべきだろう。

　とりあえず四角い縁が見える写真は格好悪いので、なんとか加工したい。
一番一般的なのが、縁をぼかす手法。最近は自動的に加工してくれるグラフィックツールも多いので簡単だろう。
《サンプル》

　ロゴ同様、白い背景に溶け込んだ画像にすると格好良い。
背景をうまく消したり、ぼやけたカンジにしよう。
《サンプル》
縁が見えないと、画面全体が画像の一部の様に見えるので、綺麗な印象を与える。

　少々凝った加工が必要。写真を人物の部分だけ切り抜くとか、周りを色々と加工する必要がある。
《サンプル》
四角い画像を四角く見せないテクニックを駆使するか、または四角いまま、それを活かすデザインにするのがコツ。

　とりあえず素材集に入ってる様なテクスチャ関係は、一番最初のサンプルを見ると分かる通り問題外。
写真を何の加工もしないでそのまま使うのもアウト。
　無地の場合は、白や黒なら良いが、明るくカラフルな色の無地は避けたい。

　無地（単色）だと地味過ぎてイマイチ格好付かない 。特にパステルカラーで無地というのは、どうも垢抜けないというかシロウト臭いカンジになるので、何か背景になる画像が欲しい。
　もし素材集のデータを使うなら、淡い色のギンガムチェックや、星やハート模様みたいな単純なパターンの繰り返しになっている奴が良い。
下手に素材集から好みの画像を探すより、案外自分で作った方が早いので、是非試して見て欲しい。
《サンプル》
この位なら誰でも１分で作れるので、素材集から探すより早い筈だ。
ちなみに派手な絵柄のものや、写真画像などは、あまり背景にしない方が良いだろう。
特にキャプチャしたままの画像が背景にズラッと敷き詰められたページは、見てると目が痛くなるのでパス。

　基本的には無地が良い。または、極めてシンプルなパターンの繰り返しが良い。
写真なら、モノトーンやセピアカラーの奴を使うと良い。

　無地がベスト。だが、シンプルな幾何学模様でも様になる。
裏技としては、このページの背景同様、縦2ｘ横1ドットという極めて小さいgif画像を背景に指定すると、ボーダー（横縞）になって、モダンなカンジが出る。画像作成自体１分もかからない割に、かなり見た目が綺麗に仕上がる。
《サンプル》
小さすぎてよく見えないが、上が水色、下が青という２ドットの画像。
２色のバランスで雰囲気が変わるので、色々試してみると良い。また縦縞模様にしてみるのも良いだろう。

　詳しい手順は、各々が使っている「ホームページ作成ソフト」の説明書や解説書に譲るので、上手に作って欲しい。
とりあえず、全ての部品を組み合わせて一つの作品が出来上がる行程となるので、時間をかけて行うと良い。
また必要に応じて、前の段階に戻って素材の修正や追加を行う。
背景画像は画面全体を見ながら、色合いを少しずつ変えて、あれこれ試してみた方が良いかも知れない。

　最初にタイトルを置いた後、画像の横にメニュー項目を並べる。
《サンプル》
背景に画像を使う場合は、文字の色を背景で見えなくならない様に工夫するか、文字のある部分を無地にすると良い。
また、囲いの線を直線でなく点線などにすると、キュートさが増す。

　整然とした大人しいレイアウトか、ちょっと洒落てラフな感じの配置にすると良い。
《サンプル》
メニュー項目に少しずつスペースを入れて、斜め配置にしてみた。

　機械的にズラリと並べると良い。
下手な飾り付けはしないで、四角、丸、直線で画面を構成させると洒落た雰囲気が出る。
《サンプル》
無機質に並んだボタン類がモダンなカンジに見える。

一工夫したサイト名、
シンプルだが印象的なタイトルロゴ、
大きくなくても存在感のある画像、
１分で作れる背景画像、
そして、それぞれを上手く組み合わせたレイアウト…。
何も考えずに適当に画像を用意して、上から順に並べていた最初のページとは全然別物だ。

　色々なグラフィックが必要だっただろうか？！
アイコンやボタン類は全く使ってない。わずか２〜３個の画像以外は、全部テキスト文字だ。
もちろん素材集なども全く使っていない。

　カラフルに色を付けただろうか？！
「キュート」型は赤と青、「クール」タイプはグレーと白、「ポップ」タイプは青と白しか使ってない。
（青と水色などの細かい色合いの違いは、デザイン上は同系色として見なす）
「カラフル＝綺麗」という悪趣味かつ間違った認識は、そろそろパチンコ雑誌の表紙だけにして貰いたいものだ。

　高度な技術や時間が必要だっただろうか？！
紙に完成図のイメージを書いて、それをほんの１時間で可能なレベルで実現してみた。
「こんなページが作りたい」というビジョンさえあれば、簡単に出来る筈だ。

　特殊な機材やツールが必要だっただろうか？！
どこにでもあるWeb作成ソフトやグラフィックソフトの、マニュアルに載ってる程度の機能だけしか使ってない。
（まぁマニュアルすら読んでない人間は問題外だが…）
画像だって、拾い物や貰い物で代用する事が可能なので、スキャナやデジカメも不要。

　それでも、まだ納得してない人へ。
「AnotherMorning」のTOPページを観て欲しい。必要限度と思われる１点の画像を除いては、色とレイアウトを絶妙に工夫した表があるだけだ。表が作れて色が設定出来たり文字が書けるという、恐らくどんなWebページ作成ソフトでもひとつ持っていれば、誰でも作れるページだ。 メモ帳だけでも根性があれば作れる。
くれぐれも色々なグラフィックや動画を所狭しと並べて「素材の持ち味を殺す」駄目料理人みたいにならない様に。

　「自分にはセンスが無いから…」という人へ。
そう思うという事はセンスがある証拠。本当にセンスの無い人は、自分にセンスがあるかどうかも判断出来ない。
あとは、今までデザインに対してどれくらい興味を持ってきたかという事と、経験の差でしかない。
色々なデザイン…例えばCDジャケット、雑誌広告、ポスターなどを色々観察したり、実際に色々なページを沢山作ってみると良い。Webサイトを作ろうと思ったという事はクリエイティブ指向な訳だから、きっとコツを掴める筈だ。

<Top>

Next>>