[ウェブデザインの応用] WebサイトのブロックやディテールのデザインパーツをPhotoshopで制作する方法

WebサイトのブロックやディテールのデザインパーツをPhotoshopを使って制作する方法の紹介です。

今回は、龍弥デザインの実案件の制作実績の中から、
ヘッダーやメインコンテンツ、フッターなどの各ブロック部分、
さらにディテール部分の表現テクニックをピックアップして紹介します。

表現には星の数ほどのパターンが存在しますが、条件として、
「現場でよく使われる」かつ「今日から使える」表現テクニックを紹介していきます。
使い方をマスターしたらそのまま実戦デビュー可能ですよ。

各テクニックは手順のみ紹介しますので、よく見て聞いて自分のものにしてください。
どのテクニックをどこでどう使うか、そもそも使わず他のテクニックを探すなど、
それぞれの判断に任せます。

あくまで「この表現はこうして実現させている」というテクニックのレクチャーです。
だから全く「この通りをやれ」ということではありません。

総合建設業・一級建築士事務所 河野建設株式会社

総合建設業・一級建築士事務所 河野建設株式会社

ヘッダー・グローバルナビゲーション(サイト全体)

河野建設様のヘッダーはロゴとグローバルナビゲーションを配置した全ページ共通のブロック。
ただトップページのみスライドショーにオーバーレイするので表示開始時は背景を透明にし、
スクロールすることで背景色を表示させるようにしています。

では今回はスクロールし終えた固定状態の再現をしましょう。
手順は以下。

1. ヘッダーブロックと同じ横幅のブロックを長方形ツールで作成し色を調整、上部にガイドを作成する。
2. レイヤーパネル上で、ロゴやナビゲーションを❶の上にドラッグ移動する。
3. 上部・左右に20〜40pxの余白を作り、その周りにガイドを作成する。
4. ❷を余白のガイドに吸着配置し❷の下部にガイドを作成する。
5. ❸の余白と同じサイズの余白を作り下部にガイドを引く。
6. ❶の高さをガイドに合わせて調整する。

手順が違う作り方ですが動画での解説は以下。

コンセプトブロックの背景(トップページ)

メインコンテンツのコンセプトブロックはウェブサイトでよく配置されるコンテンツで、
オーナー側からユーザーへ届けたいメッセージを掲載している極めて重要なコンテンツ。

こういった場合には、メッセージの内容から関連性のある写真を添えたり、
今回のようにブロックの背景にし、描画モードをうまく使うテクニックがよく使われます。

では同じテクニックを使って再現していきます。
今回はぱくたそさんの以下の素材をお借りします。

素材URL:東京駅丸の内正面通りからの夜景の写真を無料ダウンロード(フリー素材) – ぱくたそ

手順は以下。

1. ブロックと同じサイズのブロックを長方形ツールで作成する。
2. カンバス上に写真を配置、❶より少し大きいサイズにリサイズして配置確定。
3. ❷を選択した状態で上部「レイヤー>クリッピングマスク」で「クリッピングマスク」を作成する。
4. ❷の描画モードを、乗算or焼き込みカラーor焼き込み(リニア)にする。必要なら不透明度か塗りの値を調整する。
5. ❶のサムネイルをダブルクリックし、色をブレンドしたい色に変える。

以上で実現可能です。動画での解説は以下。

コンセプトブロックのボタン(トップページ)

コンセプトブロックはオーナー側からのメッセージと言いましたが、
その役割は、サイトの説明や印象付けだけを担っているわけではなく、
「詳しく知りたい」という要求に応えるべく次のアクションを起こすために必要です。

そのためにボタンを配置しますが、背景が写真であるため、
外枠のラインとリンクテキストのみのシンプルなボタンにしています。

このボタンの作り方は以下。

1. 長方形ツールでボタンのサイズの長方形レイヤーを生成する。
2. 上部「選択範囲>すべてを選択」をクリックし移動ツールを選択。
   オプションバーの「整列」を使って「水平方向中央揃え」「垂直方向中央揃え」で中央に整列する。
3. 上部「選択範囲>選択を解除」をクリックして選択を解除。
4. レイヤーパネル最下部の「レイヤースタイルを追加」から「レイヤー効果」を選択する。
5. 「境界線」にチェックを入れてクリックし、以下の設定にして「OK」をクリックする。
   サイズ:2px / 位置:内側 / 描画モード:通常 / 不透明度:100%
   塗りつぶしタイプ:カラー / カラー:#ffffff
