今すぐ作れる!スマートフォンサイト「フライヤー編」

今すぐ作れる!スマートフォンサイト「フライヤー編」
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

「サイト」というと、コンテンツやページが沢山あるものを想像してしまいますが、今回は、シンプルなサイトの作り方をご紹介!


smart4meでは、Googleマップ、メール機能を簡単に設けることができます。
Webならではの表現を取り入れ、楽しく軽快なサイトを作ってみましょう。

「結婚式2次会お知らせサイト」をつくる。

■用意するもの
今回は案内状をベースにサイトを作成していきます。

■案内状の要素を書き起してみました。
・写真
・案内のテキスト
・会場へのアクセス方法
・出席の有無、お問い合わせ

■今回使うsmart4meの機能
・画像のアップロード機能
・テキスト編集機能
・Googleマップ
・メールリンク
・フッターメニュー

■それでは実際にsmart4meでサイトを作ってみましょう!

ステップ.1
smart4meにログインし、「smart4meを始める」をクリックし、設定画面を起動します。
http://smart4me.net/
(↓smart4meの設定画面です。まだサイトを作っていないので「ページ編集」エリアは空です。)

ステップ.2
右の「パターンの選択」からパターンを選び追加します。

まず、サイトの細かいデザインを決める前に、決まっている要素をどんどん追加していきましょう。
案内のテキスト、会場の場所や、イベントの詳細を入れ込みます。

「パターンの選択」からイメージのパターンを選択し、画像をアップします。
また、テキストに強弱をつけ分かりやすくします。(オプションメニュー、「テキストを編集」からすぐに編集可能です。)

大まかな要素をすべて入れ込みました。

・ステップ3
要素の入れ込みが終わったので、次はデザインです。
サイトのトーンに合わせ、テーマを決めましょう。
今回はウェディングサイトなので、柔らかく温かみのある「Tahiti」というテーマを選びました。
(テーマは、「テーマの選択」からワンクリックで変更ができます。)

・ステップ4
装飾をしていきましょう。

画像を使ってワンポイントをつけてみました。
より華やかな印象になりましたね。

・ステップ5
サイトの体裁が整ったところで、リンクやGoogleマップを追加します。

「Map」ページを作ってリンクを貼ってみます。
(「新規ページ」をクリックし、「Map」というページを作成。
パターンマネジャーからGoogleマップを選択し、住所を入力、地図の情報を反映させます。
また、ページの上部に「戻るボタン」を作り「topPage」へリンクを作成しました。)

上記の方法でマップページを完成させたあと、
さらに使い勝手を良くするためにフッターメニューにもアイコンを追加し、マップページのリンクを設けました。
同じように、メールアイコンを追加、メールリンクを設置。

各リンクはリンクマネージャーより設定できます。
(メール、電話、外部リンクなどさまざまなリンクの設定が可能です。)

・ステップ6
出来上がったら、上のプレビューを押して
サイトの仕上がりを確認してみましょう!

・ステップ7
上のエクスポートボタンを押し、サイトを公開します。

これでサイトが完成しました!
実機でも確認してみましょう。

■QRコードにも対応
smart4meでは、ログイン後のマイページより、作成したサイトのQRコードを取得することができます。
招待状に印刷したり、メールで送ったりと、さまざまにご利用いただけます。

■今回作ったサイト
・サンプルサイトは下記から確認できます。
http://smart4me.net/weblog120427

[注意点] *smart4meで作成したサイトは、スマートフォン専用のサイトとなるため、PCで閲覧することはできません。
PC版のSafariやGoogle Chromeで表示させることはできますが、動作保証外となりますので、ご了承ください

・無料素材をダウンロード
サンプルサイトで使った素材は下記よりダウンロードできます。是非ご利用ください。
sample.zip

今後もsmart4meをスムーズにご利用いただけるよう、さまざまTIPSをお届けする予定です。
お楽しみに!

コメントを残す

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