あとりえ「パ・そ・ぼ」コーナー ★ Jimdoで作ろう、ステキなページ


トップページの例 B


トップページの例 デザインB

 

トップページに多くの内容を盛り込むデザインです。

本文部分を、縦にカラムで2分割、それぞれを 横に区切っています。

 

この例の特徴

 

・ トップページに、多くの情報を載せるデザイン

   トップページに、サイトの概要と最新情報を載せる例です。

   サイトを訪れた人がこのページだけで、情報を得ることができます。

   上下のスクロールが多くなりますが、クリック移動は少なくてすみます。

 

・ 上部に画像つきメニューを置いたこと。

   Jimdoのテンプレートの左サイドバーのメニューとダブっています。

   Jimdoの別デザイン 上部に横にメニューがあるタイプなら、

    メニュー直下に画像を並べることができるかもしれません。

    まだ、試していませんが・・・。

 

・ カラムで縦割りにした本文それぞれを横に区切ったこと。

   右サイドバーが有るようなデザインです。

   それぞれの部分でカラム幅は調節できません。 

   縦には柔軟なデザインが可能です。

 

・ Jimdoのブログ機能の記事を 下部にピックアップして掲載。

   これは、カラム表示はできませんし、文字サイズなども既定のままです。

 

 

トップページに、多くの情報を載せるデザインのポイントは、

・ トップページだけで、サイトの内容を一覧できること

・ サイトの更新した部分がはっきりわかること

・ 新しい情報は、このページに集約していること

 

Jimdoでは、全ページ共通のサイドバーがありますので、あとの部分を縦2カラムにわけて使います。

 

このデザインでは、左メニューのテンプレートを採用。 

 メニューとサブメニューが左上にまとまっているのが使いやすい。

 更に、上部にイラスト付きのメニューの要望があったので、メインメニューと同じ物を作りました。

 

本文部分は、縦にカラムで2分割、それぞれを 横に区切っています。

 

 


Jimdoで作ってみよう

Jimdoでホームページ(Webサイト)を作ってみましょう!

 

あとりえ「パ・そ・ぼ」で、実習中です。

 

こちらもどうぞ → キュートな野鳥たち

---------------------------------------------------------------

トップページのデザイン

まずは、レイアウトを選びます。

今回の条件は、

・ 左サイドバー

・ メインメニューの下にサブメニューが表示される

・ 2カラム

・ すっきり


人間工学的に言うと、視線はZで移動します。トップ左上にサイトのタイトルを持ってきてオリジナル画像(ロゴ風)にしましょう。

サイドバーは、右か左かは好き好きです。

マウスを右手で持っているので、右のほうが近いし、画面を横切らないのでいいかもしれません。

今回は、試しに左にサイドバーをおいてみました。

ちなみに私のブログでは、右サイドバーが多いですね。

ホームページは、左にメニューがあります。

 

 

 

 

 

これは、すっきり 左サイドバー
色は変更できないらしい。
第一候補です。


メニューの構成

 

メニューの構成は重要です。

 

従来のサイト作成では、ページの配置を変えるとリンクを貼り替える作業が大変でした。

Jimdoのような「CMS」システムでは、それがいとも簡単にできるます。

メニューの前後や上下移動、表示・非表示が簡単に変更でき、即ビジュアルで確認できます。

納得がいくまで、調整しましょう!

消さずに非表示にして置けるので、作業メモを書くページにも使えます。

 


コンテンツ

 

 

コンテンツの例

 

キュートな野鳥たち

 

 

TOPページには、どんなコンテンツを載せればいいでしょうか?

Topページはすっきりしてページのイメージを伝えればいいと考える人もいれば、目次(メニュー)の役割が主のもの、TOPページにすべてをてんこ盛りにして多くの情報を伝えたいと考える人もいます。

 

ただし、TOPページにFlash画像だけ、それもスキップボタン無しは、よくありません。

見る側は、散々待たされた挙句、見たい内容があまりなかったら 2度と来ないでしょう。

映画の公式ページはこのタイプも多いけれど、スキップできるようになっています。

 

主にメニューのページの例

 あとりえ「パ・そ・ぼ」の Webページへようこそ!

トップページの例B
トップページの例B

あとりえ「パ・そ・ぼ」のWebページへようこそ!
あとりえ「パ・そ・ぼ」のWebページへようこそ!



以上では、本文を2カラムに分けて作ってみました。左サイドバーと合わせると 3カラムです。

 

