家族向けイベント掲載・予約サービス「まちカレンダー」が提供する、簡単ホームページ作成講座です。Googleの無料ブログツールであるbloggerを利用して、NPOや支援グループのホームページを無料で作成してしまいましょう。HOMEホームページの作成メモ作成の手順S:ニュースS:サービスS:運営団体S:お問合せ・アクセス2014年4月27日日曜日まちカレンダーに掲載したイベント全てにリンクするまちカレンダーにイベントをただ掲載するだけでは、予約管理の集約化や、集客効果につながりません。ホームページやブログに、イベントへのリンクを貼り付ける必要があります。開催団体様の全てのイベントをホームページやブログの訪問者に紹介すると、毎回リンクを張り替える必要もなく、簡単に作成できます。開催団体様の全てのイベントを表示する方法1次にまちカレンダーにて、開催者団体一覧を表示し、該当の団体名から「この団体のイベント」ボタンをクリックします。そこで表示されるURLをコピーしてください。http://town.bookers-on.net/officesURLの一例:http://town.bookers-on.net/services?org=12bloggerの場合、ブログ記事投稿のメニューに「リンク」という機能があるので、ここで単純にリンクを作ると簡単です。3こんなリンクが作成されます。現在開催予定のイベントはこちらこれは、こんなコードから生成されています。href="http://town.bookers-on.net/services?org=1">現在開催予定のイベントはこちら</a>5バナーを利用する場合は、HTMLを次のように変えます。作成まちカレンダーに掲載したイベントにリンクするまちカレンダーにイベントをただ掲載するだけでは、予約管理の集約化や、集客効果につながりません。ホームページやブログに、イベントへのリンクを貼り付ける必要があります。単体イベントにリンクする方法1次にまちカレンダーにて、イベントを表示し、URLをコピーします。2bloggerの場合、ブログ記事投稿のメニューに「リンク」という機能があるので、ここで単純にリンクを作ると簡単です。3こんなリンクが作成されます。予約は「まちカレンダー」からお願いします。これは、こんなコードから生成されています。href="http://town.bookers-on.net/services/81">予約は「まちカレンダー」からお願いします。</a>5バナーを利用する場合は、HTMLを次のように変えます。予約は「まちカレンダー」からお願いします。無料ホームページ作成ツール「Jimdo」の弱み先日サービス・エクスチェンジ社宛にホームページ作成のご相談を受けました。自社の商品をホームページで紹介したいが、現在は担当者がHTMLレベルで更新していて、手間がかかり管理が大変とのこと。更新と商品管理を簡単にするため、リニューアルを行いたいとのことでした。このようなご相談をWEB制作会社に依頼した場合、WordPressを使ったホームページ制作のご提案をされるのではないかと思います。企業ニュースと、商品紹介の箇所はWordPressでブログ的な記事として管理。ホームページには、記事を組み込んだページ+固定ページを数枚での構成でしょうか。思いついて、Jimdoでサンプルを作ってみると、あらまあ、これは簡単。現行ページからのコピペでさくさくと作って行けます。肝心の商品紹介ページですが、これはブログ機能で作成します。カテゴリーはタグで作って、写真を貼って、これも簡単に作成できました。通常あるべき、投稿日ごとのアーカイブリストとタグごとのアーカイブリストがないことに気が付きました。これでは、ただの商品羅列になってしまい、とてもじゃないけど使い物になりません。Jimdoって確か良いサポートページもってたよな?と思い、ぐぐってみると、やはり有りました。作成できることはわかったのですが、いちいち手作業で、タグの種類分作業しなければなりません。ブログ記事のコピーができないのも気になりました。Jimdoのブログリストちょっとおもしろくて、一番最初に表示するコンテンツのみを含んだリスト表示となるんです。タイトル+写真とリストにすることもできます。使いようによっては面白いですね。無料WEBサイト作成ツール「jimdo」を使ってみるこのサイトでは、bloggerを使ってホームページを作成する方法をご紹介しておりますが、他にもWEBサイト作成ツールはたくさんあり、その1つにjimdoというものがあります。このサービスはなかなか優秀なのですが、無料バージョンの場合に広告が掲載されること独自ドメインが使えないこの2点がbloggerに比べて大きなマイナスでした。2014年4月現在、無料版でも広告が何故か掲載されません。これであれば、更にビジュアルのよいHPを作成するツールとして、jimdoはかなり有効だと思います。サンプルサイトを1時間位で作ってみました。jimdoをつかったサンプルサイトこちらの見た目は、より”WEBサイト”として洗練しています。設定方法に癖が強く感じられるのですが、HTML等を知らなくても十分作成できます。サポートサイトや使い方の案内が手厚く、プロフェッショナルサービスも提供されている点が評価できます。有料版にはメール機能が付属して、広告非掲載+独自ドメイン利用可になります。月々1000円程度と考えると、支払う価値がありそうです。無料ツール比較2014年4月14日月曜日ファビコンの設定ファビコンとは、ブラウザの上部に表示される画像のことです。複数のホームページを表示している場合、タブメニューが幾つか作成されて、そこに小さな正方形の画像が表示されています。これがファビコンです。これをオリジナルのものに変更することができます。設定ページの[レイアウト]メニューから、ファビコンの編集をクリックします。画像を選択する設定画面が表示されるので、ファビコンの画像ファイルを設定します。作成」などと検索すると、無料で作成できるサイトが表示され、そこでできます。作成2014年4月3日木曜日スマートフォンで情報が消える?bloggerを使うと、スマートフォンで見た時に自動調整され、最適なページが表示されるということを、なぜbloggerを使うのか?の記事で紹介しました。ページで凝ったHTMLを作成すると、いくら自動調整が入るとはいえ、限界をこえてしまい、ひどいレイアウト崩れが発生することも考えられます。サイドに表示したコンテンツは、リスト形式のメニュー以外表示されないようです。問合せやアクセス方法など重要情報へのリンクは必ずメニューに入れましょう。ホームページを作成・変更したら、必ずスマートフォンでもチェックしましょう。作成ホームを作成するホームページらしさの演出に、ホームというメニューの存在があります。ホームページの顔となるもので、企業のホームページでは、必要な情報、旬な情報に簡単にアクセスできるようリンクを提供したり、企業イメージや商品についてわかってもらえるようビジュアルを工夫したコンテンツを用意したりしています。bloggerを使った場合に限らず、ブログを使っている場合、「ホーム」というトップページを自由に設計することが困難です。通常の場合は、最新投稿記事が表示された普通のブログらしいページが表示されるだけです。bloggerを使った場合は、タブメニューとページの組み合わせで、HTMLページ通常のブログ同様、最新記事が投稿されたブログらしいページのどちらかをホームとします。本当は、HTMLページと、投稿記事を組み合わせたページでホーム作成したいのですが、残念ですね。HTMLページをホームとする場合やり方は今まで何度も作成してきたように、ページを作って、メニューに追加する作業です。団体のイメージに相応しいような、画像や動画を入れたこだわりのページに仕上げるのもいいですね。メニューを設定する際に、一番左(リスト形式の場合は上)に表示されるように、「ページの順序」を入れ替えてくださいね。【TIPS】ニュースページを作成する【blogger機能】メニューを作成するブログページをホームとする場合メニューの設定で、ブログページの名称・表示順番を変更します。設定画面左サイドにある[レイアウト]を選択すると、次のような画面が表示されます。ページの編集をクリックすると、設定ページが表示されます。「表示するページ」の下に、テキストボックスが表示されています。これがこのブログでの投稿記事を表示するページになります。このテキストボックスに「ホーム」あるいは「トップ」というような名称を入れます。次に、「ページの順序」で、一番上に順番を入れ替えます。※ホームのメニューはやはり一番左側に表示されるべきなので。保存をクリックすると、完了します。作成ホームページ制作を承りますこのような「ホームページ作成講座」をまちカレンダーのお客様向けに立ち上げ、情報をいろいろ記載しているのですが、設定は確かに簡単。お忙しい皆さんに、1から設定してもらうにはハードルが高いかな?と思ったりもしました。そこで、bloggerを使ったホームページの作成をお手伝いするサービスも同時に提供していきたいと考えています。費用や内容の詳細は、下記のページをご確認ください。まちカレンダーのお客様向けに、費用も抑えめです。NEWS【TIPS】ニュースページを作成するブログは簡単に記事を投稿することができるツールです。ラベルによってカテゴリーに分けたり、投稿日ごとに検索させることはできますが、一般的に1つのサイトで複数種類のブログを展開するのは困難です。団体や主催するイベントに関する事務的要素の強いアナウンスメント日々の出来事やイベント報告など、楽しい内容のものの2種類を更新していくことが多いのではないでしょうか。ここではアナウンスメントを「プレスリリース」あるいは「ニュース」というメニューとして、提供する方法をご紹介します。アナウンスメント記事を投稿するこれは通常のブログ記事投稿と同じで、普通に記事を書いて公開するだけです。記事のラベルに「NEWS」というタグをつけてください。記事を投稿する画面の右サイドに、投稿の設定というメニューが有り、ここでラベルをクリックすると、入力欄が表示されます。一度設定すると以後はリストから選択するだけで、設定が完了です。メニューを作成する作成の手順メニューのSTEP5にて、タブ形式のメニューを作成したのを覚えていらっしゃるでしょうか。【blogger機能】メニューを作成するレイアウト画面にてすでに設定済みの「ページ」ガジェットの編集をクリックします。設定ページが開きますので、ここから「リンクページを追加」のメニューを選択します。ここで「ページタイトル」に、ニュースあるいはプレスリリースといったメニュー名を入力します。「URL」には、NEWSというラベルが付いたニュースを全て表示することのできるURLを指定します。URLは、最初に作成した「NEWS」というラベルがついた投稿から確認できます。投稿の一番下部の、「NEWS」と書かれているところ(黄色の箇所)をクリックして表示されれるページのURLです。以後、アナウンスメント系の記事をNEWSというタグ付きで投稿することで、立派なプレスリリースを持つことができます。ホームページの体裁に近づき、閲覧者様からも見やすさが増しますね。一般的なブログでよくあるナビゲーションに、投稿年月から投稿を探すビューと、「子育て、幼稚園、出産」というようなキーワードから投稿を探すビューの2つがあります。bloggerでホームページを作成することを選択しても、ブログとしての記事と、閲覧者が手馴れているビューを使わない手はありません。サイドにある[レイアウト]を選択すると、次のような画面が表示されます。メニューとして一般的な表示位置である、右サイドから「ガジェットを追加」をクリックします。表示されたガジェット一覧より、「ブログアーカイブ」を選択します。好みに応じて設定を変え(プレビューで変更がすぐに確認できます)、保存をクリックすれば完了です。同様にレイアウトの設定ページから、ガジェットの追加を選択します。「ラベル」を選択すると、設定ページが表示されます。好みで設定して、保存をクリックすると、ビューが表示されます。【TIPS】サービスページの作り方サービスページとは、ご自分が提供されているサービスやイベントを紹介するページです。ユーザーとなるお客様が一番必要とするページになります。作成例では、弊社が提供している「まちカレンダー」サービスを取り上げました。どのようなサービスで、誰が利用するのかを説明するのですが、あまり丁寧に読んでる人はいらっしゃいませんよね。イラストや写真が命です。ひと目でどんなサービスなのか、興味を惹かなければなりません。複数サービスがあるときは、サービスリストを作るといいですね。S:サービス一般的に必要な情報は次のとおりです。「幼児リトミック」といった提供サービスの名称です。どのようなサービスなのか、具体的に簡潔に記載します。」などと、利用できる方を明確に記載します。値段いくらかかるのか、これがはっきりしないサービスは信頼性にかけます。材料費や教材に別途費用がかかる場合は、これも明記します。利用方法・問合せ予約がいるのか、直接行けばいいのか利用する方法を明確にします。記載した情報が少ないと、問合せが発生します。電話やメールアドレスを合わせて記載しましょう。【TIPS】お問合わせ・アクセスページの作り方お問合わせ・アクセスページページとは、サービスがどこで提供されているか、団体所在地へのアクセス、コンタクトする方法を示した、非常に大事なページになります。どのサイトでのある内容なので、目新しさはないと思いますが、NPOや支援グループ様のホームページでよく見かける残念な例があります。改善をおすすめします。メールアドレスが見つからないメールがフォームからのみ送信できるメールアドレスが画像で表示されているフォームを提供するのみで、メールアドレスが記載されていない場合がございます。一昔前、メールフィルタの性能が悪く、WEBサイトを自動的に検索するロボットからの迷惑メールが大量に送られてきた時代の名残だと思います。GMailといったフリーメールでも、適切なメールフィルタを利用しているので、迷惑メールが受信してすぐに「迷惑メールフォルダ」に入ることが多くなりました。スマートフォンからの利用が増えた今、コピペでアドレスがコピーできるか、クリックひとつでメーラーが開くようにならないと、問合せが手間に感じてしまいます。電話番号が表示されていない住所が表示されていない個人で運営されていらっしゃるからでしょうか、初めて利用するには心配なほど情報掲載がないサイトを見かけます。個人情報の公開が気になるようでしたら、必ずその旨を明記しましょう。メールアドレスを必ず掲載しましょう。できれば、どのような人物が運営しているのか、顔写真や経歴を掲載できると、ユーザーの安心感が増します。地図の表示がないスマートフォンのシェアが伸びている時代です。S:お問合せ・アクセス一般的に必要な情報は次のとおりです。NPO法人名や会社名といった名称です。住所からすぐに立地がイメージつかないものです。公共交通機関の駅やバス停からの距離が具体的に示してあると、より利用しやすいですね。問合せを電話でされる方多いですよね。対応できるのであれば、是非記載しましょう対応可能な時間を明記しましょう対応可能時間外でも電話がきます。留守番電話にできる番号が望ましいです電話番号が公開できない場合は、その旨明記しましょうメールアドレスフォームがあっても、メールアドレスを明記しましょう。画像での表示や一部の表示をわざと変えるのも止めましょう。迷惑メールは、あくまでフィルターではじきます。地図の掲載は簡単です。関連記事からやり方を見て下さいね。無料でイラスト・写真を利用する個人のブログで使う場合は、無償で利用できる画像や写真をインターネット上で提供しているサイトがたくさんあります。商用利用となると話は別。料金の支払いが必要だったり、作者の許可が必要だったりと、非常に面倒です。ホームページ全体のイメージを崩さないように、テイストの似たイメージを探すのはただでさえ大変なのに、ましてや無料のものを探すのは不可能に近いです。稀に存在するのですが、その画像はたくさんの団体・企業で使用されており、個性が出せなくなったりします。予算がふんだんにあるわけではない場合、次のサイトを使っています。イラストAC写真AC確かに商用でも無料で使えるのですが、会員登録が必要で、毎日のように広告メールが飛んでくるようになります。素晴らしいイラストや写真が提供されているので、本当に助かります。【blogger機能】テンプレートを変えようブログツールにはよくある機能ですが、bloggerでも見た目のテンプレートを変更することができます。管理者画面の左サイドにあるメニューより[テンプレート]を選択すると、いろいろなテンプレートを選択することができます。これらのテンプレートは、おそらく英語圏で作成されたのではないかと思うのですが、いくつかのテンプレートは日本語のサイトにはうまくフィットしません。カスタマイズをすればいいのでしょうが、大変なので、まずは適切に見えるものを選択するのがいいと思います。時間や予算がとれた時に、あとから変更できます。コンテンツの配置や、色、サイズ、フォントなどもカスタマイズできますよ。【blogger機能】メニューを作成するホームページといえば、タイトルがあり、タブやフレーム(四角い枠)のメニューがあり、そこから複数のページが表示される、というのが一般的なイメージではないでしょうか。bloggerをホームページとして利用するには、まずメニューを利用するのが一番です。サイドにある[レイアウト]を選択すると、次のような画面が表示されます。上記の画面では「ページ」と書かれていますが、初めて設定するときには、Headerの下「ガジェットを追加」と書かれていますので、これをクリックします。ホームページらしいのはこちらだと思います。右側に40%くらいの表示幅で、「ガジェットを追加」とあります。これをクリックします。このレイアウトの場合、右側にリスト形式でメニューが表示されます。ページが沢山ある場合、サービスリストとしてなど、一部のページ・メニューをこの形式で提供するのがいいのではないでしょうか。※1と2を併用して作成することもできます。すると、ガジェットを選択すページが表示されますので、「ページ」を選択します。ページを選択すると、次のような設定画面が表示されます。説明しましたが、メニューとして提供したい内容を「ページ」として作成してある場合、チェックボックスでメニューとして表示するか、非表示とするかを選択するだけで、タブメニューが完成します。公開時に自動的に新しいページを追加するという機能にチェックが入っていると、わざわざ設定しなくても、ページを作成する度にメニューが増えますが、表示位置が指定できないので、自分で設定するほうが適切かもしれません。ページの順序マウスでドラッグ・アンド・ドロップすることで、表示順を入れ替えることができます。投稿記事や他のサイトを直接指定して、メニューにすることができます。このホームページには「S:ニュース」というメニューがあり、このメニューでは、プレスリリースを一覧表示するのが目的です。このメニューでは、「NEWS」とタグ付けされた投稿記事のみを表示することにしており、http://machi-calendar.blogspot.jp/search/label/NEWSというURLが指定してあります。設定が終わったら「保存」をクリックし、見た目をチェックします。変更したい場合は、同じく[レイアウト]メニューより、ページ・ガジェットの編集をクリックするとうまくいきますよ。【blogger機能】メタタグを設定して、検索上位を目指す「メタタグ」と言われてもイマイチ日本人にはピンときませんが、WEBの世界では、ブラウザに直接表示されない情報ながら、GoogleやYahooからの検索結果に大きな影響を与えるデータです。検索キーワードを工夫しますよね。オススメ」といったキーワードを入力します。この入力キーワードに適したサイトをGoogleの検索エンジンは秘密のやり方で探すのですが、その時閲覧する情報の1つが「メタタグ」です。先程の例で言うと、「利用した中からオススメの箱根の日帰り温泉を紹介しています」と書いてあるサイトであれば、このユーザーのほしい情報が出ていそうですよね?なので、検索されるであろうキーワードを含んだ文字列を設定します。[検索設定]を表示します2.一番上にある「メタタグ」メニューの編集をクリックし、検索向け説明を「有効」に設定します。3.変更を保存ボタンをクリックすると、テキストボックスが表示されるので、ここで適切な文字を入力します。ちなみにこのサイトでは、次の文字が設定してあります。まちカレンダーが、NPO・ボランティア団体の無料ホームページ作成方法を教えます。作成ホームページ作成講座をはじめましたNPOや支援グループの皆様へ、WEB作成知識をシェアするべく、ホームページ作成講座サイトをオープンいたしました。できるだけ安く、簡単に、自分で作るか、というポイントにこだわり、いろいろな情報を提供していきたいと思います。ご希望があれば、対面でのレッスンもやっていきたいと考えています。ご要望をお寄せくださいね。運営団体ページとは、ホームページを提供している団体がどのような者で、何をしているのかという情報をまとめて表示したものです。表を使うと、簡単かつ美しくレイアウトできます。サンプル:運営団体ページ一般的に必要な情報は次のとおりです。NPO法人名や会社名といった名称です。法人格を取得していれば、記載します。代表者の名称をフルネームで記載します。外部から問合せをする際に、宛先としても代表者が必要です。代表者が著名人である場合には、信用度や宣伝に関係します。顔写真や略歴を掲載すると、信用度が高まったり、親近感が湧いたりします。やどのようなことをしているのか、概要を記入します。簡単な「沿革」コーナーを作るのもいいですね。サービス紹介サービスについて記載します。次のような情報が入ると的確です。概要なので、細かい情報を掲載したい場合はリンクとしたほうが見やすいです。画像やバナーを入れると、華やかになります。個人でやっている場合も、郵便番号が示す程度の情報は記載し、「個人宅であるため、詳しい情報は公開していません。お問い合わせください」といった中を入れたほうが、信頼性が増します。電話番号やメールアドレスを表示します。別途アクセス・お問い合わせページを作成する場合は、重複して表示する必要はありませんが、リンクしておくと、ユーザーが迷わずすみますね。誰もが頻繁に知りたい、必要な内容を、アクセスしやすいメニューからリンクされるものです。概要サービス問合せアクセスといったものは、どの団体のホームページでもよく見かけ、その団体に興味を持った人がかならず必要とする内容です。ブログでなにかを記載するときに、「投稿記事」を使いますが、これは投稿日とカテゴリーによってのみ分類され、必ず表示されるようにしたり、重要性によって自動的に並べ替えしたりすることは困難です。誰もが必ず必要とする情報は、ページで作成します。ページは、上部に設置したタブメニューからリンクしていきましょう。ページの作成方法ページは、メニューから簡単に作成することができます。左サイドにあるメニューの[ページ]を選択すると、ページ一覧が出てきます。上部に「新しいページ」というボタンがありますので、これをクリックすれば、編集画面がでてきます。入力は投稿記事と同じです。ここでは、記事の書き方は説明しませんが、1つ大事な設定があるのでぜひ設定をお願いします。[検索向け説明]というメニューが有ります。ここには、GoogleやYahooで検索するときに検索上位に表示されるための必要なデータになります。詳しくは、【blogger機能】メタタグを設定して、検索上位を目指すの記事を見てください。