WORKSPACE

ここでは、HTML/CSSフレームワークMUSUBiiを含めた開発環境例を共有し、少しでもコーディングを行うWebデザイナーの役に立てたらと思う。

Tools

僕がコーディングで使う主要ツールは3つ。Visual Studio Codeで書いたコードをPreprosで最適化してChromeで見るだけ。シンプル。

Visual Studio CodeはMicrosoft製のエディタ。有名な機能が概ね内蔵されているので、プロキシを気にした設定を飛ばせる。PreprosはコンパイラのGUIアプリで、Pug・SCSSの変換やJSの連結に使う。タスクランナーが動かない環境で有用。どちらもWin7/Macで使える。

他には、SourceTreeでコードをバージョン管理したり、MAMPでローカル環境のWordPressをいじったりしているけれど、ここでは割愛。

Setting

workspace
project
docs
│ ├ css
│ ├ js
│ ├ img
│ └ index.html
src
├ pug
├ scss
└ js

制作するページが決まったら、作業フォルダ(ここではworkspace)にプロジェクト名のフォルダを作り、完成品用のフォルダ(ここではdocs)と、コンパイル前のソースコードフォルダ(ここではsrc)を準備。

├ scss
├ library
│ │
│ └ _musubii.scss

├ variable
├ mixin
├ base
├ layout
├ module
└ utility

MUSUBiiはSCSSにLibraryとしてimportする。サイトがHTTP2通信だと確定している場合は別ファイルに分ける。

Draft

制作するWebページの仕様がある程度決まったら、PugでMUSUBiiのclassを使って下書きしていく。class名はすべて英小文字とハイフンを使った単純なものばかり。プロジェクト固有の要素には新規class名を書いておく。

この時点で、レスポンシブなレイアウトとテキスト・ボタン・フォーム・テーブルは組み上がりベースができる。MUSUBiiを組み込んでおくと、ここに至るまでがとにかく早い。ワイヤーレベルのデザインが仕上がっているので、モチベーションが上がる。

Paint

あとはプロジェクト固有の要素にブラウザ上でCSSを書いて見た目を整えていく。確定した要素のCSSをローカルのSCSSにコピーする。JSの実装はこのタイミングでやったり下書きの段階でやったり、まちまち。

以前は、このようなUIデザインをIllustratorで作りProttで遷移を伝えたりしていたけれど、最終的にはレスポンシブデザイン化したコードに起こすことになるので、早く作れるならコーディングでデザインした方が工程をすっ飛ばせて良いじゃないかと考えフローを変更。

個人的にはこの「インブラウザデザイン」が一番楽しいので、作業の初日ないし早い段階で入れるよう調整をしている。

More

MUSUBiiを含めた開発環境を使うことによって、レイアウトメインのWebデザインは効率的に進められている。ただ、これでデザインの工程すべて包括できているわけではない。

あくまでも、構成+UIを効率的に組む手法なので、グランドデザインやグラフィックデザイン、ロゴやアイコンなどの細部を詰めるデザインには別途力を入れていくことを忘れないようにしたい。