Webページのソースを見る

読書と編集 千葉直樹です

僕はデザインに関する知識が弱いので、本を読んで勉強したりしているのですが、実践的に勉強になるなあと思っているのがWebページを見ることです。

新しいお店とか、サービスとかが出てきた時に、そこのホームページを見に行くのですが、ん?と思うことがあります。

なんとなく全体にごちゃごちゃしているなあとか、なんでここが折り返されて表示されているんだろう?とか、今どきちょっと不思議だなあと思うページに出会うことがあります。

ここのサイトもかっこ悪いなあと思いながらなかなか修正に手をつけられないところではあるのですが、まあそれは置いて、他のサイトをみてこうやったらまずいんだなあとか、自分のところはどうなっていたかなあと確認したりします。

最近気になったページは、全体にごちゃごちゃしていて、ひと目見た印象が汚いサイトでした。

メニューの項目が折り返されていたり、原色がポリシーなく使われていたり、画像が一面にとっちらかっていたり。

とくに美しくないと感じるのは左右の余白がないことでした。

もちろん一面に少し薄めの背景画像を使うというのはありだと思うのですが、それとは違っていて、あきらかにページで表現したい内容が左右ピッタリに表示されているんですね。

最近はレスポンシブなページがわりと普通だと思うので、ブラウザを狭くして表示してみてなぞが解けました。

スマホ表示だと結構きれいに見えるんですよ。ちゃんと余白もあってまとまったイメージになる。パソコンで横幅を広げるとなぜか余白がなくなり、スマホだときれいに並んで見えたコンテンツが無造作に横に広がってしまうのですね。

頑張ってスマホを意識して作ったのでしょうが、ホームページをスマホで見る人ばかりではありません。

しかも、業態的にはパソコンで見る人のほうが多いのではないかという感じがしたので随分残念なページだなと思いました。

さらには、リスト表示であきらかに中黒「・」を頭に自分で書いているように見えるところがありました。

で、ソースコードを開きます。

すると、ul-liタグでリストしているのに、なぜかスタイルをかけてリストの頭の黒丸を消して、わざわざ文字列として「・」を書いていました。

まあ、なにか理由があるのかもしれませんが、結果的にそこはとてもしょぼい感じに見えてしまうのです。

見た目重視でhtmlのドキュメント構造を考えないサイトも目にしますが、こういう謎のソースコードを見ると残念感が増します。きっとちゃんとしたデザイナーがいないんだろうなあと思っちゃいます。

そのサイトのターゲットとなる顧客層はそういうことにうるさそうな人たちなんです。

先行きが不安になるサイトでしたねえ……

僕ももっとサイトのデザインを勉強しなきゃいけないなあと思いました。

というわけで最近読んでいる本はこれです。

デザインができる人はこんなことを考えているんだなあ。しかもちゃんとセオリーがあるんだ!って思う本ですよ。

Follow me!

読書と編集のオンライン講座

マンツーマンオンラインで読書と編集の講座を受講しましょう。1000円/30分から。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください