結局レスポンシブデザインってなんだ

おはようございます。レモンです。

院試が間近に迫ってますが、まあたぶんなんとかなります。

今回の記事はほぼ雑談というかコラムというかテキトウな話です。レスポンシブデザインってなんじゃいと思ったことを書くだけなのです。

そもそもレスポンシブデザインとは

Webデザインの手法の一つで、様々な種類の機器や画面サイズに単一のファイルで対応すること。(IT-wordsより)

つまりは、HTMLはひとつにしておいてCSSの上書きとかでモバイルやタブレットにもいい感じに対応させようぜってのがレスポンシブデザイン(RWDって略すらしいです)なんだと自分は勝手に思っています。

このWordPressのテーマもRWDですよね。プロが作ったデザインだけあってしっかりしていると思います。

レスポンシブデザインについて思うこと

RWDは自分は思想的にはすごく合理的な考え方だなと初めて触れた時思いました。なるほど、確かにSEO的にも良いしHTMLを書く手間を減らすことができる。と。そして、PCとモバイルのデザインはあまり変わらないほうがユーザが混乱しない、というのも納得でした。同一のサイトであるという認識は確かに必要です。

RWDに対応したCSSフレームワークも徐々に定着しつつ有ります。BootstrapやFoundationなんかがありますね。特にBootstrapを自分は最近よく触っているのですがこれを使えば最低限のWebデザインはできるというのはデバイス対応も含まれてるなーと感じています。

実際にレスポンシブデザインでWebをデザインすると

さて、この合理的かつ効率的なRWDでありますが実際にデザインするとすごく難しいことが最近じわじわとわかってきました。

RWDの前のデザイン、つまりはPC版とモバイル版に分けるやり方だとそれぞれについてだけのデザインを考えれば良いのです。

PCは解像度に多少の違いがあっても横長のウィンドウで一度に多量の情報を表示できる。モバイルは縦長で一度に少量の情報しか表示できない。(正確に言うと多量の情報を入れると文字や画像が小さすぎて見てくれない)と言った違いがあるわけです。つまりはデバイスに合わせて情報量を取捨選択しながらレイアウトしていけばいいのです。ただし、モバイルとPCで齟齬がないようにjQueryなどを使って階層表示にしたりといった工夫がありました。確か、WikiPediaのモバイル版では見出しだけ表示しておいて必要な情報だけをタップで表示するといった方法を取っていたと思いますが、あれはそういうわけです。

しかし、RWDではこれを同じHTML上で考える必要があります。同じデザインでもこれがPCで表示されたらどうなるか、モバイルだと、タブレットだと？という考えを常に持ってレイアウトしていく必要があります。

PCでは見た目がよくってもモバイル表示にしてみると文字が多すぎてうんざりしたり、その逆ということもしばしばあります。同時にこれらのことを考えるデザインは先ほど述べた従来のやり方と比べてすごく手間を取る上、レイアウト上の制約も大きいです。意外に手間なんだなあと作ってみて感じるのでした。

レスポンシブデザインの使いドコロ

RWDを作ってみてきついと感じましたが、たぶんこれはコンテンツの量によるんじゃないかなとも思いました。量が多いとどうしても取捨選択が大変で情報の整理を同一HTMLで整理するのがつらくなります。

ただ、フォームやギャラリーサイトなんかの比較的コンテンツの量が多くない、多くても密集度や種類がそこまで多くなく整理がしやすいものであったらRWDはささっと作れそうな気がします。

だから、同一サイト内でもRWDの部分とPCとモバイルを分ける部分とがあってもいいのかなあと思いました。各ページに載せる情報を予め整理してここはRWDでいけそう、ここは分けたほうが辛くないみたいな話をしておいたほうがいいのかなあ、、BootstrapなどはGridシステムとかだけに使っちゃえばいいと思います。最悪visibleとhiddenを使って同じHTML内に2種類のレイアウトを用意するという力技もできなくはないですし。

ただし、デザインは極力合わせたほうがいいとは思います。せめてテーマカラーは統一しないと混乱します。たぶん僕も混乱します。

RWDにしろ、CSSフレームワークにしろデザイナや開発者が楽をするために開発されたものであるのだからこれに四苦八苦するのは本末転倒というものです。

ある程度融通を効かせて自分なりにテキトーに解釈してしまうのが精神衛生上も効率的にもいいんじゃないかなーと思った次第でした。

自分で書いててよくわからない文章になっちゃいましたが、まあコレで終わりです。現在RWDのせいでぐるぐる混乱してるので所謂愚痴と頭の整理でした。

自分のWebページのデザインを更新したよという話。

こんばんは、レモンです。

院試勉強からの現実逃避に自分のほとんど需要がないWebページのデザインを一新することにしました。
旧デザインはモノクロな感じのシックな感じに仕上げていたので今度はレモン色を使ったポップなデザインにしました。

旧デザイン↓

新デザイン↓

 

新デザインではBootstrapというCSSのフレームワークを使っています。
正確にはフレームワークじゃなくってデザインを補助するツール、という位置付けらしいです。

Bootstrapのリファレンスは非常に丁寧というか、コピペして中身を編集すればある程度のことができてしまうのでデザインの手間が非常に少なくなります。
ただし、その分デザインの個性が失われがちになるのであとでCSSを上書きしてあげないといけませんね。
上書きを行うにはBootstrapのCSSを読み込んだ後に自作のCSSを読みこませれば上書きができるようです。
ただ、classの数が尋常じゃない量あるためどこに何を加えれば変更されるかを特定するのが非常に手間です。

そのため、大きな変更を行う場合は予めBootstrapのカスタマイズページで変数を変更したCSSをダウンロードするのが賢いと思います。
自分はNavbarだけはどうしてもよくわからなかったのでそこだけいじったCSSをダウンロードしました。

もっと大きな変更をしながらデザインしたいという場合はLESSファイルをGithubから持ってきてコンパイルしつつするのが早いんでしょうね。
LESS(あるいはプラグインを使ってSASS)を覚えないといけませんが…今回はそこまでやってませんね。

さて、変更したデザインどっちが見やすいかなーと考えてますがなかなか他人に聞きづらいですねこういうのは…(^_^;)
一応「改善」をしたつもりなんですが「改悪」になってるとも限りません。
まあ、どっちにしろ誰が見るわけでもないページなので気軽に遊んで行こうと思います(｀・ω・´)ｼｬｷｰﾝ

 

 

Webデザインはじめの一歩

こんにちは、レモンです。台風やばいっすね、家に籠城がはかどりますわ。

ある人からWebデザイン教えろという圧力を受けましてスライド作ってみました。
とりあえずWebデザインしないといけないけど何からすればわからない！という方向けのスライドです。
対象は一応HTML,CSSがわかっている人向けですが技術的な話は殆ど無いので何言ってんのかわかんね～ってことは無いと思います。

もしお暇でしたら閲覧ください(｀・ω・´)ｼｬｷｰﾝ