「速攻！１時間で作るPRサイト」
1. 無料ハイクオリティーなテンプレートを見てみよう！
2. ここだけは押さえろ！コンテンツ作成のポイント
3. Railsに速攻デプロイ
上記3つを抑えて、短い時間でハイクオリティなサイトを作ろう！
1. まずは、無料ハイクオリティーなテンプレートを見てみよう！
百聞は一見にしかずといいますね。 まずは、テンプレートのクオリティーをチェックしてみましょう。 ちなみにすべて、レスポンシブです！
かっこよくないですか？？ このクオリティーで無料なら、一からつくるのなんて馬鹿らしくなってきません？？ 「うんうん。馬鹿らしくなってきた(読者の声)」 ですよね。じゃまずは、イケてるテンプレートを探してみましょう！ おすすめのサイトを３つご紹介します。
Free Responsive HTML5 CSS3 Website Templates
HTML5 UP! Responsive HTML5 and CSS3 Site Templates
Free Htmo5 and CSS3 WebSite Templates
ついでに、私が使っている商用利用可能な無料画像サイトも紹介しちゃいます。 必要な画像はここから無料でGet!できちゃいます。
Freepik
Icons Etc
無料イラスト素材ドットコム
SILHOUETTE DESIGN
かわいいフリー素材集 いらすとや
2. ここだけは押さえろ！コンテンツ作成のポイント
「イケてるPRサイトができた！」 はい、中身のない見た目だけのPRサイトにならないためにも、コンテンツもしっかり考えていきましょう。 とは言っても、「じっくり練ってる時間はないよ～」って人のために、 ここだけは押さえて欲しい、コンテンツ作成のポイントをまとめてみました。
・人を引き付ける魅力的なキャッチコピーを考える
・ メリットをわかりやすく伝える
[人を引き付ける魅力的なキャッチコピーを考える]
自分たちとサービスを受ける側の人の関係はこんなイメージです。 道行く人（サービスを受ける側の人）は、自分たち（サービスを提供する側）に興味ありません。 人気のない政治家の演説の様。道行く人の心に届かなければ、立ち止まって聞いてはくれません。 まずは、みんなに振り返ってもらえるキャッチコピーを考えましょう！ 魅力的なキャッチコピーの作り方は、ここを参考にして下さい。↓↓
WebサイトやPR制作のための魅力的なキャッチコピーの作り方
[メリットをわかりやすく伝える]
人に振り返ってもらったら、次は”釘付け”にしましょう。 もう、自分たちのサービスの虜にしちゃいましょう。 そのためには、どんなメリットがあるのかをわかりやすく語りかけます。 こんなイメージですね。
人を引きつける様なキャッチコピーがあり、メリットを分かりやすく伝えている、サンプルWEBサイトを紹介します。 三井住友visaカード
3. Railsに速攻デプロイ
プロモーションサイトならPRするだけじゃなくて、見込み顧客の情報もゲットしたくないですか？ サイトに「SignUp」みたいなボタンつけて、メアドゲットしたくないですか？？ ゲットしたいですよね？ ゲットしちゃいましょう。Railsを使って。 見込み顧客の情報を管理するためには、htmlで作成したサイトをRailsに書き直して、WEBアプリケーション化します。 案外手順が多くなってしまった。。。 ただ、慣れていればマジで一瞬で終わります～ まずは、Railsアプリケーションを作ります。 ここで、データベースにはMySQLに指定します。
|
1 |
rails new sample -d mysql |
MySQLの設定をします。 config -> database.yml
|
1 2 |
username: ユーザ名 password: パスワード |
データベース領域を作ります。
|
1 |
./bin/rake db:create |
モデルを作成します。 データベースに保存するデータとして、メールアドレスを指定します。
|
1 |
rails g model user mail:string |
メールアドレスに、NotNull制約とUnique制約、インデックスをつけます。 db -> migrate -> 20141017111911_create_users.rb
|
1 2 3 4 5 6 7 8 9 10 11 |
class CreateUsers < ActiveRecord::Migration def change create_table :users do |t| t.string :mail, null: false t.timestamps end add_index :users, :mail, unique: true end end |
テーブルを作成します。
|
1 |
rake db:migrate |
画像をごそっと下記のフォルダに移します。 app -> assets -> images Jqueryを最初に読み込むようにします。require_tree より前に追記します。 app -> assets -> javascripts -> application.js
|
1 |
//= require jquery.min |
Bootstarpを読み込ませます。require_tree より前に追記します。 app -> assets -> stylesheets -> application.css
|
1 |
*= require_bootstrap |
htmlコンテンツのimgタグをRails仕様に修正。 ここが面倒なんですよねぇ。imgタグを下記の形式に書き直します。 app ->view ->home -> index.html.erb
|
1 |
<%= image_tag("sample.jpg") %> |
cssファイルの拡張子をscssに変更して、url属性をRails仕様に修正。 app -> assets -> stylesheets
|
1 |
image-url("sample.jpg"); |
ここらへんで休憩はさみましょう。 コントローラーを作成します。
|
1 |
rails g controller home index |
homeコントローラーに見込み顧客のメールアドレスを登録するためのcreateメソッドを追加 app -> controllers -> home_controller.rb
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
class HomeController < ApplicationController def index @user = User.new end def create @user = User.new(user_params) if @user.save redirect_to home_index_path , notice: 'success' else render :index end end private def user_params params.require(:user).permit(:mail) end end |
SignUpボタンを押したら、controllerのcreateメソッドが実行されるようにルーティングを修正 config -> routes.rb
|
1 |
post 'home/user' => 'home#create' |
最後はindex.html.erbのフォーム属性をRails仕様に修正します。 バリデーションチェックのエラーと、見込み顧客登録成功のメッセージも表示されるようにしてあります。 app ->view ->home -> index.html.erb
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<h2>Sign up</h2> <% if @user.errors.any? %> <div class="alert alert-danger"> <ul> <% @user.errors.full_messages.each do |message| %> <li><%= message %></li> <% end %> </ul> </div> <% end %> <% if flash[:notice] %> <div class="alert alert-success"> <%= flash[:notice] %> </div> <% end %> <%= form_for(@user) do |f| %> <div class="row uniform half collapse-at-2"> <div class="8u"> <%= f.text_field :mail, class: 'form-control', placeholder: 'Email' %> </div> <div class="4u"> <%= f.submit 'SignUp', class: 'btn btn-default', data: {disable_with: '作成中...'} %> </div> </div> <% end %> |
これで全行程を終了します。 お疲れ様でした！ 空いた時間で、Railsの勉強でもしましょう～
田村昂之
最新記事 by 田村昂之 (全て見る)
- 「速攻！１時間で作るPRサイト」 - 2014年11月27日
- 【VBA】ExcelマクロからSQLのinsert文を自動生成する方法 - 2014年7月29日
- Activityクラス外からActivityにイベントを通知する方法 - 2014年6月17日