LANDING PAGEFBCプログラミングスクール
LPデザイン
現場で自ら考え、学び続けられるWebエンジニアを育成するプログラミングスクール「FJORD BOOT CAMP」のLPデザインを制作しました。転職だけを目的とするのではなく、技術と正面から向き合い、長く活躍するための土台を身につけられる学習環境を伝えています。
専門性の高さや独自の文化を残しながら、これまでサービスを知らなかった方にも開かれた印象を目指しました。実写を中心に既存のキャラクターを組み合わせ、本格的な学習内容と、仲間とつながりながら成長できるコミュニティの温かさを表現しています。
メインには知性と専門性を感じさせる、紫みを含んだ鮮やかなブルーを採用し、明るいイエローをアクセントに使用しました。白とごく淡い青紫をベースにすることで、内容の本格さを保ちながら、初めて訪れる方にも親しみやすい印象に仕上げています。
事業内容
FJORD BOOT CAMPは、RubyやRuby on Railsをはじめ、Web開発に必要な技術を学べるオンラインプログラミングスクールです。現役エンジニアによる指導、チーム開発、自作サービスの公開、コミュニティ活動を通して、実務で求められる自走力を育てています。
ターゲット
本気でWebエンジニアを目指す20〜40代の社会人や、ほかのスクールで十分な実力が身につかなかった学習経験者を想定しています。簡単な答えを求めるのではなく、自分で調べて課題を解決し、仲間と学びながら技術を高めたい方が中心です。
サイトの目的
エンジニア業界では知られている一方、一般の学習検討者には届ききれていなかった強みを分かりやすく伝え、認知を広げることが目的です。学習方針や環境への理解を深めてもらい、自分に合うスクールかを判断したうえで参加登録へ進めるよう設計しています。
制作の流れ
ご提供いただいたワイヤーフレームをもとに、サービスの特徴やページ構成、ファーストビューに求められる役割を整理しました。そのうえで、A・B・Cのファーストビューを3案作成し、それぞれ異なる方向性をご提案しています。
各案では、サイト全体に展開した際のトーンやメインビジュアルの役割に加え、ご要望のあったイラストをどのように取り入れるかも言語化しました。デザインの違いだけでなく、各案で目指した印象や設計の考え方を資料にまとめ、比較しながら検討できる形で共有しています。
決定した案から続く2セクションまでデザインを展開した後、「男性感を抑えたい」というご意見を受け、配色や使用する写真を変更した別案も作成しました。複数案を比較しながら改めて方向性を検討し、最終決定した案をもとに、制作途中で追加されたセクションを含むPC版全体を作成しています。完成後はSP版へ展開し、OGP画像とファビコンも作成しました。
ご提案のポイント
01
専門性と親しみを両立したデザイン
エンジニアが働く姿を想像できる実写を主役に据え、既存キャラクターを補助的に配置しました。専門性を感じさせる青みのパープルを軸に、イエローの差し色で前向きな印象と視線の流れをつくり、独自の個性を残しながら現代的で入りやすいデザインへ整えています。
02
読み込むユーザーに応える情報設計
ディレクターから支給されたワイヤーフレームと情報の優先順位をもとに、見出し・写真・余白にメリハリをつけました。学習方針、カリキュラム、支援体制、コミュニティへと理解を深められるよう、長尺でも流れを見失いにくいデザインにしています。
03
情報量と閲覧性を両立するUI
カリキュラムは画像を切り替えて確認できるスライド、学習者の声は必要に応じて詳しく読めるポップアップを想定しました。すべての内容を一度に表示せず、興味に合わせて情報を確認できる仕組みにすることで、ページ全体の見やすさを保っています。
制作を通して
制作途中でいただいたご意見を受け、異なる方向性も試しながら比較したことで、言葉だけでは判断しにくい感覚を、実際のデザインを通して確かめることの大切さを感じました。一度決めた内容にとらわれず、必要に応じて立ち止まり、改めて検討することもより良い制作につながると考えています。 今後も、ご意見の背景まで丁寧に確認しながら、安心して意見を交わせる関係をつくり、納得できる答えを一緒に探していきたいです。
制作実績一覧へ
制作実績一覧へ
お問い合わせ
Contact
制作のご相談やご質問など、下記フォームよりお気軽にご相談ください。
ご依頼内容がお決まりの方へ
制作内容・納期・ご予算などが決まっている場合は、詳細フォームからお送りいただくとスムーズです。