レスポンシブWebデザイン - 演習
デザインの基本4原則
デザインの基本は以下の4原則に沿ってレイアウト・デザインする事が大切です。
整列
ページ上のものはすべて意識して配置しなければいけません。すべての要素配置が視覚的につながりを持つように意識します。これによりページの一体化と組織化を狙います。空間的に離れていても揃えることができる要素を見つけましょう。
テキストを整列させるとき、中央揃えは無難ですが、退屈なデザインになりがちなので意図的に使用しない限り避けます。
近接
関連する要素を近づけて視覚的ユニットを形成します。それだけで自動的に情報の組織構造ができあがります。
ページをぼーっと眺めてみて視線が止まった回数が5つ以上になるような場合は、近接化によるグループ化を狙います。
対比
異なる要素を配置するときは視覚的にもはっきりと異なるようにします。臆病になってはいけません。力強くはっきりと違うようにするのです。
コントラストは視覚的なおもしろさを作り出します。さらに情報の組み立てがはっきりするため情報の焦点を合わせやすくなります。
反復
視覚的要素を反復することで、孤立している要素同士が一体化されます。また、視覚的なおもしろさに繋がります。
貫性のある要素を少し際立たせることでグラフィックデザインとして成立するようになります。 ただし、あまりにも反復させすぎると強迫的なものになるので注意します。
HTML記述例
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<header class="header">
<h1>デザインの基本4原則</h1>
<p>デザインの基本は以下の4原則に沿ってレイアウト・デザインする事が大切です。</p>
</header>
<main class="main-content">
<ul>
<li>
<h2>整列</h2>
<p>ページ上のものはすべて意識して配置しなければいけません。すべての要素配置が視覚的につながりを持つように意識します。これによりページの一体化と組織化を狙います。空間的に離れていても揃えることができる要素を見つけましょう。<br>
テキストを整列させるとき、中央揃えは無難ですが、退屈なデザインになりがちなので意図的に使用しない限り避けます。</p>
</li>
<li>
<h2>近接</h2>
<p>関連する要素を近づけて視覚的ユニットを形成します。それだけで自動的に情報の組織構造ができあがります。<br>
ページをぼーっと眺めてみて視線が止まった回数が5つ以上になるような場合は、近接化によるグループ化を狙います。</p>
</li>
<li>
<h2>対比</h2>
<p>異なる要素を配置するときは視覚的にもはっきりと異なるようにします。臆病になってはいけません。力強くはっきりと違うようにするのです。<br>
コントラストは視覚的なおもしろさを作り出します。さらに情報の組み立てがはっきりするため情報の焦点を合わせやすくなります。</p>
</li>
<li>
<h2>反復</h2>
<p>視覚的要素を反復することで、孤立している要素同士が一体化されます。また、視覚的なおもしろさに繋がります。<br>
貫性のある要素を少し際立たせることでグラフィックデザインとして成立するようになります。 ただし、あまりにも反復させすぎると強迫的なものになるので注意します。</p>
</li>
</ul>
</main>
</div>
</body>
</html>
@charset "UTF-8";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul, li {
list-style: none;
}
body {
color: #333;
font-size: 16px;
font-family:
"Helvetica Neue",
Arial,
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
Meiryo,
sans-serif;
line-height: 1.0;
}
.container {
padding: 0 20px;
}
@media screen and (min-width: 768px) {
.container {
max-width: 1000px;
margin: 0 auto;
}
}
.header {
padding: 50px 1em;
margin-bottom: 40px;
background-color: #727272;
color: #fff;
text-align: center;
}
.header > h1 {
margin-bottom: 20px;
}
.header > p {
line-height: 1.5;
}
.main-content li {
margin-bottom: 30px;
padding: 20px;
border: 1px solid #aaa;
border-radius: 10px;
}
.main-content h2 {
margin-bottom: 20px;
padding: 10px 16px;
background-color: #e2e2e2;
}
.main-content p {
line-height: 1.7;
}
@media screen and (min-width: 768px) {
.main-content > ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.main-content li {
margin-bottom: 0;
padding: 30px;
}
}
