目次
photoshopで前準備
ウェブデザインはウィンドウサイズを元にキャンバスサイズを作成していきます。
今回は2番目に需要が多い1366pxで作成しましょう。
Source: StatCounter Global Stats – Screen Resolution Market Share
設定の手順
- photoshopを開きます。
- 【新規作成】をクリック
- 幅1366px、高さ3000px（※高さはデザインによって変わります。目安として設定しておきます。）を設定
- 単位【ピクセル】、【アートボード】にチェック、カラーモード【RGBカラー】、カンバスカラー白
- 作成ボタンを押す
ガイドを作成する
ウェブデザインを作成する上で欠かせないのがガイドです。
もちろんグラフィックデザインなどでもガイドは使われます。
なぜガイドを作成するかというと、デザインは余白が大切だからです。
あらかじめガイドを作っておくと、わざわざ余白を測る手間が省け、かつデザインの4原則の一つである整列が守られたデザインを作りやすくなります。
近接、整列、反復、強弱のことを指します。
近接：関連する情報を近づける
整列：要素に一体性を持たせる
反復：特徴的なものを意図的に繰り返す
強弱：情報に優先順位を与える
この本は非常に有名な良書で、非デザイナーから、デザイナーの方にまで長く読み続けられています。
近接、整列、反復、強弱の4原則を細かく説明し、かつそれらを使っていないデザインと原則に沿ったデザインがいかに違うかを比較して、分かりやすく解説してくれています。
ガイド作成の手順
- メニューバーの【表示】→【新規ガイドレイアウトを作成】をクリック
- プリセット【カスタム】、ターゲット【選択したアートボード】を選択
- 【列】にチェックを入れる
- 数12、幅65px、間隔30pxをそれぞれ設定する
- 左下の【列を中央に揃える】にチェックをいれてOKボタンを押す。
各値の説明
この分割数を「カラム」と呼びます。（今回は12カラム）
目安として覚えておきましょう！
メインビジュアルをデザインする
メインビジュアルとは、パソコンやスマートフォンでウェブサイトを開いたときに一番最初に表示される部分のことです。
主に画像や最近だと動画が使われていることが多いです。
画像を配置するには、長方形ツールや楕円形ツールで図形を配置してから、それらに画像をクリッピンクマスクする必要があります。
今回はメインビジュアルを長方形の形で配置しているので、長方形ツールを使用していきます。
メインビジュアル作成手順1：長方形の作成と配置
- 【長方形ツール】を選択
- アートボードのどこでも良いので、画面をクリックする
- 幅1366px、高さ768pxを入力して、OKボタンを押す
- 【移動ツール】を選択し、オプションバー（ウィンドウ→オプションで表示出来ます。）にある【水平方向中央揃え】と【上端揃え】をクリックします。
これで、長方形がアートボード上にぴったり揃った配置が出来たと思います。
次に画像を配置していきます。
今回使用する画像は、著作権フリーの画像が沢山掲載されているpixabayからお借りします。
下記リンクから画像をダウンロードしましょう。
画面右にある【無料ダウンロード】ボタンを押すとダウンロード出来ます。
メインビジュアル作成手順2：画像配置とクリッピングマスク
- メニューバーの【ファイル】から【埋め込みを配置】を選択
- ダウンロードした画像を選択して、配置ボタンを押す
- 先ほど作成した長方形が隠れるくらいの大きさに画像を拡大させる。
- レイヤーパネルで、画像が長方形レイヤーの一つ上に来るように移動させる。
- レイヤーパネルの画像を選択した状態で、画像レイヤーを右クリックし、【クリッピングマスクを作成】を選択する。
もしくは画像レイヤーと長方形レイヤーの間にカーソルを合わせ、macの方は「optionキー」、windowsの方は「Altキー」を押すとアイコンが出て来るので、そのままクリックする。
これで画像が長方形のサイズにクリッピングされたと思います。
クリッピングマスクは非常によく使われる便利なテクニックなので、覚えておきましょう！
メインビジュアル作成手順3：画像を暗くする
次に、画像の上に文字を配置していくのですが、このままの状態だと文字が見えにくいウェブデザインになってしまいます。
そこで今回は画像の上に暗い青色を乗せて視認性を高める工夫をしています。
この作業をするかしないかで文字の見やすさがかなり変わって来るので、比較して見ましょう。
- 上：暗い青色を乗せたもの。
- 下：なにもしていないもの。
どうでしょうか。文字のみやすさの違いが一目瞭然ですよね。
このようにデザインで工夫するところを抑えていくと、デザインの引き出しが増えていきます。
では、この暗い青色を乗せる手順を解説していきます。
- レイヤーパネルの下にある【塗りつぶしまたは調節レイヤーを新規作成】をクリックし、【塗りつぶし】を選択。
- カラーピッカーが出て来るので、今回は#393292を指定。
- 画像レイヤーの上に先ほど作成したベタ塗りレイヤーを持ってきて、クリッピングマスクを作成します。（クリッピングマスクは先ほどの手順と同様です。）
- ベタ塗りレイヤーの不透明度を60%にする。
メインビジュアル作成手順4：テキストを配置する
暗い青色を乗せたので、最後にテキストを配置していきます。
- 横書き文字ツール（T）を選択
- アートボードをクリックし、「MATOME VR EVENT」、「01.20」、「SHIBUYA」、「ENTRY」という文字をそれぞれ入力する。
- 見本のように文字を配置する
- 長方形ツールを使用して、高さ100px、幅410px、カラー#c95c3bの長方形を作成し、「ENTRY」の文字の背景に配置する。このとき、レイヤーが文字レイヤーの下に来るようにする。
これでメインビジュアルが完成しました！
ここまでのレイヤー構成↓
コンテンツエリアのウェブデザイン
ここまで出来たらあとはこれまで使ってきた手順を応用していくだけです！
今回のウェブデザインは、メインビジュアルを除けばテキストツールと長方形ツールさえ使えれば作成できるものになっています。
例えば、下記の部分では、
見出し部分については、横幅いっぱいの長方形を作成して、その上に文字を配置すれば出来ますよね。
そしてその下にある「ACCESS」の部分についても、
マップ画像の部分は、メインビジュアルを作成したときに用いたクリッピングマスクを使えば画像を配置することが出来ます！
ぜひ、これまでやった技術を使って最後まで作って見てください！
動画で解説
最初から最後までの工程を動画で解説しています。
もし行き詰まってしまったら、動画を参考にしてウェブデザインを作って見ましょう！
