direction WEBデザインをつくろう
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

WEBデザインをつくろう

ディレクション|2019年02月18日

2019年02月18日
  • このエントリーをはてなブックマークに追加

ワイヤーフレームができたら、いよいよデザインに入っていきましょう。
STARTOUTにご登録された方は、デザインも自分で作られる方は多いと思います。
ただ、今回は誰かにお願いする場合も含め、ご説明していきます。

デザインの作り方そのものはこちらをご覧ください。

まず、デザインは、トップページだけ作りましょう。
一気に全てのページをデザインしてはいけません。
最初にトップページでテイストや方向性を定めます。

もし全ページ一気に作ってから「テイストが違う!」となると大惨事です。
全ページ、デザインしなおすことになるかもしれません。
全てのページを一度に作らないようにしてください。

最初に、トップページができたら、クライアントに見てもらいましょう。
確認するのは印象や方向性、カラーが一致しているかどうかです。

参考サイトも見せていますし、あまりぶれることは無いはずです。
同時にそれは、参考サイトのテイストに近づけてデザインする必要があるということです。
印象を参考サイトに合わせていますし、初見でイメージを似せると良いですね。

トップページでOKをもらってから、全ページをデザインしましょう。
上手く進めるコツは、常に意識を共有しながら進めることです。

ワイヤーフレーム通りに作ってはいけない

デザインはワイヤーフレームを元に作られます。
ただし、ワイヤーフレーム通りにデザインするわけではありません。

初心者にありがちなミスは「ワイヤーフレーム通りに作ってしまう」ことです。

ワイヤーフレームにおけるレイアウトは、ただの大枠であると認識しましょう。
デザインを作る過程でアレンジしても良いのです。

他のディレクターと仕事をする時、大抵のディレクターは変更を望みます。
より結果に繋がり、クオリティを高めるための変更なら、誰もが大歓迎です。

コンセプトの説明エリアを作るにも、様々な表現方法があります。
ニュースの一覧を作るにも、数多くのデザインがあります。

デザイナーとしての知識を総動員し、最高の作品作る必要があるのです。

確かに基本のレイアウトはワイヤー沿う必要があるでしょう。
全く異なれば、試行錯誤して作り上げたワイヤーを試す機会が失われてしまうでしょう。
仮説検証の機会を失い、プロジェクトは後退してしまうだけです。

ただ、沿うというのは、そのまま作る、 という意味ではありません。
ワイヤーで決めるのは、あくまでも大まかなレイアウトでしかないのです。
大まかな配置を理解した上で、よりクールに見せるにはどうすべきか。
しっかりデザイナー視点から考えて作るデザインを、大抵のディレクターは望みます。

ワイヤーからデザインする時は、より素晴らしいデザインを目指しましょう。
そのためにレイアウトもアレンジしながら作っていってください。

例として、ワイヤーからデザインへのビフォーアフターを掲載します。
どう変化していくか、参考にしてみてください。

まず、前回も見たと思いますが、下記がワイヤーです。

そして、デザインが次のようになります。
少し、時期が違うキャプチャなので、内容が若干異なっていますがご了承ください。

なんとなく、デザインのイメージは掴めたでしょうか?
このようにアレンジを加えながらデザインしていきます。

とは言え、上記はあまり変わってない方です。

良いデザインのために必要だと思えば、もっと大胆に変更しても良いでしょう。
大枠のルールは守った上で、どんどん自分の思考を入れこんで見てください。

他のデザイナーにお願いする時の注意点

自分ではなく、誰かにデザインをお願いすることもあります。
ディレクターであれば、基本は自分でデザインをすることはありません。

ただ、 当然、誰かとの共同作業になりますから、コミュニケーションコストがかかります。
どのような点に気をつけると、上手くいきやすいのでしょうか。

いくつかポイントをご紹介しますので、参考にしてみてください。

意図を背景から細かく伝える

丸投げでお願いするだけでなく、今回の背景を全て伝えましょう。

