Webデザインとコーディングを同時に実現【Quarkly】

サービスの詳細

「デザインしながらコーディングできれば楽なのに…とよく思う」
「デザイナーとコーダー両方雇う余裕がない」

そんな方におすすめのサービスが「Quarkly」です。

Quarklyは、Webデザインとコーディングを同時に行えるサービスで、実際のサイトの動きをプレビュー画面で確認しながら構築することができます。

操作もドラッグアンドドロップで行うことができ、細かい調整をしたい場合はコーディングすることも可能です。

ロゴマークの右上にβが付いている通り、まだ正式なリリースはされていないサービスですが、その分すべて無料で利用することができます。

それでは実際のサービス画面を見てみましょう。

登録はGoogleアカウントまたはGitHubアカウントにて行います。
ログイン後のホーム画面はこのような構成です。

今回は既存のサイト例を使ってご紹介します。
ちなみに基本的な操作方法が載っているチュートリアルもあるので、そちらを確認してから利用するとより使いやすいです。

まず左上の3つのアイコンについて説明します。
左から順に「要素の追加」「レイヤー操作」「コーディング」を行うことができ、要素の追加はドラッグアンドドロップで行えます。

中央上部では、レスポンシブデザインを確認することができます。

右側のタブでは、フォントやカラー、アニメーションの設定などの他にも、「Project setting」タブではスタイルやSEOの設定も行うこともできます。
要素を選択すると、ホバーやマージン・パディング設定も可能です。

右上の目のマークをクリックすれば、実際のサイトの動きを確認することができます。

筆者の視点

正直ご紹介してきた機能がすべて無料で利用できることにとても驚いています。
他のサービスでは有料で提供しているような内容ですし、しかも操作性もよく、大変使いやすいです。

公式サイトには「できる限り無料で提供する」とあるので、正式にリリースされれば有料化されるかもしれません。
ですが機能や使いやすさを考えれば、お金を払ってでも使う価値のあるサービスではないかと考えます。

すべて英語のサービスにはなりますが、Google翻訳を使えば苦手な方でも問題なく利用できます。
はじめのチュートリアルさえ理解してしまえば、あとは直感的に操作可能です。

Webデザインに携わっている方は、ぜひ一度無料のうちにQuarklyを利用してみてはいかがでしょうか。