|
|
ホームページはたくさんありますが、レイアウトは大きく2種類です。 そのレイアウトはサイトの内容により大きく変わってきます。 "ポータル系 情報量の多いサイトでは、よりたくさんの情報をわかりやすく伝えるため、ナビゲーション部分と本文を分けています。このネットマニアもそうですが、左にナビゲーション・右に本文というレイアウトを取っています。 こうすることにより、たくさんのページを簡単に移動することができます。 他には、左右にナビゲーションを持っていき、中心に本文というパターンもあります。 メニュー項目が多い、情報が多いなどポータルサイト・ニュースサイトによく見られるパターンです。 特に下に長いサイト(スクロールをする)はこのような作りがベストでしょう。 "独立系 次に1ページ独立レイアウト。デザイン系サイト・何かを伝えたいサイトに多いパターンです。 上部・下部にナビゲーションを持っていき、本文を大きく取る。写真を見せたい場合、商品を見せたい場合、情報量は少ないですが、その情報を的確に伝えたい場合は最適です。 "横幅固定・横幅100% 横幅はこの2つのパターンに大きく分けられます。 ヤフーのトップページは、横幅が固定されてますが、中へ入るとニュースやオークションでは100%表示になっています。どちらが良いとは言えませんが、私は横幅100%が苦手です。 レイアウトについては、自分の作ろうとしている内容に良く似たサイトを参考にすると良いでしょう。 レイアウトを間違えると、伝えたいことが上手く伝わらなくなります。
私が、サイトを作る際、当然ですがトップページから作ります。 そして、そのトップページデザインを基本とし、中身のページを作ります。 その為、全体のデザインを統一することが可能で、ユーザーに同じサイトということを伝えることができます。 これが、各ページのイメージが違ったらどうでしょうか? トップページを見て、クリックすると全然違うイメージのページへ飛ぶ。 同じサイト内であることはわかりますが、本当に同じサイトなのかわからなくなり、迷子になった気分です。 良くある広告リンクだらけのサイトと変わりなくなります。 全体のイメージを統一することでユーザーに優しいサイトとなります。 そして、メニューやホームへのリンク位置も必ず統一してください。 統一することにより、ユーザーの使い勝手がよくなります。 あるページでは、右上にホームリンクがあった。次のページに行ってもユーザーは同じ場所を探します。 それが、左に移動してたら使いづらいですよね? 同じ内容であれば、イメージを統一する。当然です。
"配色の重要性 色を上手に使う。 ココにセンスが大幅に影響します。 私もそうでしたが、最初の頃はやたら原色を使いまくります。 赤・青・黄色など、とにかく濃い色を。 そしてそれらを組み合わせようとしま す。 しかし、これが初心者デザインの第一歩なのです。 原色だらけのホームページ、色に統一性のないページはセンスがないばかりで はなく、ユーザーにとって見にくいサイトとなるのです。 私は、寝る前によくネットをしますが、そんな時に原色チカチカのサイトに出会うと腹が立ちます。 では、どんな配色をすれば良いのでしょうか? "中間色がカギ センスのある配色にする為には、中間色がカギとなります。 中間色とは、何かと何かの色を混ぜた原色とは逆の色を指します。 この中間色を上手く活用することで、デザインセンスのあるホームページを演出するのです。 中間色を使うとセンスが良くなると同時に、ユーザーに優しいページになります。 先ほどの経験であるように原色だらけのページはユーザーが嫌がります。 しかし、中間色を使うとユーザーに優しく、見やすく、センスの良いページと なります。 ネットマニアにある、クールサイト集をもう一度ご覧になってください。 どのサイトも中間色を上手く使っているのがわかると思います。 "色を選択する。 中間色を使うとなると、次に色の選択が重要となってきます。 色はそれぞれイメージがあります。 情熱の赤、涼しい青など色それぞれ性格を 持っています。 これは、サイト内容によって配色が変わってきます。 ご自身のサイトイメージに合わせて考えて見て下さい。 "色を抽出する。 色を抜き取る。この技術はホームページ作成において必須ワザだと思います。 ネットサーフィンをして、お気に入りのサイトに出会った。 この配色いいな。と思うことがあるでしょう。 しかし、それを見よう見真似で色を再現するのは至難のワザです。 近づけることはできるかもしれませんが 配色は少しでも違うと、違うイメージとなります。 そこで、私が愛用するのがPhotoshopです。 いいなと思ったサイトがあったら、スグに「Print screen」を押して画面キャ プチャを取得します。 その後、Photoshopを立上げ、ペーストすると、お気に入りのサイトがPhotoshop上に現れます。 そして、スポイトツールでお好きな部分の色をクリックするのです。 そうする とその部分に何の色が使われているかスグに判明します。 このワザを使えば、簡単にステキなサイトの配色を「マネ」ることができます。 配色の達人はホームページの達人です。是非マスターして下さい。
"基本的な目立たせ方 何かを伝える場合、それを目立たせないと相手には伝わらない。 教科書を見て勉強する場合、アンダーラインやマーカーを引いて目立たせる。 文中である部分を強調したい場合は赤で書く。 以上は基本的な目立たせ方。 ホームページを作る際、目立たせたい・伝えたいことがたくさん出て来る。 そうなると、半数以上の文字を大きくしたり、色を変えたりする場合がある。 しかし、これではユーザーに何を一番に伝えたいのかわからない。 何かを目立たせたい場合、それを目立たせる。 これが一般的な方法だが、もう一つ知っておきたい目立たせる方法がある。 コンパなどの飲み会で、女の子と飲む場合、自分を一番目立たせたいとき、どうするだろうか? 一番効果的な方法は、自分の身なりなどを変えるのではなく、目立たない友人と一緒に行くのが効果的だ。 一緒に行けば、必然的に自分が一番目立ってしまう。 この方法はデザインの世界でも共通するのだ。 "目立たせたいなら、他を目立たせるな。 ネットマニア どうでしょう?上記の「ネットマニア」という文字が目立ってると思います。 伝えたいことを目立たせる方法として 目立たせたいなら、他を目立たせるな。 という方法があります。 これはクールサイトに共通して言えることでもあります。 真っ白なサイトの真ん中に一行伝えたいことを書いたら、ユーザーは必ず目にします。 それは赤で書く必要もなく、太字にする必要もありません。 普通に書くだけです。それだけで、十分目立つのです。 他を目立たせないようにして、目立たせる方法は空白の使い方が最重要です。 何も書かないスペースに対して、何か書かないともったいない。 と思うのではなく、空白は十分サイトに対して役割を持っていると考えましょう。 あなたのサイトはどうでしょうか?伝えたいことが乱立してないでしょうか? いくら、トップページにたくさん書いたところで、ユーザーは全てを読みません。 読んで欲しいのならば、厳選してどうでも良いものをカットして下さい。 カットすればカットするほど、伝えたいことをユーザーが読みます。 クールサイトを作るためには、空白を上手に使いましょう。
何気なくやっていることでも、ちょっと工夫したら便利になります。 ファイル名はもちろん英語ですので、英語で付けた方がもちろんカッコイイです。 私は単語をあまり知りませんので、ファルダ名・ファイル名を付ける場合は大抵 「エキサイト」のテキスト翻訳を使います。 ここで、付けたい内容の英語を選びます。 綴りを間違える心配がないので便利です。 みなさんも綴りには気をつけて下さい。 ネットマニアもコラムという英語を以前 まで「colum」と書いて指摘されちゃいました。正確には「column」でした。 また、ファイル名を付ける場合はこんなページも用意していますので参考にして下さい。 "ちょっとした工夫 本題はここからなんですが、1つのフォルダ内にファイル数が多い場合のファイ ル名のつけ方です。 写真・イメージなど何個も作成する場合、「1.jpg・2.jpg・3.jpg」としてる あなた。 その付け方の場合、たくさんファイルが増えた時に以下のようになります。 http://netmania.jp/colum/sample/no.gif バラバラですね。これは、サーバーにアップロードした場合もこの並び順になり ます。 順番に付けていたハズのファイル名ですが、普通に付けた場合ケタが増える とバラバラになります。 " ケタを揃えましょう。 これを防ぐのは簡単なことです。予めケタを2ケタ又は3ケタにしておくのです。 ですから、最初につけるファイル名は「001.jpg・002.jpg」という具合になりま す。 この付け方ならば先ほどのファイルがバラバラになることはありません。 ちょっとした工夫ですが、後々ファイル整理が便利になります。
このページは文章が多いです。 この文章が多いページですが、その1語1語を全て読んでいただきたい。 それが私の思いです。しかし、思いがいくらあっても読みにくい文章は読みたくありません。 そこで、読みやすさを上げる為に実践したいのが3行ルール。 1つの文章を3行にするのです。つまり、のページのように3行・3行・3行という構成にするわけです。 3行と4行では大きな差があります。 3行というのは、上中下と分かり易く、どこを読んでいるのか認識しやすいのです。 これが4行になると、自分が4行のうちどこを読んでいるのか、3行ほど認識しやすくはありません。 小さいことですが、大きいことです。 |
| 1ヶ月1万円生活! | HOME | About | 報告感想掲示板 | サポート掲示板 | 管理人のWeblog | リンク | お問合せ | メルマガ | |
| Copyright © 2005 Net Mania. All Rights Reserved. http://www.netmania.jp |