※回答一覧

 出題者   カテゴリ   作成日

中塚 玲央		 デザイン担当 2015-05-29 20:09:00
 問題   ヒント   回答数 
■Webデザインの言語化

参考のようなWebサイトがあります。
このサイトデザインのクオリティを上げたい際、あなたはWebデザイナーにどのような指示を出しますか?

<参考サイト>
http://www.roupeiro.co.jp/web2/subject01/

<必須条件>
・デジタルハリウッドのように、オレンジを使用したい
・大掛かりなことをするほど予算はない

<指示内容について>
・コピーを追加・変更は可能
・掲載されていない素材などを用意することも可能

<課題要件>
・デザインの意思疎通をいかに言語化するかの課題になります。
・そのため、集客や成果については捉われなくて構いません。		 5

 

メンバーの回答一覧　お疲れ様でした！
※講師コメント詳細は冊子に掲載されています。

なるほど
票数		 回答 講師コメント
1 ロンチ
まずは、デジタルハリウッドのサイトを見せて同じオレンジの色使いに変えてもらいます。
オレンジといっても幅広いので、見せた方が一番早いのではと思います。

また、パッと見でキャラクターのイラストしかなくキャッチコピーもないので
講師の写真や、実際に受講している生徒の写真などもメインビジュアルに掲載し
「1000名以上が受講」や「小学生から社会人まで受講可能」や「仕事帰りに手ぶらで気軽にレッスン」など
訪問したユーザーが関心を持てるキャッチコピーも一緒に掲載するようにお願いをします。

ユーザーがこの音楽教室に通いたいと思えるためには、受講風景は絶対に必要と思うので
楽しさが伝わるようなビジュアルを表現してほしいとデザイナーには指示します。		 銅 (中塚 玲央)
最重要ポイントに焦点を合わせた点が高ポイントです。重要なポイントを絞るというのもデザインのクオリティを上げることに繋がります。
0 kamino
■背景
・白色　ffffff

■ヘッダ
・左上にロゴを配置
・レフトナビではなく、グローバルナビにする
・右上にサイト内検索窓配置
・「お問い合わせ」をサイト内検索窓の左に配置

■お子さんから、大人まで楽しく演奏
・内容を3分割し、メインバナーの下に配置
・内容が3分割できなければ、バナーサイズ横幅いっぱいにして配置
・「レッスン案内」「教室案内」「アクセス」をその下に均等横幅サイズで3つ配置

http://www.dhw.co.jp/

実際にはサイトを見せながら、手書きと口頭で依頼すると思いますが、参考サイトを見せない状態でメールで伝えると想定すると伝える難しさをあらためて感じました。
自分で書いてみてなんですが、これでは伝わらないと思いますので、参考になるサイトがあればそれを見せて説明したいと思います。		 注目 (中塚 玲央)
色の具体的指示を出せるのは、とても高いスキルですね。やはり、手書きや口頭で伝えるのが一番ですが、指示ポイントの観点はすばらしいので、これがより言語化できれば発注先がより多角的になり幅が広がると思います。
0 yukko
まずは、予算とデザインの方向性に差異が出ないようにデザイナーと共通の認識を持つための打ち合わせを行います。想いを理解してもらったところで、以下のことを行います。

・何はともあれデジハリのサイトを見せてイメージを固めてもらう
・ペライチなど簡易的に作成できるページ作成サイトを使ってある程度のラフを提示する
・そのラフを共通認識とし、どの部分を写真にするか?イラストにするか?などラフを元に詳細の打ち合わせをデザイナーと行います。
(例)
・今回のサイトは音楽スクールへの入会を促すものなので、イラストではなく写真を使用する旨を伝えます。
・GUITER BASS DRUMS LESSONの文言をカタカナへ、フォントも変更

・全体の雰囲気を作成した5割程度のデザインを一度確認させてもらいます。
・その後打ち合わせを行いながら早い段階で認識のズレを改善できるように打ち合わせを頻繁に行います。

デザイナーに仕事を依頼する仕方のような回答になってしまいましたが、自分が誰かにデザインをお願いする際に実際にやっている方法になります。		 注目 (中塚 玲央)
認識のすり合わせを行いながら進めることはとても重要ですね。要望のポイントも明確になっているので、これを具体的な言語で伝えることができれば、プロジェクトの進行によりスピード感が出るでしょう。
0 chichichi
◆キーカラーのオレンジ
　…デジハリサイトをイメージしていることを伝えたうえで、オレンジの割合を今よりもっと下げて、ポイントでうまく使うようにお願いします。

◆キービジュアル
　…今のイラストでは一目で何のサイトか分からないので、
　　キャッチコピー+音楽教室だと想像できるような写真・画像を使う(クライアントさんがキャラクターを活かしたほうが良いとのことなら、この画像を使って再デザイン)

◆ヘッダー
　・紫色の説明文「初心者も上級者も楽しく上達!アットホームな音楽教室」などスッキリさせ、文字色も少し落ち着かせる。紫自体をやめて、例えばグレー等にしてもOK。

◆メイン
　・「お子さんから～」のタイトルのみが中央ぞろえで違和感があるので左揃えに統一する。
　・教室の様子、生徒の声などの写真とテキストで魅力を伝える

◆サブ…矢印など押せる感のあるデザインに。
◆配色…全体的にすべてが彩度高く、主張しているので、目立たせたいところ以外は落ち着かせる。		 銀 (中塚 玲央)
どこがどのように気になるのか？という点がわかりやすく、具体的要望もあり、明確でとても良い指示ですね。
0 awk
一旦、以下の指示を出して修正していただき、
もう一度、調整することを予定した修正指示です。

●要素にメリハリをつける。
　教室名やイメージの中に入っている英文が同じボリュームで目に入ってくるため、
　一見して何のサイトであるかが判り難くなっています。
　下記などを調整してください。
　・ヘッダーに入っている紫色の説明文と教室名の入替と各要素の大きさ調整。
　・紫色の説明文自体はもっと判りやすい簡潔な文章に変更。
　・メインイメージ内は整理してキャラクターと英文が1つのイメージとして馴染むように再デザイン。

●キーカラーであるオレンジを背景色に使用せず、主要な要素で使してください。
　・進出色を背景に使用するとユーザーにとって閲覧しにくくなるため、
　　背景は白または淡いグレー(地紋でも可)に変更。
　・ナビゲーション部分のオレンジはそのまま活かし、
　　ボディコピー上のキャッチコピー「お子さんから…」もオレンジに変更。
　　ただし、文字色オレンジは少し明度を下げる。

●ナビゲーション部分をボタンらしくするため、
　少し立体感をつけ、三角や矢印などを加える。

●フォントの傾向が揃っていないので、教室名に使用しているフォントで統一してください。
　フォントウェイトは使用箇所によって変更OKです。

●ボディコピーを2分割し、イメージ写真を追加。
　「受講日も…」の前にキャッチコピー「自分のスタイルで、手軽にレッスン」を追加し、2分割します。
　ボディコピーの横に実際の教室の様子、楽器を写真で追加。

※以上にプラスして、画面にメモを書いた画像も一緒に送ります。		 金 (中塚 玲央)
要望と代案がきちんと明文化されており、『言語化』という観点で素晴らしいです。 要望はつい抽象的になりがちですが、「例えば、このようなのはどうでしょう？」と何らかの案を出すことによって、より意図が具体的に伝わるでしょう。