-
1:ID:wS2rWp · 2週間前

#制作フロー コンテンツ未定、ワイヤーもない状態で、参考サイトみたいなイメージでデザインを先に作成する場合のコツがあれば教えていただきたいです。

私はプログラムメインの小さな会社でデザイン、htmlコーディングをしています。
デザイン、コーディングは私だけしかいなくて、あとは全員プログラマーで、相談できる人がいないので、こういった経験がある方にお聞きしたいです。

ディレクターに、「先に骨組みや導線作ってからの方がいいと思います」と伝えたら、「今回は倒置法で、先にデザインを見せる手法だから」と怒られました。

一応、その業種の競合他社がどういうつくりなのか、とかを調べて、トップページと一覧ページを、色、レイアウト別に3パターンくらい作成し、白背景のパターンで、と決まったのですが、次に、一覧ページと詳細ページをどう見せるかのデザインを先に提出しなくてはならなくなり、困っています。

項目も何も決まっていないので、項目数とか文字数とかで、変わってきてしまうなあ、と思い、手が進みません。(表を使うパターンも作成するので、項目によって幅が変わるので、もし大量の項目だったら困るし、少なすぎてもスカスカになるし、という具合です。)

競合他社を参考に、想像でデザインしてそのままプロジェクトが進んだ後に項目が決まっても、全然想像と違う項目でも、可変で対応しやすいデザインの考え方があれば教えていただきたいです。

私の予感だと、ディレクターの方が忙しすぎて、クライアント様の会議に持っていくものがなかったから先にデザイン、という考え方になった気がします。
そして、デザインしながら項目とか、構成とかを同時進行で決めていこうと思っていると感じとれます。

最近は、設計をきちんとしてからデザイン、というのが主流で、その方法がとても分かりやすくて好きなのですが、デザインだけを先に想像で見せる場合のコツがあればお聞きしたかったのです。

あまりきっちり考えすぎずに、色とか、ボタンの感じに重点を置いて考えた方がいいと思うのですが、なかなか難しいです。

経験談などがあればお聞きしたいです。

よろしくお願い致します。

21 件の回答

3:ID:jxEObr · 2週間前

上がてきとーな仕事してんだから、きみは自由にやれるチャンスくらいに思ってアートしちゃいなよ。

4:ID:Zsb1ku · 2週間前

2です。質問の回答になっていなかったので削除しました。
そういう要件が曖昧なプロジェクトは工数ばかり無駄にかかります。
プレゼン資料を作るつもりで夢物語なものを作成して、その理想にディレクターとクライアントを従わせるしかないと思ってやります。

5:ID:DehKTt · 2週間前

まず「倒置法」の言葉の使い方が間違ってるわな。

6:ID:GNl07Z · 2週間前

どの手法でも可能なのだけれど、どの手法をとっても同じコスト、同じクオリティが実現できると思っている上司がいるとしたら甚だしい誤解だ。主の言うところの「先に骨組みや導線作る」というのはいわゆる正攻法であり、効率よく制作をこなすための手段だ。

しかし、クライアントによってはデザインありきで話を進めなければならない場面も多々あるため、それに併せて制作を進めるのだが、どう考えても遠回り、手数も多く、クライアントの意見が変わったときの柔軟な対応も困難。同じ工数、同じ時間、同じクオリティ、同じコストでできるわけがない。当然、コストには限りがあるため、有限コストの中で、クオリティの低い成果物を納品するか、制作側が疲弊して内部コストでクオリティを担保するかの2択しかなくなる。

制作の知識のない営業陣は、「こうしないと案件が取れない」という能無し理論だけで話を進めようとするから、せめて何を捨てて何を得ているかぐらいは知ってもらいたい。せめて、非効率な制作を進めるためのコストを取ってこいといいたい。

