ページ幅と高さ（長さ）について

☆*･カフェビバーチェ｡.:*･゜ﾟ･*☆*･゜ﾟ･*:.｡..｡.:*･☆

木曜日とご予約、イベント開催の場合は曜日にかかわらず、11:00～15:00、カフェをオープンしています。

コンセプトは、「おいしく健康に！」
食育トレーナーのオーナーが
コーヒー、お茶をはじめ、スイーツ、ランチなど
身体に優しいメニューをご用意してお待ちしています。

少人数グループのイベント会場としてもご活用くださいね。

☆*･゜ﾟ･*:.｡..｡.:*･☆･*:.｡. .｡.:*･゜ﾟ･*☆*･゜ﾟ･*:.｡..｡.:*･☆

こんにちは。
Webであなたの夢が叶う！のHirokoです。

ホームページの作り方、
昨日は、サイトマップ（構成図）についてでした。

今日はページの幅と高さ（長さ）です。

●ページ幅
　　ページ幅は、パソコンのモニターサイズや
　　解像度によって変遷してきました。
　　今、使用率の高い解像度は
　　「WXGA　1366px X 768px 　15.6インチ」
　　ということですので、
　　これから作成するホームページは
　　ワイド画面に適応しておく必要がありますね。

　　ちなみに大手サイトのページ幅設定は
　　　　　　　　　　　　次のようになっています。
　　950px
　　　　・Yahoo! Japan

　　　　・So-net
　　　　・ぐるなび
　　960px
　　　　・はてな
　　　　・＠nifty　
　　970px
　　　　・クックパッド　
　　　　・Excite　
　　　　・Facebook
　　980px　
　　　　・Google　
　　　　・食べログ　
　　　　・ZOZOTOWN
　　990px　
　　　　・ニコニコ動画　
　　　　・NHK　

　　また、ある程度の範囲内で幅が可変する、
　　リキッドレイアウトを採用するサイトもあります。
　　こちらは、ニュースやショッピングサイトが多く
　　採用しています。

●ページの高さ（長さ）
　　ページの高さ（長さ）は、そのページによって様々です。
　　しかし、
　　　・ショッピングサイトの「購入する」ボタン
　　　・キャンペーンバナー
　　　・検索サイトの「検索する」ボタン
　　は、ファーストビュー（540px）までに配置するのが
　　原則です。
　　これは、ページが表示されたとき、
　　スクロールなしで表示される領域で、
　　モニターサイズの最低ラインをとったものです。

　　
気をつけたいのは、
ページの内容に厚みのないサイトの場合、
950pxを超える幅で設計すると、
コンテンツ間の空白が気になります。　
画像を効果的に使ったり、
デザインや色目を工夫する必要がありますね。
また反対に、
760px幅など狭いページ幅を採用すると、
世代差（古さ）を感じることがあります。
こちらも注意が必要です。

明日は、デザイン（画像・色）についてです。

今日も最後まで読んでいただいてありがとうございました。

サイトマップを書いてみよう！

☆*･カフェビバーチェ｡.:*･゜ﾟ･*☆*･゜ﾟ･*:.｡..｡.:*･☆

木曜日とご予約、イベント開催の場合は曜日にかかわらず、11:00～15:00、カフェをオープンしています。

コンセプトは、「おいしく健康に！」
食育トレーナーのオーナーが
コーヒー、お茶をはじめ、スイーツ、ランチなど
身体に優しいメニューをご用意してお待ちしています。

少人数グループのイベント会場としてもご活用くださいね。

☆*･゜ﾟ･*:.｡..｡.:*･☆･*:.｡. .｡.:*･゜ﾟ･*☆*･゜ﾟ･*:.｡..｡.:*･☆

こんにちは。
Webであなたの夢が叶う！のHirokoです。

昨日は、トップページの
要素とレイアウト（配置）について
でした。

今日は、ホームページ全体の設計図に当たる、
サイトマップ（構成図）についてです。

サイトマップ（構成図）は、
ホームページを作るときに最も重要な作業と言えます。

このとき注意することは、
　①　お客さまが見やすいかどうか。
　②　トップページから見てサイトの階層を2階層にする。
　　　　　　　ページ数が多い場合のみ一部3階層にする。
　③　お問い合わせ・ご予約フォームなど
　　　　　　　　　　重要なページは2階層目に配置する。
です。

「お客さまが見やすいかどうか」は
サイトの構造にかかっています。
サイトの階層が4～5層と深いほど、
多くのリンクをクリックすることになります。
お客さまの視点に立って、要点をしぼって、
なるべく浅い階層（２～３階層）にしておきましょう。

明日は、ページ幅と高さについてです。

今日も最後まで読んでいただいてありがとうございました。

ホームページの要素とレイアウトとは？

☆*･カフェビバーチェ｡.:*･゜ﾟ･*☆*･゜ﾟ･*:.｡..｡.:*･☆

木曜日とご予約、イベント開催の場合は曜日にかかわらず、11:00～15:00、カフェをオープンしています。

コンセプトは、「おいしく健康に！」
食育トレーナーのオーナーが
コーヒー、お茶をはじめ、スイーツ、ランチなど
身体に優しいメニューをご用意してお待ちしています。

少人数グループのイベント会場としてもご活用くださいね。

