こんにちは。
デザインチームのFです。
今回は現在新進行形で作成中のデキテルの新デザインについて
書いていきます。
デキテルの新デザイン作成、これは私が今までおこなってきたタスクの中で
紛れもなく一番難易度が高いです。
以前クライアント様のホームページリニューアルを担当させていただきました。
リニューアルなので元々デザインもコードもあるものですが、それでも
かなり苦戦した記憶があります。
今回のデキテルのデザイン作成は一からデザインを考えコーディングもベースは
あるもののガラッと変える必要があります。
デザインについて
作成中のものも含め3つ作成しています。
3つのデザイン共に、データラフの作成までは
それほど苦戦しませんでした。
ただ、これは良いことではありません。
データラフは頭で作成し紙ラフに書き起こしたものをデータに
落とし込むというフェーズです。
なので、紙ラフの時点でしっかり考えることができていれば
そんなに苦戦しないです。
ただ、そこからカンプ～完成デザインにするのに苦戦しました。
特に3つ作成中の1つはリアルな質感をキーとしたデザインなんですが
これが難しい…。
リアルさを表現しないといけないので
「どの角度でどの位置から光が当たれば、どんな影の付き方になるか（光源）」など
を考えて作成しないと、ちぐはぐな仕上がりになってしまうんですね。
上記のような細部のところを紙ラフの時点では考えていなかったので
苦戦しました。
ここが上司と自分の違いの一つだと感じました。
1、2個目のデザインはイラストがキーのデザインなのでリアルさはないですが
遠近感を考えてデザインする必要がありました。
例えば車と人のイラストがあったとします。車の方が大きいのは当たり前なので
車を大きく、人を小さくするというのはデザイナーでなくともすると思います。
ただ、その大きさが現実世界と比較して同じ比率なのかを考えないと、これも
ちぐはぐな仕上がりになりますね。
視野を広げる
次にコーディング。
デキテルはメニュー位置が上・中央・左右に変更できたり、12色の
カラーバリエーションから選べたり、またワイド表示・コンパクト表示に変更も
できるんです。
なので、メニュー位置上の時のコーディングをして、次に何も考えずメニュー位置中央の時を
コーディングして、再度メニュー位置上の時を確認すると崩れている…なんてことが発生します。
つまり、
一つ一つ仕上げていくような視野の狭いコーディングをしていると、その場ではキレイに見えても
違う部分が大きく崩れていて、その崩れを修正すると、次はまた別の部分が……。
というように修正の無限ループに陥ってしまうんです。
なので視野を広げる＆構造を考えながらコーディングすることが大切だと分かりました。
cssを追加する際にこれを追加することによって他の場所にも影響が
出ないかを考えてコーディングすることで修正沼からはなんとか抜け出すことが出来たかと思います。
最後に
難易度が高いデキテルの新デザイン作成のタスク。
1つ目の際の失敗を活かし、2、3個目のデザインは時間を短くしつつも
クオリティを高くできるように踏ん張っていこうと思います。
最後までお読みいただきありがとうございました。
