ホームページのデザイン

文字の大きさやアクセント(強調)をつけてみやすいホームページに

≪見にくい例≫  

小さい文字など

≪見やすい例≫ 

—————————

色をつけたり して 強調をつける

—————————

小さすぎる文字や目がチカチカする(蛍光色や点滅)ような文字色使いを避けましょう
優しい薄いピンク色のような物を使うと見やすいそうです

色々な人が見るホームページです中には目の悪い方や小さい文字を嫌う方もいます

書体を変えてインパクトを

書体を変えてインパクトを

≪表現を出したいときにも使います≫

習字のイメージを出したいときは▽

習字のイメージ

【フォントの特徴】

・明朝体は明の時代に日本に伝わった書体です
公文書などに多く用いられます

・ゴシック体
線の太さが同じなのが特徴
看板などに用いられます

・丸ゴシック体は
道路標識などに多く用いられます

・古印体
偽造されにくいように作られた文字
印鑑などに使われます

・POP体(Point of purchase)購入のポイント
太いマーカーペンで書いたような文字
スーパーなどの価格に良く使用されるフォント

マンガなどでは2種類の書体が主に使われているそうです
かながアンチック体
漢字がゴシック体

文字の余白や位置を変えて見やすい文章を

≪見にくい例≫  


せっかくの良い文章も詰まってごちゃごちゃした文章では
見にくいです段落や文字の背景を変えたりして読みやすい文章作りを目指しましょう。
だいたい三列目ぐらに一区切りさせた方が良いという意見もあります。
あくまでも目安ですが参考にしてみて下さい

≪見やすく段落をした例≫ 

 間隔を あけたり

 段落を変えて見やすい文章作りをめざしましょう!
 —————————————–


文章を分割する

hikaku14

ページ全体も両サイドあけるとみやすいページになります。

内容を詰め込みたいと思いますが極力、

両サイドを少しでもあけるようにするとよいと思います

グーグルでも十分すぎるほど空いていて、みやすいページになっています

2011年

http://www.google.co.jp

【ここで雑学】堀江貴文さん

ライブドア元代表取締役社長のホリエモンこと堀江貴文さん
東京大学出身で、気難しい本を愛用していると思いきや、
意外なことに文字ばかりの本は嫌いで普段は漫画を好んで読んでいるそうです

記号

記号を使ってアクセント(^o^)/

忙しい! 忙しい ^^;

記号や絵文字などを使うと見栄えが違ってきます。

自分流に使うと個性が出て良いと思います。

背景

背景で重ねる時は強い色を使わないようにします

殺風景なイメージが変わります

色使い

≪見にくい例≫  

少し目が痛いです

≪やさしい色の例≫ 

長時間見ていても疲れなそうです

webではあまり派手な色は好まれないようです。
見ていて目に負担がかかるよう色は使わない方が無難です


人気のホームページ

ここで
「今人気のホームページ 目指そう!物知り博士
プラス一日のアクセス数10万アクセスあります」と
入れた物を三つ用意してみました。
もちろん実際には今の時点(2012年)ではそんなにアクセス数はありませんが

今日はエイプリールーフールと言う事で大きく出たいと思います。

これはマジばなで編集をした日が4月1日です。

例えばもし、そんなページを見た時に、本当だと思うのはどれですか?

burauza35

どれもうさんくさくて、ほんとうそうにはみえませんが、
唯一見えるとしたら、シンプルな作りになるのではないでしょうか
ホームページでの文字の色はカラフルな色を使うのは好まれないようです。
それと絵文字や顔文字も、初対面にはあまり好まれないようです。
知名度があり
友人、知人に向けて作るのであれば別ですが
初対面となると一発でページを閉じられる場合もあります。
ですのであまり絵文字などを使いすぎるのにも注意が必要そうです。

それと書体なども、統一感やすき好みがあって、

私は明朝体を使う事が多いのですが、
それ自体も嫌いでゴシック派の人もいます。

shotai2

ヤフーの動向

私自身はヤフーのページをトップページに設定しています。

