実践:iWebの精神的後継者、Sparkleを使ったウェブサイトのデザイン

実践:iWebの精神的後継者、Sparkleを使ったウェブサイトのデザイン

Sparkleは、誰でも簡単にウェブサイトを構築できると同時に、プロフェッショナルにも十分な機能を提供することを目指しています。AppleInsiderがウェブサイトを構築します。

ご存知の通り、世の中にはウェブサイトが十分に存在します。しかし、もし新しいウェブサイトを作る必要があるなら、Sparkle 2.6.3 をぜひ使ってみてください。このアプリはスピードと使いやすさを重視しており、誰でも短時間でどんなウェブサイトでも作成できます。しかし、以前も同じ状況に陥ったことがあります。使いやすさは、必ずしもパワフルではないということです。

Sparkleについても、ある程度は当てはまります。Adobe Dreamweaverの熱烈なファンであれば、このツールは使わないでしょう。しかし、Sparkleとよりプロ仕様のツールとの違いはごくわずかで、アイデアを試すスピードは魅力的です。

全くの初心者なら、Sparkleは使わないかもしれません。ドラッグ&ドロップ中心の操作感で、AppleのiWebに似たアプリです。しかし、Sparkle自体にはiWebやWordPress、SquareSpaceのようなテンプレートはありません。

ただし、オンラインでテンプレートを入手できます。また、Sparkleアプリは、基本的なシンプルさに加え、必要に応じて少しだけパワーアップした機能も提供します。

ゼロから

世界中に、ウェブサイトをデザインする際にまずコンピューターに頼る人はいないでしょう。ところが、私たちはそれをやってしまいました。Sparkleのドキュメントをざっと見ただけで、ゼロから作成した2ページのウェブサイトをご覧ください。

これに 12 分かかりましたが、そのうちの一部は PayPal の「今すぐ購入」ボタンの仕組みを思い出すのに費やされました。

とはいえ、競争しようとしたわけではなく、かかった時間を知ることはストップウォッチよりも偶然に近い。むしろ、アプリを開いてすぐに使える作業を始めるのがどれだけ速いかということだ。

確かに、Sparkleを初めて開いて真っ白なキャンバスを見たときは、少し戸惑うかもしれませんが、それはほんの一瞬です。その後、「テキスト」や「画像」などの6つのボタンが並ぶのを見ると、もうお分かりでしょう。

これらのいずれかをクリックして、サイトに追加したいコンテンツを追加できます。「その他」ボタンもあって、これをクリックすると以下のような画面が表示されるので、とても魅力的です。

これは、ウェブサイトに追加したい最も一般的な要素が詰まったトレイのようなものです。クリックするだけで選択できます。

これらのオプションのいずれかをクリックすると、画面にテキストボックスが表示されます。あるいは、ドラッグして画像を挿入するためのプレースホルダーや、ページを分割するためのボックスも表示されます。

画面に表示されたら、どこにでもドラッグできます。サイズを変更したり、削除したりすることも可能です。テキストボックスなどをクリックして、既に用意しておいた文章を入力したり、貼り付けたりすることも可能です。

フォントの種類については、あまり細かく制御できません。デフォルトでは、すべてのコンピュータに搭載されているため、Web上で安全とみなされるフォントだけが表示されます。とはいえ、これらに固執するのは決して悪いことではありませんし、さらに詳しく調べれば、フォントの種類を増やす方法もあります。

Sparkleは、深く掘り下げるのではなく、便利で機能的なサイトを構築することを目的としています。ただし、eコマース機能の追加など、これまでは複雑だったオプションも含まれる場合があります。

以前、他のサイトでPayPal経由で同じ処理をしたことがあるのですが、私たちのサイトでは3回に分けて処理しました。結局、同じプロセスです。まずeコマースサイトにアクセスし、必要な設定が完了したら、それをSparkleに入力します。

通常、これはHTMLテキストのブロックをコピーし、Sparkleが待機している場所に貼り付けることを意味します。HTMLの内容を正確に把握したり気にしたりする必要はありません。すべてコピーすることだけを忘れないようにしてください。

