4ステップでWebサイトが完成! 駆け出しクリエイターがコードを書かないWeb制作の概要を解説 - Adobe Muse体験(2)

コードを書かずにWebサイトをレイアウトし作成できる画期的なWeb制作アプリケーション「Adobe Muse」。本レポートでは、このアプリケーションを使い、自身のWebサイトのリニューアルを行うことを決意した著者の体験をお伝えしていく。

■これまでの記事
【レポート】駆け出しクリエイター、"コードを書かない"Webサイト作りに体当たりで挑戦! - Adobe Muse体験記(1)

MuseでWeb制作を行う工程は、大きく分けて「プラン」、「デザイン」、「プレビュー」、「パブリッシュ」といった4つのステップに分けられる。実際の作業の様子をレポートする前に、まずはそれぞれのステップの概要を簡単に紹介していこうと思う。

■1:プラン

Webサイトを作成する時に、コンテンツの詳細やデザインと同等に重視したいのが、サイト全体の構成とユーザビリティの高さ。見やすいWebサイトをつくるには、まずその骨組みをしっかり練ることが必要になってくる。このサイト構成の大枠を組み立てるために用意されているのが「プラン」画面だ。雑誌や本の制作でのいわゆる「台割り」にあたる部分である。

「プラン」画面では、Webサイトの全てのページを俯瞰して見ることができる。ツリー形式に表示されるため、どことどこのページに関係性があるかも把握しやすい。

また、ここで特徴的なのが、「マスターページ」の存在である。「A-マスター」、「B-マスター」というような「マスターページ」を作っておくと、そのデザインを子ページに適応できる。日頃からInDesignを使用しているデザイナーにとっては、なじみのある機能ではないだろうか。

2:デザイン

「プラン」で骨組みを作ったら、実際にページごとの詳細レイアウトを行う「デザイン」画面に進む。この画面には、「Adobe Photoshop」や「Adobe Illustrator」など、同社の他のアプリケーションでも見覚えのある「塗り」、「線」、「テキスト」といったツールのパネルが並んでいる。これらを使って色や線をレイアウトしたり、画像を貼り込んだりして作業を進めていく。

そのほか、デザイン性の高い「Webセーフフォント」を400種類以上そろえているのもMuseの特徴だ。Webセーフフォントは、サイトを見る側のパソコン環境に左右されずに正しく表示できる。加えて、文字情報として扱われるため、検索にヒットしやすくなるというメリットを持っている。フォントのサイズや色の指示もタグなしで視覚的に行えるので、非常にストレスフリーである。