Web制作
コードを書きながらデザインできる次世代ツール「Hadron」がすごい！
2018年12月16日 8:00
おはようございます！社員Aです👩
今回は、コードを書きながらデザインできる「Hadron」が次世代すぎて驚いたのでご紹介します。
もくじ
デザインと開発の新しい時代「Hadron」
Hadronは、同じ目標に向かって一緒に働くデザイナーと開発者のための開発環境であり、アイデアを前進させ、途中で互いに学び合います。
今回ご紹介する「Hadron」は、HTMLやCSSでコーディングをしながらデザインも同時並行で進められるという次世代のツールです。
「デザイナー目線」と「デベロッパー目線」の両方からコーディングすることができ、片方のスキルさえあれば簡単にWEBサイトが作れる仕組みになっています。
デザイナー目線で制作できる「Hadron」
デザイナー目線で見ると、画像やテキストなどを直観的に配置してデザインする感覚でコード不要でサイトを作ることができます。
左サイドには実際のソースコードの階層が表示され、右サイドでは細かなオプションが変更できるようになっています。
デベロッパー目線で制作できる「Hadron」
DevToolsと似ていますが、デザインに力を入れて作ることができます。
「Hadron」の機能
WindowsでもMacでも、ブラウザから使える
Hadronは、OSX、Windows、およびLinuxで動作するプログレッシブWebアプリケーションです。
ブラウザからだけでなく、デスクトップにもインストールできます。
コードを書く必要なし！独自の編集もできる
コードを書く必要がなく、直観的にWEB制作ができるのが魅力です。
もちろん生成されたソースコードを独自に編集することもできます。
alignment Flexboxをアライメントツールで使用できる
alignment Flexboxをアライメントツールで使用すると、いつものように要素を配置することができます
ツールを使用してCSSグリッドを簡単に作成できます。
Flexbox、Grid、Color picker、Shadows …などのCSSツールを使用するとCSSに反映されます。
レスポンシブなデザインも簡単に作成
新しいブレークポイントを作成し、そのスタイルを編集するだけなのでレスポンシブに対応したサイトの制作も簡単に製作できます。
あらゆるフレームワークで動作するように設計
Hadronのエディタは、ReactやVueファイルなどのファイルを解釈し、デザイン時に変更してくれます。
新しいインタプリタを作成するのは簡単で、将来誰かが別のフレームワークにサポートを追加できるように、ソースをオープンします。
「Hadron」を使うメリット
次世代のWEB制作ツールとして話題の「Hadron」ですが、主に下記のようなメリットがあります。
- 設計者と開発者は、同じチャネルを通じてコミュニケーション、共有、共同作業を行うことができます。
- 設計はエンドユーザーの環境で行われるため、イメージを共有するための準備やステップを短縮することができます。
- 同じコードベースを共有することで、設計の反復処理が大幅に向上します。
- シンプルなHTMLとCSSだけでデザインを始め、後で他のWebコンポーネントを使ったり、自分でJSを記述したりすることができる
- 一人でデザイン・フロントエンドの両方をこなすことができる。
- Webの仕組みを学びながら制作ができます。
まとめ
現在は「EARLY ACCESS」という形でベータ版が提供されています。
WEB初心者の方でもとっつきやすいツールであることは間違いありません。
HTMLやCSSの知識がなくてもレスポンシブ対応ができたり、Flexboxなどを取り入れることができ、勉強にもなります。
また、シンプルなHTMLとCSSだけでラフ案を作っておき、後からデザイナーが肉づけしていくという形でも活用することができ、今まで常識だった「デザイン→コーディング」のフローも覆されつつあります。
WEBのデザインだけでなく、制作方法も進化しているんだと驚きました。
関連記事
この記事を書いた人
社員A
入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺
