コンタクトフォームの設置から色変更まで簡単操作で完了! - Adobe Muse体験記(11)

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

■これまでの記事
【レポート】駆け出しクリエイター、"コードを書かない"Webサイト作りに体当たりで挑戦! - Adobe Muse体験記(1)
【レポート】4ステップでWebサイトが完成! 駆け出しクリエイターがコードを書かないWeb制作の概要を解説 - Adobe Muse体験(2)
【レポート】Webサイトの構成がボタンひとつで完成! 自分のサイトの「プラン」を作る - Adobe Muse体験記(3)
【レポート】コード記述不要の直感的な操作! Webサイトにアイコンをレイアウトする - Adobe Muse体験記(4)
【レポート】カンタン操作でpsdファイルをそのままレイアウト! Webサイトに画像を配置する - Adobe Muse体験記(5)
【レポート】ページ間リンクからパブリッシュまでサクサク進行! サイトの形を整えてみた - Adobe Muse体験記(6)
【レポート】色指定はスポイトツールで! Webサイトを"絵"のようにデザインする - Adobe Muse体験記(7)
【レポート】写真やイラストを魅力的に見せる「Lightbox」をコードを書かずにラクラク設置! - Adobe Muse体験記(8)
【レポート】マウスオーバーの効果も手軽に設定! 画像をキレイに見せる「Lightbox」を設置する - Adobe Muse体験記(9)
【レポート】GoogleマップやTwitterボタンが約5分で設置可能!各種ウィジェットを手軽に導入する - Adobe Muse体験記(10)

仕事の新規依頼の問い合わせ窓口として、または作品を見てくれた人からのメッセージを受け取る場として、ポートフォリオサイトに欠かせないのがコンタクトフォームだ。Museなら、プラグインやPHPプログラムといった知識がない初心者でも、ワンタッチでコンタクトフォームが設置できるという。筆者のポートフォリオサイトも、あとはコンタクトページを作成すれば一通り完成といったところまで来ている。今回はコンタクトフォームの設置に挑戦し、その様子を紹介したいと思う。

コンタクトフォームを設置する

Museのコンタクトフォームは、Adobeの運営するホスティングサービス「Business Catalyst」を通じてサイトを公開している場合に利用できるサービスとなっている。他のホスティングサービスを介する場合は使用できないので、まずその点だけは注意しよう。

まずは前準備として、プランページでコンタクトフォーム設置用のページを用意しておく。新規作成したページに「contact」と名前をつけ、既に用意されているBマスターのデザインを適用した。用意ができたら、早速ページアイコンをクリックして詳細のデザイン画面へと進む。

コンタクトフォームを設置するには、画面右側に表示されている「ウィジェットライブラリ」をクリックする。その中に「フォーム」というメニューがあるので、そこから「シンプルなコンタクト」「詳細なコンタクト」のいずれかを選び、画面上へとドラッグ&ドロップする。

ドロップすると、画面中央にコンタクトフォームが現れるので、「整列パネル」などで位置を調整する。ここまでの操作手順は、前回紹介したGoogleマップウィジェットの設置方法と同じである。

先ほど、「シンプルなコンタクト」と「詳細なコンタクト」の2種があると触れたが、これはフォームの内容の違いになってくる。「シンプルなコンタクト」は個人ホームページ向け、そして「詳細なコンタクト」はどちらかというとビジネス向けの仕様になっている。今回は個人のポートフォリオサイトであるため、「シンプルなコンタクト」を選択した。