【WebDesign】Photoshopでプロになる！オシャレ＆クールなウェブデザイン作成講座

これから作成する、ポートフォリオページのデザインのテーマと構成を確認します。

Cacooでワイヤーフレームの作成を開始します。ヘッダー部分のお問い合わせボタン・グローバルナビゲーションを作成します。

アイキャッチエリア、最近の事例エリアを作成します。

サービスエリア、自己紹介エリアを作成します。

お問い合わせ（コンタクト）エリア、ページトップボタンを作成します。

フッターエリア、ソーシャルボタンを作成します。（TOPワイヤーフレーム完成まで）

ポートフォリオの下層ページのワイヤーフレームを作成します。TOPワイヤーフレームの要素のコピー、サイドメニューの事例タイトル・説明・カテゴリー表示・参照ボタンを作成します。

メインコンテンツ・事例本文・最近の事例の作成と、フッターを配置します。（下層ワイヤーフレーム完成まで）

追加フォントのインストール、フォントの動作確認をします。

※Macの場合のみ。windowsの方は適宜windowsの方法でインストールをお願いします。

Photoshopの環境設定を行います。Webデザインで最低限必要な設定です。必ず設定しましょう。

Photoshopファイル（デザインベースファイル）を新規作成します。

デザインベースのPhotoshopファイルの概要を確認します。

ロゴの配置を通して、Photoshopでのオブジェクトの移動・配置方法を学びます。

「ContactUs」ボタンを作成します。

文字ツールを使って、ナビゲーションを作成します。

アイキャッチ画像を作成するための枠（プレースホルダ）を作成します。

アイキャッチ画像の写真をプレースホルダに配置します。

リード文に装飾を追加します。

「最近の事例」エリアのタイトルを追加します。

事例の画像のプレースホルダを作成します。

事例の各タイトルと、文字を追加します。

事例のコンテンツを複製します。

事例画像を追加します。

「more info」ボタンを追加します。

「more info」ボタンを調整します。

サービスエリアを作成します。

「About」エリアを作成します。背景エリアと、画像の配置を行います。

タイトルと、テキストを追加します。

「MoreInfo」ボタンを追加し、配置を微調整します。

「Contact」エリアを追加します。

ページトップボタンを追加します。

フッターエリアを作成し、カンバスサイズを調整します。

下層ページ用のファイルを準備し、添付ファイル（リソース）をダウンロードします。

下層ページ用にファイルを調整し、Cacooのワイヤーフレームを開きます。

制作事例の画像のプレースホルダを配置し、ガイドを引きます。

サイドメニューの作成開始。事例タイトルを追加します。

説明文エリアを作成します。

カテゴリーエリアを作成します。カテゴリータイトルを追加します。

カテゴリーリストを作成します。

「Website」ボタンを作成します。

サブタイトルと、テキストを作成しましょう。

事例画像サンプルを作成し、配置を調整します。

「RecentWork」エリアを作成します。背景を配置します。

「RecentWork」エリアをTOPデザインから複製します。

「RecentWork」エリアをなじませたあと、Contactエリアと、Footerエリアを追加します。

全体の配置を確認し、カンバスサイズを調整します。

レイヤーを整理します。TOPページのフッターからaboutエリアまで作業します。

サービスエリアから、TOPページのレイヤー整理完了まで作業します。

下層ページのレイヤーを整理します。

これから作成する、コーポレートサイトのデザインのテーマと構成を確認します。

Cacooで新規ワイヤーフレームを作成し、ロゴとナビゲーションを作成します。

お問い合わせボタン、アイキャッチエリアを作成します。

アイキャッチの補足情報の追加方法、４つのサービスエリアを作成します。

ニュースエリア、スタッフ紹介バナー、ブログ新着情報を作成します。

フッターエリアを作成します。

フッターナビゲーションを仕上げ、ページトップボタン、GoogleMapエリア、コピーライト表示を作成します。

下層ページのワイヤーフレームを作成します。ページタイトルエリア、本文タイトル、仮テキストを作成します。

画像プレースホルダ、回り込みテキスト、会社概要の要素を追加します。

会社概要のレイアウトを調整し、仕上げます。

コーポレートサイトTOPのデザインを完成させましょう。動画でわかりづらい部分は、このレクチャーに添付するサンプルPSDを参考にしながら進めてください。

作成のヒント：

• 今回のサイトは、背景の配置を先に仮置きし、コンテンツを埋めていく方式で作成すると、アタリがつけやすいです。
• ひとつひとつのコンテナに集中せず、全体から配置を攻めてみましょう
• カラーオーバーレイや、スマートオブジェクトを利用してみましょう
• 単純なアイコンと、図形の組み合わせで、様々な表現ができることを確認しましょう。

Photoshopでのデザインを開始します。Photoshopファイルの準備と、アイキャッチエリアのプレースホルダを作成します。

ヘッダー部分の背景と、アイキャッチ画像を配置し、ファーストビューのバランスを調整・確認します。

ヘッダーを仕上げます。ロゴ、グローバルナビゲーションを配置します。

お問い合わせボタン、ヘッダーの全体配置を調整します。

４つのボタン部分の背景の仮配置とアイキャッチ画像のキャッチコピー、人物写真を配置、アイキャッチ画像全体の配置を調整します。

４つのボタン部分のコンテンツを作成します。ボタンの作成を開始します。

１つ目のボタンを作成し、デザインルールを作ります。

レイヤースタイルについての解説、１つ目のボタンを仕上げます。

ボタンを複製し、残りの３つのボタンを仕上げていきます。アイコンの配置を行います。

４つのボタンのアイコンをさらに配置、文字を変更し、４つのボタンを仕上げます。

ニュースエリアの背景を作成します。タイトル、タイトルの装飾を追加します。

ニュースリストの枠と、複製元となるレイアウトの日付とカテゴリー表示を作成します。

ニュースタイトルを追加し、複製し、表示を調整します。

スタッフ紹介バナーを作成します。プレースホルダを作成し、写真を配置します。

スタッフ紹介の文字と、アイコンを追加します。写真の上の文字のみやすさについて解説しています。

ブログの新着情報を作成します。文字の大きさの優先順位について解説しています。

境界線、ロゴ、電話番号のアイコンを作成します。

電話番号、住所を追加します。

フッターのメニューを作成します。フッターの文字列と、アイコンを作成シます。スマートオブジェクトの利便性について紹介しています。

ページトップボタンを作成します。

GoogleMapの埋め込みイメージの作成、著作権表示を追加します。

コーポレート下層用のpsdを作成し、タイトル部分を作成します。

レイヤーの整理を行い、見出しと見出しの装飾を追加します。

サンプル文章、画像のプレースホルダと、回り込み文章例を追加します。

会社概要タイトル、会社概要の内容を追加します。

会社概要を表形式に変更します。

会社概要の表にシンプルな装飾を追加し、カンバスサイズを調整します。