会社はどんな会社なのか、どんな人たちがクライアントなのか。
どうしてデザインのコンセプトやレイアウトを今回のように決めたのか。
細かく説明することで、デザイナーの参加意識も強くなります。

結果、モチベーションをあげて取り組んでくれるでしょう。

納期を前倒しで伝える

どれだけ優秀なデザイナーでも、結果、どうなるかはわかりません。
何かあって遅れてしまう可能性もあるでしょう。

なので、基本的にいつまでに初稿を出すか、早めに伝えます。
初校出しが1月の15日なら、12日までに出すように伝えましょう。

このようにスケジュールに余裕を持たせれば、余裕も生まれます。
最低でも、本来のスケジュールから3日は余裕が欲しいですね。

嫌味を言ったりデザイナーのせいする言い方を避ける

よくあるのが「変更」なのに「修正」と言ってしまう場合です。
デザイナーにとってみるとこの言葉に大きな違いがあるんです。

例えば、クライアント都合で要素が変わったとします。
それって、後から追加された要望であり「変更」に他なりません。
でも「修正してください」と言われると、自分がミスしたかのような印象を受けます。

こうした細かい言葉で、案外、人はモチベーションが左右するのです。

常にデザイナーがモチベーションを保てる言い回しをしましょう。
態度や対応も、デザイナーを守る形にしましょう。
注意や指摘をする際も、モチベーションに気を配ってください。
それができるディレクターが、結果的にできるディレクターになります。

本当にデザイナーとの仕事の相性が最悪だった場合。
そっと切ることをおすすめします。
今、ベストな人材に出会えるまで、仲間探しの旅を繰り返してください。

全ページデザインしてクライアントに見せる

冒頭でもお話しましたが、まずはトップページのデザインを作ります。
それでOKだったら、下層ページを同じテイストで全て作りましょう。

トップページのデザインさえまとまれば、大きな変更も無いはずです。
スムーズに進むことも多いので、一気に作って提出しましょう。

ここまでくれば、デザインに大きな変更や修正はもうありません。
あとはコーディングやWORDPRESS化、開発を進めていきましょう。

ただ、クライアントは気まぐれですから、今後も変更を希望する可能性もあります。
その場合は契約形態を変えることをおすすめします。
延々と同じ料金で、変更対応するわけにはいきませんからね。

特に2度手間、3度手間は最悪です。
デザイナーに依頼していた場合は、追加料金を請求されてもおかしくありません。

もし要望が多くなりそうなら、細かい修正は月額で対応すると良いです。
気まぐれで変更を重ねて来そうなら、一刻も早く納品を目指してください。

コスト的にできないことは、はっきりと「できない」と言いましょう。
変更対応を受けすぎると、それだけで赤字です。

もし必要以上の変更対応を断って、相手が折れ無いなら。

コストが膨れ上がるだけなので、一旦、仕事自体降りることも考えても良いです。
受注する時に、あまりにも変更が重なった場合は降りると告知しても良いですね。
強気で行ったとしても、価値のある制作物を提供できれば、相手は手放しません。

合わないクライアントは、すぐ切るべきです。
選ぶ基準は「一緒にやっていて楽しいか、高額か、苦痛が少ないか」です。

自分と合うクライアントや代理店だけを残してきましょう。
すると、精神的にも金銭的にも安定し始めます。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

WEB制作 ✕ 事業づくり学習サービス「STARTOUT」|事業づくり実践学習サービス「WAREHOUSE」|教えない学校、IT留学シェアハウス「WORKROOM」|以上3つ運営してます。近々、上記の成果を束ねて、クリエイターと起業家が生まれ、事業が生み出され続ける町を作る人。ベルリンのホルツマルクトはロールモデル。

ウエヤマ ショウタ

WEB制作 ✕ 事業づくり学習サービス「STARTOUT」|事業づくり実践学習サービス「WAREHOUSE」|教えない学校、IT留学シェアハウス「WORKROOM」|以上3つ運営してます。近々、上記の成果を束ねて、クリエイターと起業家が生まれ、事業が生み出され続ける町を作る人。ベルリンのホルツマルクトはロールモデル。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら