サイト作成の前にレイアウトを考えよう

さて、本サイトを作成する前に、いくつかのサンプルサイトを作成せねばならない。

「どれがいい?」

「う~んこのデザインかな~」

くらいなところから始まって、そこから尾ひれ背びれをつけていくのだ。

 

まずは、どんなレイアウトがあるのかを知っておかなくてはならない。

おおまかなサイトのレイアウトは4つ以上に分かれている。

最初に見せるページをトップページと呼ぶのだけど、このペラッとしたページで説明すると

上部=ヘッダー

下部=フッター

真ん中=ボディ

その中でも

右か左の縦の枠=サイドバー

メインコンテンツ=サイドバー以外のメイン領域ということ。

一般的なのはこんな別れ方。

しかーし!!!

別れているというだけで、ゼロからやるわけでパターンというのは無尽蔵にあるわけで。

「わからないから♪」

といわれると思わずニヤけて遠くを眺めて途方に暮れてしまうのだけど、そうもしていられない。

無理矢理にでも手近なところからデザインをひねり出す必要があるのだ。

あなたも初めてのサイトをつくる場合は絶対にコレだけは決めておかなくてはデザイナーを泣かせることになる。

なぜなら、区画の割り振りをレイアウトというのだけど、それが途中でまるっきり変わってしまうとほぼ最初からやり直すのと同じくらいの手間ひまがかかってしまう場合があるからだ。

で、大まかなレイアウトをちょっとだけ細かく分けていくとすると

サイドバーがないのが1カラムレイアウト。ペラ~~~っと上から下まで流すタイプ。

サイドバーがあるのが2カラム。右とか左とかが選べる。サイドバーが左右にあるのが3カラム。

 

企業ならともかくあんまし横幅を3つに分けると情報が多すぎて見てほしいものを手にする前にページを離れてしまって収集がつきにくい。

今回は2カラムと1カラムで、もちろんレスポンシブといってスマホやタブレットの幅に合わせて表示が変わるようにしたいと思う。

 

商品画像に自分の影を落とさないで~

ところで。

ふたたび料理の写真が送られてきた。

しかーーーし!!!!

前より若干ひどくなっている(号泣)

か、影が・・・

お皿にスキマが・・・

卵がはみ出ている~~

 

わざとじゃないから仕方ないのだけど

 

どうしようコレ~~~T-T

手前の影、コレ消せるだろうかーーーーー

ゴフッ・・し、しぬ~~~  …   ..   .    ..   .>=◯=(フェードアウト)

はみだした卵つぶれたフォルム皿のスキマどーにかなるだろうか~~

うおおおおおお・・・・・

 

しかし写真が入らないことにはどうすることもできない!

また今夜も徹夜でつか・・・

がんばりまふ。。。

息抜きに他のサンプルサイトいじりながらやろう。

 

つづく。