CCさくらは初見

クロウカード編ニコニコ一挙で最終話だけ見逃したwww
新作めっちゃきれいですね!!美麗!!!今期覇権!!
資金力!!

全然話変わるけど、TSUTAYA DISCASでマンガ借りました。
もっと早く利用すればよかった…!!
QQスイーパーシリーズを沢山借りたので楽しみです。
感想書けっかな~~

⬇️⬇️⬇️
読みました!泣いた…

レスポンシブWebデザインについて考えよう【デメリットを補うには?】

レスポンシブサイト多いですね。
レスポンシブは消去法で最適だけど、最強・万能ではないと思っています😔

レスポンシブの欠点を「でもどうにかして!!」と言われないようにどういった対処ができるか、レスポンシブについてもう一度よく考えてみようと思います🙋

外でパソコンを広げ、青空コーディングをする女の子




レスポンシブWebデザインとは?

デバイスに関係なく、同じURLで同じHTMLコードを使用し、画面幅によってコンテンツサイズが変わるデザインのこと。

少し前までスマートフォンは大体みんな320pxだったので、PC用とスマホ用のHTMLコードを用意してデバイスによってそれぞれを読み込ませればよかったのですが、さまざまなデバイスサイズが存在する昨今、その方法では対応するのが難しくなってきました。

そこで採用されるのがレスポンシブWebデザイン
これで万事解決!

そう思われそうですが、レスポンシブにもメリットとデメリットがあります。

レスポンシブにするメリット

🙆多くの人に見てもらえる

レスポンシブにするとき使用するCSS3は現在ほとんどのブラウザでサポートされているため、多くの人に見てもらうことが可能です。

🙆同一コードを利用するため管理が楽

更新が頻繁にあるサイトの場合、これは重要になってきます。
PC用とスマホ用で2つコードかあると、どちらも更新しなければなりません。

レスポンシブで同一コードの場合、更新は1つのコードで済むので、更新忘れやスマホだけ古いまま…といったことを防げます。

またユーザーのデバイスに適した表示をするので、SNSでシェアされやすいという利点もあります。

🙆Googleに推奨されている

同一コードを利用するため、このデバイスではエラーが出るといった事態を防ぐことができユーザビリティの向上につながります。
またGoogle検索エンジンのクローラーの巡回の手間が少なくなります。
よってGoogleはレスポンシブデザインの使用を推奨しているようです。

Googleの検索順位に関係するモバイルフレンドリーや今後導入するとされているモバイルファーストインデックスにも適しています。

☝️モバイルフレンドリー
スマホでの閲覧に適したページの順位を引き上げ、適していないサイトを引き下げるGoogleのアルゴリズム。

モバイル フレンドリー テスト – Google Search Console

☝️モバイルファーストインデックス
これまでPCサイトの内容を元に評価していたのを、スマートフォンを主軸に評価しインデックス(検索エンジンのデータベースに登録)すること。
評価には様々な基準があり、今後導入予定とGoogleが発表しました。

🙆今後出てくるかもしれないデバイス幅にも対応できる

レスポンシブにしておけば今後もし新たなサイズのデバイスが出てもすぐに対応可能です。




レスポンシブのデメリット

🙅表示速度が遅くなる

同一コードのため、PCとスマホ両方のコードを読み込んでしまう、スマホでもPC用の大きな画像を読み込んでしまうため、特にスマホではページの表示速度が遅くなります。

🙅構築が大変

「同一コードなら作るの楽なんじゃない?」と思われそうですが、基本的に画面に横スクロールバーがでないよう、どの画面幅に対しても綺麗なレイアウトで見せなければならないため、工数は増え構築は繁雑になります。

🙅構築が大変

特に凝ったデザインで複雑なレイアウトだったり、対応デバイスが増えるほどコーディングは大変です。

🙅構築が大変

大事なことなのでもう5回くらい言いたい笑

🙅デザインやレイアウトが制限される

シンプルなデザイン・レイアウトでないとレスポンシブ対応はなかなか難しいです。
凝ったデザインでもなんとかなる場合もありますが、やはり表示速度が遅くなるなどデメリットが目立ってきます。

🙅スマホでのコンテンツ量が多くなり見にくくなる

テキストや画像を沢山載せたページの場合、PCでは見やすくてもスマホの小さい画面になると情報量が多すぎて見にくくなってしまいます。

🙅IE8以下は未対応

CSS3は多くのブラウザ対応とはいえ、IE8以下は残念ながら未対応です😔




レスポンシブの欠点を補うには?

欠点を説明しても、「やっぱりレスポンシブがいい!」となることは多いと思います。
構築が大変とか見る人には関係ないもんね…そうすると利点の方が多いもんね…
完成した後「なんか表示遅くね?」とか「デザイン変わってるじゃん!!」とか言われないために、では、どういった対策ができるでしょうか。

🙋レスポンシブが本当に必要か確認をする

できればデザインを作る前に、レスポンシブかどうか確認した方が今後自分の首を絞めることがなくなります。

🙋ブレイクポイントを詰める

たとえば750px以下はレスポンシブだけど、それ以上は横スクロールバーが表示されるとか、なんちゃってレスポンシブの提案もいいかもしれません。
PC、スマホ、タブレット以外で、わざわざブラウザの画面幅縮めて見るのなんてそうそうない…
動画サイトとお絵かきソフトで2画面するときくらいでしょ…でしょ!!?

