コードを書かずにWebサイトを作成できる画期的なWeb制作ソフト「Adobe Muse」。本レポートでは、このソフトを使い、自身のWebサイトのリニューアルを行うことを決意した著者(HTMLの知識ほぼゼロ)の体験をお伝えしていく。

■これまでの記事
【レポート】駆け出しクリエイター、"コードを書かない"Webサイト作りに体当たりで挑戦! - Adobe Muse体験記(1)
【レポート】4ステップでWebサイトが完成! 駆け出しクリエイターがコードを書かないWeb制作の概要を解説 - Adobe Muse体験(2)

全体のデザインを考える

前回のレポートで大まかなMuseの機能を理解し、実際に自分のWebサイトのデザインへと入ることにした筆者。サイトを作成するための下準備として、全体の構成を考えることからスタートした。頭の中にあるWebサイトのイメージ、盛り込みたい内容などを、スケッチブックに書き起こしながら整理していくことに。頭で考えるのは自由だけれど、本当に完成させられるかどうかは未知数……。とはいえ、最初なのでとにかくやってみたい事を書き出してみる。

まずは手書きでページ構成と大まかなデザインを練る。妄想が膨らむ、一番楽しい時間

今回作成するのは筆者のイラストのポートフォリオサイト。まずはメインのトップページにイラストを大きく配置し、上部ヘッダーに「プロフィール」、「作品ギャラリー」、「ブログ」ページなどへのアイコンを置く構成にした。

「ギャラリー」ページでは作品をスライドショー形式で表示したり、「コンタクト」ページではメール問い合わせフォームを組み込んでみたりと、細かいインタフェースのデザインもイメージを膨らませてみる。Adobe MuseではLightboxやコンタクトフォームといったウィジェットも簡単に配置できるそうなので、後々そういった機能を利用して作り込んで行くことにしよう。

Muse上で「プラン」を作成する

「Muse」のページサイズの設定画面

手描きのサイトデザインの骨組みができたところで、Muse上での作業に移ることにした。まず新規サイトを作成すると、左の図のようなページサイズの設定画面が出てくる。ここではひとまずデフォルトの数字のまま「OK」を押して進めてみることに。すると「プラン」ページが開かれるので、ここにサイトの全体像を作っていく。要は、先ほどスケッチブックに書き出した手描きの設計図と同じものを作れば良いのだ。

ページのアイコンに触れると、横に「+」ボタンが表示される。このボタンをクリックすることでページを増やす事が可能だ。クリックしてページを必要なだけ増やしていくだけで、先ほどスケッチブックに書いたものと同じ骨組みがあっという間にMuseの「プラン」ページ上に組み上がった。

「+」ボタンを押すとページが増える直感的なインタフェース

手書きで作ったラフと同じものが完成した

それぞれのページに、「profile」、「gallery」といった名称を打ち込んでいく。この段階で、ページに分かりやすい名前を付けておくと、後からリンク付けや編集をする際に楽になる。この「プラン」ページは、デザインを進める中でも時折戻って来ながら、全体像を把握するために参照していくことになるからだ。

ここまでは所要時間、わずか5分といったところ! こんなにあっという間でいいのか……?とやや不安になるほどの簡単な作業だった。とはいえ、まだまだ先は長い!

次回はこのベースとなるページに、画像の配置を行って行きたい。