以下は、カラムわけにしていないコンテンツです。

 

Jimdo利用メモ

ミョウガをスケッチ

 

Myガーデンで ミョウガを育てています。
台風一過、青空が気持ちの良い午後、

ミョウガを収穫しました。


大きなのやほっそりしたの 全部で4つ
並べると かわいいね。


食べる前に 写真をパ・チ・リ。


そうだ! スッケチしましょう!

鉛筆でデッサンをして、

フォトショップで彩色しました。

 


Myガーデンで育てているミョウガの様子です。
 ⇒ ミョウガ ~ Myブログ「Niwa niha Hana」

 

 おまけ ミョウガの花で~す。

2019/10/5

 


10月の風物詩と花暦

  2019年 10月

 

 

旅の記憶 ~ パそぼとベルルのあれこれフリーク

 

空~宇宙・深海フリーク ~ パそぼとベルルのあれこれフリーク

 




10月のテーマ ~ パソコンでお絵かきに挑戦

  
子供の気分で 絵日記はいかが! 

パソコンやタブレットなら、画材がなくても 簡単に描けちゃう
 まずは、パソコンに付属のペイントで!
  ワード作品も侮れない。(*^_^*)♪
Myギャラリーや、お絵かきブログ も どうぞ!

 

 10月の花暦 キンモクセイ


夏祭りを楽しもう

2019年8月25日

夏も終わりに近づいた日曜日、今日は楽しい夏祭りです。

 

詳細は こちらを見てください。

 → 夏祭り 2019 ~ Myブログ「パそぼとベルルのあれこれフリーク」

 → 夏祭りに参加 2019 ~ Myブログ「Niwa niha Hana (庭には花)」

 →  夏祭りだぁ 2019 ~ Myブログ「ベルルのお絵かき・ふりーく」

 

子ども御輿 と 金管バンド

 

 

パイナップル イワナ

 

 

和太鼓を叩いてみよう ♪ スイカ割り 大当たり~

 

 

ガーデニングコーナー ♪ お楽しみのビンゴ大会

 

 


夏休み後半も手作りでエコ!

2019年8月16日

 

お盆休みも開けて、8月も後半

 蝉の声が賑わっています♪

 

夏休みには、

エコバッグや ペットボトルカバー

などを作るのもいいね

 → 手作りエコシリーズ

 

残暑見舞いを作ってみましょう。

 

暑中見舞いを頂いた方にもぜひお返事を!

 

 

 【2019年】暑中見舞いの時期・期間! いつからいつまでに出すの?  

   夏の土用(立秋前、約18日)~立秋の前日(8月6日)  

   夏の土用、立秋などは年によって違いますが、2019年は7月20日~8月8日です。  

  小暑(7月7日)~立秋の前日(8月7日) 梅雨明け~立秋の前日(8月7日)  

 残暑見舞い は、立秋以降(8月9日)~8月31日

 

盆踊りの音楽も 流れてきます。

今年はなんといっても 「東京五輪音頭」 ですよね。

 → ☆Tokyo Bon 東京盆踊り2020:盆踊りに夢中

 

そして花火!  「花火大会2019で〜す

 

あれこれ2019  

 


夏休み! 手作りでエコ

2019年7月21日

 

今年は、ずっと雨が続いているけれど、

もう学校は夏休み!

 

楽しいことがいっぱい。

 

暑中見舞いを作って見ませんか?

 

エコバッグや ペットボトルカバー

などを作るのもいいね

 → 手作りエコシリーズ

 

 

 【2019年】暑中見舞いの時期・期間! いつからいつまでに出すの?  

   夏の土用(立秋前、約18日)~立秋の前日(8月6日)  

   夏の土用、立秋などは年によって違いますが、2019年は7月20日~8月8日です。  

  小暑(7月7日)~立秋の前日(8月7日) 梅雨明け~立秋の前日(8月7日)  

 残暑見舞い は、立秋以降(8月9日)~8月31日

 

盆踊りの音楽も 流れてきます。

今年はなんといっても 「東京五輪音頭」 ですよね。

 → ☆Tokyo Bon 東京盆踊り2020:盆踊りに夢中

 

そして花火!

 

あれこれ2018  

 

 



2017/1/6

flicker のウィジェットは削除しました。



あとりえ「パ・そ・ぼ」コーナー ★ Jimdoで作ろう、ステキなページ