WEB制作

WEB制作

今どきこれはちょっと古いなぁ…と思ってしまうWEBデザイン

ITやWEBの世界は進化が速い。人間の7倍の速度で成長するイヌに例えてドッグイヤーなどと言われている。

WEBデザインも流行り廃りがある。一昔前はどこのサイトでも当たり前に使われていた表現でも、2018年現在においては「古臭い」「昔風だな」「流行の変化を知らないな」「古いユーザーがターゲットなのかな」と思ってしまうものがある。制作リソースが限られている個人サイトはともかく、人員などに余裕のあるはずの大手企業のサイトとかだと、経営姿勢を疑ってしまう場合もある。

今回はそんな古臭く感じてしまうWEBデザインの例を取り上げる。

なお、筆者も企業でWEB制作に従事していた経験があるので、それぞれの企業で“社内政治”などのしがらみがあり、そのうえでWEBサイトが作られていることは、よーく知っている。多くの場合、下っ端に位置するWEBデザイナーのセンスは意見が通りにくし、背に腹は代えられない。頑固ジジイみたいなエンジニアや外部の協力会社などが介入しているケースも多いので、古臭くてもどうにもならないことが多いのだ。社内政治というしがらみの中、上に弓を引く代償は大きい。

そういったことをわかった上での意見であることは、ご了承願いたい。

カルーセル(画像ローテーション)

メインビジュアルなどがローテーションしていく表現である。クリックするとそれぞれのリンク先に飛ぶのが一般的。

WEBサイトの見た目に動きがあることが「センスいい」とされた時代があった。最初に登場したのは2005年前後のFlashの時代ではないだろうか。その後にFLASHにセキュリティがiOS非対応など闇雲がかかり、jQuery(JavaScript)というブラウザネイティブの機能で同じことを実現するようになった。

定番ではあるが、15年くらい前の流行であることを知っていて使うかどうか判断できれば素晴らしい。スマホや随所に動きのあるデザインのOSが主流になる以前の表現であり、個人的には今やると古臭く感じしまう。

単純に「動いている必要がないんじゃないか」という疑問もある。しかし、企業においてはリーダー格や経営層がFLASHの時代を輝かしいものと思っているケースも多く、動くものは何でも「FLASH」と言う年配者もいるので、新人WEBデザイナーが意見するときは注意が必要。

URLがhttp(SSL非対応)

2018年7月頃の事実上の標準Webブラウザ「Google Chrome」がSSLの暗号化通信に対応していないhttpのサイトに警告を表示するようになった。

以前からGoogleがそうするよとアナウンスしていたので、SSLに対応していなかった古い企業サイトなどは焦って今年の春~夏くらいにSSL対応させた所が多いだろう。

個人情報をやりとりするようなページでもないのに、SSLに対応させる意味が何か意味あるのかというと、きちんと答えられる人はWEB制作実務をやっている人にも少ないのだが、標準ブラウザが警告を出すようになってユーザーが不安がったり、信用が下がってしまうということ。

ちなみに、欧米など海外では何年も前からSSL対応が当たり前だったが、日本が非常に世界から遅れていたというだけ。アメリカが80%くらい導入している時に日本は30%くらいのサイトしかSSLを導入していなかったらしい。世界の標準に合わせるのは大事。

WEB制作

CSSの強制継承「inherit」は他人が作ったグダグタなCSSをリセットしたい時に有効

cssの基本として親要素のプロパティ(色とか)を子要素が引き継ぐというものがある。

自分がデザインしたcssならまだしも、他人が作ったcssだと非常に入り組んでいるような場合がある。ひたすらデベロッパーツールをいじくりまわしても、何がどうなっているか簡単に見つけ出すことができない。

やっと目的のクラスやプロパティらしきものを発見しても、複数のcssによってプロパティが上書き、上書きとグダグダになっている場合、簡単に修正できない場合がある。

むしろ初期状態に戻すのがinherit

そういうグダグダな作りのcssの場合、往々にしてあなたが想定している継承が無効化されていることがある。CMSで動的に強い力でcssが割り当てられているようなケースだ。

そんな時には強制的に継承させるプロパティ「inherit」が役に立つ。どちらかというと初期状態に戻す処理になる。

もしかしたら、人によってはあまり使ったことがないかもしれないが「inherit」は色やフォントなども含め、全てのプロパティに適用させることができる。

使い方の例
#sidebar h2 { color: inherit; }

詳しい使い方を知りたい場合はこちらのページが役に立つ。
https://developer.mozilla.org/ja/docs/Web/CSS/inherit

WEB制作

画像リンクのマウスオーバーの下線を消す、但し、文字は下線を出すCSS

サイトの中でマウスオーバーの時に「格好悪いので画像リンクの下線を消したい」が「テキストリンクは下線は出したい」というケースがあると思う。

画像に下線が出ると格好悪いが、テキストだと下線が出ないとリンクだと一般的にわかりにくい。

全部のリンクのマウスオーバー時の下線を消す

a:hover {
text-decoration: none;
}

疑似クラス(:hover)をリンクであるa要素すべてにかける方法。しかしこれだと、テキストの下線も巻き添えをくらって出て来なくなる。

手っ取り早く、確実に画像にだけ適用する方法

HTMLやCSSというのは、何かを表現するのに、良くも悪くも何通りもの方法があるのは大前提。

自分一人で白紙の状態から作ったサイトならともかく、CMSだったり、人が作ったサイトを編集したり、あるいは自分が作ったけど昔過ぎて忘れてしまったような場合もあるだろう。

てっとり早く画像の下線だけ消したい場合は、
HTML側で
div class=”sen_denai”
などと新しいクラスで画像を囲む。

そして、cssで
.sen_denai a:hover{
text-decoration: none !important;
border: none !important;
}

と書く。色々な記述を書かないとならないのは、他の部分などの設計によってケースバスケースで、効いたり効かなかったりするから。

なぜかマウスオーバーすると画像がずれてしまう場合は、
vertical-align:top;
などを記述すると良い場合がある。

「画像リンクのマウスオーバーの下線を消す、但し、文字は下線を出す」

日本語だとこれだけなのに、場合によってはかなりの時間を試行錯誤しないとならない場合もあるだろう。検討を祈る。