ちなみにこのサイトはなんちゃってレスポンシブサイトです(

☝️ブレイクポイント
ブラウザ画面を縮めていったときレイアウトが切り替わるポイントのこと。
CSSで調整する。

🙋できるだけシンプルなデザインにする

デザイナー()としては凝ったデザインにしたいわけですよ!!!
でもそうすると自分の首が絞まるわけですよ!!!!

🙋できるだけテキストベースで作る

画像ベースだと上記のデメリットでページ表示速度が遅くなってしまうので、できるだけテキストベースで作るのが良いかもしれません。
結果工数が増えます笑

どうしてもデザイン性重視で画像を使用する場合は、スライス時に普通なら2、3枚にするところを1枚にし、さらに解像度を下げるなどしてデータを軽くすると良いようです。

🙋スマホメインで作る

スマホ用の画像やCSSを先に記述し読み込ませると、スマホの表示速度が少し早くなるかもしれません。
PCコンテンツ量が多い場合はスマホのコンテンツ量を調整することも必要です。

☝️モバイルファースト
スマホで見やすく使いやすい設計にすること。
PCに比べ画面が小さく回線速度が遅いスマホの場合、スワイプによる操作を中心に、必要最小限の情報を適切なレイアウトで表示させることが必要となる。

🙋jsでIE8以下にも対応させる

jsを利用することでIE8以下にHTML5、CSS3を対応できるようです。

IE8以下でもレスポンシブサイトを有効にする




結局どうすればいいんだってばよ

①レスポンシブが必要かどうかよく考え
②盛り込む情報を精査、スマホでも見やすい設計にし
③テキストベースでPC・スマホ共に構築しやすいレイアウト、デザインにし
④必要に応じてIE8以下にも対応させる

ということだってばよ!!

今のところ全てを網羅するようなベストな代替策は私のようななんちゃってWebデザイナーには考えもつきませんが、きっと今後いろんなアイディアがもっと生まれてくると思います。
同時に問題ももっと生まれたりしないといいね😉まじで😉

あとレスポンシブがこんなに大変って思うのは私の力量不足もあるのかも…とか…
今後もっと勉強していこうと思います!




【参考サイト様】
レスポンシブデザインとは|今更きけない基礎知識とメリット・デメリット|ferret [フェレット]
レスポンシブWebデザインについて知っておきたいこと【作り方入門編】 : ビジネスとIT活用に役立つ情報
モバイルフレンドリーとは?対応して順位を下げないための基礎知識|ferret [フェレット]
モバイルファーストインデックスとは? SEOへの影響と対応方法
【速報】モバイルファーストインデックス、Googleの本番環境にて既に導入が開始 現在の状況と必要な対策とは?
モバイルファーストとは?スマートフォンサイトをデザインする時の考え方 | デジタルハリウッドお役立ちWebマガジン「くりたま」

参考サイト様方、本当にありがとうございます!🙇‍♀️

🎀WebデザイナーによるWebサイトの作り方はこちら!




【金田一少年の事件簿外伝 犯人たちの事件簿 1巻 感想】すげー笑えて元気出る

久しぶりに漫画の感想書くわ!!!
これメインコンテンツなはずなんだけどな!!?

なんか疲れたなってときこれ読むとすげー元気でます。

↓金田一少年の事件簿外伝 犯人たちの事件簿 1巻 ネタバレ込み感想




金田一少年の事件簿外伝 犯人たちの事件簿 1巻

金田一少年の事件簿外伝 犯人たちの事件簿 1巻

最初から笑える

「イン…!」とか「やったぁポンコツだぁ~っ!」とか最高に笑えます!
あとマガジン独特の「!?」が最高にスパイス

原作に忠実な作画

作家さん原作と同じ方かと思ったら違う方だった!
原作はちらっとしかみたことないけど全く違和感なかったです!
ネットでは原作ファンも納得の作画みたいです。
そのままの絵でギャグやってるから余計たのしい!!🙆

的確な心情

でも大掛かりなトリックやってのける犯人の心情って、こうしてみるとギャグ以外のなにものでもないな!
ほんとだよ!!って突っ込めるシーン多すぎ🤗
偶然刑事と名探偵の孫(隔世遺伝)が居合わせるとかどんな確率!!
まあそんな大掛かりな殺人しようとするのもどんな確率…

全員名演技

役者になれるね

全員多才

他に活かせ!!!😉

以上1巻感想でした。雑い!w
でもとにかく面白いのでどれか1話読んでみてください!!

1話読んで笑えたら迷わず買いだと思います。

ネットではよくバズっていて、明智ダンス回とか最高にクールな回もあるので、今後の巻が楽しみです!!😍




新年ですね

いい感じの枝が欲しくて買ったんですが、部屋は暖房入れていて暖かいのでもう咲いてしまいました。
桜😊🌸

いい感じの桜の枝

みてこれ!!
めっちゃいい感じ!!

今度は綿欲しいな~綿の枝☁️

新年ですが、やる気スイッチは相変わらず死にかけです。
も、申し訳ない…皆様今しばらくお待ちください…🙇‍♀️

おみくじ引いたら半凶でした😉
5回中3回は凶だった気がするよ!!ふつう?🤔

あと暖房はベタちゃんにはあんまり意味なかったみたいで凍えていたので、やっとヒーター買ってきました。

ついでに水草セットも…
ライトもつけたよ!

ベタちゃん

超いい~😊
水草はいっつもアマゾンソードとアヌビアス・ナナしか生き残らないからがんばってくれ!!

ちゃんとCO2なくてもなんとかなるかどうか店員さんに訊いたから…がんばって…✊