ページを開いた時に、軽くニュースの欄に目を通します

いろいろなサイトを見てきましたが
やはり使い慣れているせいか
ヤフーのサイトはとても使いやすく、見やすいと思います。

そんな事でホームページを作るにも参考になると思います

ホームページの変化にも注意してみています。

優秀な社員たちが、毎日のように試行錯誤しているとおもいますので

ページの作り

色使い、サイズ、文字の大きさ、コンテンツなど
変化をチェックしています。

もちろんCMなども、参考になります
例えば、犬のお父さんが猫やたぬきに変わるようであれば、
その変化にも興味があります。

検索エンジンは新鮮なフレーズを好みます

そういったコマーシャルが人気がでると、他の企業もここぞと
動物を使ってくる傾向にあります。

(2012年)

イラスト

イラストに自信がない人は記号などを組み合わせたりして作ってはいかがでしょうか?
影をつけたりすると見栄えも違って見えます

文字ばかりでは見る人も、よほどの内容ではない限り、最後まで見てくれる可能性が
低いです
途中休憩の意味も込めて挿入すると、違った雰囲気になります

画像

写真の大きさや位置

    写真を取り入れてイメージアップを

≪見にくい例≫ 
小さくて解りづらい大きさ 

≪見やすい例≫ 
適度な大きさ 

画像加工

写真加工です

イラストや写真を加工してイメージアップをはかりましょう

背景を指定

※背景を指定しない場合は、透通る感じになります。
白で指定すると隠れるような状態になります

toranpu1

背景の色

背景の色はすき好みが分かれます

「人気沸騰中のホームページ」と文字を入れてみました。

この三つの中だったら本当に人気がありそうなページは、
どれに見えますか?


burauza34

シンプルイズベストと言う言葉がありますが
私自身は、
やはり背景が白で文字色が黒のような気がします

小さい文字や、見にくい書体、読みにくい背景は、
次にもう一度訪問させる気を無くさせるそうです

ぼかし

デザインと言えば、
なるべくぼかし文字は使わないように心がけています。

その理由として、
どうも、見づらいと言った印象にあります。
私の目が故障しているのかモニターが故障しているのかはわかりませんが、
ぼかした文字を見ているといまいちわかりづらい時があります。

それと広告などを見ていても印刷ミスだと思っていたら
デザインだったと言った事がよくありました。

なるべくは、自分で最初に思った事は大事にするようにしています。

間違った使い方ではないかと思ったら、その反対の事を
おこなう場合もあります。

例えば、
他の人のサイトを見て、
そのホームページを開いた時に、少し嫌な感じを覚えたときは
どのような部分に、そう感じたのかを考えます。

例えばページを開いた時に、
あまりにも背景色の赤が強すぎるのであれば、
そういった使い方には気をつけるようにしています

その他、大手サイトのニュースをみていて、
ここは文章を回り込みをさせないでほしかったなぁと思ったら、

自分のホームページでも、なるべくそう言った事に心がけるようにしています。

デザイン構成

私が作るホームページのコンセプト
いたってシンプルなデザインを心がけています
余計な物は極力はぶき、殺風景すぎず派手すぎずに、
今まで習った事や独学で学んだ事
を載せています。是非共感できる部分は参考にしてください。

デザインの構成

dez

見る人の気持ちになって、解りやすく見やすさを心がけています 

日本では慶応大学のホームページがページランクが高いようです。
ページランクは被リンクなどで左右されますが、
(被リンクとは簡単に言うと:他の人から紹介されているページです)
評判が良いだけあって見やすいページです
項目などやデザインを見て参考にするのもよいと思います。
そのほか、大学のホームページはとても参考になります

慶応大学のホームページ

ホームページを作るに渡って
色々なサイトを見て回るのも勉強の一つだと思います。

そこで参考にするのに良いのは
大学などのホームページを見るのが良いと思います。

デザインやレイアウトなどはしっかりしています。

東京大学のホームページ

大学のホームページなどは、いたってシンプルなホームページが多いです。
シンプルこそベストなのかもしれませんね

