WEBデザイナーが教えるクリエイティブ系への転職情報サイト「WEBデザイナーズナビ」

Webデザイナーズナビ 〜デザイナーの転職・スキルアップ情報 〜

Photoshopで行うWEBサイトデザイン~環境設定と基礎レイアウト~

Photoshopの環境設定と基礎デザイン

WEBサイトが実際のブラウザで見られた時のデザインをPhotoshopを使用して行います。クライアントやディレクターからヒアリングしたWEBサイトのイメージをワイヤーフレームの構成にしたがって形にしてきます。

順を追いながら説明します。初めてWEBデザインを行う初心者の方はサンプルファイルを確認しながら確認すると基本的なWEB制作の流れとアプリケーション操作が覚えられると思います。

デザイン準備までPSDファイルダウンロード
基礎レイアウトのPSDファイルダウンロード

この記事の内容

デザイナーLevel:2 「アルバイト採用レベルのWEBデザイナー」目次

Photoshopの環境設定

Photoshopの単位をピクセルに変更する

環境設定ショートカットキーCtrl+K

最初にPhotoshopの単位を設定を変更します。デフォルト状態だと印刷に合わせた「mm」での表示になっています。WEBサイトデザインはモニタのサイズに合わせるため「pixel 」を使用します。これはWEBサイトデザインのルールです。

環境設定画面

【定規】【文字】の単位をpixelに変更します。こうすると画像を新規に作成したりサイズを変更したりするときの単位の基準が【pixel】になりWEBサイトデザインの開発環境が整います。

ファイルの新規作成で WEBサイトの横幅の決定する

いよいよWEBサイトのデザインを開始します。まずはPhotoshopの【ファイル】>【新規】でWEBデザインを行う画面を作ります。PCでみるWEBサイトデザインの横幅は一番多く使われているサイズを選ぶのがベストです。現在のPhotoshopのWEBサイトデザイン用の横幅は1366pxとなっています。ノートパソコンは1366pxか1440pxが多いので妥当な横幅です。

新規ファイルの作成

ファイルの新規作成ショートカットキーCtrl+N

ドキュメントの種類

Photoshop CCから新しく追加されたWEBデザイン用のドキュメントの種類【Web】を使って説明していきます。
従来のPhotoshopでのWEBデザインは、デザインレイアウトを1つしか持つことができませんでした。

ドキュメント【WEB】現在主流であるPC・スマホ・タブレットの3つのデザインを同時に行えるようにアートボードによって複数のデザインを同時に行えるようなっています。

ドキュメントの種類【WEB】を使用

WEBサイトは縦長になるため、デフォルト設定の768pxではたりません。作業の途中で変更することもできますが、デザインの最初は枠組みから作り始めるので初期設定の段階である程度の縦幅を指定しまったほうが楽です。ここでは2500pxで行います。

WEBサイトの横幅を決めPhotoshopのデザイン画面を最適化する

実際のブラウザでどのように見えるを確認しながら作業するため幅1366pxでデザインをしていきますが、WEBサイトの横幅が1366pxでは大きすぎます。
WEBサイトの横幅はクライアントの意向やディレクターの指示で決まりますが、おおまかに950px~1100pxの範囲に収まります。

今回は横幅1080pxと広めのWEBデザインを行います。

WEBサイトの横幅の設定の仕方

1366pxの画面の中心に1080pxのWEBサイトの枠を置かなければなりません。その一例をご紹介します。

長方形ツールでWEBサイトの横幅を表示する

長方形ツール

画面左側にあるツールバーから長方形ツールを選択します。四角のアイコンを長押すれば表示されます。

長方形ツールの設定

画面丈夫に表示される長方形ツールの設定バーを使用します。
【シェイプ】【塗り:(好きな色)】【線:なし】【エッジの整列にチェック】この4つができていればOKです。

Photoshopのアートボード内の画面の好きなところをクリックします。

長方形ツールの横幅をWEBサイトの横幅にする

ここにWEBサイトの横幅を指定してOKを押します。

移動ツールで長方形WEBサイトの領域を中央に表示する

アートボードに長方形が表示される

Photoshopにのアートボード内に表示された横1080pxの長方形を中心に移動する必要があります。画面右下に表示されているレイヤー画面で長方形レイヤーが選択されていることを確認します。もしここが選択されていなかったらクリックして選択状態にします。

移動ツールを使用する

ツールバーから【移動ツール 】を選択します。選択したレイヤーをドラッグで移動させるために使用するツールです。

移動ツールのカットキーV

移動ツールの設定

移動ツールを選択したら表示される作業バーの中央揃えをクリックすると作成した長方形が中央に表示されます。
ドキュメントの種類【WEB】でファイルを作った場合はレイヤー1つを選択して中央揃えをすると、アートボードの中央にレイヤーが移動します。

従来のPhotoshopのドキュメントで編集する場合は2つのレイヤーを選択し中央揃えを行います。多くの場合はデフォルトで表示されてロックされている背景レイヤーと整列したいレイヤーを選択して整列させます。

Documentの種類【WEB】では1つのレイヤーを選択してもアートボードを基準に整列させることができます。

中央揃えした長方形にラインを引く

中央に配置された長方形がWEBサイトのデザイン作業の領域になります。このままだと作業がしづらいので左右にラインを引きましょう。
まず作業画面上に定規を表示せます。

定規の表示ショートカットキーCtrl+R

定規を表示させる

作業画面の上と左に定規が表示されます。数値は環境設定で指定した単位になります。この定規の左、数値が書かれている部分をドラッグして右に引っ張ってみましょう。ラインが表示されます。

ガイドライン表示する

定規を表示してラインを引く作業は1px単位でレイアウトを組むPhotoshopでWEBデザインで必ず使用します。
ラインは長方形の近くまで持っていくと自動で端に吸い付きます。左右それぞれにラインを引きことで、WEBデザイン作業を始める環境が完成です。

ラインを引くために作成した長方形ツールは削除してしまってもよいですし、そのままWEBサイトの背景用のレイヤーとしても使用できます。

デザイン準備までPSDファイルダウンロード

ワイヤーフレームから要素を配置していく

ラインを引き終わったらWEBデザイン作業を開始します。まずは大まかな要素のボックスを作っていきます。

Photoshopのレイヤー構造を理解する

レイヤーの説明

1つのレイヤーにすべての要素を入れてしまうと、個別に編集ができなくなってしまうため可能な限り細かくレイヤーを分けるのがWEBデザインの基本です。時には数百枚単位のレイヤーになるため、ヘッダー・フッターのように大枠フォルダを作成し、その中で管理するのが一般的です。

WEBサイトの作りとレイヤーを一致させる

Photoshopで大まかなデザインをしていく

Photoshopでおおまかにデザインしていく

ここからはWEBデザイナーにもよりますが、まずは大まかな要素を配置してみます。実際のブラウザで確認したときにおかしな所がないかを確認すっるためです。簡単に配置してみるだけで【写真大きすぎる】【フォントサイズはどのくらいがいいか】【文字数はこのくらい限界】などの疑問点が出てきますのでディレクターに確認をとります。

個人でWEBサイトを作るときでも、実際の自分の構想案と実際のWEBデザインの画面で食い違う部分のすり合わせを行います。この時点ではあまり彩度の高い色を使わず、無彩色をメインに使用します。クライアントやディレクターからメインカラーの指示を受けている場合は、そのカラーでイメージを固めていくやり方もあります。

基礎レイアウトのPSDファイルダウンロード

ここまでがデザイン作業に入る前の下準備

Photoshopでデザインをするまでにはクライアントの調整・ディレクトリマップ、サイトマップ作成を経て作られたワイヤーフレーム。それをPhotoshopに落とし込んでイメージを固めるところからがスタートです。

【WEBデザイナー】というと最初からPhotoshopで綺麗なデザインをするという華々しいセンス溢れる仕事だと思われがちです。しかしスタート地点であり最も重要なことは、クライアントとの打ち合わせであったり、理論に基づいた情報設計です。

この部分を疎かにするとWEBサイトは「ただ綺麗なだけのハリボテ」になり下がります。
現在のWEB市場はスマホからの閲覧が多いことから、不必要なものを排除しロジカルにユーザーにコンテンツを提供する技術が問われます。

このような市場傾向から、WEBデザイン開始にいたるまでの「上流工程」と呼ばれるサービス設計・情報設計がより重要になってきます。この領域の知識をWEBデザイナーが有していると、就職はもちろん転職ににも有利になります。

現在WEBデザイナーをしている方は上流工程に食い込めるように、未経験者の方はこのような背景を組み込んでポートフォリオ用のWEBサイトを作成すれば、採用担当者からは好印象を持たれるでしょう。

スポンサーリンク

Desingers Navigator

アルバイトWEBデザイナーから始まり派遣WEBデザイナーを経て、大手企業正社員WEBデザイナーへ。その後WEBディレクターになりUI・UXの専門に。現在はフリーランスのWEBデザイナー / ディレクターをしています。

関連記事 / RELATED POST