HP運営ブログ

2017年11月のブログアーカイブ

2017.11.27.お問い合わせフォームを作ってみよう その1

皆さん、こんにちは(・ω・)ノ

中村@新人です。

 

今回はホームページの重要な部分「お問い合わせ」ページの編集の仕方を紹介します。

 

 

***  設問の追加・編集でオリジナルフォームを作成!  ***

 

まず、初期設定のお問い合わせがコチラ↓↓

 

 

 

いつも通り右クリックで「メールフォーム」から「編集」を選択。

 

 

出てくるメールフォームの編集画面がコチラ↓↓ 

 

 

メニュータブが「設問」「設定」「開始ページ」「確認ページ」「完了ページ」 

とたくさんありますが、まず「設問」でフォームの内容を決めていきます。

 

設問の内容を変えたい時は、右側の「えんぴつアイコン」 

消したい時は「ゴミ箱アイコン」 

増やしたい時は、下部にある「追加」のアイコンで変更していきます。

 

「追加」や「えんぴつアイコン」を選択するとその設問の編集画面に切り替わります。

 

 

 

基本となる設問の編集内容は「設問見出し」「必須項目」「公開」「回答形式」の4つ。 

 

設問見出し

お問い合わせフォームの左側にでる項目名

必須項目

「必須」にすると、お問い合わせをする時にこの項目を入力していないと確認するに進めない状態になります。
「無回答可」にすると、入力していなくても先に進めます。

公開

「公開」と「非公開」があり、公開を選択するとお問い合わせフォームに表示されます。

回答形式

回答形式は12形式あり、欲しい回答に合わせて形式を選びます。
簡易的なお問い合わせフォームからアンケート形式のものまで幅広く対応できます。

 

設問の追加・編集をして「ok」で更新。

この作業を繰り返してお問い合わせフォームを作成していきます。

次回は回答形式について紹介します(・∀・)っ

 

 

 

 ↓↓↓ Groopを試してみたくなった方はこちらからどうぞ ↓↓↓ 

 

 

 

2017.11.20.初心者さんのためのミニWEB語録 *** カラム ***

皆さん、こんにちは(・ω・)ノ

中村@新人です。

 

突然ですが、皆さん「カラム」ってご存知ですか?

ホームページを制作する時に「1カラムにしますか?2カラムにしますか?」と聞かれる事がある、デザイン構成に関わる言葉なのです。

今回はカラムの説明と、カラムの数の特徴を紹介します♪

 

 

●カラム(column)

「カラム」は、印刷物の段組みの縦方向の集まりや、表形式のデータの縦の列の事を表します。

ひとまず、縦の列のかたまりだと思ってください。

 

さてさて、まずは下の画像をご覧ください♪

Groopのサイトのカラムに色を付けてみました。

色の付いた縦の枠が左側は黄色の一つだけ、右側はメインとサイドに分かれています。

 

こういった縦の枠の事をカラムと呼んでいます。

 

上の画像で分かるように、Groopのサイトは、TOPページが【1カラム】

その他のページは【2カラム】の構成で作られています。

 

よく見られるホームページの構成は【1カラム】【2カラム】の他に【3カラム】もあります。

大体のホームページはこの3種類にわけられます。

 

それぞれにメリットとデメリットがあるので説明していきますね (・ω・)ノ

 

 

1カラム

メインコンテンツだけを表示させるため、内容に集中してもらえるという点が一番のメリットです。

画像を大きく表示することができるので、インパクトのあるデザインに向いています。

 

また、集中して内容を見てもらえるので、強みや推したい部分、商品のアピールポイント等が伝わりやすくて、お問い合わせに繋がりやすい構成でもあります。

なので、商品の販売サイトやキャンペーンのサイト等に向いていると言われています。

 

最近はスマホやタブレットでホームページを見る方が増えてきたので、若い方が見慣れているデザインという事もメリットの一つでしょう。

 

ただ、サイドにメニューがないため、他のページへの移動がしづらいというデメリットがあります。

ページ数が多いホームページや、他のページをいろいろ見てほしいといった希望がある場合は向かない形です。

他のページへのリンクをコンテンツ内やフッターに作ったり、グローバルナビを固定化するなどの対策が必要ですね。

 

 

 

2カラム

一番オーソドックスな形で、ホームページを見る人にとって分かりやすくて使いやすい形です。

