レスポンシブ化、ほぼ完成？

　ちまちまと、レスポンシブ化に向けて作業してきましたが、だいたい形になったのでここで完成宣言（笑）！

　実は、細かいところのツメがまだまだあるんだけど、それらはおいおいやっていこうと思う。

　あと、本当の意味でのレスポンシブデザインとは、違うかも知れない…。

　今回、レスポンシブ化されてないWordPressテーマを元にカスタムしてきましたが、やってみて思ったのはまぁ〜大変だわ（笑）

　まずは、オリジナルと、レスポンシブ化前と、レスポンシブ化後の比較スクリーンショットをば…

↑これがオリジナルのGlossyBlueテーマ。


↑オリジナルを相当いじって長い間使っていた、レスポンシブ化前の状態。


↑そして今回、レスポンシブ化したあとのスクリーンショット。

　レスポンシブ化した際の見た目が気になる所ですが、手持ちのiPhone4とiPhone5しかないんで、iPad等のタブレットや、Android端末等の実機では見ておりません。
　もし、それらの端末で閲覧した時にお見苦しい所等ございましたら、ご連絡いただけると泣いて喜ぶと思うので、よろしくお願いします。

　でわ、iPhoneでのスクリーンショットをば…

↑とまぁ、こんな感じです。

　ここまで来ると、オリジナルの面影がないですね（苦笑）。

　さて、ここから作業のないようをば、メモしておこうかと…。

作業手順

　まずは、Webを検索して参考サイトを探し出します。

参考サイト

ASCII.jp：ゼロから始めるレスポンシブWebデザイン入門

Media Query Snippets – list of media queries

CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き

[CSS]スマフォ対応サイトのためにMedia Queriesをしっかり身につけるチュートリアル | コリス

Memo, [CSS3]iPhone 5専用Media Query « イナヅマTVログ

　とまぁ、こんな感じかな？

　これらのサイトを、一通り目を通して何となく流れを掴む。実際は、掴めてるのか怪しいけど…（笑）。

　そして、朧げながら大まかな流れは…

1. リキッド（フルード）デザインにする。
2. Media Queriesを使って、スクリーンサイズに合わせてスタイルシートを書く。
3. meta タグを追加。

…こんな感じかな？と、一応あとになって考えてみると、実際の作業は1と2を逆にしてたかと思う。
　0から作るなら、リキッド（フルード）デザインにしてからの方が効率良さそうな気がする。

　この辺りは、その道のプロに任せるとして、次にいっちゃいましょう。

リキッドデザインとレスポンシブデザインの違いって？

　…なんだろう？と、思ったわけですよ。そして、調べてみたら次のサイトがわかりやすかったです。

レスポンシブwebデザインとは？｜Tips*Blog｜株式会社コプロシステム

　要するに、横幅を変えるとレイアウトが変わるか変わらないか、の違いなんですね…で、あってます？

ついでにフラットデザインも…

　先日、「WWDC 2013」でフラットデザインが採用されるというiOS 7が発表されて、フラットデザインってなんだろうって思ったわけですよ。

だいたい40秒くらいでわかる「フラットデザイン」について*prasm

　↑こちらのサイトが、わかりやすくて文章も面白く、楽しく読めた（笑）。んで、5箇条を引用。

• グラデーションを使わない！
• 質感は無視して、とにかく塗りつぶし！
• 形に迷ったら正方形！
• カラフル大事！ビタミンカラーよりもちょっとくすませて！
• 整列して並べて、気持ちよく配置！

…とあります。

　でも、iOS 7のサイトを見ると、あれれ？先程の5箇条に当てはまらないじゃん？と思っていると…

だいたい40秒くらいでわかる「Almost flat design」について | frasm

　ちゃんと、↑こちらで解説しております。いやはや、抜け目ない…いや、参考になります。

　で、僕が目指すべきものというか好きなのはやはりiOS 7チック！上記のサイトの言葉を借りれば「「フラット度」62%（当社比）」ぐらい？いや、実際には50%も満たないんじゃないかと…（笑）。

　というわけで、先日の小改造やアイコンの作業はこれらを念頭に置いてやっていたわけです（笑）。

　そして、頭の中に浮かんだものがだいたい形になって、ちょっと喜びの舞を舞いながらこれを書いてるので、かなり文章が支離滅裂です。ええ、自覚してます（笑）。

　細かいツメがまだ残っているので、本当は完成ではないのですが、ここらで書いとかないとわすれてしまうと思ったので、残しておきます（笑）。

　ちなみに、僕はワイヤーフレームとか作った事ないです（笑）。いわゆる、現物合わせで作ってます。だから詰めが甘いんでしょうけどね…。

　そうそう、WordPressをスマートフォン端末表示対応にさせる、プラグインWPtouchですがまだ有効なので、スマートフォンとかでご覧頂いてる方は一番下の「モバイルテーマ」をOFFにしないとレスポンシブ化のテーマは現れません。
　といっても、まだ表示が重いと思うので、ご利用はお好みでどうぞ。ちなみに、レスポンシブ化した方は、文字サイズを大きめにしてあります。最近、小さい文字が見づらくなりつつあるので…(^ー^;A。