「速攻!1時間で作るPRサイト」

1. 無料ハイクオリティーなテンプレートを見てみよう!

2. ここだけは押さえろ!コンテンツ作成のポイント

3. Railsに速攻デプロイ

上記3つを抑えて、短い時間でハイクオリティなサイトを作ろう!

 

1. まずは、無料ハイクオリティーなテンプレートを見てみよう!

百聞は一見にしかずといいますね。 まずは、テンプレートのクオリティーをチェックしてみましょう。 ちなみにすべて、レスポンシブです!

Screen Shot 2014-10-18 at 9.00.33Screen Shot 2014-10-18 at 9.00.59 Screen Shot 2014-10-18 at 9.02.36Screen Shot 2014-10-18 at 9.06.53   Screen Shot 2014-10-18 at 9.06.16Screen Shot 2014-10-18 at 9.06.41

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

かっこよくないですか?? このクオリティーで無料なら、一からつくるのなんて馬鹿らしくなってきません?? 「うんうん。馬鹿らしくなってきた(読者の声)」 ですよね。じゃまずは、イケてるテンプレートを探してみましょう! おすすめのサイトを3つご紹介します。

Free Responsive HTML5 CSS3 Website Templates

Screen Shot 2014-10-18 at 9.01.41

HTML5 UP! Responsive HTML5 and CSS3 Site Templates

Screen Shot 2014-10-18 at 9.02.09

Free Htmo5 and CSS3 WebSite Templates

Screen Shot 2014-10-18 at 9.05.40     ついでに、私が使っている商用利用可能な無料画像サイトも紹介しちゃいます。 必要な画像はここから無料でGet!できちゃいます。

Freepik

Screen Shot 2014-10-19 at 0.31.06

Icons Etc

Screen Shot 2014-10-19 at 0.33.09

無料イラスト素材ドットコム

Screen Shot 2014-10-19 at 0.36.05

SILHOUETTE DESIGN

Screen Shot 2014-10-19 at 0.38.26

かわいいフリー素材集 いらすとや

Screen Shot 2014-10-19 at 0.40.57

 

 

2. ここだけは押さえろ!コンテンツ作成のポイント

「イケてるPRサイトができた!」 はい、中身のない見た目だけのPRサイトにならないためにも、コンテンツもしっかり考えていきましょう。 とは言っても、「じっくり練ってる時間はないよ~」って人のために、 ここだけは押さえて欲しい、コンテンツ作成のポイントをまとめてみました。

・人を引き付ける魅力的なキャッチコピーを考える

・ メリットをわかりやすく伝える

 

[人を引き付ける魅力的なキャッチコピーを考える]

自分たちとサービスを受ける側の人の関係はこんなイメージです。 prezen 道行く人(サービスを受ける側の人)は、自分たち(サービスを提供する側)に興味ありません。 人気のない政治家の演説の様。道行く人の心に届かなければ、立ち止まって聞いてはくれません。 まずは、みんなに振り返ってもらえるキャッチコピーを考えましょう! 魅力的なキャッチコピーの作り方は、ここを参考にして下さい。↓↓

WebサイトやPR制作のための魅力的なキャッチコピーの作り方

[メリットをわかりやすく伝える]

人に振り返ってもらったら、次は”釘付け”にしましょう。 もう、自分たちのサービスの虜にしちゃいましょう。 そのためには、どんなメリットがあるのかをわかりやすく語りかけます。 こんなイメージですね。

115899_1500

 

人を引きつける様なキャッチコピーがあり、メリットを分かりやすく伝えている、サンプルWEBサイトを紹介します。  三井住友visaカード Screen Shot 2014-10-29 at 21.18.22

3. Railsに速攻デプロイ

プロモーションサイトならPRするだけじゃなくて、見込み顧客の情報もゲットしたくないですか? サイトに「SignUp」みたいなボタンつけて、メアドゲットしたくないですか?? ゲットしたいですよね? ゲットしちゃいましょう。Railsを使って。 見込み顧客の情報を管理するためには、htmlで作成したサイトをRailsに書き直して、WEBアプリケーション化します。 案外手順が多くなってしまった。。。 ただ、慣れていればマジで一瞬で終わります~       まずは、Railsアプリケーションを作ります。 ここで、データベースにはMySQLに指定します。

rails new sample -d mysql

MySQLの設定をします。 config -> database.yml

username: ユーザ名
password: パスワード

データベース領域を作ります。

./bin/rake db:create

モデルを作成します。 データベースに保存するデータとして、メールアドレスを指定します。

rails g model user mail:string

メールアドレスに、NotNull制約とUnique制約、インデックスをつけます。 db -> migrate -> 20141017111911_create_users.rb

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

テーブルを作成します。

rake db:migrate

画像をごそっと下記のフォルダに移します。 app -> assets -> images   Jqueryを最初に読み込むようにします。require_tree より前に追記します。 app -> assets -> javascripts -> application.js

//= require jquery.min

Bootstarpを読み込ませます。require_tree より前に追記します。 app -> assets -> stylesheets -> application.css

 *= require_bootstrap

htmlコンテンツのimgタグをRails仕様に修正。 ここが面倒なんですよねぇ。imgタグを下記の形式に書き直します。 app ->view ->home -> index.html.erb

<%= image_tag("sample.jpg") %>

cssファイルの拡張子をscssに変更して、url属性をRails仕様に修正。 app -> assets -> stylesheets

image-url("sample.jpg");

ここらへんで休憩はさみましょう。   コントローラーを作成します。

rails g controller home index

homeコントローラーに見込み顧客のメールアドレスを登録するためのcreateメソッドを追加 app -> controllers -> home_controller.rb

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

post 'home/user' => 'home#create'

最後はindex.html.erbのフォーム属性をRails仕様に修正します。 バリデーションチェックのエラーと、見込み顧客登録成功のメッセージも表示されるようにしてあります。 app ->view ->home -> index.html.erb

<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の勉強でもしましょう~

コメントを残す

メールアドレスが公開されることはありません。