第１２作目は、ブライダルフェア系サイト設計です。

全体に青を基調としたデザインです。黄色系をワンポイントとして使って、若々しく爽やかなイメージに仕上げました。
初夏の結婚式やリゾートウェディングなどのびったりなイメージです。

タイトルの文字は、あえてスクリプト系フォントを使用せず、ゴシック系の中でウェイトの軽いものを選び、文字間を空けることによって、やわらかい雰囲気を演出しています。

構造設計は、スタイルシートでの設計に拘っている為、スライスによる画像のはめ込みを行わず、上下のナビ以外の真ん中のコンテンツは、｢position:absolute」を使って3分割でマークアップし、それぞれ背景画像を設定しています。

第１１作目は、銀行系サイトの設計にトライしてみました。

この様な企業の場合は、信用の高さと堅実さを表すのと同時に、親しみやすさも兼ね備えた、万人にわかりやすいデザインにする必要があります。

銀行などの企業のなどにはそれぞれコーポレートカラーがあると思いますが、これを多用して同系色でまとめることによりサイトへイメージが固定出来ます。

又、 ヘッダ・フッタの帯、見出しのバーなど、目立ってほしいところにきっちりとコーポレートカラーを使用して設計しています。

構造設計は、10作目と同じようなスタイルで設計し、ナビゲーション部分やリンクの一覧などは、リストタグを応用する形で使用しています。

第１０作目は、旅行情報系のサイト紹介です。

各要素の分離を考えすぎると画面全体が煩雑になってしまいます。
そこでボーダーを極力使わずに要素を仕切り、画面をスッキリと見せるようにレイアウトを設計しました。

構造設計は、大きい骨組みとして上から｢フッター｣「コンテンツ｣｢ヘッダー｣の３つで構成され、真ん中の｢コンテンツ｣の中は、左側がフォームエリアと隣の右側がメインビジュアルを含んだ要素別のコンテンツになってます。
この右側の要素別に分けた入れ子のコンテンツは、3段組レイアウトを実現させています。

第９作目は、フラワーショップのサイト紹介です。

全体的に淡いトーンで、一見すると上品ですが配色にメリハリがなく印象が弱くなってしまいます。
そこで、印象の強いキーカラーをポイント的に使い、配色にメリハリを与えました。

構造設計は、メインのビジュアル画面は、Body定義で背景画像を設定しています。
その為、その部分の左側ナビゲーションは、「position:absolute」を使って領域の位置を固定しています。

その下のコンテンツは、左から「contentLeft」「contentRIght」の2段組レイアウトで構成され、「float」タグで左と右に回りこみをさせています。その下は、フッターにもサブでナビゲーションを設定しています。

第８作目は、高原リゾート系のサイト紹介です。

サイトベースカラーはそのサイトの印象を決定する重要な要素です。刺激の強い色は避け、自然を感じさせるような青緑・黄緑など、出来るだけ明度を抑えた色を選択しています。

設計構造は、大きいブロックから｢ヘッター｣、｢コンテンツ｣、｢フッター｣の３つから構成され、真ん中のコンテンツは、左側が｢ナビゲーション｣、隣の右側が｢メインコンテンツ｣となっています。

左側の｢ナビゲーション｣は、リストタグを利用して、説明付きんのリンクの為、1つのリストタグに2行ずつで構成され、右側の｢メインコンテンツ｣を回り込ませる為に｢float:left｣を定義しています。

又、その逆の右側の｢メインコンテンツ｣は、｢float:right｣で定義しています。

第７作目は、スタイルシート（CSS）による応用的な使い方として、領域の位置を固定的に使用する、「ポジショニング」を使った方法です。

Webアクセシビリティを実現するうえで、スクリーンリーダーや音声ブラウザといった、Webページを音声で伝えるようなツールでは、ページを読むたびに、このナビゲーション部分が読み上げられてしまい、重要なコンテンツ部分に到達出来ないケースが考えられます。

ナビゲーションの領域をHTMLページ内の下の方に記述しています。

この部分を「position:absolute」を使って絶対指定をしています。

第６作目は、３段組レイアウト設計の紹介です。

この手法は、限られたスペースに沢山の情報量を入れるケースで使われます。前回までの、２段組レイアウトを基に応用として、３段組にチャレンジしました。

上下のヘッダーとフッターは、従来通りですが、 真ん中のコンテンツの中身の３つのカラムの設計がポイントです。

左側２段目までは、｢float:left｣で左側に回り込ませて最後の３段目は、｢｢float:right｣を定義しています。

このスタイルシート（ＣＳＳ）での設計を本格的にポータルサイトやニュースサイト系での実用化に取り組んで行きます。

第２作目の基本型と同じタイプの設計になりますが、細かい設計を施しています。

左側のカテゴリーメニューと商品検索の入力フィールドは、別々にマークアップして、右側のコンテンツには、商品メニューに必要最小限度の形で、表テーブルを組み入れています。

テーブルでのレイアウトをしないことを原則に、必要とされる表形式でのテーブルを使用したお手本型設計です。

参考：ＷＥＢクリエイターズ２月号参照 　

スタイルシート第４作目です。

参考記事は、遡って１２月号ＷＥＢクリエータズＣＳＳデザインです。

２段組レイアウトは、行っていませんが、コンテンツの中身をどのようにしてレイアウトするかが大きなポイントになります。

見出しの下の説明文章は、段落毎に行間を設定して、右の写真画像とのスペースの設定も重要です。

２ページ目の宿泊プランでは、左記の１ページ目のコンテンツレイアウトを応用した形で、２段組レイアウト設計を施しています。

一番苦慮したのは、３ページ目のお問い合わせのＣＳＳ設計でしたね。ラベルと入力フィールドをそれぞれマークアップして、ラベルにfloatと clearの設定して、２段組のようなレイアウト設計をしました。

前作に続いて、ＣＳＳを用いた２段組レイアウト設計にチャレンジしました。

今回の製作は、３月号のWEBクリエーターズのＣＳＳデザインを参考しています。

マスターすれば、テーブルレイアウトよりも効率よくスピーディーに製作出来ることが、実感しました。

現段階では、ＣＳＳデザインをマスターすることを目的としているので、手の込んだことはしませんでしたが、本格的にサイト設計に導入するために、更なるレベルアップ向上を目指します。

FLASHなどを組み合わせながら、複雑なレイアウト設計にもチャレンジして行きたいですね。

第４作目は、第１作目をベースにＨＴＭＬソースは一切変更せず、外部のＣＳＳでデザインを変更しました。

企業系のサイトを意識した基本型レイアウトです。ボタンは、画像を使用せず、ロールオーバーした時の凹みボタンもＣＳＳのみで設計しています。

勿論、ケースによっては、画像を使用しても使いまわしが出来るのがＣＳＳのメリットです。

ＣＳＳ使用のメリットを生かした企業系のサイト製作に力を入れて行きたいと思っています。