デザイン制作・コーディングツール「Hadron」を使ってみた

はじめに

この記事は新しい技術にチャレンジし続けるpalanのアドベントカレンダー 21日目の記事です。昨日は『屋内でのxRを活用したイベントの事例』という記事でxR系イベント事例のご紹介に加え、新江ノ島水族館様に導入いただいたWebARイベント事例が導入に至った経緯や見えてきたこと等をご紹介しました。

屋内でのxRを活用したイベントの事例

今回はコーディングをしながらデザインも同時並行で進められるという「Hadron」というツールを使ってみた感想と最近のアップデート内容についてご紹介します。

Hadronについて

Hadronは2018年にプレビュー版がリリースされたツールです。
2020年現在ですが、すぐにダウンロードができるというわけではなく、リクエストを送り承認してもらってから利用できるという流れで、MacでもWindowsでも利用可能です。

デザインを作成したら自動でコードも表示してくれ、操作もそこまで難しくなさそうなのでこれからコーディングを勉強したいという方でも始めやすいかと思います。
ちなみに筆者自身コーティングはまだまだ初心者なのでその目線で感想を書いていこうと思います！

ボタンで要素を作成できる

headerやdivもこのようにボタンでぽちぽちっと作成できるようになっています。
今までは、デザインを作成してからコードを作成していく、という進め方をしていたので、一気にコードを作成してくれるのは時間短縮にもなりつつ、ここはこういう風に書いたらいいんだなというwebの仕組みを理解しやすくなるので有り難いです。

また、クラス名をつけることができ、一つのクラスを他の要素にも反映させるコンポネート化も可能です。

レスポンシブも可能

また、レスポンシブデザインにも対応しており作成しながらすぐに確認できるようになっています。
変更したら作業画面ですぐにプレビューできるのでとても楽です。

FlexboxやGridレイアウトがつくれる

また、ボタンでリストを横並びにしたり要素をブロック状に並べることが簡単にできます。
cssを確認してみるとちゃんとdisplay:flexになっていました。

横並びのレイアウトは結構使うことが多いのでこのように簡単に学べるのは有り難いです！

初心者でもわかりやすい

基本、操作がシンプルだったのでわかりやすかったです。
また、paddingとmarginの部分が常に色分けされていたり、初心者には優しい機能もついていていました。
作ったサイトを実際にWEB上で公開することもできるので、慣れたらできることはたくさんありそうなツールです。

2020年のアップデート

また、Hadron2020年のアップデートで気になったものをいくつかご紹介します。

backgroundimageが可能に

アセットパネルからバックグラウンドを指定したデザインの作成が可能になりました。デザインの幅が広がりそうです！

Ulの改善

セレクターのリストをマウスを合わせることですぐプレビューできる機能が追加されました。
いろんなデザインを素早く試せて、すぐコードに反映されるのは嬉しいです。

デザインシステムのインストール

またElementsパネルの右上にあるノートのアイコンから、様々なデザインシステムのインストールが可能です。 Web制作のためのフレームワークBootstrapなど、参考になるデザインがすぐに利用できるのは勉強にもなります。

まとめ

今回の記事ではデザイン制作・コーディングツール「Hadron」を使ってみた感想と最近のアップデート内容についてご紹介しました！
また、今回使用した動画の一部は「Hadron」のサイトから引用しています。
アップデートも今回紹介したもの以外にもたくさん載っているのでご興味ある方は是非webサイトをご覧ください。
デザインもしながらコーディングも進めれるのでこれからコーディング勉強したい！という方にはおすすめのツールです！