実践Webデザインスキル - 第4章 Lesson2

第2回:ガイドを使ってWebサイトのレイアウトを作る方法-1

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

ガイドとものさしツール使って、Webサイトの基盤となるレイアウトを作成していきます。
ここでは、黄金比を使った2カラムのレイアウトを作成していきます。


この動画で学べること

・レイアウトを組む方法



レイアウトを組んでいこう

今回から、本格的にWebサイトの制作に入っていきますが、まずはレイアウトを組んでいきましょう。
最初に、一番上のヘッダーの上にあるラインとになる四角形を作っていきましょう。
長方形選択ツールで幅1440px、高さ5pxの長方形を作成します。
色はカラーピッカーで見本の緑の部分をスポイトし、カラーコードを入れて変更します。



ヘッダー部分も見本の大きさを測り、幅960px、高さ89pxの長方形を作成します。
ショートカットキー
[Mac] command ⌘+A
[Windows] Ctrl +A
でカンバスを全て選択の状態にし、ヘッダーのレイヤーを選択して移動ツールに切り替えます。
オプションバーの「水平方向中央揃え」を選択すると、ヘッダー部分をカンバスのど真ん中に配置することができます。
長方形の端の部分にガイドを引いておきましょう。




余白20pxのルールを守り、他の部分のレイアウトも組んでいきます。
メイン画像は幅960px、高さ300pxです。
ヘッダーと同じ手順でやっていきましょう。




最後に、下のコンテンツ部分です。
2つの部分がありますが、これらは黄金比計算ツールで計算した値になっています。
新着情報は幅575px、高さ186px、サイドバーが幅356px、高さ186pxです。
今回は、新着情報の部分までのレイアウトが組めればOKです。