CMSで会社のホームページを作ってみよう
－第1弾－メイン画像を自由に設定するには？

2016年10月21日

前回の記事（会社のホームページを開設する時に気をつけたいこと）にて、専門的な知識がなくてもホームページ作成ツールを使うことで、会社のホームページを作成することができることをご紹介しました。

今回は実際にどのようにしてサイトを作っていくのかを大塚商会のレンタルサーバー「アルファメールプレミア」に付いているホームページ作成ツール(CMS)を使用して説明していきます。

1.　ところでCMSってなに？
2.　アルファメールプレミアで会社のホームページを作ろう
 1.Webサイト作成メニューの選択
 2.【ステップ1】デザインの選択
 3.【ステップ2】ヘッダー・フッターの設定
 4.【ステップ3】ページとメニューの設定
 5.【ステップ4】基本設定の確認
 6.画像の登録
 7.ヘッダーの変更
 8.メイン画像の挿入

1.ところでCMSってなに？

CMSとは、コンテンツマネージメントシステム( Content Management System )の略称で、Webサイトを管理・更新できるシステムのことをいいます。数年前までHTMLやCSSといった専門的な知識を持った人しかホームページを作成できませんでしたが、このシステムを使えば初心者でも簡単にサイト構築や管理ができるようになりました。

CMSでのホームページ作成ツールは、デザインに特化したもの、ECサイトに特化したものなど様々な会社から提供されています。会社のコーポレートサイトを作りたいのであれば、レンタルサーバーを提供している会社でホームページ作成ツールが入っているプランを選択し、「独自ドメイン」を同時に取得する方法がオススメです。レンタルサーバーとドメイン、CMSは同じ会社で契約した方が管理が楽だからです！慣れている方はできるだけ費用を抑えるために別々の会社と契約するかもしれないのですが、更新のタイミングを間違えると急にホームページが閉鎖されることもあるので要注意です。また、無料提供のCMSはオススメできませんのでご注意ください。（→無料提供のCMSをオススメしない理由）

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

それでは、アルファメールプレミアのCMSを使って会社のホームページを作っていきます。

今は、ホームページだけでなく、FacebookやTwitter、YouTubeなどのSNSを使った宣伝を取り入れている会社も多いので、SNSとホームページを連携させてより多くのお客様に向けて発信できるホームページにしていきましょう。今回は、SNS連携の前に基本設定からメイン画像の設定までをご紹介します。

1. Webサイト作成メニューの選択

まずは、アルファメールプレミアの会員サイトからメールアドレスとパスワードを入力してログインします。
「Web機能」から「Webサイト作成」を選びましょう。
確認事項を確認後、「Webサイト作成作成メニューの選択」というページに移ります。
「簡易メニュー」と「通常メニュー」があるので、今回はCMSの機能をご紹介したいので「通常メニュー」で作成していきます。

2. 【ステップ1】デザインの選択

最初にデザインとフォントの選択をします。デザインテーマから好きなテンプレートを選択しましょう。IT企業、医療、美容、教育、物流、工場など様々な企業に合わせた65パターンのテンプレートが用意されています。今回は「ウェブダイレクト　リフォーム」という架空のリフォーム会社のホームページを作ってみることにします。メインになる大きな画像をこちらで用意しているので、シンプルで編集がしやすい、「フリーテーマ」の中から「スラッシュ×グリーン」を選択しました。リフォーム会社なので清潔感のあるグリーンが良いかなと思いましたが、どうなるでしょうか。テンプレートはいつでも変更可能なので、最初は「とりあえず」という気持ちで決めてみてください。
フォントも、「ゴシック(角ゴシック体)」、「メイリオ(角ゴシック体)」、「丸ゴシック体」、「明朝体」から選べるので、サイトのイメージに合わせて選びましょう。今はデフォルトのフォントを「指定しない」、フォントサイズも「標準」で進もうと思います。後から編集できるのでこの辺りはサクサク行きましょう！