とはいえ、デザイナーやプログラマーなんてのは、組織の末端に過ぎないのだから、制作効率がなんであれ、上の決定に従うしかない。それゆえに知識のない営業に発言権のある会社はほんとに惨めでかわいそうだと思うし、それに絡まれてしまったクライアントはもっとかわいそうだと思うのでした。

ポエム完。

7:ID:RbBQWV · 2週間前

そういう時はサクッと他社の構成を真似て、要所要所クライアントの内容に差し替えとけばいいんだよ。
ワイヤーフレームみせてもポカーンで、とりあえず完成の「イメージ」を見せないと何していいかわかんないクライアントが多いのも事実。あまり考え過ぎてもあなたの貴重な制作時間が奪われていくだけだよ。

8:ID:NVhaog · 2週間前

とにかく他社をパクって、たまに自分の趣味をいれる!

9:ID:q0Z4NT · 2週間前

イメージボードでいいんじゃない。

10:ID: · 2週間前

ありがとうございます。アートしてみます。発想を柔軟にしてみます。Re:3

11:ID: · 2週間前

ありがとうございます。プレゼンだと思ってやってみます。自分がこうなったらいいな、と思う方向に導けるようなレイアウトをつくるよう努力してみます。Re:4

12:ID: · 2週間前

そうですね!クライアント様がかわいそうですね!今回は方法が良くないですが、それでもいい結果になるよう、クライアント様によりそって作りたいと思います。ありがとうございます。Re:6

13:ID: · 2週間前

ありがとうございます。イメージを見せないと分からない案件はこれからもたくさんあると思いますので、いい機会だと捉え、サクッと作れるようになりたいと思います。Re:7

14:ID:w8FNog · 2週間前

参考となるサイトをキャプチャするなりして、イメージボードを作るか、サクッと模写でもする感じかな。

15:ID:z1tBW0 · 2週間前

私はアートディレクターとして、お客様に提案する立場と、ビジュアルコンセプトを作る業務をしています。

上の方々がおっしゃっている通り、イメージボードをよく作ります。

私の場合、クライアント企業と同じ業界の企業サイト(広い意味での競合サイト)を、イケサイやIO3000などからピックアップします。8~10ぐらい選びマトリクス図にまとめます。例えばこんな感じの↓
https://kajigra.com/philosophy/
(例はロゴデザインですが、考え方は同じです。)

縦軸と横軸は適当で。温かく親しみやすい←→知的クール 網羅的↑↓シンプル とか。

競合サイトのトップページのスクショを取り、マトリクスにあてはめます。

その上で、自分ならこのクライアントさんのサイトはどこのポジションがいいだろうか、を考え、その領域に色をつけます。

その後、ピックアップしたサイトの印象を、評価できる点と、課題箇所を3~4個ずつ列記します。課題箇所は、悪い点を挙げるのではなく「ここをこうすればもっと良くなる」というように表現します。

例)
※良い点
・各見出しごとにイラストがあしらわれていて、読んでいてイメージしやすい
・文字サイズがやや大きめ(17px)かつ文字と背景のコントラストが少し柔らかめなので読みやすい
※課題点
・ヘッダーメニューが多すぎて初見のユーザーにはわかりにくい。メガメニューやドリルダウンメニューを採用すれば解決できるのでは。
・お問い合わせフォームに確認画面がない。送信前には確認画面とステップナビゲーションを設置するとわかりやすい。

これを書類にまとめて、一度クライアントと意見交換します。先方の意見も取り入れ、採用する内容や要素を決めます。他社のサイトの良い点と課題点を都合のいいようにつまみ食いする感じ。

出来上がった項目を元に、トップページのヘッダー、メインビジュアル、メインビジュアルの下の段落、フッターをデザインします。これを弊社ではイメージボードと呼びます。複数案作ることもあります。

あくまで個人的な経験ですが、このやり方だと顧客満足度は高かったです。先方も資料を見たので言質を取れるメリットもありますし、競合を10サイトも出せば「よく研究しているな」と思われます。本来これはディレクターの仕事でしょうが、ディレクターさんがやらないなら、主さんがやってみるしかないですね。

