Photoshopでウェブサイトのモックアップ作成に慣れているグラフィックアーティストやデザイナーなら、SiteGrinder 2 Proがきっと気に入るでしょう。このPhotoshopプラグイン（「ファイル」→「自動処理」メニューからアクセス）は、レイヤー化されたPhotoshopデザインを、高機能で洗練されたコーディングのウェブサイトに変換するのに非常に効果的です。SiteGrinder Proを使えば、CSS、フォトギャラリー、Flashスライドショー、ビデオ、フォーム、ウィジェットなど、優れたテクノロジーをベースにしたウェブサイトを、コーディングの知識がなくても構築できます。シンプルなテキストボックスさえも、検索エンジンに適したメニューに変換してくれます。
SiteGrinderの仕組み
Photoshop CS4からCS4までのどのバージョンでも、SiteGrinderを使えば、たった1つのPhotoshopファイルからサイト全体（またはサイトの一部）を作成できます。SiteGrinderは、Photoshopのレイヤーカンプをページとして認識し、各ページ要素のレイヤー名に追加されたヒントを読み込みます。さらに、SiteGrinderのウィンドウでリンクやブラウザ固有の設定をいくつか入力することもできます。
Photoshop 7でのサイト作成も同様の手順で行えますが、レイヤーカンプ（Photoshop CSまでは利用できませんでした）の代わりにSiteGrinderのページ定義ツールを使用する必要があります。SiteGrinderはPhotoshop Elementsでも使用できます。ただし、ページごとに新しいドキュメントを作成する必要があります。
サイトのプレビューまたはビルドを行うには、SiteGrinderの専用ウィンドウに移動してください。ページに影響する可能性のある問題があれば警告が表示されるので、修正できます。デザインに満足したら、ビルドオプションを選択し、生成されたファイルをWebサーバーにアップロードするだけです。
SiteGrinderは、スタイル、フォーマット、配置を維持しながら、Web上でデザインをレンダリングする優れた機能を備えています。サイト全体に共通のスタイルシートを作成し、必要に応じて個々のページ用のスタイルシートも作成します。
Photoshopでは、ブラウザの一般的なルールと制限に留意しながら、大部分は通常通りデザインするだけです。例えば、コンテンツのテキストは一般的なWebフォントに限定し、高度なタイポグラフィは避けるようにしてください。Photoshopページ上の要素を少し移動させたのは、完成したWebページで重なりが生じないようにするため、一度だけでした。
SiteGrinderにはできないことがいくつかあります。訪問済みリンクのフォーマット、見出しタグの追加、アンカーの追加、そして単純なURLのサブディレクトリ作成（同一ドキュメント内）などはできません。これらの要素を使いたい場合は、コーディング方法を知っておく必要があります。
ヒントとリンク
SiteGrinderの魔法の大部分は、ヒント機能にあります。ヒントとは、ハイフンで始まる特定の単語のことで、プログラムにテキストやグラフィックの処理方法を指示します。
例えば、テキストレイヤーに--textヒントを追加すると、Webページ上に実際のテキストが作成されます。ヒントを省略すると（アンチエイリアスを使用している場合）、テキストのグラフィックが作成されます。--scrollを追加すると、スクロールするテキストボックスが作成されます。
サイト内のリンクの多くは自動的に作成されます。例えば、「About Us-button」というテキストレイヤーまたは画像レイヤーは、「About Us-page」というレイヤーコンポジションから作成されたページに自動的にリンクします。また、「About Us-popup」は、「About Us」ボタンまたはテキストにマウスオーバーした際に表示されるポップアップを作成します。SiteGrinderのボタンパネルでもリンクを作成できます。
ベーシック vs. プロ
SiteGrinderにはBasicとProの2つのバージョンがあります。価格と機能に大きな違いがあるため、Pro版の機能が本当に必要かどうかを判断することをお勧めします。Basic版には、ファビコンに加え、メールアドレスのスパム対策、固定メニューの作成、ページのheadタグへの独自コードの追加機能が含まれています。ただし、ページの背景は単色のみで、ブラウザで背景を印刷するように設定されていない限り、ページ上の画像は印刷されません。
Pro版では、高度なマルチメディア機能と動的コンテンツ機能が追加され、背景のタイリングも可能になります。サムネイルやFlashアニメーションのスライドショーを使ったフォトギャラリーを簡単に作成したり、オーディオやビデオを挿入したりできます。さらに、他のソースからデータを取り込み、移動可能なフッター付きの縦長のドキュメントを作成することもできます。フォームの作成など、様々な機能も利用できます。
検索エンジンとアクセシビリティ
残念ながら、Photoshop 内でアクセシブルな見出しタグを作成する方法はありませんが、後で HTML エディターで追加することはできます。
SiteGrinderのドキュメントには初心者向けにもう少し詳しい情報があれば良かったのですが、親切なサポートスタッフに簡単にアクセスできます。ライブウェビナーと「ゼロからヒーロー」ガイドをお勧めします。
Macworldの購入アドバイス
Photoshop CSのいずれかのバージョンを使ってウェブサイトをデザインしているなら、SiteGrinder 2 Proを強くお勧めします（私はPhotoshop CS3でテストしました）。マルチメディア、ダイナミックコンテンツ、フォーム、タイル背景などが必要ない場合は、より安価なBasicバージョンで十分かもしれません。SiteGrinderはPhotoshop 7を搭載したOS Xの初期バージョンでも動作しますが、レイヤーカンプがないとページ作成のプロセスが少しぎこちなくなります。
[Deborah Shadovitz は Photoshop バージョン 2 から使い始め、1996 年から Web サイトのデザインを行っています。]
