昨日セミナーでお伝えしきれなかった、自身で使ってみてのヒントをまとめました。全てをお伝えしきれないのですが、まず作ってみる、という段階で必要であると思われるコンテンツについてのヒントを用意しましたので、参考にしてみてください。

見出し

各ページに大見出し・中見出し・小見出しを入れる場合に有効です。h1、h2、h3タグに該当します。大見出しは各ページに1つが好ましいという見解も...

文章

何か文字コンテンツを入れたいときに使います。Wordにあるような文字の装飾ボタンなどが現れますので、好きな太さや位置、色、リンク追加も可能。

HTMLタグを使える方は、右端の HTML をクリックして任意のタグを追加することも可能です。より自由に任意のタグを使ってレイアウトしていきたい方は右下の ウィジェット が便利です。

カラム

今読んでいらっしゃるこの部分もカラムを使用しています3列カラムの中に見出し3と文章のくり返しです左右に複数列レイアウトをしたい場合に有効です。

左右いっぱいいっぱいに文章を流すと、ユーザーは途中で読むのを止めてしまう場合があります。ある程度の幅のレイアウトにされたほうが、読みやすさという点では効果的です。

フォトギャラリー/写真

セミナーでご紹介した、写真を並べて表示したり、スライドショーで表示するためのものです。商品写真などを美しく演出する場合におすすめです。

写真と少し長めの文章を並べてレイアウトしたい場合は右上の 写真付き文章 が良いです。写真1枚と1行程度の説明書きの場合は同じく右上の 写真 でOKです。

フォーム

Jimdo規定のフォームを使う場合はこれを選択。ご自身のニーズにあったフォームを選びます。また、質問項目は任意の表記に変えることも可能になり、より便利になりました。

お客様の問合せ内容は多岐に渡るものですが、この質問項目である程度絞ることでフィルタリング出来る効果も望めます。

また、メールアドレスを載せているとbot(ボット)によってメールアドレスを引きぬかれ、スパムメールが増えるというデメリットがあります。いろいろな回避方法は存在しますが、メールアドレスを載せたくないという場合は、問合せフォームだけで受付という展開もアリです。

YouTube等

動画共有サイトやWebサイト上の動画を配置する場合に使います。ここでは YouTubeの動画プレーヤーを配置する方法 をご紹介します。

各YouTube動画の下に 共有 というボタンがありますのでクリック→さらにその右横の 埋め込みコードというボタンがあるので、そこからソースコードをコピーし、このYouTube等の中にペーストすると、ページ内にYouTubeの動画プレーヤーが現れます。

ご自身の動画以外のものを設置する場合は、著作権・肖像権・公序良俗違反等が適切に処理されたものかどうか も念のためご確認ください。動画だけでなく、静止画についても同様です。

Google マップ

会社情報などのページに案内図を掲載する場合に役立ちます。

クリックすると場所を検索するウィンドウが開きますので任意の住所を入れて地図を表示させます。また、地図の種類も任意で選択出来るようになっているので、ページ訪問者にとってわかりやすい地図を作成してください。ユーザー目線は大事!

商品/商品カタログ

ショッピングカート機能を使用し、1点ごとに商品を掲載する場合に使います。私が作った漢方薬のサイトの商品ページのようなイメージです。複数の商品の写真だけを載せる場合は 商品カタログ を使います。

クリックすると、商品の詳細を入れる項目や画像を取り込むための設定が出てきますので入力していきます。物販をされる場合はお店の顔となるページでもありますので、美しい写真を使うよう心がけたいものです。

説明をだらだらと文章を書いてしまうとユーザーの理解の妨げになる場合があります。場合によっては問合せ対応が増えることも... 簡潔に理解していただくことを目指す場合、表組みを作って掲載するとシンプルで伝わりやすくなります。

自作サイトでは 特定商取引法の表示会社紹介 を掲載する場合に表組みにまとめました。

水平線

以前Jimdoハンズオンで使い始めの方を拝見していると、各コンテンツの上下の間隔が結構詰まっている方が多いことを気づきました。

上下の間隔にスペースや水平線を作って間をもたせたり、違うパートであることを印象づけると理解に繋がります。

全て完成したら、一度ページ全体を眺めてみて、適度なスペースを設けるべきではないか検討してみてください。文章についても、段落ごとに1行空けるなどやってみては?

ウィジェット

松谷的にはかなりウィジェットを気に入っています。他の機能は出来ることの制約が多少なりあるのですが、HTMLとCSSを少しでも知っていれば、任意のコードを入れ装飾の幅を広げることも可能です。文章 にある HTML も同等の機能として使えます。