Sparkle 1.2.3レビュー：Mac対応のWebデザインアプリはもう少し洗練されて欲しい

Macのウェブデザインプログラムという点では、River SRLのSparkle 1.2.3（Mac App Storeへのリンク）は、Blocsの「勝手にやってくれる」手軽さとMacawの自由自在な柔軟性の中間に位置します。鉱山から採掘されたばかりの原石のように、Sparkleはまだ角度によっては少々粗削りなところもありますが、もう少し工夫すれば、真に輝く可能性を秘めています。

Sparkleユーザーインターフェース — Pages を使用したことがあれば、Sparkle の Mac 対応インターフェースにすぐに慣れるでしょう。

たくさんの素晴らしいアイデア

Adobeの影響を受けたライバル製品とは異なり、SparkleはMacのPagesのような馴染みのあるルック＆フィールを忠実に再現しています。スタイルに欠ける部分は、Sparkleのインターフェースの明瞭さと使いやすさで補っています。

Macawと同様に、Sparkleは既製のテンプレートを一切使用していません。テキスト、画像、その他のページ要素を、簡単に調整できるグリッドに沿って好きな場所に配置できます。さらに、Sparkleにはドロップダウンメニュー（BlocsやMacawにはまだありません）やフォトギャラリービューアなど、便利な既製のアイテムのライブラリも用意されています。これらのアイテムは簡単に配置でき、好きなようにスタイルを設定できます。ただし、メニューのサイズを変更したり位置を変えたりすると、一部のアイテムが何の理由もなく「表示」から「非表示」に切り替わってしまうことが時々ありました。

SparkleのレイアウトエンジンはMacawよりも強力で使いやすかったです。オブジェクトを端だけでなく中心点でも整列させ、複数のオブジェクト間のスペースを均等に配分する機能が気に入りました。何よりも、思い通りのレイアウトを実現するために苦労したと感じたことが一度もありませんでした。

輝く既製品 — Sparkle の既成のフォトギャラリー、ドロップダウンメニュー、その他のアイテムは、簡単にカスタマイズしてスタイルを設定できます。

Sparkleの便利な機能も気に入りました。インスペクターパネルでチェックボックスをオンにするだけで、サイトの各ページに共通の要素（例えば、ロゴとメニューが付いたトップナビゲーションバーなど）を簡単に追加できます。要素をページの下部に固定することもできます。そうしないと、短いページの最後にある要素が、別の長いページの真ん中に表示される、といった事態を防ぐことができます。

そして、Blocs、特にMacawでのフォント選択の制限を嘆いた後、サードパーティのWebフォントを組み込む機能があることを発見したとき、私は正直言ってSparkleの開発者たちに抱きつきたいくらいでした。

確かに、実装は少し不格好です。すべてのブラウザで完全なフォントサポートを利用するには、フォントごとに3～4種類のファイルを探して追加する必要があります。フォントを追加した後もファイル名がそれぞれのフィールドに表示されたままになるため、うまく追加できたかどうかが必ずしも明確ではありません。また、オープンソースのWeb対応サンプルフォントの試用版のうち、1～2種類をインストールできませんでした。Sparkleは、これらのファイルに何が問題なのか説明してくれませんでした。

それでも、Sparkleにこの機能があるだけでも十分気に入りました。Googleの数百ものライブラリから好きなウェブフォントを追加できる機能は、私にとってさらに魅力的でした。ただ、インターフェース（これらのフォントが既にインストールされているシステムフォントと混在するため、見つけにくくなっています）は少し改善の余地があるかもしれません。（検索機能は、探しているフォントが明確であれば、フォントの選択肢を絞り込むのに役立ちます。そして、リストから理想のフォントを見つけたら、チェックボックスにチェックを入れるだけで簡単に追加できます。）

スパークルウェブフォント — ライバルとは異なり、Sparkle は Google 製のさまざまな Web フォントを提供しており、ダウンロードした他のフォントを追加することもできます。

Sparkleのライブプレビュー機能はうまく機能し、プログラム内で行った変更がブラウザでレンダリングされたページに即座に適用されました。Safari、Firefox、Chrome（これらのブラウザがインストールされている場合）でページが自動的に開き、ネットワークに接続されたあらゆるデバイスで作業をプレビューするためのローカルアドレスが表示されます。

Sparkleのオンラインヘルプガイドの一部は、私がテストした時点ではまだ完成していませんでした。しかし、残りの部分は分かりやすく、よく書かれていました。おかげですぐにプログラムに慣れることができ、疑問点もほとんど残りませんでした。

いくつかのつまらない欠点

Sparkleは多くの点で優れているため、その欠点には驚きました。MacawやBlocsと比べると、非常に基本的なCSSスタイルの調整機能が欠けていたり、制限されていたりします。例えば、パディングのコントロールが見当たらず、オブジェクトのすべての辺に境界線を適用・調整することしかできず、個々の辺の太さや色を指定することはできません。

既存のタグのテキストスタイルをカスタマイズしたり、独自のスタイルを作成したりすることは可能ですが（これは大きな利点です）、ボタンなどの要素のクラスを作成することはできません。テキストスタイルでさえ、背景色、境界線、テキストシャドウは含まれておらず、ボタンとプルダウンメニュー以外のアクティブ状態、ホバー状態、フォーカス状態を編集する方法はありません。MacawやBlocsと同様に、Sparkleは箇条書きのリストや表などの基本的なHTML要素をまだサポートしておらず、独自のjQueryやその他のカスタムスクリプトを追加するための組み込みサポートもありません。

Sparkle のレスポンシブデザイン (サイトがあらゆるサイズの画面で適切に表示されるように調整する) の実装は、最初は素晴らしいように思えますが、すぐに中途半端に感じ始めます。

正確なピクセルブレークポイントを指定できるMacawとは異なり、Sparkleは5つの便利なプリセットサイズ（ワイドスクリーン、PC、縦向きタブレット、横向き・縦向きスマートフォン）を提供しています。これらのビューはそれぞれ有効または無効にすることができ、1つのビューで基本的なデザインを決定すれば、Sparkleは他のビューに合わせて可能な限り拡大または縮小します。これは理論上は配慮のある機能ですが、実際にはテキストが非常に小さくなってしまいます。

スパークルの画面サイズ — Sparkle を使用すると、5 つの事前設定された画面サイズに合わせてデザインを調整でき、1 つの解像度の変更が他の解像度に影響した場合に警告が表示されます。

より読みやすいレイアウトを作るために、要素を小さなサイズで移動し始めたところ、元々の大きなサイズのデザインがおかしな形で変化してしまうことがよくありました。特に、各ページにピン留めしたオブジェクトを操作しているときに顕著でした。要素が意図しない場所に移動したり、意図しない形でグループ化されたり、あるいは完全に消えてしまったりしました。Sparkleは、一度にサイズを変更すると他のビューに影響が出る可能性がある場合に警告を発してくれるほど賢いのですが、こうした問題を完全に回避できるようにしてくれると良いのですが。

テスト中にプログラム自体に不具合はいくつか見つかりましたが、深刻なものではありませんでした。背景画像が文字化けしたり、フォントの選択と追加メニューが数秒間遅くなったりすることがありました。それ以外は、Sparkleのコーディングの質に文句のつけようがありません。