自宅サロンママのためのネット集客術

WordPressで作るホームページ制作サービス

【HP制作事例】発達凸凹アカデミー

612 views
約 5 分

先日、私のライフワークとも言える、
発達障害のお子様を持つママのサポート事業。

その集大成【発達凸凹アカデミー】を開講しました。

どのようなストーリーで組み立てているかと、
制作のこだわりと、
使用したテーマについて解説します。

 

是非とも、
ご自身のHP制作の参考にしてください。

 

ロングスクロールホームページ

HPの世界にも流行りがあるのですが、
今非常に多く見られるのが・・・

ロングスクロールホームページ

その名の通り、1カラム縦長でずーっとスクロールしながら情報が見られるHPのスタイルです。

発達凸凹アカデミーのHPを作る際には、最初から「ロングスクロールでいこう!」と思っていました。

結局スマホがその形なので、
PCでも合わせたようなものです。

メリットは、

いろんなところに飛ばなくても、
ただスクロールしていくだけで全部読み切れる

最近リニューアルするHPも増えています。

※以下、スマホで見てもわからないのでPCでご覧ください。

2017年になって気づいたら変わってた
「ロリポップ!レンタルサーバー」

ロリポップ

 

こちらも2017年冬にリニューアル
「ハーバーオンラインショップ」

ハーバー

 

今後はこのスタイルが、
主流になっていくと思われます。

※ただし、このスタイルが向いているHPと向いてないHPがあります。ご相談ください。

 

2つのコースをいかにわかりやすく伝えるか

当スクールでは、

2つの資格取得コースがあります。

  • Basic 子どもの発達アドバイザー
  • Advance 子どもの発達カウンセラー

この2つの「内容」と「学ぶメリット」を、

一番下までスクロールしてもらえるように、いかにシンプルに伝えるか。

Basic講座内容

 

avance講座内容

 

 

 

どれだけ削るか

ロングスクロールでHPを作るポイントは、

情報をどれだけ削るか

です。

講座の紹介ってどうしても長くなります。

だって、みんな想いが強いから^^

いいものであればあるほど、

「あーなのよ」「こーなのよ」「ここがいいのよ」と書き綴りたくなります。

 

でもそれは、

本当に興味を持った人が、
読み進めていった先にあればいい情報です。

トップは最後まで読んでもらうことが目的です。

ざざっと目を通せる程度の文字数で、
写真やイラストを使いながら視覚的に訴えていくのがトップページの役割となります。

 

カラーの役割

HP制作の中でカラーは非常に重要になります。

HP全体の印象を決めるだけでなく、
視覚的にわかりやすく伝えるテクニックの1つになります。

スマホがここまで普及した今、

素早いスクロールで「ざっと見」する私たち。

  • 色のトーンを揃えて疲れさせないこと
  • 色で区分けすること

ここを気をつけるだけで、

とても見やすくてわかりやすいページができます。

今回のように情報量が多い場合は特に。

  • Basic講座はピンク
  • Advance講座はブルー
  • スクール全体の情報はグレー

内容の切り替えがどこでされるかを、”色”で示します。

 

写真の役割

実はこのホームページの制作には、
2週間ほどかかりました。

ほとんど、つきっきりで・・

そのうちの1/3は、写真探しです。

講師の写真は事前に撮影しておいたのですが、
まだ立ち上げのため、授業風景の写真がありません。

ずーっっと写真を探していました・・・

 

このスクールのテーマが、
「ママがママを、支えていく」です。

経験者であるママが、今まさに大変な思いをしているママたちに、「手を差し伸べる」というイメージの写真を、

探して探してやっと出会ったのが、
この写真でした。

 

ちょうどカラーも優しいピンク!

本当に、写真の存在は大きいのです。

こちらは無料の写真なんですよ。
このサイトで見つけました。

pixabay

有料の写真もありますが、

購入前に、まずはこのような無料写真サイトで探してみてくださいね。(どうしてもピッタリのイメージのものに出会えない時もありますが・・・)

 

使用したテーマ

こちらのHPで使用したテーマは、国産の有料テーマであるDIgi PressのFancie NOTE Bussiness

Fancie-note

 

美しいテーマですが、とっても難しいテーマです。
詳細についてはこちらの記事↓
女性に人気のおしゃれなWordPressテーマ(2017年最新版)

 

上記の記事にも有りますように、
このテーマを使用して私がHP制作をすると高いライセンス料金が別途必要となります。

ここまでじゃなくても、
近いものは別のテーマでも作ることができますので、ご相談くださいね。