wanichan's web tips

Expression Web ユーザー向けにサイト制作のコツと問題解決のヒントを取り上げていきます。

Webデザインの流行りは変化する

超初心者向けにExpression Web 4を使ってホムペを作る方法についてステップバイステップで解説したサイトを一から作ろうと思ってるんですけど、かつてのトレンドと今とではやっぱり違ってるんですよね。

Expression Webがディスコンになったのは2012年12月。その時はかろうじてHTML5とCSS3には対応してる(つもり)みたいな感じです。デザインビューでは新しい要素はちゃんと表示されないので、ブラウザーでプレビューで見ないとダメです。

https://plus.google.com/u/1/101763113479395164571/posts/E2avykNW8tA

私も若干浦島太郎状態になっているのかもしれません。しかし、コロコロとデザインレイアウトを変えると、いつもうちのサイトを見てくれている人たちが戸惑ったり、ある意味不快感を覚えることもあるんですよね。とりあえずスマホやタブレットでコンテンツ見れるようにレスポンシブWebデザインにしてますが。

で、早い話、段組みレイアウトは古いのでしょうか?

フラットデザインも一時期流行っていた感じ?

パソコン初心者の人たちがブラウザーを開いたときに最初に出てくるホームページはYahooだったりしますけど、Yahoo!のデザインレイアウトにはさほど変化は見られません。ここ10年は変わってないかも?みたいな気がします。

f:id:wanichan:20170731000426p:plain

段組みレイアウトって、初心者にはちょっと難しいっていうか、結局CSSのメディアクエリでモバイル端末からは段組みなしで、デスクトップにしてはじめて段組みにするとかややこしいことはもう時代遅れなのかもしれません。

JQueryとかややこしいテクノロジも敷居が高いですよね。あまりいろいろ読み込むと重くなるし、なんかまるでマイクロソフトのSilverlightみたいな存在に似ているような気がしないでもないです。Silverlight、どこへ行ったんでしょうね。Flashも時代遅れでGoogle Chromeでデフォルトでブロックします。

シンプルの方がいいとなると、結局段組みなしのフラットな感じで、横並びメニューで横にスクロールするタイプが流行ってるんでしょうか?

Google Chromeの右上の三点リーダー[︙]をクリックして[その他のツール]から[デベロッパーツール]を開き、

f:id:wanichan:20170731085403p:plain

モバイルモードにすると

f:id:wanichan:20170731085524p:plain

こんな感じになります。

f:id:wanichan:20170731001211p:plain

横並びメニューをスクロールしてみると…

f:id:wanichan:20170731001310p:plain

この横並びメニューのスクロールを実装するためには、以下の記事が参考になりますね。

Expression WebのダイナミックWebテンプレートをまた今風に変える必要があるかもです。その前に自分のサイトを適用しないといけないかもです。