レイアウトＡ
レイアウトＢ
レイアウトＣ
レイアウトＤ
レイアウトＥ
特徴
各パーツをだるま落としのような構成で、上部から順に重ねていくレイアウト
となります。ナビゲーションメニューが上部に設置されているシンプルな構成
となっているので、閲覧者は迷うことなくコンテンツを選択できるデザインです。
メインコンテンツ部分が大きくメインコンテンツ内での様々なレイアウトに対
応可能なものとなっており、シンプルな並びでありながら、多くの構成を可能
にするレイアウトとなっています。
メリット
シンプルな構成
メインコンテンツ部分のレイアウト自由度が高い
デメリット
下に伸びて行きすぎると、ナビゲーションメニューの操作が扱いずらい。
特徴
ナビゲーショメニューが上部とサイドの2個所となるレイアウトとなります。
コンテンツ数が多い場合や、コンテンツを増やしたい場合などに利便性の高い
ものとなり、情報を多く載せたい場合などに利用しやすいレイアウトとなりま
す。2個所にナビゲーションメニューがあることで、閲覧者は迷うことなくコンテ
ンツを選択できしっかりとした印象のデザインとなります。
メインコンテンツ部分は、お好みのレイアウトで構成が可能なので多くの業種
で対応可能なデザインとなります。
メリット
アクセシビリティーがよい。
拡張性のあるデザイン。
デメリット
奇抜なデザインになりにくい。
インパクトが与えにくい。
特徴
画面上部に大きくイメージ画像やFLASHなど、伝えたいイメージやメッセー
ジを大きく表示することにより、企業イメージや商品イメージ等を強くインパ
クトのあるものや、印象的な表現にすることが可能となります。
季節ごとや、新商品紹介などのキェンペーン告知等の広告的戦略としても
利用可能であり、ブランディング力も高めるデザインともなります。
メリット
伝えたいイメージをインパクトのある形で表現できる。
広告的な利用ができる。
ブランディング戦略としても利用可能。
デメリット
コンテンツ部分の印象が薄くなる可能性がある。
特徴
イメージ画像をボタンにすることで、閲覧者に直感的にコンテンツ内容を感じ
てもらうことができます。イメージとテキストを組み合わせてボタンにするこ
とで、すっきりとしたデザインとなります。ボタンの数はお好みの数まで増や
すことも可能です。テキストとボタンが一体になっていることで、見た目もす
っきりとまとまった印象になるデザインとなるでしょう。
メリット
コンテンツの内容がイメージ画像となっているのでイメージしやすい。
全体的にまとまったイメージとなる。
デメリット
テキスト挿入部がやや少なくなる。
インパクトの欠けるデザインとなりやすい。
特徴
全面にＦＬＡＳＨやイメージ画像を配置することで、インパクトのあるものやブ
ランディング力のあるサイトとなるページとなるでしょう。奇抜なデザインや、
強烈なインパクトのデザイン、シンプルなデザインなどの様々なデザインが
可能となるレイアウトとなります。
メリット
インパクトのあるデザインとなります。
オリジナリティのある個性的なデザインとなります。
デメリット
基本的にボタンデザインは自由です。
ボタンのデザインやカラーはＷＥＢサイトのデザインの一部ですから、お客様のご要望を汲みとり全体のバランスを考えてご提案させていただきます。
カラーに関してはＷＥＢセーフカラー（２１６色）から使用します。ご希望のデザインやカラーなどがありましたらご指定いただくことも可能です。
ロールオーバーの指定も可能です。
マウスのポインター（矢印）があたった時に文字の色・ボタン自体の色・ボタン枠の色などが変化させることを「ロールオーバー」と言います。
単独のボタン以外にもサイト上部の「ヘッダ」・サイト下部の「フッダ」文章内の文字をクリックできる「テキストボタン」などをボタンとして利用できます。
実際のデザインは多種多様ですが、参考までにいくつかのデザインについてご説明します。
下記のボタンにはそれぞれ「効果」がかけてありますが、どのボタンにも様々な「効果」をかけることができます。
効果や色によってボタンの印象は大きく変わり、サイトの印象も変わります。
【もっともオーソドックスな角型ボタン】
左の物は「効果」として立体感が付けてありますが平面の物も多用されています。
ビジネステイストやクールで落ち着いた雰囲気のＷＥＢサイトを制作したい時などに適しています。
ボタンの総数が増えても全体のバランスを崩さずレイアウトできます。
縦・横どちらに並べてもおさまりが良く、入れる文字数が多目でも対応できるのが特徴です。
【角型ボタンの角を丸くしたボタン】
Ａボタンと同じ使い勝手で多少柔らかい印象になります。
立体感「効果」の付け方は上記の物とは変えてあります。
ボタンの総数が増えても全体のバランスを崩さずレイアウトできます。
縦・横どちらに並べてもおさまりが良く、入れる文字数が多目でも対応できるのが特徴です。
【お洒落な角なし横長ボタン】
サイト全体がお洒落な印象になります。
固い印象をさけたい場合に多用されています。
「効果」は立体的で透明感のあるものがかけてあります。
縦・横どちらに並べてもおさまりは良いですが、ボタン同士の間隔は角型に比べてひ広めの方が
バランスが取り易い傾向にあります。
【個性的なステッカー型ボタン】
デザイン性に優れてハイセンスな印象を与えます。
ボタンＣに比べるとシャープな印象のサイトになります。
「効果」はボタンＡと同じものがかけてあります。
縦に並べることに問題はありませんが、横に並べる場合バランスが取り辛く、
またボタン数の多いデザインにはやや不向きです。
【ポップな丸型ボタン】
かわいらしく、ポップでサイト全体が明るい雰囲気の印象を与えます
。
「効果」はボタンＣと同じものがかけてあります。
縦に並べることに問題はありませんが、横に並べる場合は大きさや色など工夫が必要です。
他のボタンに比べて、入れる文字数は少な目になってしまうのが欠点です。
【テキスト型ボタン】
正方形や長方形の枠の中に画像や文字（テキスト）などを並べることによって、コンテンツ説明や
記載文章自体がボタンとして機能するボタンです。
トップページに多くの情報を載せたり、興味を引く文章から直接コンテンツに誘導したい場合などに
向いています。メインコンテンツ部分全面を分割して使用することができるので、サイドボタンなどを
置きたくない場合にも使用されます。
カラーセレクト
WEBサイト独自の特徴を作るためにはレイアウトも
さることながら、カラープランが大きく影響します。
配色は重要な役目を果たし、見た目の印象に大きく
作用します。弊社ではWEBセーフカラー、216色から
お選び頂いております。216色のなかから、企業イメ
ージカラー、ボタンカラー、フォントカラー等をお選
びください。
WEBセーフカラーとは
256色表示のWindowsとMacintoshでほぼ同じに見え
る216色をWEBセーフカラーと言います。残りの40色
は、WindowsとMacintoshそれぞれ見え方が異なるた
め、印象が変わってしまいます。したがって、ホームペ
ージを作成する際には、可能な限りこのWEBセーフカ
ラーで配色いたします。
