2017/08/07

デザイン部の現場から


Guten Abend


こんばんは。
オオモリです。



デザイン部では、本社WEBに引き続きその他のサイトのリニューアル作業を進めております。

現在は、HYMER PREMIUM SHOPの作業です。




便利なサービスなどもあり、
誰でも手軽にWEBサイトが作成できるこの頃。




ひたすらコードを手入力する時代は終焉を迎えてしまったのでしょうか・・・




まぁ、そんなことはさておき。






サイトを一つ作る流れをさらっとご紹介します。






1.理解します。

公開するサイトを理解します。
HYMERを例にすると、
そのブランドの背景とか、
商品とか、
まぁ、知らないと、どのように展開して良いのか分かりませんね。







2.コンセプトを造ります。

どういう方向性で運営していくか、
何を目的とするのか、
色々ございますね。
理解が済んだら、
制作・運営のコンセプトを造ります。

これがないと、
操作不能の船で大海原を旅するはめになります。







3.ラフ。

いよいよデザインっぽい作業です。
レイアウトとか書いていきます。
iPadが写っておりますが、
基本手書きですw

ノートはLIFEです。

ここでは、見栄え以外にもコード(HTML)の事も考えて書いていきます。
見てくればかりで、
コードがグダグダではダメですので。
美しいコードを書くのもデザインのひとつかと。



ラフの一例









4.コーディング。

デザインの方向性が決まったら、
コードを書きます。

通常、テキストエディタはVimですが、
写真映えしないので、Atomでスクリーンショットを撮りましたw
てへっ。

この作業、地味です。

写っているの文字だけですものね。。。。。











5.ブラウザで見ます。

一通りコードが書き上がったら、
ブラウザで見た目をチェックします。


今回は、モバイルファーストで作っていきますので、
林檎社の端末で確認してみます。



意図したとおりの表示なのか?
テキストの大きさは適切か?
そもそもこれで良いのか?


そんな事を確認しながら作業を進めます。

写真の位置やマージンをピクセル単位で調整します。

良かれと思って決めたサイズも、
端末で表示させたらイメージと異なっていたなんて事は多々あるでしょう。



これらを繰り返して、
これだ!
というものを作っていきます。







と、
かなり割愛して紹介しました。


こんな感じで制作の現場は進んでおります。






それでは、
また次回。