http://spiral-newspaper.jp/

WEB SPIRAL NEWSPAPER

お問い合わせ

スマホのエロゲーページをレスポンシブWebデザインに対応させる時の考え方

Web

2014/03/20
  • エロゲーダウンロードページ

記事の詳細

確認方法

レスポンシブウェブデザインを実現するMediaQueryでのCSSの切り替えは、端末情報を読み取っているわけではない。スマホかPCかを読み取っているわけではない、という事。

ブラウザの幅を読み取って適用するCSSの記述を切り替えている。
つまり、PCで閲覧していてもブラウザを可変すればデザインが変わる。

実際にブラウザを可変してみると、よくわかる。
後はシミュレータも多くあるのでググる事。

スマホのエロゲーを紹介している以上は、スマートフォンでサイト・ページを閲覧可能な事が重要です。

事例

英会話教室ハート

英会話教室ハート

このサイトは、5つに並んでいる写真エリアがミソです。
フルサイズだと横に5枚、タブレットだと3枚と2枚、スマホだと1列になります。

某宿泊施設のサイト

こちらはスライダーのbackgroundの画像が面倒だったため、タブレットは捨てています。

個人サイト:web cocoon

個人サイト:web cocoon

このサイトはタブレットの幅から1カラムにしています。

個人サイト:Spiralnewspaper

個人サイト:Spiralnewspaper

このサイトはPCでは一番レスポンシブウェブデザインに近いかもしれない。
なぜなら、PCのデザインをリキッドでしているためです。

子divの幅は最大に広がるようにしているので、親divのfloatを解除して幅を変更するだけ。

一般のレスポンシブウェブデザインのサイト

検索すればいくらでも出てくるのであえて記載する必要はないかもしれませんが…。
イメージを膨らませるには良いかもしれません。

個人サイト:Spiralnewspaper

幅の考え方

これは、リキッドデザインの考え方。
親divはカラムに合わせた相対指定の幅に変更して、子divはwidth100%やmax-wdthを使用。

3カラムのWebデザイン

例:3カラムでそれぞれ親divの幅が30%(左) 40%(真ん中) 30%(サイドバー)の合計100%で並んでいる場合(pxの場合でも)、

2カラムにする場合は、40%(左)60%(真ん中)にして、30%のサイドバーは、「float:none;」もしくは、「display:none」を適用。

1カラムの場合はもっと簡単ですね。widthを100%にしてfloatをまた解除するだけ。

子divは、親divが何%の幅だろうが、max-widthまでは100%に広がるように設定をするので、あまり関係なし。

かなり即席でグチャグチャですが、firebugで幅を相対指定にしたりfloat解除したりしてみました。
スクリーンショット。

こちらもイメージは膨らむかも。
「大体」こんな感じ。

5分程度でしたので本当にテキトーなものも。^^;
※このページでは掲載しません。

ポイント

レスポンシブウェブデザインをしてみて、私が考えたポイント。

◎カラム数が減るだけ、と簡単に考える

◎リキッドデザインをするだけ、と簡単に考える

◎カラム数が減るところは、floatを解除しまくる!(ためらわない)

◎消すところは消しまくる。display:none;(私の作ったサイトも、消しまくってます。) (スマホは機能を絞る、などの事はあらかじめ言っておく)

◎グローバルナビに導線が用意されている場合は、他からのリンクはしない。
(これをあらかじめクライアントに言っておくと、まるごとサイドバーを消せたりします。)

今後課題

下記は、私なりに面倒そうだなぁ、と思った点。

ヘッダー(フッターも?)

ここはそこまで課題というわけではありませんが、position指定が使用されてるケースが多い。
一度position指定を解除する必要アリ。

後は縦の間隔の調整。

グローバルナビ

どのサイトをデザインする上でも、ここがある意味一番厄介か。
理想的なのは、幅を調整して今のナビゲーションの並びを列を変えて並びなおす事。

メインビジュアル

最終的には簡単なスライダーを実装したいのですが、後回しにします。
最初は丸ごと非表示で逃げましょう。

iframe関係

ソーシャルプラグインなどのiframe関係。
幅の指定が個別でされていて、CSSの言う事を聞いてくれない事が多い。

ただ、ググれば結構対処方法は出てくる。
後はCSSのimportant指定で無理矢理指定をねじ込み。

回り込み

回り込みの概念は薄れますが、すべてが1カラムになるわけではない。
子のブロックや画像などは回り込みが必要なケースが出てくると思われる。

それでも回り込みが難しい場合は、縦1列に並べてセンタリングを行うこと。
両サイドのスペースが余程空かなければ、最低限の体裁は整う。

まとめ

私が短時間で独学で習得してしまった事で、間違っている部分がかなりあるかもしれませんので、あしからず。

エロアプリ系のサイトも、今後はどんどん難しくなっていく事でしょう。

シェアはこちらから。

Spiral Newspaperメインビジュアル Spiral Newspaper広告掲載について

Popular Posts

2013/10/24

スマホのエロアプリ 概要 スマホのエロアプリは、iPhoneの「App Store」、Androidの「Google Play」のどちらも規制が厳しく、公式のマーケットではお目にかかる事ができません。稀に審査を上手くかい …

2013/10/7

昨日、私はブラック企業の経営者だったという記事を読んだ。はてなブックマーク経由で辿り着いたのですが、なかなか良い記事でした。 私はブラック企業の経営者だった 概要 現在は雇用される立場として過酷な労働環境の元働いているが …

2013/10/22

ハゲ・薄毛のブログまとめ 自身の治療経過をブログに画像付きでアップされておられるハゲ・薄毛の方も少なくありません。治療の奮闘記、といった感じでしょうか。 薄毛の方が頑張っておられる姿に仲間意識が芽生えますし、良い報告の記 …

2013/10/30

今日は先日公開されたまどマギの映画を見に行きました。 そのチケット購入の際の一幕。 私「魔法少女まどかマギカ大人一人お願いします」 チケット受付「はい、まどマギ大人一名様ですね」 …まどマギはチケット受付の人も略しちゃう …

2013/10/30

ガンホーの1〜9月期の営業利益が28倍の685億円に昇る事がわかりました。 ガンホーと言えばパズドラですが、今年も順調で2000万ダウンロードを突破するなど話題となりました。 ガンホー1~9月期、営業益28倍の685億円 …

2013/11/1

概要 スマホのエロゲー総合ページです。 目次 スマホにエロアプリがない理由 スマホにエロアプリがない理由 この記事を読む ●概要 そもそも、公式マーケットでエロゲーを検索されてエロゲーを検索してヒットしなかったからために …