menu
観たアニメは星の数、読んだ漫画は山のごとし。小鳥大好き独身アラサーの日常です。たまにWeb制作について書いています。
blog top

観たアニメは星の数、読んだ漫画は山のごとし。小鳥大好き独身アラサーの日常です。たまにWeb制作について書いています。

↓インコブログです。


Webサイトをデザインする【良いデザインを生み出すには?】

今回はいよいよ!サイトのデザインについて考えていきたいと思います。

【FC2・忍者・アメブロ・はてなブログ】無料ホームページ・ブログサービスを比較してみたでも書きかましたが、デザインのはじめは真似ることだと思ってます。

ゼロから生み出すのはとてもとても難しいものです。
でもいろんなサイトを見て、デザインを見て、それを自分なりに解釈して、もっとこうしたい、ああしたい…そうしていくと今までにない素敵なデザインが完成したりします!

大体サイトを2、3個に絞って見ていくと参考になります。

その参考サイトを選ぶポイントとしては
1️⃣カラーで選ぶ
2️⃣テイスト(かわいいとかかっこいいとか)で選ぶ
3️⃣作るサイトの業種やテーマで選ぶ
これの組み合わせかと思います。

今回はその際に大変便利なまとめサイト様をご紹介します!

Web系

🌟Webデザインの見本帳

Webデザイナーならみんな知ってるまとめサイト。
印象、色、ジャンルから探せるので、自分の求める参考サイトがきっと見つかります!
個人的に、厳選していいサイトを掲載しているイメージです。

🌟イケサイ

Webデザイナーなら以下略
業種カテゴリと色から探せます。
個人的に、更新頻度が高く新しい情報を確認できるイメージです。

🌟Web Design Clip

Webデザイナーなら以下略
上部メニューのメインカラー、サブカラー、レイアウト、カテゴリー、タグから探せます(知らなかった)。
採用サイトにも特化しているようです。

🌟bookma! v3

ググったら見つけました!
左メニューのリージョン(国内・国外)、カラー、バックグラウンドカラー、テイスト、カテゴリーから探せます。
バックグラウンドカラーからも探せるのはいいですね!

LP系

せっかくなので本業でお世話になってるLP(ランディングページ)版もご紹介します!

🌟LP アーカイブ

カラー、カテゴリ、イメージから探せます。
LPに関する記事もかなり勉強になるのでオヌヌメ。

🌟Web Design Clip [L]

Web Design ClipのLP版。
上部メニューのメインカラー、サブカラー、カテゴリー、タグから探せます(知らなかった)。

参考サイトを選んだら

好きな参考サイトを選んだらいよいよデザインしていきましょう。
がんばれ!!(丸投げ)

いやもうね、こればっかりはね…

ひとつ、私がよくやるのは、参考サイトを足して割ることです。
3つ選んだなら、それを全部足して3で割ったものを作ると、素早くいいものが作れます。
これぞなんちゃってWebデザイナー!(ドヤ顔でいうことじゃない)

試しに一つ作ってみた

例えばなんか青っぽくてかっこいい作品紹介サイトを作りたい!とします。

参考サイトを選びましょう!
今回は青で作りたいので青系のサイトを選んでみます!

なんかめっちゃかっこいい!

ビックリビッグローブモバイル

格安SIMが驚きの月額換算700円(税別)から | ビックリビッグローブモバイル
https://join.biglobe.ne.jp/mobile/special/

Bのアクセントも効いてます!

下層ページもめっちゃいい!

ナブコ自動ドア

ナブコ自動ドア
https://nabco.nabtesco.com/

青枠が良い感じです!
やっぱり白背景は画像が映えますね!

レイアウトめっちゃいい!

バルコムグループ 新卒採用

バルコムグループ 新卒採用
http://www.balcom.jp/recruit/fresh/

グリッドレイアウトは見ていて安心感があります!

——————————

ということで、なんか青くて白くてグリッドなかっこいい作品紹介サイトを作りましょう!!
このように、参考サイトを見ることでより具体的な完成イメージを得ることができます。