16:ID: · 2週間前

イメージボード作ったことなかったですので、調べてみます。ありがとうございます。Re:9

17:ID: · 2週間前

ありがとうございます。パクるとともに、もっと練習して技術向上に努めようと思います。Re:8

18:ID: · 2週間前

普段から、もっと模写したり、イメージボードを作りたいと思いました。ありがとうございます。Re:14

19:ID: · 2週間前

本当にありがとうございます。
具体的な流れを教えていただき、大変勉強になります。トップページや、デザインの方向性を決める時に使わせていただきます!
もっと早く質問しておけば良かったです!

今回は、もうデザインの方向性は決まりましたが、一覧ページや詳細ページのデザイン・レイアウトを、項目も何も決まってない状態で進めないといけません。

もし、項目も何も決まってない状態で、他社の項目を参考に作成する場合、気を配っておくことなどはありますでしょうか?

例えば、デザインだけ先に決まって、後から項目を決めた場合、項目が多すぎてPCなのに横スクロールしないと見えなくなる、→デザイン考え直し
という事が起こり得ると思われます。

今までの案件で、そういった事はありましたか?その後、これをやっておけば良かった、というような事はありましたか?

経験不足、言葉不足で申し訳ありません。

もし、何かありましたらご教授いただけると幸いです。
よろしくお願い致します。

Re:15

20:ID:f3VXBW · 2週間前

よくプログラマーだから、HTMLわからないとかって聞くけども
その場合、WEBサービスという意味で、HTML出来る人がたくさんいないと
会社が成り立たないと思うんだよね。

21:ID:z1tBW0 · 1週間前

Re:19
項目っていうのは、グロナビのナビ項目のことかな?
数が増えたり減ったりしてもいいようなデザインにすればいいだけだと思いますが、違いますか?

>項目が多すぎてPCなのに横スクロールしないと見えなくなる、

そもそも、ナビ項目なんて多すぎる事自体が問題なのでは?
私は多くても7個ぐらいにまで絞ります。
クライアントからそれ以上の数を要求された場合、
「多すぎるとエンドユーザーが混乱しますよ。認知心理学では、7±2という考え方があって~(以下略)」
みたいな話をして、最大7個までに絞らせます。
それ以上のページは、ドロップダウンとかメガメニューとかで見せるようにします。

仕様を後回しにする以上、デザインには手戻りが発生します。その時に、どういう回避策があるかをたくさん知っておくことが大切かと。

>後から項目を決めた場合、項目が多すぎてPCなのに横スクロールしないと見えなくなる、→デザイン考え直し

トンマナから全部やり直しってわけじゃないので、これぐらいのことは、修正レベルですよ。仕様が何も決まってないことを甘えにしてはダメです。

22:ID: · 1週間前

ありがとうございます!m(_ _)m
項目というのは、一覧ページで見せる項目の事です。
例えば、ECサイトなら、商品名、価格、色、など。
ITのコーポレートサイトだと、実績一覧のページみたいな感じです。

今回作るのはコーポレートサイトで、参考サイトを見たりしてるのですが、会社によって一覧で見せれる項目が結構変わります。

とりあえず、最近よく使われてる、写真付きのカードタイプで見せたら、「エクセルっぽい表の方が見やすい」という意見をいただき、表で一覧を見せる、というデザインパターンも作る事になりましたので、項目数が気になっていたのです。

おっしゃる通り、仕様が何も決まっていない、という事に甘えてはダメですね!

今回は、デザインを見せながら仕様を同時に考えていく、という手法で、社内にデザイナー・コーダーが私しかいなく、相談できる人がいなかったので、ここで相談してよかったです。

貴重なお時間を頂き、ありがとうございました!m(_ _)m
Re:21

1 件の回答が除外されました。[詳細]
コメントの受付は終了しました。

一緒に読まれている質問

ページ上部に戻る