Blocs 1.3レビュー: Webデザインプログラムは限られた野心でうまく機能します

ウェブ上のテクノロジーは急速に変化しています。たとえ基礎を習得していても、CSSやjQueryといったツールの最新機能に追いつくのは必ずしも簡単ではありません。

ウェブデザインの初心者、あるいは私のような時代遅れの初心者にとって、Blocsは魅力的で最新のウェブサイトを構築するための素晴らしい近道を提供してくれます。シンプルさを追求して機能を意図的に絞り込んでいますが、エレガントかつスタイリッシュに目的を達成してくれます。

ウェブ版レゴ

BlocsはMacの標準的なUIのルック＆フィールを捨て去りましたが、落ち着いた黒とグレーのインターフェースは明快で使いやすく、見た目も美しいです。マウスの右ボタンの使い方が独特で、コンテキストメニューを呼び出すのではなく、ページ要素をドロップインするための別のモードに切り替えるため、慣れるのに少し時間がかかりました。しかし、Blocsは当初は使いこなすのが大変でしたが、すぐに慣れてきて、自信を持って（ほぼ）操作できるようになりました。

Blocsで作成する各ページには、ヘッダー（青）、本文（緑）、フッター（紫）という3つの領域が細い縦縞で区切られています。それぞれの領域をクリックするだけで、あらかじめ用意されたBlocのライブラリが表示されます。Blocは、ページ上で積み重ねられる長方形のコンテナです。各Blocには、プログラムがBricsと呼ぶ他のページ要素（ヘッダー、テキスト、リンク、画像など）が含まれています。シンプルで魅力的なアイコンは、各Blocを追加する前に、その外観を明確にプレビューし、各セクションでは多様なレイアウトから選択できます。隣接するメニューパネルでは、サイト全体、現在のページ、または選択した項目のオプションを微調整できます。

Blocsは、多くの細かい設定を賢く管理します。あるページのヘッダーやフッター、あるいは複数の要素に割り当てたカラースウォッチの変更は、サイト全体に自動的に反映されます。新しいページを追加すると（各ページはそれぞれタブに表示されます）、Blocsに特に指示しない限り、ヘッダーのメニューバーに表示されます。

各ブロックは、メニューコマンドまたは簡単なキーボードショートカットを使ってスタック内で上下に移動できます。また、各既成のブロックとその中のすべてのブロック（Bric）は、任意の要素をクリックすることで、機能の編集や列幅の調整など、カスタマイズが可能です。Blocsでは、様々なオプションを切り替える際にライブプレビューも表示されます。

右クリックすると、テキスト、画像ボックス、その他の要素が揃った便利でカスタマイズ可能なライブラリが呼び出され、左クリックでページに直接配置できます。アイテムを正しく選択または配置するためにどこをクリックすればよいか迷う時があり、少し扱いに​​くいと感じることもありますが、私はすぐに使い方に慣れました。

場合によっては、Bloc の 1 つの要素に変更を加えると（例えば、3 つの同一列のうちの 1 つのヘッダーテキストの色を変更するなど）、その変更が Bloc の残りの部分に波及します。ただし、選択した Bloc または Bric を複製することはできますが、元の Bloc または Bric の属性を変更しても、そのコピーには影響しません。また、複数の要素を選択してコピー＆ペーストする機能があればいいのにと思っていましたが、Blocs には現在この機能がありません。

「V」キーを押すと表示モードが切り替わり、サイトがオンラインでどのように表示され、どのように動作するかをシミュレートします。ここで、Blocsで私が見つけた数少ない不具合の一つに遭遇しました。一部の要素が時折ウィンドウ幅いっぱいにレンダリングされず、少しおかしな結果になるという不具合です。「V」キーを数回押すと、必ず問題は解決しました。（もう一つの不具合：一部のテストでは、ヘッダーを削除してから「ここをクリックしてヘッダーを追加」オプションをクリックしても、既製のBlocsライブラリが呼び出されませんでしたが、すべてではありませんでした。）

これだけの選択肢があり、それ以上はありません

Blocs 1.3には、サイトを美しく見せるための豊富なリソースが付属しています。FinderやウェブページからBlocsに画像をドラッグ＆ドロップするだけで、ストックフォトや背景パターンのライブラリに簡単に追加できます。Blocsは、ドロップした場所に基づいてアイテムをリンクします。デスクトップから移動させたところ、Blocsはアイテムを見つけることができませんでした。作業を始める前に、プロジェクト画像専用のフォルダを作成することをお勧めします。

Blocsには、Googleの魅力的なウェブフォントがいくつか収録されており、さらにページを彩る4種類のアイコンセットも用意されています。ただし、Blocsでは、これらのリストを変更して、Blocsのラインナップ以外のフォントやアイコンセットを使用することはできません。

また、Blocsを使ってサイト訪問者がダウンロードできるファイルへのリンクを簡単に作成する方法も見つかりませんでした。プログラムの親切なオンラインヘルプフォーラムで、開発者のNorm Sheeran氏は、これらのファイルをサーバー上のディレクトリに別途アップロードし、BlocsのリンクをそれらのURLに向けるという提案をしていました。将来のバージョンでは、画像だけでなくファイルやその他のリソースもプロジェクトアセットとして追加できるようになると良いでしょう。

実際、Blocsで何ができるのかワクワクし始めた矢先、その限界に何度もぶつかりました。例えば、テキストのピクセルサイズは正確に指定できるのに、他の要素のサイズ、マージン、パディングは「小」「中」「大」といったプリセットしか選べません。要素のjQueryベースのアニメーションオプションも私を困惑させ、Blocsのオンラインドキュメントは素晴らしいものの、全く役に立ちませんでした。

創作活動が完全に阻害されたと感じたことは一度もありませんが、Blocsがもう少し自由にコントロールできればいいのにと思うこともありました。公平を期すために言うと、シーランはBlocsのウェブサイトで野心的な月次アップデートスケジュールを発表しています。彼がそれを達成できれば、夏の終わりまでにこのプログラムはさらに柔軟になり、機能が充実するでしょう。

Blocsを起動してから6時間も経たないうちに、洗練された魅力的な4ページのサイトが完成しました。アップロード後（BlocsにはFTPクライアントが内蔵されていないのですが）、MacとiPadでは非常に見栄えがよく、薄型のiPhone 5sの画面でも十分でした。Blocsはクリーンなコードの作成を謳っており、複数のファイルを繋げた、少々おかしなコードがいくつか見られましたが、<div>タグを使用すると、結果はかなり無駄がなく、解析しやすいように見えました。

結論

おそらくBlocsは自らの限界を知り、自ら選択しているからでしょうが、私は限界があるにもかかわらずBlocsを気に入りました。見た目も美しく、使いこなせば使うのも楽しくなります。パワーユーザーなら、わずか10ドル追加で、より高機能なライバルソフトMacawを購入できます。しかし、スマートなサイトを素早く簡単に構築したいだけの一般人にとっては、Blocsは価格に見合う価値があるでしょう。