☆*･゜ﾟ･*:.｡..｡.:*･☆･*:.｡. .｡.:*･゜ﾟ･*☆*･゜ﾟ･*:.｡..｡.:*･☆

こんにちは。
Webであなたの夢が叶う！のHirokoです。

以前に
HTML：ホームページの仕組み、構造
CSS：ホームページのデザイン
JaveScript：ホームページの働き
とお伝えしたことがあったと思います。

これは、ホームページを作るときの裏方さん的要素。

今日はこれら裏方さんではなく、
ホームページの表側、
要素とレイアウト（配置）についてです。

トップページは、いわば「顔」に当たる部分。
ページの一番上にトップ画像を配置、
そして、
　・メニューバー（ボタン）
　・新着情報
　・お知らせ
　・バナー
　・お問い合わせ方法
などの要素が続きます。

これらの要素をどのように配置するかで、
ページのアクセス数も変わってきますので、
そこでまず、ラフでレイアウト（配置図）を
書いてみます。

トップページには、
　・何を入れておくべきか（要素）
　・その中で何を目立たせるのか（主要素）
そして、
　・そのレイアウト（配置）は見やすいか
　・お客さま目線で見て分かりやすいか
を考えながらレイアウトしていきます。

まとめると。。。

■トップページの作り方■

①　何を入れておくか要素を出すこと。
②　出した要素の中から、何を目立たせるのかを決めること。
③　①②を踏まえて、レイアウト（配置）してみる。
④　レイアウト（配置）はユーザー目線であるか検討する。

明日は、ホームページの構成図についてです。

今日も最後まで読んでいただいてありがとうございました。

サーバーを使うということ。。。

☆*･カフェビバーチェ｡.:*･゜ﾟ･*☆*･゜ﾟ･*:.｡..｡.:*･☆

木曜日とご予約、イベント開催の場合は曜日にかかわらず、11:00～15:00、カフェをオープンしています。

コンセプトは、「おいしく健康に！」
食育トレーナーのオーナーが
コーヒー、お茶をはじめ、スイーツ、ランチなど
身体に優しいメニューをご用意してお待ちしています。

少人数グループのイベント会場としてもご活用くださいね。

☆*･゜ﾟ･*:.｡..｡.:*･☆･*:.｡. .｡.:*･゜ﾟ･*☆*･゜ﾟ･*:.｡..｡.:*･☆

こんにちは。
Webであなたの夢が叶う！のHirokoです。

最近、サーバーについてのお問い合わせを
いただくことが多くなっています。

その内容は、
　①お薦めのレンタルサーバーは？

　②ドメインとサーバーどうつなげるの？
　③バックアップはどうやって取るの？
などです。

①
特に商用利用の場合、
セキュリティや信頼度の高いレンタルサーバーを選びたいですね。基準を満たすサーバーとして、
　・Xサーバー
　・さくらサーバー
　・ロリポップ
を使われる方が多いようです。

②
ドメインを取ったあと、
契約したレンタルサーバーで有効にしたい場合、
そのドメインにレンタルサーバーのDNS
（ドメイン・ネーム・システム）を設定します。
これでFTPも使えるようになります。

③
バックアップは、基本的にご自身で行います。
代行する業者もありますが、有料です。
ブログのテキストだけなら比較的簡単にできると思います。
ホームページの場合は、作成した業者にお願いしておくとよいでしょう。

どんな記事をどれだけ書くか？

☆*･カフェビバーチェ｡.:*･゜ﾟ･*☆*･゜ﾟ･*:.｡..｡.:*･☆

木曜日とご予約、イベント開催の場合は曜日にかかわらず、11:00～15:00、カフェをオープンしています。

コンセプトは、「おいしく健康に！」
食育トレーナーのオーナーが
コーヒー、お茶をはじめ、スイーツ、ランチなど
身体に優しいメニューをご用意してお待ちしています。

少人数グループのイベント会場としてもご活用くださいね。

☆*･゜ﾟ･*:.｡..｡.:*･☆･*:.｡. .｡.:*･゜ﾟ･*☆*･゜ﾟ･*:.｡..｡.:*･☆

こんにちは。
Webであなたの夢が叶う！のHirokoです。

ブログの記事を書くとき、
　・誰に向けて
　・どんな内容で
　・どれだけの文字数で
書くかを意識すると、
記事にまとまりができるといわれています。

「誰に向けて。。。」は昨日お伝えしました。

記事の内容は、シンプルに分かりやすく、
それでいて自分の言いたいことを的確に書かなければ
相手に伝わりませんね。

日本語の言い回しや、伝わる書き方については、
私は、この本を参考にしています。

日本語スタイルガイド第2版/一般財団法人テクニカルコミュニケーター協会

￥2,592

Amazon.co.jp


改めて、自分の日本語を見直すことで、
メールの文章にも気を使うようになり、
お仕事のやりとりをする中での行き違いや
誤解が少なくなってと実感しています。

母国語である日本語の使い方を勉強したからこそ、
ようやく自分の言いたいことが、
素直に書けるようになったと思っています。

またSEO対策として、
ブログは1記事に1,000文字と言われますが、
効果的な文章の1,000文字と、文字の羅列の1,000文字では
読者に与えるイメージが大きく違ってきます。

構造的な明確な文章で、すっきりブログを書いてみませんか？

今日も最後まで読んでいただいてありがとうございました。