メニューやカテゴリなどをサイドに配置できるので、他のページへの移動がしやすいという事がメリットです。

人は物を見る時にF字やZ字に視線が動くため、ページを見たときに必ずサイドカラムが目に入るので、見ているページ以外のコンテンツに気付いてもらえることも2カラムの強みです。

 

 

ただし、2カラムのデメリットも必ずサイドカラムが目に入ってしまう事。

サイドカラムを右側にする等で多少改善できるのですが、メインコンテンツに集中して欲しい場合には向いていない形です。

 

 

 

3カラム

サイドカラムを左右に置けるので、2カラムより情報量を増やせることがメリット。

左右のカラムにカテゴリやメニューなどを分けて置くことできるので、情報量の多い大きい規模のサイトやブログ等に多い形です。

商品を販売するECサイトなどでもよく見ます( ゚ω゚)

 

3カラムはメインコンテンツの幅が狭い事と情報量が多くなることがデメリットです。

一度に入ってくる情報量が多いので、メインコンテンツへなかなか集中してもらえないということがあります。

 

 

 

 

カラムの構成はホームページを作る上で、後から変更するのが難しい部分になるので、一番最初に決めたいところです。

基本的にはホームページを見る人にとって一番使いやすい形を考えて決めます。

どんなデザインにしたいのか、見てもらう対象はどの層か、全体の情報量がどれくらいになるのかなど、色々な要素をあらかじめ考えておきましょう(*´ω`*)

 

 

 

2017.11.13.会社案内を変更してみよう! その5

皆さん、こんにちは(・ω・)ノ

中村@新人です。

 

今回は会社案内変更の最終段階!

↓↓まだ「会社案内」が残っているこの部分↓↓

 

 

パンくずリストやフッターメニュー、内部のコンテンツを変更していきます。

 

 

***  コンテンツの変更方法  ***

 

Groopメニューから「コンテンツリスト」を選択します。

 

 

メニューの変更の時と同じく、選択するとそのまま編集画面に切り替わるので、

変更したいページの右側にある「鉛筆アイコン」をクリックします。

 

 

 

すると、ページの編集画面に切り替わるので、タイトルを変更して「OK」を選択。

 

 

これでページのタイトルが「会社案内」から「運営会社」へ変更できました。

 

 

「コンテンツ」のタイトルが変更されたので、コンテンツ部分とパンくずリストの部分が「運営会社」に変わっています。

 

 

 

 

さて、今日はまだまだ続きます。

タイトル変更の次はアクセスマップをコンテンツ(ページ)ごと削除します。

「コンテンツリスト」を開いて、一番右にある「ゴミ箱アイコン」をクリック

 

 

確認画面で「OK」を選択。

と、前回の「メニューの削除の仕方」とやり方は同じですが違うところがあります。

 

下の画像のように、メニューはコンテンツ(ページ)へ移動するための項目です。

 

メニューの項目を削除した時は、 

メニューだけから項目が削除されて、コンテンツ(ページ)は残っています。

ページに移動するための項目がなくなっているので、見ることができない状態です。

 

そして、コンテンツ(ページ)を削除した時は、 

ページの元になっている部分を削除するので、同時にメニューの項目も消えてしまいます。

コンテンツ(ページ)を消してから、他の部分で色々な更新をした後に、元に戻したくなった場合、

新しく作る必要があるので、削除する時は気をつけましょう。

 

 

 

さぁ、次で最後です。

変更されずにひっそりと待っていたフッターメニューを編集します。

 

フッターメニューの「会社案内」部分で右クリックをして「メニュー名編集」が一番簡単ですが、ちょっと違う方法をお教えします。

 

まず「Groopメニュー」から「メニューリスト」を開いて、

「メニューグループ」から「フッターメニュー」を選択します。

 

 

フッターメニューではまだ「会社案内」になっているので、「鉛筆アイコン」をクリックして編集画面を出します。

 

 

メニュー名を「運営会社」に変更して「OK」をクリック!

 

 

フッター部分も変更が完了しました(´∀`)ノ

 

 

メニューリストにあるメニューグループは、違うグループに同じタイトルの物があっても一か所の変更で全てのメニューには反映されないのです。

ちょっと不便に感じるかもしれませんが、メニューグループごとに違う設定ができるので、汎用性が高い仕様となっています。

 