私のサイトでもシンプルを基調としています。

シンプルなサイトは、リニューアルもしやすいですし
見ている人にも比較的にはわかりやすいサイトになると思っています。

見出し

色々なサイトを見ていると
ボックス型の見出しを使っているサイトを
よく見かけます。

この手法で実際に使ってみるととても読みやすく見栄えも良く感じます

ボックス型の見出し
見出しの使い方1

普通の見出し
見出しの使い方2

見出しの前に何か目印になるものがあると
見やすく感じると思います

見出しの種類

ボックスを使う

私のホームページではシンプルな作りを心がけています。

ですが、あまりにもシンプルすぎるのも味気がないので

いくつかのボックスを用意する事にしました。

枠の色を変えて一目でわかるようにしています。

そうすることで管理もしやすくなります。

そこでこのボックスを作る際の経緯をまとめておきたいと思います

まずはじめにどのような背景にしようか悩んだ結果ですが、

やはり無難な淡い色を背景として全体的にも文字を引き立たせるような色にする事にしました

色々と悩んではみたのですが

最終的に決まった色はこのスタイルです

ボックスの種類の比較

この色使いを決めるのにかなり時間を費やしました

何度も文字をあてはめてみては実際にホームページ上ではどのようにうつるかを試しては消して

やっと「これだ!」といった背景色と枠線にたどりつきました

使い方を振り分けながら使っています

【アドバイスとして】

もしホームページを統一したいのであれば

あまりたくさんの色は使わない方が良いと思います。

その理由として、作っていくうちに、どこでどの色を使ったのか忘れてしまう事があります。

管理もしにくいですし、自分のコレクションの色を持つとよいと思います

それとその色を思い出しながらデザインした事があります。
のちにその色と比べると微妙に違い統一感がなくなってしまいました
その見た時の感想はと言うと
「違う人が作ったのか」と思うぐらいの出来栄えになってしまいました

時際に使っているボックス

ボックスの種類

ボックスの種類1

ボックスの種類2

ボックスの種類3

ドコモのサイト

スマホから見るサイトを初めて見て気づいたのですが
ドコモのサイトがこんなに見やすいとは、
今頃になって気づきました。

ウェブで見ると、あまりに気にもとめなかったのですが
スマホから見るドコモのサイトは
とても見やすく、使いやすいことがわかりました。

ドコモのホームページ

こういったサイトを参考にしながら
ウェブサイトつくりを勉強して行き
技術アップをはかれば、自分にもプラスになると思います

自分がそのサイトに最初に訪れたときに、
どこが使いやすく、どこに目を引きつけられたかなどを
もう一度振り返り、自分のサイトと比較をします。

特にドコモのサイトを見て
思ったことや、目を引い部分は、
ナビゲーションのボタンやアイコンのイラスト関係が
とても使いやすくわかりやすいと印象を持ちました。

やはり、閲覧者の人を迷わせてはいけませんので
次のページへのナビとして
しっかりと誘導しなければなりません。

このナビゲーションの部分はいろいなサイトを見て
自分でこれがわかりやすいとおもったところをチェックをしながら
自分のサイトにも取り入れるようにするとよいと思います。

自分の場合には、よく使う方法として
「次のページ」としてナビを入れるようにしています

これがいたってシンプルでよいと思ったので、
今まで使っている状態です。

さらにわかりやすくするために、
いろいろと試行錯誤をしている状態です。

ブログなどでの過去の記事へ誘導するのに
番号表示がされているサイトをよく目にします。

初めて訪れたときは、若干わかりづらいなぁと思うことがあります。
これをどう表現すればよいのかが、
今の課題です

ちなみに、
今までで一番意を識して作った「オセロ」のサイトがあります。
このサイトでは、最初に「何ページありますよ」と宣言をして
つぎのページへナビをしています。
そのサイトでは、実際には「3ページ」ありますので
「3ページ」と強調して、ナビをしています。
オセロのサイト

このエントリーをはてなブックマークに追加
   


スポンサード リンク

 

↑このページの先頭へ