こんにちは。宮水です。
楽々ゴルフを作成してから3ヶ月が経過しました。
www.rakuraku-golf.com
このサービスのフロント側（ReactとHTMLとCSS）は私が担当したのですが、一番大変だったのはHTMLとCSSです。
楽々ゴルフくらいのサービスなら、ほとんどSemantic UIで作れたのでよかったのですが...
今度はもうちょっと手の込んだ新しいサービスを作ることになり、フロントを担当することにしました。
自分はデザインもできないし、HTMLとCSSは片手間でしかやったことがないので1からHTMLとCSSを書く作業がはちゃめちゃにしんどい...。
さらに今回はReact×Atomicデザインをちゃんと使ってプロジェクトを進めてみたい...。
参考）今さらですが「Atomic Design」って何ですか？｜n.hara｜note
頑張って1から作るか...と思ったそのとき！！
どうやらこの２つのツールを使えば、HTMLとCSSを自動生成してくれるようなのです！！
Chromeの検証でちまちま作らなくても直感的にコンポーネントを作れる！！
あとはmarginやpaddingとだけ格闘すればいいので随分開発がラクになる気がする...！！！！
ということで使ってみました。
全体的な流れ
①SketchとZeplinとAnimaに登録
②SketchからPlugin導入
③CSSはZeplinのプロジェクトにアップロード
④HTMLはSketchからエクスポート
Sketchをインストールする
以下の画面の「try for free」からアプリをダウンロードします。
www.sketch.com
ダウンロードしたら、アプリケーションを開きます。
これでSketchの準備は終わりです。
Zeplinに登録する
Zeplinとは
www.monosus.co.jp
このページから、メールアドレスで登録してZeplinのプロジェクトを作ります。
1 projectまで無料です。太っ腹。
zeplin.io
Animaに登録する
HTMLの自動生成Pluginを使うためにアカウントを作成します。
Anima
Zeplinをインストールする
次に、以下のページからZeplinのアプリをDLして、セットアップします。
Zeplinの準備は終わり。
Downloading Mac and Windows apps | Zeplin Help Center
Pluginをインストールする
まずは、ZeplinとSketchを連携するPluginをここからインストールします。
Installing Sketch plugin | Zeplin Help Center
ダウンロードしたzipファイルを開いて、PluginをダブルクリックすればOKです。
続いて、HTMLをエクスポートするPluginをインストールします。
これも、ダウンロードしたzipファイルを開いて、PluginをダブルクリックすればOKです。
Sketch - Plugins
Sketchでデザインを作ってCSSを自動生成する
New documentからサイトのデザインを作ります。
最初こんな感じで「わーい、四角入れたぞー」って喜んでたんですけど、
こんなエラーが。アートボードってなに...
こちらの記事を参考にして、アートボードを作りました...！
DesktopとかiPhonとか最初のキャンバスを用意しないといけませんでした😭
technical-creator.com
無事アートボードを設定して、サイトを作り終えたら、saveして「Plugins」からZeplinを選択し、Exportします。
先ほど作ったプロジェクトにアップロード成功！
すごいーーー！！CSSができてるーーー！！
これでSketchである程度デザインを作って、Reactのプロジェクトにコピーすればかなり捗るーーー！！
神ーーー！！
LaunchpadでHTMLを自動生成する
続いてHTMLの自動生成です。
youtubeで使い方を把握しました。
www.youtube.com
プラグインがインストールできていたら、右下にAnimaって書かれたメニューが出ているはずです。
EXPORTタブを押して、CODEを選択します。Animeでプロジェクトを作っていなかったら、このときに同時に作れます。
任意のフォルダに以下のようなファイルが出来上がります。
HTMLできてる！すごい！神ーーーーーー！！
あとこのプラグイン、レスポンシブデザインにもできるみたいです✌︎('ω')✌︎
もう少しキャッチアップ頑張るぞ！
いかがでしたか？
以上、SketchとZeplinとLaunchpadでHTMLとCSSを自動生成して爆速フロント開発でした！😭
こんなに高機能なのに、ここまで完全無料で使わせていただいてて申し訳ないです。あとでプランを見て課金しようと思います。
まだ環境構築だけで、サイト製作は3連休にがっつりやるつもりなのでまたわかったことがあったら追記しようと思います✌︎('ω')✌︎
サイトが完成したら、みなさん見に来てくださいー🤟yeah
