カスタム検索

Webページのレイアウト

コンセプトが固まればレイアウトを決めましょう。ただし、HTMLおよび、XHTMLは完璧なレイアウトをするための言語ではないので、おおまかなもので構いません。配置のカッコ良さよりも表示したいことをどのような順番で表示させるかということがここでは重要だと思います。

この段階ではまだトップページのレイアウトは考えません。多くの場合、トップページはWebサイト内の個々のページにリンクした目次のような形式になることが多いからです。個々のページがどのくらいの数になるかによって、トップページのレイアウトも変化するものです。この時点では個々のページ数はまだ予想できません。個々のページがある程度完成した時点で考える方が作業の流れとして自然です。

スケッチ

頭の中にあるレイアウトは、スケッチしておきましょう。スケッチは手書きのもので十分だと思います。

レイアウトをスケッチしておけば、それを基にタグを記述してけば良いので、タグを記述することに専念することができます。

スケッチの例

スケッチの例

ページを見ながら料理することが考えられるので、あまりスクロールしなくても済むように、1ページにつき、表示するのは1つの料理だけとします。

配置の順番として、

  1. 材料とその分量
  2. 作り方
  3. 備考

は、ごく自然な流れだと思います。

材料の表示の近くに仕上がりの画像を配置したのは、仕上りの画像からどんな材料をどの程度、どのように使用するかということを分かりやすくするためです。

CopyLeft 2017 Webデザインレッスン プライバシーポリシー サイト管理者に連絡