2015年12月02日 メニューバーとは ホームページにはいろんなデザインがあります。 でも、基本的な構造は似ています。 まず一番上にロゴと、ちょっとした情報が載りますね。 ロゴはタイトルの文字になっている場合もあります。 そして多くの場合、その下に画像やメニューがいくつか並べられます。 その下に本文がありますね。 本文にはサイドバーが設置されていたりします。 下の方にフッターも設置されている場合が多いですね。 メニューバーはロゴの下にあるメニューが並べられている部分を指します。 個数は４個から６個ぐらいでしょうか。 多いところで８個ぐらいですかね。 ホームページの幅は大抵1000pxぐらいに設定されています。 どんなノートパソコンの画面でも1000pzぐらいだったら、レイアウトの乱れもなく、切れることもなく表示できるらしいです。 1000pxいっぱいにサイトをデザインしたとしても、8個並べて表示すると125pxですね。 これってかなり小さいです。 やはり8個ぐらいが限界なんでしょうね。 でもホームページのページ数って8ページに収まるとは限らないですよね。 これから先も増え続けるでしょうし、8ページで収まるとは思えません。 なのでメニューバーはユーザーが沢山使うであろうページや、こちら側が伝えた重要ページへのリンクを選びたいですよね。 そしてメニューバーというのは、とても目に入りやすい位置にあります。 サイトは上から順番に見ていくのですから、目立ちますよね。 なのでデザインにもこだわりたいパーツなんだろうなと思うのです。 ここではメニューバー作成のポイントなどを紹介していこうと思いますが、メニューバーと共に大切にしたいのはロゴですよね。 私が考えるホームページとロゴデザインというサイトにロゴデザインの重要性や作成ポイントなどが書かれています。 また、サイドバーデザインについてはホームページのサイドバーデザインというサイトもあります。 こういったサイトを参考にしてホームページをデザインしていくのも良いかと思います。 また、ガラッと全体の印象を変えるには、フォントを変更するという手段もあります。 文字の雰囲気でイメージがだいぶ変わります。 フォントについては無料フォントの紹介～フォント選びでホームページの印象は変わる～がおすすめです。 フォントの例が載っているので、一目でフォントデザインを確認できます。 コメント（0） Tweet
2015年12月01日 メニューバーについて メニューバーって、多くの場合はサイトの上の部分に並んでいますよね。 サイト上部って、見に来た人が一番目に留まる部分だと思うんです。 なのにメニューバーって６つぐらいしか載せられませんよね。 しかたないですよね。 あんまり多くてもごちゃごちゃしてしまいます。 要は、サイトの中心となる重要な内容をメニューに載せるんですよね。 それならばこだわらなくてはもったいないとも思うんです。 なのでそんなメニューバーについて考えたことや情報をブログにしてみたいと思います。 自作でホームページ作っていない人は、反映が難しいかもしれませんが、 システムによっては変更できるものもあるようですよ。 僕が利用しているシステムはCSSが変更できるため、メニューバーのデザインも変更できました。 クラス名はファイヤーバグを使ってクラス名を見つけてCSSで変更！という感じです。 このブログの内容がちょっとでも参考になったら嬉しいなと思います。 よろしくお願いします。 コメント（0） Tweet
2015年11月29日 メニューバーを簡単にデザインする メニューバーは重要なパーツですから、ホームページに合わせてデザインした方が良いと思うんです。 でも、テンプレートを選択するタイプだと、一括で決まってしまいませんか？ もう既にデザインしてあって、じぶんでは何も選べないんです。 ホームページは何を目的に作りましたか？ それにはイメージカラーってありませんか？ 何となく清潔感のある白かなぁとか、 ゴージャス感を出すためにワンポイントは金色！とか かわいらしい感じにしたいから淡いピンクとか シンプルに白とグレーだけを使う！とか ありますよね？ それをホームページにも反映させた方が良いと思うのです。 イメージを全てにおいて統一することは重要だと思うんです。 でも、テンプレートの場合はメニューのデザインはいじれません。 既に完成したものを利用しなくてはなりません。 これは残念です。 そういった場合はテンプレートではなく、パーツごとにデザインできるシステムを利用するのが良いですよ。 パーツごとのデザインだから、メニューバーも細かく変更できるんです。 僕が利用しているサービスはこれです。 メニューの文字色、背景の色、全部思い通り。 文字の大きさ、リンク後の色、全部調整できるんです。 あ、でも問題があって、CSSがいじれないとできないと思います。 そのサービスはCSSマニュアルも設置してあるので、それを見ながらでもできるのかな？ 僕はちょっといじれるので、マニュアルは見てないので何とも言えないですが、誰でも出来るように工夫しているみたいですよ。 何が言いたいのかというと！ メニューバーは重要です！ だからパーツごとにデザインできるシステムを利用しましょう！と言いたいのです。 コメント（0） Tweet
2015年11月27日 メニューのCSS メニューのCSSのいじり方ですが、タグにつけている名前はシステムによって違うんですね。 だから、各自チェックしないといけないのですが、その方法についてちょっと書いていきます。 まずはCSSが変更できるホームページが必要です。 そしてブラウザはFirefoxです。 FirefoxにはFirebugというプラグインを入れて、ツールバーに表示させておいてくださいね。 ホームページをFirefoxで開きます。 Firebugのアイコンをクリックします。 デフォルトだったら別枠でFirebugのウィンドウが開くと思います。 そのウィンドウの左から二つ目の青枠のアイコンをクリック。 カーソルをメニューバーに持ってくる。 クリックしてみてください。 そうすると、それぞれのタグやクラス名が表示されるので、これらを使ってCSSを編集していくんですね。 大抵の場合は、 全体の変更をしたいのであればCSS編集画面を開いて、 .クラス名 { background-color: #000000; } これで背景色全体が変わります。 各メニューの背景色を変えるなら .クラス名 li { background-color: #000000; } です。 #000000は黒を指します。 ここの数値は自由に変更できます。 他にも font-size: 〇〇px; でフォントのサイズが変わります。 詳しいことはCSSの専用サイトなどを見てみるといいです。 こんな感じで簡単に変更できますので、自分のサイトに合わせた変更をしていきましょうね。 コメント（0） Tweet
2015年11月01日 メニューバーの内容 メニューバーの内容ですが、これは傾向がありますね。 「HOME」は設置しているところが多いですね。 ロゴやタイトルを利用してトップページにも戻れるのですが、なんとなく左端はトップページに戻れるような思い込みがありますね。 でもトップページへのリンクを入れてしまうと、メニューバーの項目が一つ減るので、設置するかどうか悩んでしまいますね。 ユーザーにとってはトップページへのリンクgあわかりやすい場所にあると安心しますね。 「お問い合わせ」は多くのサイトがメニューバーに採用しています。 お問い合わせって結構重要だと思うんですよ。 なんにせよ、何か問い合わせたい内容があるってことですよね。 それって、もしかしたらホームページに足りない情報があるのかもしれないですよね。 そういった情報はホームページの運営者側にとってはとても重要な情報ですよね。 ユーザーにしかわからない不備があるのかも。 それを伝えてくれるのはお問い合わせなんです。 「会社情報」「サービス内容」といった項目もよくありますね。 コンセプトを伝えるのは重要です。 ユーザー側も知りたい情報でですよね。 このサイト自体の情報を得ることが出来ます。 また、こういった場所に営業日などの情報が載っていることも多く、こういった内容もユーザーは知りたい情報でしょうね。 これは店舗や事務所を持っている場合に限られますが「アクセス」も採用しているサイトが多いですね。 アクセス手段、道のりといった情報は、知りたいですね。 駐車場の情報なども重要ですよね。 こういった内容もユーザーは求めているでしょう。 また飲食店や美容室、マッサージ店などでは「メニュー」も欠かせない情報ですね。 今は訪問する前でもホームページを確認すればメニューなどをチェックできます。 多くのサイトはこのあたりを重要視してメニューバーに採用しているようです。 やはり、ユーザーが求めている内容を見やすい位置に固定しておくことが良いのでしょうね。 コメント（0） Tweet
ビジネス｜ 沖縄市
› ホームページのメニューバーについて
画像一覧