contents

パンくずリスト

HOME > HPの作り方 >> デザインイメージ

メッセージエリア

デザインイメージ
さて。ココではデザインイメージについてお話します。
前の【サイトイメージ】で、どんなコンテンツのサイトを作るのかというイメージができましたね。
続いては、どんなデザインのサイトを作るのか、をイメージしてみましょう。
おそらく、このページを読んで下さってる方は、初めてHPを作ろうと思っている方が多いと思います。
なので、あまり難しい話はおいといて…というわけにはいかない部分もありますが…^^;

まず、ココでも大まかなイメージを思い浮かべましょう。
より扱いやすい(手直ししやすい?)サイト作りを目指そう!! というのがコンセプトなので
あとから変えることはある程度できるような作り方を説明していきますが
まずは、外す事の出来ないデザインの要素は以下の通りです。
サイトの表示されるサイズ
基調となる色
文字の大きさ、種類、色
リンクを開く時に同じ場所に表示するのか新しいウインドウを開くのか
フレームを使用するのか
訪問者のブラウザを考慮するのか
以上5項目は、初めにある程度決めておいたほうが良いでしょう。
そして、サイトへの訪問者を増やす、【アクセスアップ】を考慮するなら
まず、サイトを作り始める前に アクセスアップ を一読しておいて下さい。
アクセスアップの秘訣がいくつか書いてあります。
最初にそれらを頭に入れて作り出すと、あとから手を加える部分や修正が少なくなるはずです。


サイトの表示されるサイズ

訪問者のモニターのサイズによったり、ブラウザの初期設定で開くウインドウのサイズが設定されていたりで
見る人によって開かれ方は様々です。
大きな表示サイズのページを作ったとしてもブラウザが判断し、自動的にスクロールバーを表示してくれるので
サイトが見れないということはほぼありません。(例外もありますが)
スクロールさせてもらってでも、表示させたい内容を1ページに収めてつくるのか
ある程度の大きさにとどめておいて、スクロールしてもらわなくても全て見れるようにするのか。
簡単に言えばそういうことです。
商用サイトなどで、アクセシビリティを考慮したりする場合、
他の要素も含めて少し神経質にサイトを構成しないといけませんが
個人的なサイトである場合は、自分の好みでかまわないと思います。

HYSKOAの場合は、どちらかというと最初に表示してもらった状態である程度みれるように、を前提に作ります。
サイト内のリンクページに飛んでも、最初に開いたのと同じ状態で見れるようにする事が多いですね。

自分が色んなサイトさんを訪問してみて、サイト内が動きやすいな…と感じた構成が
自分の好みかもしれませんよ。
ページTOP
ひとつ前のページに戻る

基調となる色

サイトの基調となる色を決めておきましょう。
白が基調のサイトに仕上げるのか、黒が基調のサイトに仕上げるのか。あるいは、パステル系にするのかなど
サイトのイメージカラーを決めておくとよいでしょう。
全体を統一するのか、サイト内のカテゴリーで基調となる色を変えるのかなど
あらかじめ決めておいて作業にとりかかるとよいでしょう。
ページTOP
ひとつ前のページに戻る

文字の大きさ、種類、色

文字のサイズや種類、色などもあらかじめ決めておきましょう。
このサイトでは、ベースにはMS UI Gothic≠ニいうフォントを使っています。サイズは12pxです。
白が基調なので黒い文字が多いと思います。

文字同士の間隔や、行の間隔などもありますが
サイトのイメージにあった文字の大きさと種類を考えておきましょう。
又、前項目でありました基調となる色にあった文字の色を決めましょう。
当然ですが黒が基調のサイトに黒い文字や濃いグレイの文字はあいませんよね。
白やシルバーなどが一般的ですが、白とシルバーでさえも実際サイトを構成してみると、
イメージが変わるものですよ。
ページTOP
ひとつ前のページに戻る

リンクを開く時に同じ場所に表示するのか新しいウインドウを開くのか

サイト内でリンクを貼る時に、そのリンクをどこに表示するかということです。
新しいウインドウで開くようにすると、元のページは表示されたまま残ります。
しかし、リンクを開くたびに沢山のウインドウが開かれていくということになります。
同じ場所に開くようにすると、元のページは消えてしまいます。
元のページに他のコンテンツのメニューなどがあった場合には
ブラウザの戻る≠ナ戻らないとメニューから新しいコンテンツに移動できません。
それを防ぐ為には開かれる全てのページにメニューを記述しておかなくてはいけません。
(ただし、次の項目でお話しする【フレームを使用するか】というこのフレーム=B
 フレームを使う事によって、同じページに表示しても
 元のページで表示されていたメニューはそのまま表示されるようになります。)

どちらがいいのかは、これも好みだと思います。
HYSKOAは基本的にあまりカーソルをあちらこちらに移動させるのは好きではないので
極力同じ場所に表示されるようにしています。
なるべくブラウザの戻るボタンや閉じるボタンもつかわないでいいように、と作っています。
ページTOP
ひとつ前のページに戻る

フレームを使用するのか

前項目でお話した
【リンクを開く時に同じ場所に表示するのか新しいウインドウを開くのか】 に関係するのですが
同じページに表示させる場合
実際には同じページではなく、元のページと同じようなページを新しく読み込んで表示させる場合と、
フレームを使って表示させる場合とがあります。
新しく読み込む場合はメニューなどの配置を元のページと同じように作り、内容だけを変えるという事です。
見た目は内容だけが変わったように見えますが、実際は新しいページを読み込んでいることになります。
しかし、フレームを使う場合だと、新しく読み込まれるのはリンクページのみであって
例えば最初に表示されるメニューなどはそのままの状態、といった具合になります。
ようは、画面を分割させて、読み込みたいファイルのみを指定した分割画面に表示するわけです。
フレームを使う場合は、フレームに対応していないブラウザがあることや
元あるものはそのまま残るので、読み込むファイルが残っているページとマッチするかどうかなどを
考慮しないといけません。
そして、これは大切なポイントですが
フレームを使ったページはSEO対策としては不向きだということです。

SEO対策についてはコチラ ⇒ SEO対策

ちなみにHYSKOAはフレームもインラインフレームも大好きですので、よく使いますが^^;
ページTOP
ひとつ前のページに戻る

訪問者のブラウザを考慮するのか

ブラウザだけでなくマシンもそうなのですが
今はWindowsでInternet Explorer使用というのが約9割と主流ですが
中にはMacを使っていたり
Internet Explorer以外のブラウザ(FirefoxやOperaなど)を使用している方もみえます。
全ての人に対応したサイトを作るというのは非常に難しいと思います。
なので、そういう方には「頑張って下さい。。」としか言えません。 >HYSKOAには無理です^^;
スタイルシートやJavaScriptなどを使うと、対応していないものもあったり
それだけでなくテーブルタグなんかでも、ちょっとしたことでサイズが変わっちゃったり崩れたりする事もあります。

なので、最低限でも推奨環境を記述しておくとよいでしょう。
推奨環境以外では表示できないものや崩れてしまうものもあるのだという事を
キチンと訪問者の方にわかるように記述しましょう。
又、ある程度、何種類かのブラウザでの表示は自分で確認しておくのもよいでしょう。


ページTOP
ひとつ前のページに戻る
サイトイメージ アウトライン作成