プログラミング学習サイトはいろいろありますが、どんなデザインになっているのか？見比べてみました。
Google検索で出てくるような、よく知られた有名なサイトをピックアップ。
各サイトの訴求軸を分析してみます。
- ドットインストール
- Progate（プロゲート）
- N予備校
- schoo（スクー）
- paizaラーニング
- フィヨルドブートキャンプ
- Udemy（ユーデミー）
- Codecademy（コードカデミー・コードアカデミー）
- Progra!（プログラ）
- CODEPREP（コードプレップ）
- シラバス
- まとめ
ドットインストール
画像パーツも綺麗で見やすいと思いました。
Adobe Illsutratorで描いたインフォグラフィックっぽいイラストが特徴的。
Progate（プロゲート）
![Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]](https://cdn-ak.f.st-hatena.com/images/fotolife/s/sagasite/20211201/20211201000159.png)
利用者の体験談を載せて、アピールしてました。
N予備校
Webデザイン、プログラミング、動画クリエイター（YouTuber）と、時代のニーズに合ったコースが用意されています。
プログラミング以外もカバーしている点が特徴ですね。
schoo（スクー）
スクーはいろんな講師が登場する動画学習サイトなので、テレビ番組の紹介みたいなかんじの構成になってますね。
paizaラーニング
ページが縦に長くて、キャプチャー画像が高さ10000pxを超えていました。
（はてなブログの仕様で、高さ10000pxを超えているとアップロードできなかったので、10000pxを超える部分＝フッターの辺りは切り捨てました。）
コンテンツの一覧がズラズラっと並べられていました。
一覧性を重視しているのかもしれませんが、トップページが長過ぎるので、別ページに目次があっても良いのかもしれませんね？
フィヨルドブートキャンプ
ここはRailsの学習に特化したサイトなので、わりとシンプルなかんじになっています。
メンター（講師）の紹介欄がアピールポイントでしょうか？
Udemy（ユーデミー）
ここは教材の販売サイトなので、商品紹介みたいなデザインになってます。
Codecademy（コードカデミー・コードアカデミー）
シンプルなデザインですね。
色使いがやや派手で、黄色と青色のコントラストがハッキリしたメリハリのあるデザインだと思いました。
利用者の体験談の紹介欄がありました。
Progra!（プログラ）
ここはScratchの使い方を学ぶ動画教材のサイトです。
小中学生向けということで、シンプルなデザインになっていました。
親が検索で探してこのサイトを見つけ、子どもに使わせるというパターンであれば、あまり派手さは必要ないのかもしれません。
＝社会人が転職スキルを得るために学習するサイトとは、訴求する層が違う？
CODEPREP（コードプレップ）
講座を「ブック」と呼び、本を読む感覚で学習するというスタイルを訴求しているようです。
学習の流れを紹介しており、初見の人へ使いやすさをアピールしていると思います。
一つのアイデアとして、コンテンツをWebページだけでなく、PDFファイルでも配布すればオフラインで学ぶ学習者にとって便利だと思いました。
シラバス
シンプルなデザインですね。
学習ロードマップのチャート図がある程度で、他に目立った項目がないです。
たくさんの内容を詰め込み過ぎて、ゴチャゴチャするよりも、これぐらいスッキリしていても良いかな？と思いました。
まとめ
トップページにどのような要素を盛り込むか？
- アイキャッチのバナー画像
- 本の想定読者層みたいに、サイトの想定利用者層を提示（小中学生向けとか）
- 利用者の声・体験談を紹介
- 講座のメニューを紹介（テレビ番組や商品の紹介みたいなかんじ）
- 講師の紹介
- サイトの使い方を紹介
この辺りを押さえておけば、トップページがランディングページとしての役割も果たしているのだろうと思います。
見比べてみたかんじ、自分の好みとしてはシンプルでスッキリしている方が良いですね。
楽天のショッピングサイトみたいに、異常に縦長の説明ページだとちょっと見づらいかな？
![Webデザイン良質見本帳[第2版] 目的別に探せて、すぐに使えるアイデア集](https://m.media-amazon.com/images/I/51wHBIzFEeL._SL500_.jpg "Webデザイン良質見本帳[第2版] 目的別に探せて、すぐに使えるアイデア集")
