【ポートフォリオ掲載OK！】Snow Monkeyでプログラミング教室風サイトを作ってみよう
このブログではSnowMonkeyを使ってみたいけど何を作っていいかわからない、SnowMonkeyを使ってポートフォリオサイトを作りたい、提案の幅を広げるためにSnowMonkeyを勉強したいという方におすすめです。
今回はSnow Monkeyを使って実際にプログラミング教室風のホームページを作ってみましょう！
→今回の制作するホームページはこちら
Snow Monkeyをまだ購入していない方は、Snow Monkeyの無料体験版もあるのでぜひそちらを使って一緒にSnow Monkeyでホームページを作ってみましょう！
それでは早速作っていきましょう！
準備するもの
- レンタルサーバーとドメイン
- WordPressのインストール
- SnowMonkeyのテーマ
①レンタルサーバーとドメイン
僕はロリポップ！とムームードメインを使用しています。
ほかにもエックスサーバーやConoHa WINGなどの有名どころをつかえば問題ないです。
②WordPressのインストール
各レンタルサーバーにWordPressの簡単インストール機能がついているのでそちらを使って、進めていきましょう！
③SnowMonkeyのテーマ
→SnowMonkeyは無料のお試しもできるためぜひ試してみてください！
素材のダウンロード
今回のホームページを作る際に使用した画像とロゴです。
使いたい方がいましたらダウンロード可能です。
お好きな画像を使用してもOKです。
個人的にAdobe Stockの無料素材がおすすめですのでそちらもチェックしてみてください。
Snow Monkeyのテーマをアップロードしよう！
まずは、Snow Monkeyのテーマをアップロードしていきます。
管理画面から、
- 外観
- 新規追加
- テーマをアップロード
- ファイルを選択
- エクスプローラーが開くのでsnowmonkeyをzipファイルのまま開く
- 今すぐインストールをクリック
- ダウンロードが終わりましたら有効化をクリック
上記の手順で、Snow Monkeyのテーマをアップロードできました！
Snow Monkeyのプラグインをダウンロードしよう！
次はSnow Monkeyのプラグインをダウンロードしていきましょう！
管理画面から「プラグイン→新規追加→プラグインを検索のところにSnow Monkey と入れてる→SnowMonkeyのプラグインが表示される」ので、下記の3つのプラグインをインストール。
- Snow Monkey Forms
- Snow Monkey Editor
- Snow Monkey Blocks
それぞれ、インストールをして有効化してください。
これで、プラグインのインストールが完了しました！
サイトに画像をアップロード
ここからロゴや画像、トップで使う動画などをアップロードしていきましょう！
素材については無料素材で代用していただいてもOKですし、保存した素材を使用してもOKです。
ホームページを作っていきましょう！
早速ホームぺージを制作していきましょう。
手順を追って解説していきます。
サイト基本情報の設定
- ①管理画面から「外観」→「カスタマイズ」→「サイト基本情報」から
- ②サイトのタイトルとキャッチフレーズを自由に設定してください！
→ブラウザの検索結果などに表示されるものです。
- ③「コピーライト」からコピーライトを設定します。
- ④「ロゴを選択」からロゴをアップロードします。
- ⑤「サイトアイコン」からファビコンを設定します。
- ⑥すべて設定出来たら、右上の「公開」をクリック。
これで「サイトの基本情報」の欄の設定は完了です！
基本デザインの設定をしよう！
管理画面から先程の「外観」→「カスタマイズ」→「デザイン」→「基本デザイン設定」へ
①「アクセントカラー」を任意の色に設定してください！
今回はロゴの色をとって #FBD157 にしました。
②基本フォントを「Noto Sans JP」にする。
ここもお好みでOKです！
③設定が完了したら「公開」をクリック
これで完了です。
トップページHOMEを作ろう
次はトップページを制作していきたいと思います！
管理画面から「固定ページ」→「新規追加」→タイトルをHOMEとする→右上の「公開」をクリック
「公開」をおしたら、左上の「Ⓦ」をクリックして管理画面に戻る。
設定からHOMEをトップページにしよう！
管理画面から「設定」→「表示設定」→「ホームページの表示」から「固定ページ」にチェックをいれて、「ホームページ」の選択欄から先程つくった、HOMEを選択→変更が完了したら「変更を保存」をクリック
トップページの制作に入ろう！
早速トップページの制作に入りましょう！
管理画面から「固定ページ」→先程設定した「HOME」の編集をクリック
ここから固定ページを編集していきましょう！
①「黒い＋」をクリック
②「すべて表示」をクリック
③すると左側にブロックの一覧が出てくるので、そこから「Snow Monkey Blocks[セクション]」の「セクション（背景画像/動画）」を選択
④画面の右側のメディアを選択から動画をアップロードします。
これで動画が表示されました。
ここから少し調整していきます。
⑥先程のメディアの上の少し上にある「高さ」を「広め」に変更してください。
これで動画が縦に広く表示されるようになりました。
⑦次に横幅を調整していきます。
編集画面の動画が表示されているところをクリックするとリストが表示されるので、そこから「全幅」に変更して下さい。
これで横幅の調整も完了しました！
⑧次に動画の上にタイトルなどを書く場所があるので任意のタイトルなどを書いていきましょう！
今回はこんな感じで書いてみました。
また、背景動画によって文字色を変えていきましょう！
文字を選択した状態で表示されるリストの「サルのマーク」→「文字色」からお好きな色に変更可能です。
今回は背景動画に合わせて文字色を「ホワイト」に変更しました。
続いてボタンを設置していましょう！
①編集画面の動画が表示されているところの下の「＋」をクリック
②すべて表示をクリック
③画面左側にブロックの一覧が出てくるので、「SNOW MONKEY BLOCKS [共通ブロック]」から「ボタン」をクリック
※画像では、すべて表示を押さなくても「ボタン」が表示されています。
表示されている場合は②は飛ばしてOKです。
次にボタンの設定を完成させます。
①ボタンをクリックして「無料体験はこちら」と入力します。
②右側の「ブロック設定」の「ボタンサイズ」を広め、「角丸半径」を５０に設定してください。
これでボタンの設定は完了です。
※今回は練習ですのでリンクはからでOKです。
アコーディオンメニューを使って「よくあるご質問」を作ろう
次はアコーディオンメニューを使って「よくあるご質問」を作っていきます。
Snow Monkeyを使えばアコーディオンメニューも簡単に実装できます！
案件でも使う場面が多いので使っていきましょう！
- ①先程作ったセクションの下にある「黒い＋」をクリック
- ②すべて表示をクリック
- ③右側のブロックの一覧の「SNOW MONKEY BLOCKS [セクション]」の「セクション」を選択します。
- ④セクションに「タイトル」と「サブタイトル」を記入します。
- ⑤セクションの「＋」を押して、すべて表示をクリック
- ⑥「Snow Monkey Blocks[共通ブロック]」の「アコーディオン」を選択します。
アコーディオンを追加したら画像のように記入します。
アコーディオンメニューを追加したい場合は赤い丸がついている「＋」を押すと追加できます。
「お知らせ」のセクションを作ろう
お知らせのセクションでは、最新の投稿を表示させます。
①「よくあるご質問」の下にある「黒い＋」をクリック
②「すべて表示」をクリックして、先程と同じ右側のブロックの一覧の「SNOW MONKEY BLOCKS [セクション]」の「セクション」を選択。
③「セクション」を追加したら、「タイトル」に「お知らせ」と入力
④「＋」を押して、「すべて表示」をクリック。右側のブロックの一覧から、「最新の投稿」を選択。
⑤すると記事が表示されるので、「管理画面」の「投稿」から何記事か追加しておきましょう。
※アイキャッチ画像を使うと見栄えが良くなるので追加しましょう！
⑥「最新の投稿」を選択した状態で右側の「ブロック」の「表示する投稿数」を3に変更します。
この「最新の投稿」は非常に便利で実際の案件でも使うことが多いのでチェックです！
また、「表示する投稿数」の下にある「レイアウト」から投稿一覧のデザインを変更できるので試してみて下さい！
「生徒の声」のセクションを作ろう
このセクションでは、「SNOW MONKEY BLOCKS [共通ブロック]」から「お客様の声」というブロックを使って簡単に「生徒の声」を追加していきましょう！
①「よくあるご質問」の下にある「黒い＋」をクリック
②「すべて表示」をクリックして、先程と同じ右側のブロックの一覧の「SNOW MONKEY BLOCKS [セクション]」の「セクション」を選択。
③「セクション」を追加したら、「タイトル」に「生徒の声」と入力
④「＋」をクリックして、「すべて表示」をクリック。
⑤右側のブロック一覧の「SNOW MONKEY BLOCKS [共通ブロック]」から「お客様の声」を選択。
⑥「お客様の声」を追加したら、「+」を押して、「お客さまの声」の項目を追加します。
⑦顔写真を追加します。赤い丸のところをクリックして顔写真を追加します。
⑧最後にボタンを設置します。セクション全体をクリックした状態で、表示される「黒い＋」をクリック。「すべて表示」から「SNOW MONKEY BLOCKS [共通ブロック]」の「ボタン」を選択。
このブログの「トップページの制作に入ろう！」で追加したボタンと同じ手順で
①ボタンをクリックして「生徒の声へ」と入力します。
②右側の「ブロック設定」の「ボタンサイズ」を広め、「角丸半径」を５０に設定してください。
③ここまでは同じでしたが「生徒の声」のセクションのボタンは中央に設置するので、ボタンがあるブロックを選択した状態で、リストから「三」を押して「テキスト中央寄せ」を選択。
これでボタンの設定は完了です。
これで「生徒の声」のセクションは完了です！
コース紹介・講師紹介のセクションを作ろう！
ここでは、二つの同じつくりのセクションを作っていきます。
ここでは、サイト制作に便利な「パターン」というものを使っていきます。
①「黒い＋」から「すべて表示」をクリック。
②「ブロック」から「パターン」を選択
③ドロワーメニューから「Headings」を選択。
④「Heading1」を選択。
そうすると出来上がったデザインが表示されると思うのでこれを調整していきましょう！
①まずは、タイトルとテキストを変更していきましょう。
タイトルに「コース紹介」、テキストに「目的やレベルに合わせてコースが分かれています。」と入力。
②画像の変更と高さを変更。
セクション全体を選択した状態で、置換から画像を変更、右側の「高さ」を「フィット」に変更。
③背景マスクをかけて文字を見やすくする。
先程の「高さ」の下のほうにある、「背景マスクの色」を黒に設定。「背景マスクの透明度」を0.6にする。
④ボタンを追加する。
先程と同じ手順でボタンを設置します。
①ボタンをクリックして「コース紹介へ」と入力します。
②右側の「ブロック設定」の「ボタンサイズ」を広め、「角丸半径」を５０に設定してください。
③ここまでは同じでしたが「生徒の声」のセクションのボタンは中央に設置するので、ボタンがあるブロックを選択した状態で、リストから「三」を押して「テキスト中央寄せ」を選択。
⑤「コース紹介」のセクションのしたの「黒い＋」をクリックして、「すべて表示」から「デザイン」の中の「スペーサー」を選択。
⑤①～④と同じ手順で「講師紹介」を作る。
これで「コース紹介・講師紹介」のセクション完了です！
CWやココナラで使えるコツ
ここで、なぜこの「パターン」を使用したのかを解説します。
僕がおすすめする「パターン」の使い方は、ココナラやクラウドワークスなどでSnowMonkeyで制作できそうだなという案件に「パターン」を使って、依頼者側の方が求めているものを簡単に制作して、SnowMonkeyで提案してみる。という方法で僕は使用していました。
こうすることで依頼者側もイメージがつきやすいですし、この人なら任せられるかもという安心感や信頼感を得ることができると思います。
ですので、全体のラフ案代わりに使ったり、SnowMonkeyを知らないお客様に実際にSnowMonkeyの使いやすさをわかっていただけたりすることが実際にあったのでご紹介しました。
僕はこの方法でSnowMonkeyで案件を獲得することができたので紹介しました。
フッターを作ろう
フッターを作っていきます。
①「コース紹介・講師紹介」のセクションのしたの「黒い＋」を押して、「すべて表示」から「セクション」を選択。
②セクションを選択して、表示されるリストから、「全幅」を選択。
③右側の「色設定」の「背景色」を「ライトグレー」に設定。
④ここから、「横長の＋」をクリックして、「段落」を選択。
そこに「画像」を選択して、背景透過のロゴを入れます。
大きく表示される場合は、大きさを調整して下さい。
⑤画像を選択して、丸のついたところから「中央揃え」を選択。
これでロゴの設置は完了です。
Google Mapを埋め込もう
次に住所とGoogle Mapを追加していきます。
まず、ロゴの下に住所と郵便番号、電話番号を中央揃えで入力します。
※下の画像を参考
ここからGoogle Mapの埋め込み方法について解説します。
①Google Mapにアクセスして、マップに表示したい住所を入力します。
②表示させたい住所を入力したら、「共有」をクリックして、「地図を埋め込む」を選択から「HTMLをコピー」をクリックして、HTMLをコピーします。
③HTMLをコピーできたらWordPressの編集画面に戻って、先程入力した住所と郵便番号、電話番号のしたの「＋」をクリックして、「ウィジェット」の「カスタムHTML」を選択。
④そこに先程コピーしてきた、HTMLを貼り付けます。
⑤Google Mapを中央揃えするために赤い線が引いてある部分をコピーしてきたコードに追加します。
<div class=”google-map”></div> で囲みます。
最後にCSSで調整する際に使用します。
ソーシャルアイコンを追加しよう
次はGoogle Mapの下にソーシャルアイコンを追加していきましょう。
①Google Mapのしたの「＋」をクリックして、「すべて表示」をクリック
②「ウィジェット」の中の「ソーシャルアイコン」をクリック。
③するとこのような画ブロックが表示されるので、「+」をクリックして「すべて表示」から表示したいSNSを選択します。
今回はTwitter、Facebookを追加していきます。
④TwitterとFacebookのアイコンを追加出来たら、TwitterとFacebookのログインページから自分のアカウントにログインして、そのリンクをコピーして張ります。
⑤アイコンを中央揃えにします。
これでフッターも完了です！
右上の「公開」または「更新」を押してサイトを表示してみましょう
カスタマイズからデザインを調整しよう！
- Google MapをCSSで中央揃え
- ヘッターを整えよう！
Google MapをCSSで中央揃え
先程追加したClassにCSSを当てて中央揃えにしていきます。
①管理画面から「外観」の「カスタマイズ」から「追加CSS」を選択。
②ここにCSSを書いていきます。
③画像のコードを追加して、右上の公開をクリック。
コードを追加したらGoogle Mapが中央揃えになっているか確認してOKだったら次に行きましょう！
ヘッターを整えよう！
現在のままだとヘッターの見栄えが悪いと思います。
ここからヘッターを整えていきましょう！
①まずは管理画面の「固定ページ」からお問い合わせ、お知らせ、生徒の声のページを作成しましょう。
※中身はからでOKです。
②次に管理画面から「外観」の「メニュー」をクリック。
③「メニュー項目の追加」の「固定ページ」の「すべて表示」を選択。
④右下の「すべて表示」にチェックを入れて、「メニューに追加」をクリック。
⑤「メニュー構造」の「メニュー名」にグローバルナビゲーションと入力(なんでもOK)。
⑥「メニュー設定」から「グローバルナビゲーション（PC）」と「ドロワーナビゲーション（モバイル用）」にチェックを入れて、「メニューを保存」をクリック。
⑦次に管理画面から「カスタマイズ」→「デザイン」→「ヘッダー」を選択。
⑧ヘッダーレイアウトを１行、モバイル用ヘッダー位置、PC 用ヘッダー位置ともに「オーバーレイ（上部固定/スクロール時背景白）を選択。
右上の公開をクリック。
お問い合わせページを作ろう
先程作った、固定ページのお問い合わせにお問い合わせフォームを設置します。
Snow Monkey Formsを使ってみよう！
最初にインストールした、Snow Monkey Formsを使っていきたいと思います。
①管理画面から「Snow Monkey Forms」→「新規追加」をクリック。
②タイトルに「お問い合わせ」と入力
③Eメールの欄を「メールアドレス」に変更。
④お名前とメールアドレスの項目の下に「※必須」と赤い字で入力。
⑤入力する四角い部分をクリックすると右側に画像の画面が表示されるので、「placeholder」の欄にお名前の欄には「山田 太郎」、メールアドレスの欄には「aaa@aaa.com]と入力。
※ここはなんでもOKです。
設定が完了したら、公開をクリック。
Snow Monkey Formsを固定ページに設置
Snow Monkey Formsの設定ができたら次はお問い合わせページに設置していきます。
①管理画面から「固定ページ」から先程作った「お問い合わせ」を開く。
②タイトルの下に「無料体験をご希望のかたもこちらから」と入力（書いても書かなくてもOKです。）
③「＋」をおして、「ブロック」のなかの「Snow Monkey Forms」を選択。
④ドロワーメニューから先程作ったお問い合わせフォームを選択。
⑤固定ページのスラッグを「contact」に変更
⑥アイキャッチ画像を設定する。
⑦公開をクリックして表示確認。
⑧お問い合わせページを開いたら、リンクをコピーする。
⑨管理画面に戻り、「固定ページ」から「フロントページ」へ移動して「無料体験はこちら」のボタンにコピーしたリンクを張ります。
新規でタブを開くにチェックを入れたらOKです。
⑩更新をクリックし、ボタンがお問い合わせページに飛べれば完了です。
お疲れ様です！
これで完成です！
まとめ
お疲れさまでした！
これでSnowMonkeyで簡単なホームページを作成できました。
ほかにも便利な機能がたくさんあるのでぜひ試してみてください！
またこのブログでは、SnowMonkeyの紹介や高校生がWeb制作を独学で稼ぐ方法などを発信していますので他の記事もぜひ読んでみてください！