メニューグループをいくつか作っている場合は、他の項目の名前を変え忘れていないか要注意ですね(>ω<;)

 

 

 

 ↓↓↓ Groopを試してみたくなった方はこちらからどうぞ ↓↓↓ 

 

 

 

2017.11.06.初心者さんのためのミニWEB語録 *** HPの部分の名前 ***

皆さん、こんにちは(・ω・)ノ

中村@新人です。

 

今回はヘッダーやフッターなど、ホームページを作る上で絶対に出てくる言葉…

ホームページを構成している各部分の名前の一部を紹介します!

 

Groopサイトを参考に、

大まかな分け方をするとこんな感じ↓になります。

 

 

上から順番に説明していきますね (・ω・)ノ

 

 

 

●ヘッダー(HEADER)

ホームページを見たときに、一番上に表示されている部分の事です。

最初に目に入る部分になるので、サイトを印象づける大切な部分になります。

そのため、タイトルロゴやわかりやすい案内、そしてページ間の移動がしやすいようにナビゲーションを入れることが多いです。

 

Groopのページでは最上部に「ロゴ」と説明文、プライマリーナビとして「お問い合わせ」を入れて、次にグローバルナビゲーションの形です。

オーソドックスで分かりやすいヘッダーの構成になっています。

 

プライマリーナビゲーション

説明で出てきたプライマリーナビゲーション。

コンテンツの内容と直接的に関係はないけれど、重要になるページへのリンクの事を言います。

基本的にヘッダーの右上部分にあり、お問い合わせやブログ・会社概要等が設置されていることが多いです。

Groopのページでは「お問い合わせ」が入っています。

 

 

 

●グローバルナビゲーション

ホームページの中で基本的に全てのページに共通して用意されているリンクの事です。

ページの上部の目立つ部分にあり、そのホームページの中でメインとなるページへ飛べる形が多いです。

 

Groopのページでは上の方にありますが、ホームページによっては、サイドに入っていたり、ハンバーガーメニューの中に隠れていたりします。

 

 

ハンバーガーメニュー

ハンバーガーメニューはスマホでホームページやアプリを開いた時によく見られるメニューの事です。

グローバルナビの説明で隠れていると書いたのは↓画像↓のように押したら出てくるメニューだからです♪

なぜ「ハンバーガー」なのかというと、三本線がハンバーガーみたいだから。

という面白い名付けのメニューなのです(´∀`)

 

 

 

●パンくずリスト

ページの数が多いホームページでは、自分が見ているページがどの位置のページなのか判らなくなってしまうことがあります。

そんな時に役立つのがパンくずリスト!

「ホーム > 会社案内 > アクセスマップ」のように表示してくれるサブナビゲーションなのです。

そのページがどこに属しているかを示す「属性型」、ホームページ内でどこの階層にあたるかを示す「位置型」、そのページにたどり着くまでに見てきたページが示される「パス型」の3種類があります。

Groopで作るホームページは移動がしやすいように「位置型」のパンくずリストが採用されています。

 

ちなみに「パンくずリスト」と呼ばれる由来は、童話のヘンゼルとグレーテルで迷子にならないようにパンくずを置いて森を歩いたお話が元になっています。

「パンくずリスト」以外にも「パンくずナビ」や「トピックパス」「フットパス」と呼ばれることもあるようです。

 

 

 

●サイドバー

メインとなるコンテンツの左側や右側に常に表示される部分の事です。

メニューや検索機能、広告等が配置されることが多いです。

サイドバーにメニューを置くことと、他のページへの移動がしやすくなるという特徴があります。

 

 

 

●フッター(FOOTER)

ホームページの一番下の部分の事です。

サイトによって、コピーライトだけから、会社の情報や著作権情報・サイトマップ等を置いて利便性を上げているもの、デザイン重視で画像だけなど、フッターだけで幅広い構成があります。

作成するホームページに合わせて決めていく事が大切ですね(≧ω≦)

 

 

 

ホームページを構成しているものはまだまだ沢山ありますが今回はここまで!

他の用語はまた今度紹介します♪

 

 

 

無料で今すぐ作ってみる

ブログ内検索

フィード

分からないこと、聞きたいことご相談頂ければわかりやすく・丁寧にお答えいたします。

PAGE TOP