Sparkle内でのショップページはこんな感じです。右上の「埋め込みコンテンツ」という見出しの下に貼り付けたコードに注目してください。おそらく皆さんは私たちよりもそこに注目していただけたでしょう。PayPalからコピーしてSparkleに貼り付けたのですが、メイン画像の下の「今すぐ購入」ボタンの方が気になったのです。

このコードはPayPalから「今すぐ購入」ボタン画像を呼び出しますが、それ自体は問題ありません。しかし、なぜか間違った形のボックス内に表示されます。最終的なウェブサイトでは確認できますが、Sparkleでは「今すぐ購入」ボタンが幅広すぎる画像ボックスの左側に配置されています。

少し凝りすぎています。このボックスをドラッグして好きな位置に配置できるので、ボタンを好きなように中央に配置することができます。しかし、Sparkle の通常の自動ガイドラインが正しく機能しませんでした。ガイドを使ってボックスの位置を合わせることはできず、目視で調整するしかありませんでした。ボックスのサイズは変更できましたが、「今すぐ購入」ボタンのサイズが縮んだり大きくなったりしてしまいました。

最近では、ウェブサイトをMacで美しく見せるだけでは不十分です。少なくともiPhone、あるいはAndroidでも問題なく表示できるようにする必要があります。Sparkleを使えばこれはかなり簡単にできますが、必要なすべてのコントロールが使えるわけではありません。

このプロセスは少し不必要に感じます。デスクトップウェブサイトの作成が終わったら、「デバイス」をクリックして、「スマートフォンポートレート」などのレイアウトを選択します。「+」ボタンをクリックして追加し、ラジオボタンをクリックして追加したものを選択する必要があります。

これはモバイルページとデスクトップページを分離することで、片方で見栄えを良くする変更をもう片方に影響を与えずに行えるようにするものです。それでも、手順が多すぎるように感じます。さらに、「デスクトップ」や「スマートフォン(横向き)」といった項目ごとにピクセル単位でサイズは表示されますが、それを変更する場所がありません。

これは意図的な設計であることは間違いありません。なぜなら、100種類もの画面サイズではなく、1つの基本的なオプションで済むからです。しかし、iPadユーザー向けのサイトを開発しているのであれば、どのiPad向けかがわかると便利です。

少なくとも、これは iWeb がこれまでに得たものよりずっと優れています。この Apple の Web サイト設計ツールは、iPad が最初に登場してから 1 年も経たない 2011 年に最後に更新されました。

多くの点で、Sparkle は iWeb: the Next Generation であり、そのアプリケーションの比較的使いやすさと、携帯電話向けの設計などのより現代的なニーズが組み合わされています。

Sparkle 2.6.3は、開発者から直接、またはMac App Storeから入手できます。ダウンロードは無料です。一度もお金を払ったことがない場合でも、基本的なウェブサイトをデザインすることは可能です。ただし、ウェブサイトは1つだけで、ページ数は3ページまでに制限されています。また、「Made with Sparkle」というブランド名が付けられます。

無料版にはもう一つ問題があります。Sparkleはデザインツールであり、ウェブホスティングツールではないため、Sparkleで何を作成するにしても、別途プロバイダからウェブスペースを有料で購入する必要があります。Sparkleは非常に多くのプロバイダに接続でき、更新情報を迅速に公開できます。

ただし、ご利用のプロバイダと互換性がない場合は、Sparkle ですべてのファイルをディスクにエクスポートするのが一般的な回避策です。その後、サイトスペースプロバイダが指定する方法でアップロードできます。

Sparkleの無料版ではディスクへのエクスポートはできません。また、44.99ドルの有料プラン「Sparkle One」でもディスクへのエクスポートはできません。ただし、このバージョンではブランド表示がなくなり、サイトは1つしか作成できませんが、ページ数に制限はありません。

無制限の数のサイトとディスクへのエクスポート機能を利用するには、89.99 ドルの Sparkle Pro が必要です。

Sparkle OneとSparkle Proは、Sparkle Free内でアプリ内購入としてご利用いただけます。いずれのバージョンもOS X Mavericks以降が必要です。