プログラミングスクールLP

プログラミングスクールのLPデザインを制作しました。

目次

デザインデータURL

外部サイト(Figma)へ飛びます。

https://www.figma.com/design/G7HSJiNexLDoKT76BHazb0/WEB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3001?node-id=5-31&t=b88TP7oJEV8r46zq-1

制作目的

プログラミングスクールの認知拡大、新規顧客の集客。

サイズ(レスポンシブ)

  1. PC
  2. スマホ
  3. タブレット

制作ページ

TOPページ

下層(コース紹介)ページ

計2ページ

使用ツール

Figma

制作備考

Udemy教材を参考に制作した架空のスクールのLPです。

制作で意識したポイント

教材を基に制作したので自分なりのデザインの言語化となりますが、

今回のスクールのLPでは、最初からタブレットとスマホのデザイン作成することがわかっていたので、

どのようにすれば省力化しつつ効率的にデザインできるかをよく考えながら作業をしました。

コンテンツの設計については、訪問者はスクールのLPとわかって来訪しているので、

すぐにどんなコースがあるか一覧で見れるようにしてあって、

そのあとスクールの特徴や人気の理由を解説するセクションを用意することでストレスなく必要な情報が閲覧でき、

スムーズにCTAに誘導できる並びになっていると感じました。

ツールの操作等においては、Figmaのオートレイアウトや制約を活用し、デザイン完成後のサイズ調整にも対応できるようにしています。

また、プロトタイプも作成し、メニューの開閉や下層ページへの遷移もシミュレートできるようにしております。

目次