じゃん!

ててとポートフォリオをあわせてteteフォリオ(笑)

内容がないからあまり参考にならないけど、斜めの図形でグリッドで単調な中にも動きとスタイリッシュさをだしました。
青枠は全体がまとまってみえて、かつ、かわいいのでいいのですが、参考にあまり寄せすぎるとただの真似っこどんどんになるので、実際は入れないほうがいいかもですね~
でもこういう表現手法もあるのだと知っておくことはとても大切です!
いつか必ず役立ちます!!

よりよいイメージをもってよりよい形を作っていこう

いかがでしたでしょうか。

どんなサイトにしようか考えてる時が一番わくわくしますね!
今回の裏話としては例にするデザインが全然かっこよくできなくて地味に時間かかりました笑
デザインってむずかしいな~🙄

デザインは、はじめは真似ることからでも、だんだんと自分なりのイメージをもって、それをより具体的なものにしていって、あとは形を近づけていく作業だと思います。
言葉で書くのは簡単ですが、私は4年デザイン学部に通ってギリギリできるようになったかなって感じです。

良いデザインを作るには費やす時間も制作の時間もかかるけど、どれも大切なものだと思います。
あと沢山良いデザインを目にして吸収していくこと!
最高のものを生み出せるよう、あきらめずに続けていきたいですね。

※今回の方法はあくまでも個人の主観による一例です。

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

モノづくりについて熱く語る回

すっかりお久しぶりになってしまいましたよ(2回目)
俺ティーの感想書いてるけど全然進まんちん😇

最近は副業みたいな感じでちょっとした活動に巻き込まれ参加してるんですが、それがなかなか熱いです。
Web担当みたいな。たのし~い!

でも友達とかみんなに「ちゃんとお金もらわなよ!」って言われるw
わかってる…無料や格安で受けちゃうからデザイナーの仕事の地位がいつまでたっても上がらないんや…😔💦

でも他のメンバーも本業やいろんな悩みを抱えてるのを見ると、私もなにかしたくなっちゃうお人好してて…(ここで好感度UP)

デザインの勉強って「なぜそうしたのか」をすごく重視するから、デザイナーも自分の作ったものに対しての「なぜ?」は大切にしてる人が多いと思うんだけど、一般の人からしたらそれって「別になんとなくでもいいじゃん」みたいな感じだったりするから、どっちがいいのかわからなくなったり🙄

でも「なぜ」を説明できないものは説得力に欠けるし、説得できないなら人の心なんてやっぱり動かないと思うわけですよ。

仮にもこれで飯食ってるプロのデザイナー(Webだけど)として、モノづくりをする以上そこは大切にしたいなと思うし、メンバーのみんなにもなんか上手く伝えたいなと思います。
別にそんな余計な事しなくても好きに作ればいいんだけど、それって私からしたら全然本気じゃないのね。
本気じゃないのって他のクリエイターになんか申し訳ないというか…恥ずかしいというか…

本当に自己満だけど、でも理由を考えることがもし本当にいいクリエイティブに繋がるなら、それを実証して一般の人に理解してもらえるようになれば、「デザイナーってこんな大変な思いしてモノを生み出してるんだな」って、それって果てはデザイナーの地位向上に繋がるんじゃないかなって、おお…!!繋がった!!!笑

今日もいいクリエイティブできるといいね☀️

カオスだけど大体ウテナの話

Rentaの本棚が何百冊とかなってるけど大体バラ売りのエロ漫画という事実😇

いろんなとこで書いてるけどiPad Pro&Apple Pencilをゲットしました。
クリスタも入れて!!デジ絵がお手軽に!!!ひゅー!!!🤗💕

iPad Pro&Apple Pencil&ClipStudio

機械周りといえば、入社数か月にして職場のPCが壊れました🙄💻
「パーン!!」ってなったらしいwwwワロタwww
笑ってる場合じゃないけどwww
こんなことってあるんやな…😉

