おさがり

100の質問　回答（個人サイトに遷移します）

100質テンプレを見ていたら、サイトやコンテンツ制作に関する悩みなどの質問もあったので、私も回答させていただきました。

質問被りなどを除いて98問回答したので、ご興味があればご覧になってください。

画像サイズが重くてサイトの読み込みが遅い、と思っている人にはWebPをおすすめします。
WebP（ウェッピー）とは、PNGやJPEGに代わる新しい画像形式です。

画像をWebPに変換すると画質をほぼ保ったまま画像データが軽くなります。
デメリットとしては「WebP形式に対応しているサービス」は見たことがないので、投稿サイト・SNS・アプリなどで使いたい画像はPNGまたはJPEGデータを別に保管しておく必要があるということです。

公式的な変換方法はSquooshに画像をドラッグ&ドロップし、圧縮形式「WebP」を選んだら右下の保存ボタンを押すだけです。

サイトに載せる画像のうち共有する必要がないものはWebPにして、バナーなどはPNGやJPEG形式を使い、PCにはPNGまたはJPEGで保管しておくと便利です。

HTML&CSS

• CreatorQuest

  めっちゃおすすめ。ほぼHTMLしか学べないが、楽しかったしわかりやすかった。

  「Webクリエータになるための壮絶な冒険が今はじまる。」とトップに書いてあるが、勉強中もこのノリが続く。かといって鬱陶しいわけでもなく本当に楽しい。冒険の続きが気になる展開もある。

  説明が細かめなので、コードの意味を理解しやすい。ただデメリットとして、ここで学ぶ書き方では実践で使うには不十分なこともある。どちらにせよCSSのレッスンがないので他の教材と併用することになる。

• progate

  簡単でざっくりと学べる。無料で学びたいなら他にも教材はあるが、ちょっと課金すればまともなサイトをひとつ作れるようになるのでおすすめできる。

  私の場合は「HTMLを理解してオリジナルのサイトが作れるようになる」という段階に入るにはprogateでは足りず、CreatorQuestのほうが理解しやすかった。これは人によると思う。

• mdn web docs

  「初心者」を「Web開発者」にするために作られた無料の教材であり、チュートリアルだけでJavaScriptやWeb APIまで学べる。

  もっと学びたいという人にはおすすめできるが、情報量が非常に多いので勉強が苦手な初心者にはおすすめしない。私はいつかチュートリアルだけでも完走したいなって思ってる。

UIデザイン/CSS

• CSS Stock

  このページ（制作メモ）のアコーディオンのデザインで参考にさせていただきました！ 矢印の向きとか切り替えるの苦手なんですよね……どこがどうなってるか想像つきにくくて 自分で作ると上手くいかないのです。ちゃんと覚えたいな〜

• DESIGN MEMO 2.0

  グラスモーフィズムの表現で参考にさせていただきました。 モーフィズム系はもっとスキルアップしたいですね、かわいいので。 ボタンみたいになってるやつが好きなのでできるようにがんばります！