インターネットビジネス最新情報ポータル IBNIP

「Hadron」てどんなツール?デザインとコーディングが一緒にできる?

最近ではWebサイトをより簡単に効率よく作成するためのツールがたくさん登場しています。

その中で、「Hadron」も注目されているツールの一つです。Hadronは誰でも無期限に無料で使うことができるWebアプリケーションです。

2018/6/1現在では、まだ正式にリリースされていないので、今後、「Early Access」に申し込みをした人へ向けて、β版の使用権限を順次渡していくようです。

ここではHadronのWebサイトで紹介されている情報を元に、Hadronがどのようなツールであるのかをご紹介します。

Hadronがなぜ注目されているのか?

Hadronはデザインツールなのか、コーディングツールなのか?というと、その両方を兼ね備えたツールになります。

通常、Webサイトを制作するには、PhotoshopやIllustratorなどでデザインを起こしてから、HTMLとCSSでコーディングを行う、という流れ一般的でした。

ところがHadronはそれを同時に行うことができるのです。

もっとも、これまでもデザインとコーディングを同時に行うことができるツールがなかったわけではありませんが、今一つ効率性に欠けているため、幅広く利用されているとは言えません。

デザインとコーディングが効率よく、短時間で行うことができればWebサイト制作の流れは大きく変わることになります。Hadronはそれを可能にするツールなのです。

Hadronの特徴

デザインデータを作るという概念がない

通常、Webサイトのデザインはあくまでデザインであり、実際の納品物ではありません。ですから、Webサイトが完成してしまえば不要になります。

サイトの修正が入れば、デザインを修正して、クラアインが確認してOKが出れば、エンジニアに渡して、さらにコーディングされたWebサイトを再びクライアントが確認・・・と何段階もの工程で行われます。

本来、クライアントにとっては「どのように見えるか」というデザインだけではなく、「どのように機能するか」が重要なのですが、これまではデザイン確認の時点ではそれを知ることができませんでした。

ところがHadronであれば、デザイン設計はクライアントの環境で行うことができ、実際の制作物を作成の段階からコミュニケーションを取りながら共有することができるのです。

Web上で動作するプラットフォーム

上述した様に、デザインとコーディングが一度に行えるというだけではなく、HadronはWeb上で動作するプラットフォームとなるようですから、その情報をデザイナーとエンジニア、クライアントが共有することができるということです。

しかも、Web上で動作するのであれば、どこにいても、どのPCでも、あるいは、タブレットでも作業を行うことが可能となります。

例えば、クライアントとの打ち合わせの席で、実際にクライアントの目の前で、クライアントの要望通りのイメージや動作を見せることができるのです。

一人でデザインとコーディングを同時に行う場合も効率的に

デザインとコーディングを1人で行っているWebデザイナーもいます。

デザイン制作と、コーディングを行う事、この2つの作業を同時に行うことができれば、非常に効率的に短時間で行うことができますから、より多くの案件を受けることができるようになります。

プログレッシブウェブアプリ(PWA)を作ることが出来る

プログレッシブウェブアプリ(PWA)とは、見た目はアプリのようにホーム画面にアイコンがあったり、スプラッシュスクリーンが表示されたり、プッシュ通知、オフライン機能など、ネイティブアプリの機能を併せ持つWebサイトの事を言います。

Hadronはプログレッシブアプリを実現するため、「Polymer 2 Engine」(リリース時)を搭載するようです。

効率よくコードが書けるFlex boxやCSS Gridが簡単に操作できる

最近ではFlexboxやCSS Gridを使ったコーディングが主流になっています。

Hadronは、FlexboxやCSS Gridを使ってレイアウトを行うことにより、これまでの複雑なレイアウト作成の問題を解決しています。

例えば、Flexbox、Grid、カラーピッカー、シャドウなどのCSSを使おうと思う時に、変更が自動的にCSSに反映されるのです。もちろん、自分でCSSを書くこともできます。

Hadronは普及して行くか?

HTMLやCSSの基本的な知識があればHadronを使い始めることができるとのことですが、現在はまだβ版さえリリースされていない段階なので、使用感などを知ることができません。

とりあえず、筆者も「EARLY ACCESS」に申し込んでいち早くβ版を使ってみたいと思っています。今後Webデザイナーを目指す人にとっては、非常に便利なツールであることは間違いないと思われます。

個人で仕事をするWebデザイナーにとっては、デザインとコーディングを一緒に行うことができることは大きなメリットですから、使い勝手がよければ普及して行く可能性はあります。

しかしHadronの思惑はそうしたメリットよりも、デザイナーとエンジニアが同じチャンネルで作業を行うことによる効率化を推しています。

ただ、Webデザイナーやエンジニアが共同で作業を行えることは、効率的であると同時に、いつも人から見られているような、少し落ち着かない気持ちになることもあるかもしれません。

実際に使ってみた時に本当のメリットやデメリットを体感することができるのでしょう。

>>いち早くHadronのベータ版を使ってみたい方はこちらから

[記事公開日]2018.06.05
[最終更新日]2018.10.04
[ライター]natsu