好評につき、webデザイン制作チュートリアル第二弾です！
今回は架空のコーポレートサイト、制作会社を想定したサイトを制作していきます。
独学でwebデザイナーになりたい方、photoshopの使い方に慣れたい方に、現役webデザイナーが詳しく作成方法を解説していきます。
デザイン制作チュートリアルの記事は他にもありますので、そちらもご覧ください！
↓初心者向けのLP（ランディングページ）制作チュートリアル記事↓
目次
デザイン全体図
今回制作していくwebデザインの全体図はこちら↓
架空のデザイン制作会社を想定したサイトです。
モノトーンを貴重としたシックで、シンプルな印象を受けると思います。
前準備：画像をダウンロードする
今回使用させていただいた画像は、すべて著作権フリーのものです。
使用したサイト↓
画像はデザインを制作するときに必要なので、あらかじめダウンロードしておきましょう。
前準備：フォントをダウンロードする
今回使用するフォントはwebフォント・Google Fontsの「Noto serif JP」です。
サイズは「Regular」と「Semi bold」を使用します。
ダウンロードの方法
- サイト内で「Noto serif JP」を検索し、選択する
- 画面右上の「Download family」をクリックする
- ダウンロードされたファイルを開き、フォントをインストールする
MACの方はダウンロードファイルを開くと、「フォントをインストール」というのが出てくるので、それをクリックしましょう。↓
webフォントの詳しい話、Google Fontsの使い方をもっと知りたい方はこちらの記事で解説していますので、合わせてご覧ください。↓
アートボードの作成
最初にアートボードの設定をしていきます。
- photoshopを開く
- 画面左の「新規作成」ボタンをクリック
- 幅1400、高さ2000、解像度72（ピクセル/インチ）をそれぞれ入力
- 単位「ピクセル」にする
- 「アートボード」にチェックを入れる（これは任意で）
- カラーモード「RGBカラー」、「8bit」に設定する
- カンバスカラー「白」に変更
- カラープロファイル「カラーマネジメントしない」
- ピクセル縦横比「正方形ピクセル」に設定
横幅1400pxに設定しましたが、絶対にこの数字にしなくてはいけない訳ではありません。
1366pxにしたり、1440pxに設定することもあります。
制作するサイトの違いや、メインのデバイスが何かによっても変わってきますので、そこまで気にしなくても大丈夫です。
高さ2000pxに設定していますが、実際はもっと長くなります。
仮のサイズとして設定しておきましょう。
ガイドラインの作成
webデザインに欠かせないのは、ガイドです。
ガイドラインを作成すると、余白が取りやすく、デザインの4原則である整列を簡単に整えることができます。
また、要素の配置の目安になりますので、設定しておきましょう。
デザインの4原則についての詳しい解説は、下記の記事もご覧ください。↓
- 画面上部メニューバーの「表示」から「新規ガイドレイアウトを作成」を選択
- プリセット「カスタム」、ターゲット「選択したアートボード」を選択
- 「列」にチェックを入れる。
- 数「12」、幅「65px」、間隔「30px」をそれぞれ設定する
- 「列を中央に揃える」にチェックを入れてOKボタンを押す
数、幅、間隔についてですが、この数は制作するサイトによって変化してきます。
慣れてきたら色々自身で変更してみてください。
カラムについて
この中で重要な「数：12」について詳しく説明します。
これはアートボードを何分割するかを設定しています。（今回は12分割）
この分割数をカラムと言います。（今回は12カラム）
基本的に、カラム数は3か4の倍数で設定します。
色んなサイトを見ると分かるかと思いますが、要素が横に2つ、3つ、4つ並んでいる配置をよく見かけますよね。参考サイトも載せておきます。
参考サイト：丸亀製麺
参考サイト：みなとみらい総合法律事務所
そのため、デザインする際に要素を配置しやすいよう、カラムを3か4の倍数で設定します。
今回は、3の倍数でも4の倍数でもある「12」を設定しています。
水平方向のガイドを作成する
メインビジュアルがどこまでなのかの目安として、水平方向（横）のガイドも作成しましょう。
- 画面上部メニューバーの「表示」から「新規ガイド」を選択
- 「水平方向」にチェックを入れる
- 位置「768px」を入力してOKボタンを押す。
なぜ、768pxなのか。という部分について。
これはPC画面の大きさが関係しています。
ディスプレイの大きさは一般的に数種類に分かれています。↓
Source: StatCounter Global Stats – Screen Resolution Market Share
この中で、1400pxに一番近い「1366px、768pxのディスプレイ」を参考にして、ガイドを作成しています。
メインビジュアルの作成
メインビジュアルとは一番最初に表示されるサイトの顔です。
主に画像や動画、キャッチコピーが配置されることが多い傾向にあります。
ユーザーがサイトに訪れた時、一瞬（約3秒とも言われています）でこのサイトを見るか見ないか判別します。
魅力的なビジュアルを作成することが極めて重要だということを覚えておきましょう。
要素を追加する
では、まず最初にメインビジュアル部分にある要素を追加していきます。
- 文字「MATOME」を文字ツールで作成。
フォントサイズ：30px、カラー：#333333、フォントファミリー：Noto Serif JP、フォントウェイト：SemiBold - 文字「Design and Creative Company」を文字ツールで作成。
フォントサイズ：64px、カラー：#333333、フォントファミリー：Noto Serif JP、フォントウェイト：SemiBold - ハンバーガーメニューの横棒を「ラインツール」で作成。横45px、高さ2pxにする。
これを3本作成する。 - スクロールバー用の縦棒を「ラインツール」で作成。横1px、縦100pxにする。
- スクロールバー用の円を「楕円形ツール」で作成。縦横8pxにする。
- 画像を配置する用の長方形を横1065px、縦665pxで作成する。（カラーは何でも大丈夫です）
要素を追加できたら、図を元に要素を配置していきましょう！
画像を配置する
メインの画像を配置してきます。
画像の配置方法は何通りかありますが、今回は「ドラッグ&ドロップ」を使います。
この方法は非常に簡単で、ダウンロードした画像をphotoshopのアートボードに「ドラッグ&ドロップ」するだけで配置することができます。
配置する画像は、長方形の横幅に合うように、拡大/縮小しておきます。
また、長方形レイヤーの上に置いておきましょう。
クリッピングマスクを作成する
画像を長方形の形に収めたい、余計な部分を隠したい、そんなときに使えるテクニックがクリッピングマスクです。
非常によく使うので、このテクニックは覚えておきましょう！
クリッピングマスクを作成する方法は2通りあります。
- 画像のレイヤーを右クリック→「クリッピングマスクを作成」を選択する
- 画像レイヤーと長方形レイヤーの間にマウスをもっていき、optionを押すとアイコンが出てくるのを確認し、クリックする
どちらかの方法で画像を長方形の形におさめておきましょう。
クリッピングマスクとは、あるレイヤーの透明部分を使用して、その上のレイヤーにマスクを適用する機能です。
クリッピングマスクを使用すると、背面 （下） のレイヤー （ベースレイヤー） の透明ピクセルが、前面 （上） のレイヤーに対してマスクとして機能します。背面のレイヤーの内容で画像を切り抜いたように見せることができますが、実際には切り抜かれていません。クリッピングマスクを解除することで、元の状態に戻ります。JPEG や GIF 形式で保存することにより、切り抜かれた場合と同様の状態になります。
参考：adobe｜クリッピングマスクの概要
視認性を高める
ここまででメインビジュアルの要素は完成しました。↓
今のままでも良いかもしれませんが、画像の上に文字が配置するレイアウトのため、少し文字が見えにくくなってしまっています。
それを回避するため、白い背景を上に被せます。
- 画像を配置した基の長方形を複製する
- 色を白にする
メニューバーのウィンドウ→プロパティ（属性）の「塗り」から色を変えられます。 - レイヤーを画像レイヤーの上にもっていく
- クリッピングマスクを作成する
- 透明度を30％にする
この際、もし画像のクリッピングマスクが外れてしまったら、また作成し直してください。
白い背景を置いただけで、視認性がぐっと良くなりました。
こういったテクニックも覚えておくと便利です。
コンテンツエリアのデザイン作成
メインビジュアルができたら、他の部分は同じことを繰り返すだけです。
「Project」コンテンツを作成する
やることはメインビジュアルを作成したとき同様、クリッピングマスクを活用していきます。
- 長方形ツールで、画像を配置する用の正方形を縦横350pxで作成する
- 1を3つ作成する
- 各画像をドラッグ&ドロップで配置する
- それぞれクリッピングマスクを作成する
「About us」コンテンツを作成する
「About us」のコンテンツには文字しか置いてませんので、詳しい説明は省きます。
単純に文字ツールを使って文字を置くだけです。
文字ツールは、アートボードをクリックすると文字を打つことができますが、
ドラッグするとテキストボックスを作成することができ、枠内から文字をはみ出させたくないときに便利です。
フッター
背景の長方形を作成する
まず背景に敷く長方形を配置していきます。
- 長方形ツールを選択
- 画面上部に表示されるオプションバーの塗りを「#333333」に設定
- アートボードをどこでもいいので「クリック」すると設定画面が表示されます。
（もしくは画面をドラッグしても長方形を作成することが出来ます。） - 幅1400px、高さ445pxを入力し、OKボタンを押す
ちなみに、色変更や幅・高さはプロパティ（属性パネル）でも変更することが出来ます。
画面上部のメニューバー「ウィンドウ」から「プロパティ（属性）」で表示できます。
属性パネルの見本↓
文字を入力する
入力する文字一覧
- MATOME
（フォントサイズ24px、ウェイトSemi bold） - CONTACT
（フォントサイズ18px、ウエイトSemi bold） - TOP、COMPANY、ABOUT、NEWS、CONTACT
（フォントサイズ16px、ウエイトSemi bold） - COPYRIGHT(C)MATOME ALL RIGHTS RESERVED.
（フォントサイズ13px、ウエイトRegular）
フォントファミリーは「Noto Serif JP」です。
ウエイトはcopyright〜のみRegularで、他はSemi boldです。
カラーは、背景が黒なので、全て#ffffff（白）を設定します。
contactボタンの長方形の白枠を作成する
- 長方形ツールを選択
- オプションバーの塗り「なし」、線「#ffffff」、「1px」をそれぞれ設定
- アートボードをクリック
- 幅285px、高さ64pxを入力し、OKボタンを押す
こちらも同様に、数値や色はプロパティ（属性パネル）からも変更できます。↓
文字と長方形を中央揃えにする
先ほど作成した「長方形の白枠」と「CONTACT」の文字は水平方向・垂直方向ともに中央揃えにしておきましょう。
- 先ほど作成した長方形と「CONTACT」の文字を選択
- 画面上部にあるオプションバーの「水平方向中央揃え」と「垂直方向中央揃え」をそれぞれクリックする。
グループ化するとわかりやすいので、command + Gでグループ化しても大丈夫です。
余白を調節する
要素が揃ったところで、余白を調節していきます。
黒い背景を起点に考えます。
- 上90px空ける
- 左右145px空ける
- 「MATOME」と「TOP」等の間を130px空ける
- 「TOP」と「PROJECT」など、メニューに該当する文字の間を30px空ける
- 「TOP」等と「copy…」の間を65px空ける
これでデザインが完成しました！お疲れ様でした！！
まとめ
いかがでしたか？
難しいことはほどんどやっていないのに、それっぽいデザインが作れることが理解できたでしょうか？
まとまりのあるデザインを作るには、フォント、色、要素の大きさをある程度統一させるのがポイントです。
今回、フォントは一種類しか使用していないのと、カラーも白と黒しか使用していません。
このようにある程度「制限」を設けることがデザインには重要になります。
まずは手を動かすことから始めて、自分が作ったデザインと世の中にあるデザインと比べて何が足りないのか比較して成長していってください！
ウェブデザインの参考になるサイトをまとめた記事はこちら↓
