CMSで会社のホームページを作ってみよう
－第2弾－ファーストビューを充実させる

2016年11月4日

CMSで会社のホームページを作ってみよう第2弾！前回の第1弾では基本設定からメイン画像挿入までのチュートリアルをご紹介しました。今回は、その続きとして、ファーストビューを充実させる方法をご紹介します。

1.「5秒」で決まる！ホームページの滞在時間

インターネットで何かを検索すると、数千件というサイトが出てきます。その中から自分の得たい情報を見つけるために、いくつものサイトを見るわけですが、1つのサイトを閲覧する時間は限られています。人はサイトの内容を認識し、このサイトを見続けるか、他のサイトを見に行くのかの判断を5秒以内に行うという説もあります。この5秒間でいかに閲覧者に合ったページかをアピールすることがホームページを作るに当たって最も重要です。

前回同様、架空のリフォーム会社「ダイレクトリフォーム」のサイトを作っていきながらCMSを使用したホームページの作り方をご紹介していきます。前回は、ファーストビュー（閲覧者の画面にサイトを表示した時に最初に表示される領域）のメイン画像に事業内容が分かるような画像を設置しました。今回はファーストビューに「リフォーム施工実績」というコンテンツを掲載することで、このサイトはリフォーム会社のサイトであること、リフォーム後の素敵な写真を見せてこの会社にリフォームをお願いしたい、と思わせるようなサイトにしていきます。

2.アルファメールプレミアで会社のホームページを作ろう

それでは、前回同様にアルファメールプレミアのCMSを使って会社のホームページを作っていきます。
前回までのおさらいはこちら。

ヘッダー、フッターなどの基本設定に加えて、メイン画像にリフォーム会社のキャッチコピー入りの写真を入れました。

1. 見出しの挿入

アルファメールプレミアの会員サイトからログイン後、「Webサイト作成」をクリックし、管理画面に入ります。
※初回設定時にWebサイト作成メニューから「通常メニュー」で作成したサイトを編集しています。「簡易メニュー」ではありません。
編集ページ一覧からトップページを選び、トップページの編集を行います。
まず、「リフォーム施工実績」というコンテンツを作りたいので、まずは見出しを挿入しましょう。
ツールバー左端の「見出し」をクリックすると6種類のデザインから見出しが選択できます。今回はHeadline2を選びました。そこに「リフォーム施工実績」という文字を入力しましょう。文字の大きさは「見出し」の右横にある「文字サイズ」で変更が可能です。

見出し下にも説明文を入力して、文字のサイズを調整するとこのようになります。

2.表の挿入

見出しと説明文を入力したら、次は写真を設置しましょう。ファーストビューに写真を多く配置すると、閲覧者がこのサイトはどのようなサイトなのかが理解しやすくなります。
今回は横並びに3つの施工実績の写真を配置させたいので、表を用いてそこに写真を設置してみます。まずはツールバーから「表」を選択しましょう。列数と行数を選べるので、今回は3列と2行の表で作成していきます。枠の線は見せない方がすっきりするので、「枠線なし」にもチェックを入れて挿入ボタンを押します。

このような表が挿入されました。薄い線が見えると思います。プレビュー画面では線は写らないので安心してくださいね。

3.画像の挿入

画像の挿入方法については前回のコラムでお伝えしましたね。
ツールバーの「画像」から登録しておいた画像を選択しましょう。この表で3枚の画像を横並びに設置するためには、横幅250px、高さ167pxの写真がおすすめです。

4.センタリングで見栄えを調整

画像も挿入して、文字も入力しました。でも表の枠に対して、写真が均等に設置されていないのでちょっと雑な配置に見えますね。

ツールバーの「中央揃え」をクリックし、写真と文字を枠に対して中央に設置できます。少しのことですが、見栄えが良くなります。

5.リンク設定で他のページも見てもらおう

素敵な写真を設置したら、もっと内容を見たいという閲覧者のために別のページを用意しておくのも重要です。興味を持った言葉や写真に「リンク」が貼られている場合がよくあると思います。これはもっとこのサイトを知ってもらうために他のページも見てもらう大事な役割を担っています。
リンクを貼りたい文字を選択して、ツールバーの「リンク」をクリックします。