3. 【ステップ2】ヘッダー・フッターの設定

次にヘッダーとフッターを設定します。この段階では文字しか入れられないですが、あとでロゴ画像に変更することも可能です。

4. 【ステップ3】ページとメニューの設定

次にページとメニューの構成を考えましょう。トップページはもちろん必要ですが、会社のホームページというと企業理念のページや事業内容、お問い合わせ先などが欲しいですね。「ページの追加」で新しくページを追加することができるので用途に合わせてページを作ってください。

5. 【ステップ4】基本設定の確認

ステップ4に進むとここまで設定してきた内容でプレビュー画面が現れるので、この内容を確認して、「完了」をクリックしてください。次にログインした時に「Webサイト作成」に進むと基本設定が保存され、これをベースに編集画面に入ります。「7.ヘッダーの変更」で詳しく説明していきます。

6. 画像の登録

それではここから本格的なページの編集に入っていきます。まず、上部ナビの「編集」をクリックし、その下に出てくる「画像の管理」を選びます。

画像の登録ができますので、会社のロゴや、サイトで使いたい写真などを登録していきましょう。その際、グループ分けもできるので「TOPページ」と使用しているページ毎に登録したり、「ロゴ」などのカテゴリー別に登録したりすると使いやすいですね。

7. ヘッダーの変更

ステップ2でヘッダーを設定しましたが、その時はまだ文字の登録しかできませんでした。会社のロゴがある場合には、サイトの一番上であるヘッダーの部分にロゴを入れたいですよね。そんな方のためにヘッダーにも画像を挿入することができます。上部ナビの「構成」から「ヘッダ・フッタの変更」を選択し、「1.ヘッダの設定」から「ロゴ画像を使用する」を選びましょう。画像の選択で先ほど登録したヘッダー用の画像を選択しましょう。
今回のテンプレートの場合、横幅は860pxなので全面的に画像を挿入する場合には横のサイズを860pxに設定したものを挿入しましょう。今回は、左側には会社ロゴを設置し、右側に電話番号を書いた画像を横860px、高さ100pxの大きさで作りました。

このように出来上がりました。会社のロゴを入れるだけでもオリジナル感が出て、ホームページらしさがでてきましたね！

8. メイン画像の挿入

次はメインの画像を入れていきましょう。「編集ページの一覧」から「トップページ」を選択して、「ページの編集」をクリックしましょう。

テキストの「ここに会社の説明等を入力します。」の先頭部分にカーソルを合わせて、「画像」というアイコンをクリックします。画像の選択画面に移るので、メイン画像として使用したい画像を選択します。先ほどもお伝えしたように、横幅860pxに合わせた画像を作成し、挿入しましょう。

これでメインの画像を挿入できました。今回はキャッチコピーもメイン画像に入れたので、「キャッチコピー等を入力します。」というヘッドラインと呼ばれる部分は削除してしまいましょう。管理画面上で要らない部分を選択し、「Backspace」や「Delete」で消すことができます。
オリジナルのメイン画像を入れることで会社がアピールしたいことを分かりやすく伝えることができますね。

このようにアルファメールプレミアでは、ブログ感覚でホームページを作ることができます。今回は、第1弾として基本設定からメイン画像の挿入までのチュートリアルをご紹介しました。難しい知識がなくても簡単にホームページを作成することができましたね。第2弾では、リフォーム施工実績の項目を追加し、施工写真を載せることでさらに会社の魅力を伝えられるトップページの作り方をご紹介します！

ここまでを読んで、もう既にアルファメールプレミアを使ってみたくなった方は、14日間無料体験ができますので是非ご利用してみてください。

それでは、第2弾をお楽しみに！

<追記>
記事掲載しました！
－第2弾－ファーストビューを充実させる
 －第3弾－FacebookをHPに埋め込む
 －第4弾－YouTube動画をHPに埋め込む
 －第5弾－TwitterをHPに埋め込む