アクセシビリティ重視のウェブ制作

チャコウェブ

株式会社CyberCats

受付時間:9:00~17:00(月曜日~金曜日)

中小企業のホームページ制作で事業の価値を引き出します。良いホームページの作り方や運営の方法、集客に役立つヒントをお届けします。

【テンプレート型デザインの機能をご紹介します】社会人サークルホームページ制作事例

社会人サークルホームページ制作事例

社会人麻雀サークルのホームページ制作事例をご紹介します。
テンプレート(ひな型)デザインを利用した制作事例です。

・テンプレート(ひな型)デザイン制作
・スマートフォン / タブレット対応レスポンシブデザイン
・WordPress搭載
・WordPressブログ導入
・常時SSL対応
・Googleアナリティクス(アクセス解析)導入
・ファビコン設定

サイトはこちらからご覧ください。

今回の記事では、テンプレートの制作事例をご紹介しながら、ページの各部分についての機能や役割をご紹介いたします。

テンプレートデザインの場合、デザインの配置や配列などは最初から固定されていますが、ホームページを作る目的に沿った機能を考えた配置となっています。そのため、制作者のみでなくお客様側でも、その機能や役割が理解できれば、より良いホームページ運営に繋がると考えご紹介します。

【グローバルナビ】ページ項目移動部分

グローバルナビ ページ項目移動部分

専門用語ではグローバルナビと呼ばれる部分です。
こちらには必ずリンク機能がかかっており、他のページに飛ぶ機能を持っています。

広告宣伝用のランディングページではない限り、ホームページは通常複数ページを持っています。

例えば以下のようなページ構成の場合・・・

1:トップページ
2:会社概要
3:料金紹介
4:求人情報
5:お問い合わせ

ホームページはほとんどの場合、1:トップページから入って来ますので、
トップページを見た後、
「どこにある会社なのかな?」 → 2:会社概要にリンク(ページ移動)する
「お問い合わせしてみよう」 → 5:お問い合わせにリンク(ページ移動)する
ユーザーが移動するために、グローバルナビは存在します。

この場所に入れる文字は、特殊言葉ではない誰でも理解できる言葉であり、なるべく簡潔な表現にしておくと良いでしょう。

 

【新着情報】ブログ更新部分

新着情報 ブログ更新部分

今回の制作事例では、新着情報箇所ではブログ機能を導入しています。

ホームページではほとんどのケースでトップページに新着情報を入れます。
一番最初にユーザーが目にする部分に、「動き」のある情報を掲載させたいからですね。
常に新着情報がアップされていることで、活発感、リアリティのあるホームページとして見せることができます。

また、記事タイトルをクリックすることで、実際の記事詳細ページに飛びます。

ブログ機能のサイトマップ

上記したサイトマップから分かるように、基本ページ構成とは別の、「動きのあるページ」がサイト完成後も簡単に増やせることがブログ機能の特徴です。

 

【お問い合わせフォーム】メール送信機能

お問い合わせフォーム メール送信機能

お問い合わせフォームとは、名前やメールアドレス、要件などを記入して送信ボタンを押すことで
指定してあるメールアドレスに内容を飛ばすことが出来る機能です。

お問い合わせフォームからのメール送信

お問い合わせフォーム機能では、
・メールを送る人(サイト閲覧ユーザー)
・メールを受け取る人(サイト運営者)
の2者の存在が前提となっています。

そのため、お問い合わせフォームからメールが送信されると
・メールを送った人には「無事に送信が完了した」という自動返信メール
・メールを受け取る側のサイト運営者には「お問い合わせがありました」というメール
の2通のメールが送信されますので、両者にお知らせを出すことができる機能です。

お問い合わせフォームでは、色々と質問を並べたくなる気持ちも分かりますが、
あまりに質問が多いと、メールを送る人(サイト閲覧ユーザー)には「面倒だ…」と思わせてしまいますので、必要最低限の項目だけにしておいて、メール送信の負担を減らすことが重要です。

 

【Call To Action】クリックさせたいボタン

Call To Actionとは、日本語にすると「行動を促すもの」です。
今回の制作事例では例えば以下のようなLINEの友達追加ボタンやお問い合わせページへのリンクボタンなどが該当します。

Call To Action

テンプレートでLINEボタンになっているからといって、制作の際に必ずLINEボタンを入れなければならないという決まりはありません。

Call To Actionについてはサイトごとに異なるはずですので、自分のサイトの制作目的に沿ったボタンを入れるといいでしょう。

例えば・・・

・ショップサイトに飛ばすリンクボタン
・外部で利用している予約システムサイトに飛ばすボタン
・InstagramやFacebookなどのSNSへリンクするボタン

などが考えられます。

 

まとめ

いかがでしたでしょうか?

ホームページの配置というのはユーザー目線とその機能で構成されており、ただやみくもにデザインしているわけではありません。

機能を主軸にホームページを見直してみると違った世界が見えるかもしれません。


          この記事を書いた人        
タク制作部長
株式会社Cyber Cats 制作部長。2011年よりWebサイト制作業界に入り、日々デザインとにらめっこしています。 美しい文字組みに関心があり、どうしたら相手に伝わるデザインができるか切磋琢磨する日々です。 奇抜な料理とロック好き。
詳しいプロフィールはこちらから
SNSでフォローする