アドビのフォトショップ(Photoshop)やイラストレーター（Illustrator)は、デザインの制作で 無くてはならないソフトです。
WEBデザインはフォトショップ、印刷はイラストレーターという時代から、ディバイスとサイトの用途によって、どちらのソフトでもデザインを作成する時代に変わりつつあります。
写真の加工をフォトショップ で行って、イラストレーター とリンクさせて作成するのが、おすすめです。
そこで今回は、フォトショップで制作する WEBサイト制作の「ワイヤーフレーム」「デザインカンプ」作成方法を紹介します。
イラストレーター でのワイヤーフレーム、デザインカンプは次回
WEBサイト制作の流れ
ざっくりとWEBサイト制作のフローを紹介します
- ヒアリング→クライアントのイメージをリサーチ
- サイト設計+ワイヤーフレーム作成
- デザインカンプ作成
- クライアントと打ち合わせしてイメージ共有の確認、この次点での修正
- フィードバックを受けてのデザイン修正とブラッシュアップ
- コーディング
- 完成→サイト公開
ワイヤーフレーム / Wire frameとは
概ね↓のような感じで、パワーポイントで、ディレクターが作成して、WEBデザイナーへ依頼があります。
ワイヤーフレームとは、WEBサイトのページの構成やレイアウト（物の配置・配列 ）を割付けしたページの枠組み＝設計図 、ざっくりとした図、下書きのことを指します。
メニューや画像、テキストをページ内のどこに配置するかなど、クライアント側とのページ設計の交渉の際に欠かせないものです。
基本的には画像やテキストは使用せず、四角形や円形や記号などを使ってページの枠組みをします。
デザインやコーディングなどの作業に入る前に作成し、完成イメージを「見える化」することが目的で作られます。
クライアント側がWEBの知識があり、急ぎの案件で締め切りが迫っている場合など、作成しない事もあります。
デザイン依頼のいろんなパターンあるある
1 : デザイン依頼の時点で全て揃っているディレクターさん
- 指示書あり
カンパニーカラーの指定や、ペルソナをきちんと伝えてくれます。 - 情報共有のため、クライアントへのプレゼン用のパワーポイントも送ってくれる
（概ねそのパワーポイントの中にワイヤーがある） - 参考サイトのURL２~３サイト
- テキストも既に決まっていて、あとはコピペという時もあります。
こういった場合は、複数人のデザイナーさんページをデザインする事があります。
2 : デザイナーさんがディレクションも兼ねる場合
- 指示書あり
- イラストレーター、フォトショでワイヤーフレームから少し発展したシンプルなデザインカンプが送られたりもします。
（ほぼ、ほぼ出来上がりに近い時が多々） - 参考サイトのURL２~３サイト
- キービジュアルのキャッチコピーも決められている事が多いです。
3 : 構成案に長方形の図形が….シンプルすぎる場合
- 指示書あり
- エクセルに、構成案と、参考イメージ画像で構成されたものもしくは長方形の箱だけとか
- 参考サイトのURL２~３サイト
指示書もピンキリで、何も決まってない、ホワホワしたものもあれば、きっちりクライアントさんとの打ち合わせしたものを、書面でまとめたものと、、、様々です。
それでも、ワイヤーと指示書、参考サイトを確認してデザインを進めていきます。
デザインカンプ / Design comprehensive layoutとは
デザインカンプは、「 Design Comprehensive Layout 」の略で、直訳すると包括的なレイアウト
包括的＝ひっくるめて、ひとつにまとめること
つまり、包括的とは「幅広く全体を含んでいる」という意味になります。
写真や、テキストが決まってない場合は、ダミーテキスト、仮の写真・画像を差し込みます。
その際、仮で差し込むデザインの写真や画像の内容がクライアントからのOK!もらえるもらえないに、とても大きく影響します。
無料画像商用可写真 【おすすめ】画像サイト厳選6選と無料商用化映像・動画4選
クライアントとの打ち合わせはデザインカンプでイメージ共有
ワイヤーフレームを見せながらのクライアントとの打ち合わせは、完成イメージが共有することが困難な場合が多いので、デザインカンプで、ほぼ完成に近いデザインを数点提案し、クライアントとの打ち合せで、デザインを決定し、微調整する流れが齟齬もなくスムーズに進みます。
打ち合せの段階でのイメージ共有＝ヒアリングがとても大事です。
クライアントの思い描くサイトイメージとデザインの齟齬がなければ、テキスト間違い程度の修正で、納品できます。
もちろん、何度も修正を重ねる場合もあります。
そういった場合は、クライアント側がコミュニケーションを重ねていく中で、最初は言えなかった希望などが、出てきてしまった。。。
という場合が多く、大きな方向性の違いなどの場合は、追加見積もりで再度デザインする場合や、デザイナーを変更する場合もあります。
（ディレクションミスなので、作業料はもらえます！普通は。。。）
フォトショップ：ワイヤーフレーム作成
サンプルサイトを参考に、手順を紹介します。
カンプ ができたら、イラストレーターでパーツを作成します。
1: 新規作成
フォトショップ を立ち上げます。
コントロール(command)+N
サイズ
幅：1920px
高さ : 6000px
解像度 : 144pixel/inch or 72pixel/inch
今回は、写真画像が綺麗なサイトに仕上げたいので、大きめサイズにします。
2 : ガイド線作成
垂直方向 150px,300px,1620px,1770px
水平方向200px
3 : 長方形ツールとテキストでheader作成
長方形ツールでロゴ部分
問合せと資料請求部分を作ります。
4 :キービジュアル（ファーストビュー）部分
幅 : 1920px
高さ : 800px;
5 : News お知らせ部分
ガイド線：水平方向 1200px
ガイド線：水平方向 1400px
このあとテキスト部分は、その前のブロックから200px下へ引きます。
5 : Content 物件のご案内 部分
長方形を4枚作成 > 整列で均等に配置
幅 : 400px
高さ : 300px
6 : Content トピックス 部分
長方形を3枚作成 > 整列で均等に配置
幅 : 530px
高さ : 400px
7 : Content LOREＭとは 部分
長方形を4枚作成 > 整列で均等に配置
幅 : 474px
高さ : 300px
ラインツール＋多角形ツールで、全幅を示す矢印を作成
8 : Content メディア紹介 部分
長方形を2枚作成 > 整列で均等に配置
幅 : 795px
高さ : 500px
9 : Content 問合せ 資料請求 ボタン 部分
長方形を2枚作成 > 整列で均等に配置
幅 : 650px
高さ : 200px
10 : 会社概要 部分 + footer
ラインツールで、テキスト部分を作成
MAP部分
幅 : 800px
高さ : 500px
11 : カンパスサイズを調整
長方形選択ツール > footerの下部分まで選択 > イメージ ＞カンバスサイズ
基準位置 > 上 中央 > OK > 続行
12 : 完成
入力テキスト
首都圏に特化した不動産投資の株式会社LOREM
LOGO
｜LOREMとは｜物件一覧｜事業内容｜FAQ｜流れ｜トピックス｜
資料請求
お問合せ
お客さまへ、 ベストな選択肢を提供する LOREM株式会社
お知らせ
物件のご案内
トピックス
記事タイトル
記事タイトル
記事タイトル
LOREＭとは
メディア紹介
お問合せ
資料請求
会社概要
MAP
フッター
イラストレーターで、パーツ作成
ロゴを作成します。
NEXT