データは生きてたので自分のノートPCで仕事してます。
デスクトップ憧れてたけどこういうときノートで良かったなあってなるよね~

最近はウテナ一挙がめちゃくちゃ面白かったです。
絶対⚜️運命⚜️黙示録⚜️!

少女革命ウテナ

なにがすごいって絶対⚜️運命⚜️黙示録⚜️🎵が頭から離れなくなることな😇

物語としてのおもしろさはラストスパートが最高でした!
序盤~ラスト直前はどっちかというと1話それぞれが面白いかんじで、繋がりはあるけどこの回の話おもしろいよね~的な。
薔薇の花嫁とかは物語を面白くする設定にすぎない感じ。

でもラストが最高に熱かった!!
設定がこうなるのか!!って!!
少女革命…😭😭😭
このラストを見るために我々は数十話を駆け抜けたのだよ…!!

ウテナがすごい好きで、アンシーはそうでもなかったけど、最後すげー好きになりました。
それくらい!!ラストはすごい!!!(語彙力)

殿堂入り的な確固たる地位を築いている理由がわかりました。納得!!
これはおもしろかった!!
劇場版があるんですかね??ぜひ観たいです!!

以上クソ日記でした😇

静かに眠れ

水槽の底でじっとしていることが多くなったベタちゃん。

やがて天寿を全うされました…😭😭😭

人が近付くと泳いで近くに寄ってくる人懐っこい子でした。
最後の夜は水草の中に顔を埋めるようにしていて、眩しかったかなとか苦しくなかったかなとか…
少しでも幸せに生きられたなら…そうであってほしいと願うばかりです。

次の住人は熱帯魚達にしました。いやベタも熱帯魚だけど😉
そっくりなベタちゃん見つけたけどなんかね…やっぱね…

ラミーノーズテトラと憧れのエンゼルフィッシュ!!

しかしエンゼルフィッシュはやっぱ大きくなるらしくて、どのサイトでもことごとく30cm以下水槽では飼ったらダメ!🙅‍♂️ってなっててワロタ…でかくなったら実家の水槽に避難させよう…😌

エンゼルフィッシュって混浴が難しいらしいよ。
ラミーノーズは一緒の水槽に入れて売られてたから店員さんに「この水槽の中のは一緒に飼ってだいじょぶ?」って聞いたらだいじょぶ!😊だった😊
ラミーノーズは温厚で大体なんでも混浴できるらしい。

もすこし増やしたいけどまた金魚ちゃんたちみたいにバタバタ亡くなったら悲しいのでしばらく様子見やで💡

【銀魂 62巻 感想】スペシャルありがたみ~!

スマホカバーがオカメちゃんにかじられまくってまるで数十年使いこんだかのよう…
こにゃにちわ。

ずっと前書いていた感想を今更上げるぜ!!ひゅ~~

↓銀魂 62巻 ネタバレ込み感想




ちょっと銀ちゃんまた悪夢みてんじゃん!!!
いや…まあアレのせいだなこれは…アレ

ヅラが振り切ってて笑ったwww超うれしそうwwww

そして万事屋アキバ支店!!!
初めてのお客さんは…信女!!?

ていうかホラ…やっぱ目に光が…😭
もうこれだけで私満足だよ😭銀魂好きでいてよかった😭
あと服めっちゃかわいいですね

「異三郎の同志として」

同志…!それだ!!!!😭

そんな信女の計らいで鬼兵隊のメンツと顔合わせ…!
こっちでゴタゴタやってる間にそんなことになってたの!?!?みたいな

これは本当にみんな仲間になって戦うのかなと思ったけど、そもそもこいつら敵じゃなかったじゃん…
高杉と銀さんは敵同士じゃなかったよ…

そして!ここらで今迄の事整理してみようスペシャルがありがたかった!!
おかげでちょっと解ったかな~
でも異三郎はなぜ一橋派にいたのか??
天導衆に復讐するためとしても、そもそもなんで家族が天導衆に殺されたの??

それについてはこちらがわかりやすかったです!ありがとうございます!!

佐々木異三郎(銀魂)の徹底解説まとめ | RENOTE [リノート]

つまり護衛の任を守れなかったとして真選組をつぶす予定が、骸たち子どもに暗殺させたくなくて失敗させたら、それが天導衆にバレて家族が粛清されたと…
で、一橋に取り入ったふりをして、最後はすべてを終わらせようとしたという。
なるほど~!!

虚が不死身だということもわかり。
一国傾城編のラストで朧の死体がなかった伏線もここで回収…!!
じつは全部繋がってたっていうのが胸熱です!!

あと今巻は銀さんなかなかかっこよかったね!!
大活躍!!かっこいい~~

敵の小ボス?中ボス??的なのがでて、バトルマンガっぽい引きで終わります。

桂が爆弾しか使ってねえwwwと思ってたら、次巻は戦うみたいですよ!!
でもこの敵たちは雑魚だといいな~~開始1コマで終わらせよう!!
1巻まるっとバトルより、銀魂の醍醐味はセリフ回しや心理描写だと思ってるので、そういうのたくさんあるといいな!
でも今70巻くらいまで出てるからやっぱ強いのかな~~

今後どうなるんだろう…本当に…!

【銀魂 61巻 感想】さらば真選組…!

銀魂は最近ストーリーが重厚すぎて、最近自分の中で下火かな…とかあったんですが、全然そんなことない…
知り合いの心ない言葉とかに惑わされそうだったけど、好きでいていいんだよ銀魂…!!
たとえ誰もが面白くないっていったとしても、好きなら好きでいいんだよ銀魂!!!!

↓銀魂 61巻 ネタバレ込み感想




白も黒もごっちゃになって戦って、どっかのレビューで「ご都合主義」って書かれてたけどいいじゃないですかご都合主義!!!!😭
これが見たかったんだよ私は!!!!!😭😭
と思った61巻でした。

異三郎はな…これまでの銀魂読んでたらまあ死ぬよなあって…
彼の罪は重い…んじゃないかな
何があったかよく覚えてないけど

異三郎を見送る信女の瞳には光が宿ったようで、また泣きました。

異三郎と信女の関係ってなんだったんだろうな…
家族のような…友人のような…恋人のような…
娘の名前だから恋人は違うかな…
なんにしろ二人には二人の関係があったんだろう

あと今巻は、近藤さんの存在の大きさを知る回でもありました。

真選組にとってはもちろんかけがえのない人であり、そんな近藤さんのように、いつのまにか大きな存在となっていた銀ちゃん…
また銀さんにとっては、松陽先生のように失うのではなく取り戻すことのできた近藤さん。

お妙さんや新八にとっても、大事なストーカーゴリラ存在となっていました。

いやほんと…生きていてくれてよかった…!!😭

ていうかお妙さんと近藤さんってとうとうフラグか!?!?!?
ということはヒロインはやっぱりツッキーなのか!?!??!

しかし敵の正体なんなんだろな?
松陽先生であって松陽先生でない…

でも信女の言う通り、先生を殺したのが銀ちゃんではなく本当にこいつだとしたら、背負ってるものがどれだけ軽くなるか…そう思わずにはいられません。
銀ちゃん地味に自己嫌悪はんぱないからな…

そんな銀ちゃんが今まで沢山出会って護ってきたものは、間違いなく自己肯定していいものであり、彼が生きてきた、今生きている証しなんだと思います。
仲間がいて支えられていて、自分もそんな仲間を支えることができるときっと理解していて…
だからもう悪夢もみなくていいし、自己嫌悪もしなくていいんだよってそれも解ってほしいです。
いやもうとっくに解ってるかな??

ていうか知り合いに「銀さんって余計なことしてるだけで別にいらなくない?(笑)」って言われたことがあって、軽く絶望しましたもん…ひどい…えんがちょ!!!!!

戦いが終わり、幕府に反乱したとして、激昂する喜々の目から逃れるため江戸を出ることになった真選組。
近藤さんとお妙さん、総悟と神楽、トシと銀さん…
仲間なんて到底いえない、いがみ合うような仲だったそれぞれが、でもお互いに大切なものだと理解していて、それぞれの別れをするのが印象的でした。

ていうか個人的に総悟が神楽のとこに来てくれたのがすっげーうれしいよ!!!
信女に浮気したかと思ったわ!!!
まあどうせ戦闘狂だったけど😊

あと銀ちゃんの「来たな…」って感じの笑顔がさいっこうにかっこよかった!!!!
トッシーがはじめて銀ちゃんに感謝をしめし、銀ちゃんも素直にその意をしめす…

逆の丼を食べる二人にまた泣きました。

最後に笑顔で晴れやかに去っていく彼らが、今後どうなっていくのか…
不安もありますがきっと大丈夫と信じて。

【まとめ★グロッキーヘブン 3巻感想】鳥難民救済

TSUTAYAの返却期限が近付いている~~😇
感想書かねば(使命感)

2巻で終わらず続きが出ました!!やったー!!

↓まとめ★グロッキーヘブン 3巻 ネタバレ込み感想




今巻は遊園地、体育祭とルカくんとの過去の秘密的なお話でした!

ましとえんでドキドキ💘ハプニング

突然のひったくり爆弾魔プロファイラーチームに草を生やさずにはいられないwwww
まじでドキドキだよ!!そっち!?!?

まさかの鳥難民救済🐦

憧れの肩乗りオウムがあああああ
まさかの鳥充😭😭😭ありがとうございますありがとうございます
タイハクオウムかな??かわいいいいい
憧れのおおおお肩乗りオウムがああああ

「気持チイイ?」
「緊張シテル?」
「噛ンダリシナイヨ…」
大草原wwwwww

部長のtkb

言わないみんなのやさしさ…😭

体育祭はポニテのまとめ!!!

かわいいやんけ!!!

誰も得しない濡れ透け💃

誰も得しない…はずなのに集ファンは狂喜乱舞
でも普通しないでしょ!?「黒///」www

乙女走り

もはや狂気wwww

心ない言葉を拾ってくれるやさしさ…

やっぱこの漫画好きだわ…

どれも素晴らしい伏線と回収、話のまとまりで読後さわやかです!
ルカくんを含めて本格的に三角関係が動き始めた…!って感じで次巻に続きます!

いや~心ない言葉を拾ってくれるの本当いいよね!
その言葉に怒る集くんのやさしさ!!染みる…😭

ルカくんちに遊びに行く話もあるんだけど、動物いっぱいでかわいいかわいい😊
しかし鳥好きってただの設定だと思ってたけど、ここまでちゃんと描いてくれるとは…!
って感じで鳥好きとしてはほんま嬉しい!!!

ところどころホモみを感じさせるのはなんなんですかねww
そしてまとめのパンチラがまったく喜ばれないwww

ルカくんが出て三角関係になると、よくある少女漫画と同じでダレそうだな~
とか思ってたんですが、全然そんなことなくてむしろなんか加速したのがすごい!

本当にカオスな漫画だけどこのカオスさがクセになります!
次巻も楽しみです!!

渾身のTV周りとベタ水槽

わしの渾身のTV周りみて!!!

ほんとは水槽ってカラボの上に置くのよくないんだけど、まあ小さいしいいかなって…
カラボは耐久性ないらしいよ水槽置く用じゃないので…

オトシンクルスちゃんを仲間にしてみたよ!!🐟
わが家のベタちゃんとの相性的にはまっっったく無問題だったんだけど、水流が好きらしくて、後ろにフィルター付けてるから全然前に来ないので私がたのしくない笑

後ろのガラス面に貼り付くオトシンクルスちゃん。
でも朝、電気点けるとビッチビッチしながら逃げていくから、単に人見知りなだけかも?🤔

帰ったらベタちゃんはおやすやちゅう😪🌛

生きてるか不安になるからつい起こしちゃう…ごめんよ😉




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サイトの作り方はこちら!




↓インコグッズブログです。

アンケートモニター登録