ホーム

スタッフブログ

2020年11月11日

新人デザイナーの担当業務②

こんにちは。
デザインチームのAです。

未経験のデザイナーとして入社して一年が経ちました。
前回の記事から引き続き私が普段行っている業務について書こうと思います。

以前は、私が普段行っている業務内容の下記3点について書きました。

ブログ
勧誘メール
クライアント様のHP修正

今回は、最後の「デキテル関連」について書こうと思います。

デキテル新デザインの作成

デキテルではお客様の満足度を高めるために、
毎月新しいHPのデザインを追加しています。

デキテル新デザイン作成工程

 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
1)コンセプトの決定
2)デザインの紙ラフを作成
3)データラフの作成
4)カンプの作成
5)コーディング
6)コードレビューの依頼
7)テストの依頼
8)本番化

各段階に「承認」「修正」が入ります。

段階をまたがった修正(手戻り)を防ぐために、
各段階で必ず承認の依頼を出します。

コーディングに入った段階でデザインが決まっていない箇所が出てくると、
デザインを考えないといけないので、時間のロスになってしまいます。

なので、差し戻しや曖昧なデザイン漏れの箇所をなくすために
紙ラフの段階でしっかりデザインを固めることが大切です。

「差し戻し」と「手戻り」の違いについては、
下記の社長ブログに詳しく書かれています。

「差し戻し」と「手戻り」の違い
https://syde.jp/w2/archives/10786
 

1)コンセプトの決定

 
どのようなデザインを作るのか、テーマは何か、
何をコンセプトにするのか、1カラムか2カラムか、
など3案ほど別のものを出します。

デザインを作る際には、
どのようなものなのかきちんと説明できないといけないので、
マインドマップ形式で詳しく文章に書き、承認の依頼を出します。
 

2)デザインの紙ラフの作成

 
3案出した中から承認を得たコンセプトを元に、紙ラフを作成します。

WEBサイトの構造
・ヘッダー
・メインイメージ
・グローバルメニュー
・サイドバー
・コンテンツ
・フッター

上記の構造に沿って紙に書き出します。

車検の流れ、事例、在庫車情報、キャンペーン情報など、
デキテルは車屋さん向けのコンテンツ部分が豊富なので
それらを把握したうえでデザインを考えます。
 

3)データラフの作成

 
紙ラフの承認を得たらPhotoshopでデータラフの作成を進めます。

デキテルでは、
グローバルメニューの位置とテーマカラーの変更ができ、
スマホにも対応しているので、それぞれのデザインや、
カラーバリエーションの作成も必要です。

私がよく陥る悪い状態で、
データラフの段階で作りこみすぎて見積りの時間オーバー…
ということがあります。

時間をかけて作りこみすぎてもし差し戻しになった場合、
それまでの時間が無駄になってしまいます。

なので、まずは荒いデータラフという段階を設け、
使用する素材も仮の似たものをつぎはぎして置いていくなどして
とにかくスピード重視で作成していく必要があります。

荒いデータラフを作成し終えた段階で一旦承認依頼を出します。
そうすることで、差し戻しになった場合のコストを抑えられます。

荒いデータラフで承認を得たら、
細かいデータラフの作成へ移ります。
 

4)カンプの作成

 
次にカンプの作成です。

実際に作成するページと全く同じものを作成します。
余白や間隔などもきちっと合わせて、実際に使用する素材に変更し、
素材や背景に質感をつけたりと、クオリティアップの段階になります。

カンプの承認を得たらデザインは完成です。

続いて、このカンプをもとにコーディングをしていきます。
 

 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
途中になりましたが、一旦ここで終わります。
続きのコーディングについては次回に書こうと思います。

ここまで読んで下さり、ありがとうございました。

 

求人バナー

このページの上部へ戻る