無料アプリ Adobe Spark Page なら、素人でも ちょっとしたWebサイトを、簡単に作れる。

Adobe Spark PageでWEBページをiPhone、iPadで作成・公開 スマホ用

「ホームページ作ってみたい!」そういう人が激増していますが、WordPressではハードル高すぎます。そこで、Adobeが無料で公開しているSpark Page というアプリを使って、ド素人でもWebサイトを作る方法を解説します。サイトを公開しても、無料です。

Adobe Spark Page

簡単にWebサイトをつくるための
アプリです。

Adobe Spark Page

iPhone
iPad
この2つでアプリが公開されています。
(残念ながらAndroid用は無しです)

App Store からダウンロード、
インストールして
初回起動時は
Adobe ID の入力を求められます。

Adobe ID の作成・登録については
過去記事 ↓

このカメラすごい!無料!Adobe ID 登録して、Photoshop Camera を使おう

こちらを参考にしてください。

Adobe Spark Page 起動、Webサイト作成

制作に入る前に・・・
Adobe Spark Pageで作ったサイトには
独自ドメインは使えませんので
会社やお店の公式サイトとしてよりも
・独自ドメインにはこだわらない
・サイトからの集客はいらない
・簡単な名刺代わりみたいなもの
そういう感じで捉える人向けです。
基本的には、
友達とのサークル活動の告知用とか、
仕事や会場の様子を
見てもらいたい人に伝わればいいとか、
そういう使い方なら、無料で簡単なので
使用する価値はあると思います。

インストール出来たら
Adobe ID でログイン後に
Adobe Spark Page が起動します。

Adobe Spark Page 起動画面

起動直後の画面です。
下の「+」をタップして
作成に入ります。

1.カバー写真と、サイトのタイトル

制作の画面に入ると
初期画面が下です。

Adobe Spark Page 制作画面

「1」写真を選びます
「2」サイトの名前を入れます

「1」の写真は
「Photo」ボタンをタップすると

Adobe Spark Page 写真の保管場所選択

右に
写真の保管場所を選ぶ一覧が出ます。
いろいろありますが
Googleフォトから
直接配置できるのはうれしいです。

「2」のタイトルテキストは
文字の部分をタップすれば
入力画面になります。

Adobe Spark Page 写真とサイトタイトルの入力

簡単に
サイトのタイトル
カバー写真の配置ができました。

2.テキスト、説明文を入れる

カバー写真の下に
サイトの内容を表す文章を入れます。

Adobe Spark Page 説明文

画面を下から上に
少し動かすと
次に配置するツールの一覧が出ます。

その中から「A Text」を選んで

Adobe Spark Page テキスト入力

かんたんです。

3.写真の配置 その1

写真の配置には
何種類か方法があります。

Adobe Spark Page 写真 Photo Grid

「+」ボタンをタップして
ツール一覧を表示させ
「Photo Grid」をタップ。

選んだ数枚の写真を
自動で並べてくれる機能です。

Adobe Spark Page Photo Grid

ココでは
Googleフォトから
2枚選んでみました。

ぼくの場合、
普段から
スマホで撮った写真は
Googleフォトにアップしてるので
とても便利。

いちいち
Googleフォトのアプリを立ち上げて
ダウンロードして
カメラロールに保存
選択して配置といった
一連の作業がかなり減ります。

4.写真の配置 その2

Adobe Spark Page Glideshow

「+」をタップして
ツール一覧から
「Glideshow」をタップ。

写真を選ぶだけです。

Adobe Spark Page Glideshow 出来上がり

画面いっぱいの写真に
テキストを重ねることができます。
テキスト枠には
「+」をタップすれば
テキストだけでなく
写真を入れることもできます。

こういうデザインって
WordPressのサイトでは
かなり難しい技術が必要なのですが
Adobe Spark Pageなら
すごく簡単にできてしまいます。

5.写真の配置 その3

Adobe Spark Page Split layout

「+」ボタンをタップして
「Split layout」をタップします。
大きく左右に分かれるレイアウトです。

Adobe Spark Page Split layout

上は右写真、左テキストですが
左右は真ん中のボタンで
一発で入れ替えることができます。

6.リンクボタン設置

Adobe Spark Pageで作るWebサイトは
基本一枚モノです。
なので、サイトと言うよりも
ページと言ったほうが正しいです。

ですが、
Adobe Spark Pageで
いくつもWebページを作ったり
他のWebサイトと
リンクボタンで繋ぐことは可能です。

Adobe Spark Page リンクボタン


「+」ボタンをタップして
ツール一覧から
「Button」をタップします。

Adobe Spark Page リンクボタン設定

リンクボタンの名前
リンク先URLを入力して
「完了」をタップ。

Adobe Spark Page リンクボタン 完成

設置完了です。
この感じだと、
ボタンの横並び配置はできないっぽいです。
「+」ボタンで縦に並ぶデザイン。

ですが、
いまや殆どはスマホで見る時代なので
この方が、見やすいし
ボタンをタップしやすい。

7.サイト公開!

ページが出来上がったら
公開します。

これもメチャクチャ簡単です。

Adobe Spark Page サイト公開の準備

右上のボタンをタップします。

Adobe Spark Page ページ公開

「1」”公開する”をON
「2」”公開リンクを作成”をタップすると

Adobe Spark Page ページアップロード

アップロード画面が表示されます。
完了すると

Adobe Spark Page URL

ページのURLが表示されます。
このURLは変更できません。

あともう一つ

Adobe Spark Page 広告

ばっちり
Adobeのバナーが入ります。
でもかなり控えめなので
気になるほどでもないです。

もし消したければ
毎月のサブスクリプションとなります。

まとめ

こういうサービスの使い方なのですが
こだわったモノを作るよりも
伝えたい情報があったときに
iPhone、iPadで
サクッと適当に写真と文章並べて
「こんな感じのお店です」
「こんな商品を作ってます」
と簡単に伝えたいときには便利です。

ですが、
公開すると
いくらURLが検索されにくいとはいえ、
公開は公開なので
見られて困る内容には
使わなないようにするべきです。