6. 塗りを0%にするとレイヤースタイルの境界線だけが表示される。
7. 横書き文字ツールでテキストレイヤーを作成し、色やフォント、サイズなどを調整する。
8. 移動ツールを選択してテキストをボタンの中央に移動する。

動画での解説は以下。

安全弁・バルブ整備の技術集団。創業四十年。⽇本⼀の安全弁整備技術で、日本の⽯油化学プラントを支える。 リセイ工業

安全弁・バルブ整備の技術集団。創業四十年。⽇本⼀の安全弁整備技術で、日本の⽯油化学プラントを支える。 リセイ工業

メッセージブロックのテキストの単色背景枠(トップページ)

リセイ工業様のトップページのメッセージブロックの見出しと本文のテキストは、
社長の写真とテキストを絡めるように重ねて配置しています。

しかしただ重ねただけでは読みづらくなるため、テキストの背景だけに単色背景の枠を作っています。
これは視認性の向上のためだけではなく、テキストとほぼ同じサイズの枠を作って、
テキストの強烈な印象づけを狙ったテクニックです。

このテクニック再現の手順は以下。

1. テキストを打ち込む。
2. レイヤーパネル上で❶の下に長方形ツールで同じくらいのサイズのブロックを作成して、❶と❷の色を見やすいように調整する。
3. 1行ごとに❷を作る。

以上、簡単ですね。
こちらも手順が違う作り方ですが動画での解説は以下。

メッセージブロックの画像の背景(トップページ)

上述のメッセージブロックで、今度は画像を印象付けるためのテクニック。
画像と同じサイズの長方形レイヤーを作って背後に移動させ、
上下左右少しだけにずらすというページデザインのクオリティアップの小技です。

今回はパターンを使用します。
自作パターンファイルをプレゼントしますので使ってみてください。

龍弥デザイン鉄板パターン

導入方法は、zipファイルを展開して、フォルダの中の「龍弥デザイン鉄板パターン」ファイルを、Photoshop起動時にダブルクリックしましょう。一度起動してしまえばPCをシャットダウンしない限りは使用できるはずです。※必ずUSBに入れておいてください。

再現手順は以下。
河野建設様で行ったように画像にクリッピングマスクを作ります。

1. レイヤーパネルで画像レイヤーのサムネイルを「Ctrl + クリック」。画像と同じ選択範囲が生成される。
2. パスパネルを表示し「選択範囲から作業用パスを作成」をクリックしてパスを生成する。
3. レイヤーパネルに表示を戻し❷をパターンで塗りつぶすため、「塗りつぶしまたは調整レイヤーを新規作成」から「パターン」を選択する。
4. 「パターンで塗りつぶし」ダイアログボックスのプルダウンから好きなパターンを選択し「OK」。
5. レイヤーパネルで❸を画像レイヤーの下に移動する。
6. ❷を選択した状態で「Shiftl + 方向キー」で10pxずつ位置を移動する。
7. ずらした背景パターンができた。

おまけとして、レイヤーパネル上でパターンレイヤーの上に塗りレイヤーを配置し、
上部「レイヤー>クリッピングマスク」としてマスクをかけると、
パターンの色を擬似的に変えることができます。楽しいよ。

動画での解説は以下。

岡山の皮膚科と美容皮膚科 中山下スキンクリニック

ヘッダー・グローバルナビゲーション(サイト全体)

河野建設様ではグローバルナビゲーションの背景は単色でしたが、
中山下スキンクリニック様では単色だけではなくいくつかの層を重ねています。
全て「レイヤースタイルを追加」で実現できます。

レイヤースタイルの内容は以下。

1. 「グラデーションオーバーレイ」を以下のように設定
   描画モード:スクリーン / 不透明度:〜50% /
   グラデーション:#ffffff・不透明度0%、#ffffff・不透明度70%程度
   スタイル:線形 / シェイプ内で作成にチェック / 角度:90° / 比率:100%
2. 「パターンオーバーレイ」を以下のように設定
   描画モード:通常 / 不透明度:〜30% / パターン:適切なもの / 角度:0° / 比率:100%

意外と簡単ですよ。