DESIGN & LAYOUT
基本構造をもとに、
お客様ごとのデザインへ
クオリティWebデザインでは、ホームページの基本となるレイアウト構造をもとに制作を進めます。
あらかじめ決まっているのは大まかな構造で、完成したデザインをそのまま使うテンプレート制作ではありません。
カラー、画像、文字、余白、各パーツの見せ方などを調整し、お客様の業種やイメージに合わせたホームページへ仕上げます。
BASIC STRUCTURE
決まっているのは「骨格」だけ
多くのホームページは、ヘッダー、メインビジュアル、コンテンツ、フッターといった共通する基本構造で作られています。
その基本構造を効率よく利用することで、制作工程を抑えながら、デザインや内容にはしっかり個性を持たせます。
01
基本構造を効率化
ページの土台となる構造をあらかじめ整理することで、制作工程を効率化しています。
02
デザインは個別に調整
カラー、写真、文字、余白、装飾などは、お客様の業種やご希望に合わせて調整します。
03
ご希望のイメージにも対応
「このサイトのような雰囲気にしたい」など、参考サイトをもとにしたご相談にも対応します。
MAIN VISUAL
メインビジュアルの基本レイアウト
ページを開いたときに最初に目に入るヘッダーやメニュー、メインビジュアルの配置を選びます。
実際の制作では、サイトの内容やメニュー数に合わせて最適な形をご提案します。
TYPE A
ヘッダー → メニュー → メインビジュアル
ロゴや連絡先などを表示するヘッダーの下にメニュー、その下にメインビジュアルを配置するオーソドックスな構成です。
TYPE B
ロゴとメニューを横並び
ロゴとメニューを同じ高さに配置し、ヘッダーをすっきり見せる構成です。メインビジュアルと重ねるデザインにも対応できます。
TYPE C
メインビジュアルを大きく見せる
写真やビジュアルを大きく見せ、第一印象を重視する構成です。店舗やサービスなど、イメージを伝えたいサイトにも向いています。
TYPE D
メニューをボタン内に格納
メニュー項目が多い場合などに、ボタンを押してナビゲーションを開く構成です。画面をすっきり見せることができます。
COLUMN
コンテンツ部分のレイアウト
メインビジュアルより下のコンテンツは、掲載する情報量や目的に合わせて構成します。
1 COLUMN
1列レイアウト
コンテンツを上から順番に見せる構成です。画面を広く使え、スマートフォンとの相性も良いため、現在では多くのホームページで利用されています。
2 COLUMNS
2列レイアウト
メインコンテンツとサイドエリアを横に並べる構成です。カテゴリーや関連情報などを常に表示したい場合に適しています。
FLEXIBLE
ページごとの組み合わせ
すべてのページを同じ構成にする必要はありません。ページの内容に応じて1列・複数列を組み合わせることもできます。
※追加料金が発生する場合があります。
WIDTH
ページ幅も内容に合わせて調整
ブラウザいっぱいに広げる部分と、一定の幅に収める部分を組み合わせてデザインします。
固定幅
文章などのコンテンツ幅を一定の範囲に収め、画面が大きい場合は左右に余白を設けます。
全幅
背景や画像などをブラウザの横幅いっぱいに広げ、画面を大きく使うデザインです。
固定幅＋全幅
文章は読みやすい幅に収めながら、背景や写真だけを全幅にするなど、両方を組み合わせる方法です。
COLOR
イメージカラーも
自由にご相談ください
「青を基調にしたい」「白を中心に清潔感を出したい」「落ち着いた雰囲気にしたい」など、大まかなご希望だけでも構いません。
会社や店舗のロゴ、業種、掲載する写真などを見ながら、全体の配色をご提案します。
大まかなイメージだけでもOK
「明るく」「高級感のある感じ」「やさしい色合い」など、具体的なカラーコードがわからなくても問題ありません。
細かなカラー指定にも対応
背景色、文字色、見出し、ボタンなど、ブランドカラーやご希望の色が決まっている場合は細かく指定していただけます。
CUSTOMIZE
同じ構造でも、完成する
ホームページは大きく変わります
レイアウトの骨格が同じでも、使用する写真、カラー、文字、余白、見出し、ボタン、コンテンツの内容によって印象は大きく変わります。
業種や会社ごとの特徴を反映しながら、一つひとつデザインを調整していきます。
写真・画像
お客様からご提供いただいた写真や素材を使用するほか、必要に応じてホームページに使用する写真・画像を1サイトにつき8枚までご用意できます。
文字・見出し
文字サイズや太さ、見出しの装飾などを調整し、内容を読みやすく整理します。
余白・パーツ
余白やボタン、枠線、背景など細かな部分を調整することで、サイト全体の雰囲気を整えます。
REFERENCE
参考にしたいホームページが
あればお知らせください
「このホームページの雰囲気が好き」「このような見せ方にしたい」といった参考サイトがあれば、制作前にお知らせください。
そのままコピーするのではなく、参考となる要素を確認しながら、お客様のホームページに合う形へ調整します。
SUMMARY
基本レイアウトを活用しながら、オリジナルのデザインへ
クオリティWebデザインでは、ホームページの基本構造を効率的に利用しながら、カラー、画像、文字、余白、各種パーツをお客様ごとに調整します。
決まった完成デザインへ内容を当てはめるのではなく、ご要望や業種に合わせて一つひとつ仕上げていきます。