トップ > 制作・開発 > Qrious的Web制作スタイル – デザイン
制作・開発

Qrious的Web制作スタイル – デザイン

Qrious的Web制作スタイル - デザイン

こんにちは。WebデザイナーのAkikoです。

ディレクターの千佳さんからバトンをもらって、今回はデザイン工程についてお話していきます(*^_^*)

ご注意

Qrious内で制作している場合について、わたしがデザインしたらこう進めるというものです。
わたしはとにかく手を動かしたいタイプなので、インスピレーション重視で着手が早い個人の場合とは違ってきますし、他のデザイナーが担当するとまた意識するところが違うと思います。一例としてお読みください☆

リレー記事一覧
  1. QriousのWeb制作スタイル – プロデュース(2つ前)
  2. QriousのWeb制作スタイル – ディレクション(1つ前)
  3. QriousのWeb制作スタイル – デザイン(イマココ)
  4. QriousのWeb制作スタイル – コーディング(次はこれ)
    1. QriousのWeb制作スタイル – プログラミング(これから)
      QriousのWeb制作スタイル – まとめ(これから)

デザインとは

Webデザインとは、サイトの見た目を作っていく工程。クライアントさんが要望する大部分が、このデザイン部分です。
ユーザビリティを計算しコンバージョンをあげるために、ディレクターによって作られたワイヤーフレームを元に、サイトの顔、印象を決定づけていきます。
ディレクターやエンジニアは見えない努力をたくさんしているのに、デザインはそれが見えちゃう。責任重大~(^^;

デザイナーの役割

ディレクターと綿密な打ち合わせをして依頼された背景を理解しながら制作を進めていきます。プラスαの仕事をして、サイトの価値を高めるのがプロのデザイナー。言われたことだけをやるのではプロとは言えません。はい、精進します(^^;
デザインfix後はマークアップやフロントエンドにデザインファイルを渡しておしまいではなく、デザイン意図を伝えたり、コーディングのための部品を必要に応じて用意するなど、リリースまで動けるように待機しています。

案件によってはデザインのみということが有りますので、その場合は、ディレクターに戻して提出、納品を進めてもらいます。
その際にも、ディレクターにデザインした熱い思いをしっかりと伝えて、クライアントに説明できるように心がけて制作しています。

では実際の流れを説明していきます。

2014-12-19_akiko_2

プロデューサー、ディレクターとミーティング

Qriousでは主にchatworkを使用して進行しているので、こんな案件が入りそうだよーという話がプロデューサーから来たら、関わりそうなメンバーはスケジュールの報告をしたり、こういうサイトになりそうだねー、レスポンシブかねー、WPかなー、こういうことやりたいなー、などと内容を妄想します。
この時点では無責任に(笑)、ただその時々の流行りがやっぱり話題になるので、こういうブレストが結構大事だったりします。

余談ですけどQriousでは、得手不得手による案件はディレクターから指名されることもありますが、基本的には挙手制の早い者勝ちなので、チャット上に受託案件が公開されたら、一番早い人がアサインされるケースが多いですね。わたしは手が速いので短納期の案件で指名されることが多いかも(・ω・)」ガッツ

アサインとキックオフ

案件の見積が通って受託が決まると、プロジェクトメンバーのアサインがあります。
アサインされたメンバーは案件のグループチャットに集まって、キックオフ・ミーティングを行います。
プロデューサーから概要や背景の説明をもらったあと、ディレクターを中心に細かく打ち合わせていきます。

ここで確認しておきたいのは、サイトの目的を達成するためのポイント。
・クライアントの悩み・要求
・ターゲット層
・商品やサービスの特徴・ウリ
・競合・ベンチマーク
・取り入れるべきカラーやデザインの流行

何を強調しテイストをどうすればいいのか。
要はどうしたらデザインOKを早くもらえるかです(笑)
明後日の方向に走り出しちゃうと、大きなロスになっちゃいますからね(^_-)-☆

構成を元にデザイン

ディレクターが作成したサイトマップ、WFをクライアントに承認してもらったら次はいよいよデザイン作業です。WFなどを元に、ディレクターと相談しながら進めていきます。
大体のイメージと参考サイトを頭に入れたら、まずは自由に創らせてもらいます。打ち合わせで具体的にイメージできていればいるほど、制作時間も短くできます。
ここで良い仕事ができるとホンモノです。具体的には、Webデザイナーに覚えておいてほしい5つのことの1つ目にあるようなこと。

クライアントによっては、イメージが固まってないケースがあるので、デザインも絞り切れないため、そういう時にはラフを制作して、ディレクターに様子をうかがってもらいながら無駄な手数を無くす努力をしています。

悩み出すと良いものはできないので、わたしの場合は迷ったらディレクターに現状を見せて相談!
視野の広く引き出しの多いディレクターは「こんなのもあるよー」と例やヒントを挙げてくれます♪(ハードル上げたw)
ここが一人じゃない最大の利点と醍醐味(*^_^*)

場合によってはプロデューサーやエンジニアも意見を交えて、Web制作のあるべき姿を議論したり、学ぶところはデザインだけではなく大きいのです。

クライアント確認と修正

初稿をクライアントに提出してフィードバックを待ち、修正作業もディレクターと相談しながら。
ここでクライアントによって「なんか違う」的なぼんやりした要望が出ると長引く恐れが!!

ディレクターが要望を詰めていってくれたり、デザイナーも別パターンを用意することもあります。
はっきりしないクライアントでも「いいじゃん!」と思ってもらえるようなデザインをできるよう、意図を読み取り想像し、色々考えて提案するのですが、ばちっと決まるのはやはり創りたいものがハッキリしている場合ですね。そうでない場合はコミュニケーションを取りながら着地点を探っていきます。

そんなこんなで承認をもらったらデザインfix!フロントエンドに編集ファイルを渡してコーディングしてもらいます。
デザインのみの案件は、ディレクターに戻して提出、納品作業になります。

リリースまでのフォロー

コーディングしやすいようなレイヤー分け、グループ化をしておいたり、hover画像を用意し「このフォルダのこのレイヤーをmouseonに使ってください」と簡単なtextを用意してマークアップとフロントエンドへ。

急な変更が入った時のために、常にグループチャットは覗いて対応できるようにしています。
大規模案件がリリースできた時の達成感は、フリー1人ではなかなか味わえません(*^_^*)

今回はWeb制作のお話でしたが、Qriousでは大小関わらず、デザインのみの案件やグラフィック、イラスト、インテリア書等々も、実績のあるプロフェッショナルが承っております。お気軽にお問い合わせください♪

それではマークアップとフロントエンドさんへ、それぞれバトンをお渡ししまーす(^O^)/ハイヨ



ども
etekichi
etekichi's tail
etekichi's banana

いんふぉま~しゃる