初めまして。システム事業部のWebデザイナー小林です。

未経験からWebデザイナーを目指す人に向けて初歩の初歩、<span class=”s1″>Web</span>サイトの一般的な構成をご説明したいと思います。

&nbsp;

&nbsp;
<h2>一般的なWebサイトの構成</h2>
<p class=”p1″>一般的な<span class=”s1″>Web</span>サイトは以下の要素で構成されています。</p>
&nbsp;
<p class=”p1″>ヘッダー(<span class=”s1″>Header</span>)ナブ(<span class=”s1″>Nav</span>)メイン(<span class=”s1″>Main</span>)フッター(<span class=”s1″>Footer</span>)です。</p>
<p class=”p1″>これがそれぞれどの部分を指すのか説明しますと<span class=”s1″>…</span></p>
&nbsp;
<p class=”p3″><span class=”s2″>◆</span><span class=”s3″>ヘッダー(</span>Header<span class=”s3″>)</span></p>
<p class=”p1″><span class=”s1″>Web</span>サイトの一番上の部分</p>
<p class=”p1″>例)企業サイトであれば企業ロゴが入ったり、ブログサイトのタイトルなどがよく表示される部分</p>
&nbsp;
<p class=”p1″><span class=”s2″>◆</span>ナブ(<span class=”s1″>Nav</span>)</p>
<p class=”p1″>ナビゲーションボタンの略。サイトに複数あるボタン部分。</p>
<p class=”p1″>横並びのボタンなら大体ヘッダーの下あたりに来ることが多いかな?</p>
<p class=”p1″>例)企業サイトなら会社概要、採用情報など。お店サイトなら<span class=”s1″>MENU</span>やアクセスなどのボタン部分。</p>
&nbsp;
<p class=”p1″><span class=”s2″>◆</span>メイン(<span class=”s1″>Main</span>)</p>
<p class=”p1″>メインビジュアル部分。大きく宣伝したい写真や文字などが表示されるところ。</p>
<p class=”p1″>例)お店サイトなら外装や料理の写真、企業サイトなら自社で推したい主力商品の写真など目を引く部分。</p>
&nbsp;
<p class=”p3″><span class=”s2″>◆</span><span class=”s3″>フッター(</span>Footer<span class=”s3″>)</span></p>
<p class=”p1″><span class=”s1″>Web</span>サイトの一番下の部分。</p>
<p class=”p1″>例)<span class=”s1″>Copyright</span>@~なんちゃらと記述があったり、お問い合わせ、個人情報の取り扱いなどのボタンがあったり</p>
<p class=”p1″>する部分。サイトによってはそう言った記述やボタンがなかったりもします。</p>
&nbsp;

&nbsp;

&nbsp;
<p class=”p1″><span class=”s1″>Web</span>デザイナーはサイトを作る時にワイヤーフレーム(大まかな配置をどうするか描いた設計図)を</p>
<p class=”p1″>作るのですが一枚の紙の中でここにヘッダー、ここにメインと描いて構成をまとめます。</p>
&nbsp;
<p class=”p1″>皆さんがよく見るサイトも大体の場合この要素で構成されているはず。</p>
<p class=”p1″>それは使いやすさを考えた時に同じような配置の方が初めての人でも分りやすいからなんですね。</p>