読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

フルードレイアウト

レイアウトの設計

  • 「article」を「main」に変更します


f:id:web-design-lesson:20170129022049p:plain

f:id:web-design-lesson:20170129022210p:plain

  • 画像は、適宜作成すること
  • main「1000 x 300」
  • 01「620 x 300」
  • 02「300 x 120」
  • 03「300 x 120」
Responsive Web Design

HOME
ABOUT
SAMPLE
TIPS

ウェブは柔軟な媒体である
テキスト文書だったWebをデザインするようになって間もない頃は、デスクトップパブリッシングの技術を参考にしてきました。
そして制約されたサイズの中でデザインする印刷物のデザインがWebデザインの主流となりました。
しかしそもそもWebと印刷物は異なる媒体です。
長い時間を経て、印刷物のデザインは制約されたサイズでのデザイン技術を高めましが、そのままWebに反映できる技術ではありませんでした。
Webは制約された媒体ではありません。環境によって縦横に変化する柔軟な媒体です。
今までのWebデザインで固まった固定概念と、ピクセルパーフェクトの制約を壊してもっと柔軟になるべき時です。

全てをコントロールできない
Webサイトにアクセスできるデバイスは多様化し、それを使う環境・シチュエーションも多様化しました。
入力方式もマウスからタッチデバイス、カメラを使って手さえ触れずに操作することも可能となりました。
Webサイトを閲覧するブラウザはユーザーがカスタマイズして使うことができます。万人に全く同じような体験を提供することは実質的に不可能です。全てを制御しようとしないことです。
人によって多少の見え方の違いや使い方の違いも許容できるような柔軟な思考が必要です。

情報を適切に届けること
柔軟な媒体であり、こちらから全てをコントロールすることもできない。
では、環境により提供するコンテンツも異なって良いのでしょうか?
ユーザーがサイトにアクセスする理由はそのサイトのコンテンツを閲覧することが目的です。
もしそのコンテンツを適切にユーザーに届けられないのであればそのサイトの価値はなくなってしまいます。
閲覧するデバイスや環境で多少その構造が変わったとしてもサイトの核であるコンテンツは適切にユーザーに届けなければなりません。
コンテンツファースト。コンテンツから考え、コンテンツを最優先に設計しましょう。
そしてどの情報をどの形でどのように届けるのが最適であるのか。難しい問題ですが常にチャレンジし続けることで解が見えてくるでしょう。

Headline
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate

Headline
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate

Copyright (c) Responisive web design

レイアウト枠を決定

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fluid Layout</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<header>

<nav>

</nav>

</header>

<div id="content">

<main>

</main>

<aside>

</aside>

</div><!-- /#content-->

<footer>

</footer>

</div><!-- /#container -->
</body>
</html>
header + nav

f:id:web-0818:20170228103553p:plain

<header>
<h1>Responsive Web Design</h1>
<nav>
<ul class="gnav">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SAMPLE</a></li>
<li><a href="#">TIPS</a></li>
</ul>
</nav>
<div id="mainImage">
<img src="img/main.png" alt="">
</div>
</header>
main + aside

f:id:web-0818:20170228110924p:plain

footer

f:id:web-0818:20170228111528p:plain