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

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

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

April 17, 2017
128 views
約 5 分
【HP制作事例】発達凸凹アカデミー

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

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

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

 

是非とも、
ご自身の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制作をすると高いライセンス料金が別途必要となります。

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