一番選ばれているHTML5の電子カタログ

つくるを応援するブログ - INSPI

アプリ・サービス

iPadで簡単にWebコンテンツが作れる「Adobe Slate」

13295
views

アドビからこのほど、iPadの簡単操作でWebコンテンツを作成できるアプリ「Adobe Slate」がリリースされました。実際に使ってみるととても簡単で、しかも海外の雑誌のようなかっこいいデザインのページができますので、ぜひ使い方をご紹介したいと思います。

slate_0001
(出典:https://standout.adobe.com/slate/

Adobeから無料で提供されている「Adobe Slate」。
Webデザインの技術や知識がなくても、美しいフォントや配色をセットにしたテーマを適用したり、テキストや画像を直感的に配置したりして、簡単操作でWebコンテンツを作成できるiPad専用アプリです。

まずは、アプリをダウンロードしてみましょう。

【iTunesが開きます】

slate_001

アプリのホーム画面を開いたところです。アプリを使うには、Adobe IDまたはFacebookアカウントでのログインが必要ですが、利用自体は無料です。

slate_002

ホーム画面から、いくつかのサンプルコンテンツを閲覧できます。iPadをタテにすれば、自動で縦位置レイアウトに切り替わります。
こんなクオリティの高いコンテンツが本当に簡単に作れるのかな? と思ってしまいますが、操作はとても簡単です。実際に、自分の撮った写真を使って、作品をつくりながら、手順をご紹介したいと思います。

slate_003

ログインしたら、まず「Creat a New Story」をタップ。

slate_004

作品のタイトルを入力します。タイトルの位置は、フリック操作で調整できます。

今回は、以前の記事で紹介した、ニューヨークの地下鉄を撮影した手作りアートブックの素材を使い、Web写真集のようなものを作ってみたいと思います。

slate_005

次に、タイトルの背景に入る画像を挿入します。+(プラス)のアイコンをタップし、「Photo」を選択。画像データは、iPad内のライブラリだけでなく、Adobe Creative CloudのオンラインストレージやDropboxなどからも読み込むことができます。

slate_006

タイトル画像を読み込みました。
続いて、コンテンツを作っていきましょう。同じ要領で、+アイコン→「Photo」から、写真を追加していきます。

slate_007

写真のレイアウト方法は4種類から選ぶことができます。このように、普通に余白付きで中央に置かれた状態が「inline」。

slate_010

「full screen」は文字通り、全画面レイアウト。デバイスが縦向きの場合でも写真が画面いっぱいに表示されるので、大きく見せてインパクトを出したい時に最適です。

slate_020

「full width」は、横幅いっぱいにレイアウトする指定。「full screen」と違うのは、写真の横幅100%に合わせて写真サイズが調整されるので、デバイスが縦向きだと、さほど写真が大きく見えません。横位置だと、「full screen」に近いサイズ感になります。

slate_009

「window」は、ページをスクロールさせると、写真は動かず、写真の見える枠だけが動いて見えるような効果が得られます。写真の見せ方だけで、かなり変化を付けられそうですね。

slate_008

あと、+メニューから直接選べる「photo glid」では、複数の写真を固めてレイアウトします。それぞれの掲載順もあとから簡単に入れ替えできます。

slate_011

また、リンクボタンも設置できます。このボタンのデザインも洗練されていますね。

slate_017

テキストは、見出しのように強調させたり、リストや引用といった書式表示ができます。

slate_013

コンテンツが完成したら、右上のアイコンをタップすると、Web発行の管理画面「Share Your Story」が開きます。

著者情報などを設定し、「Continue」をタップすると、データがアップロードされます。

slate_015

発行されたURLをブラウザで開くと、コンテンツを閲覧できます。
Twitter、Facebook、メール、テキストメッセージなどで共有したり、埋め込みコードを生成して別のWebサイトなどにリンクとして貼ることもできます。さっそく、生成されたWebページを見てみましょう。

slate_016
slate_018

上から下へと、スムーズに写真が流れていき、とても閲覧しやすいです。デスクトップPCやスマートフォンなどでも、画面サイズにあわせて表示が最適化されるので、コンテンツを一つ作ってしまえば、あらゆる閲覧環境に対応できるのです。

mkz025

もとのアートブックが、上から下へとめくっていくような構成だったので、画面の上から下に向かって進んでいくこのレイアウトは、作品の世界観とも合っているように思います。

slate_021

「Adobe Slate」は、さまざまな雰囲気のフォントや色合いがセットになった「テーマ」を適用することもできます。
海外の電子雑誌のような、素敵なデザインのコンテンツが、本当に簡単に作れてしまうこのアプリ。自分の作品集やポートフォリオ、カタログ、電子書籍、コンセプトブックなど、さまざまな表現手段として活用できるように思います。iPadをお持ちの方はぜひ、試してみて下さいね。


インスピはWebデザインとマーケティングの株式会社ルーラーが運営しています

佐藤勝

佐藤 勝Writer

ライター/編集者/何でも屋。Web、デザイン、映像、アート、観光などの記事執筆や、企業・団体のコンテンツ制作など、色々やらせていただいております。 INSPIでは、生活やビジネスに役立つものづくりの情報から、面白スポットやまちづくりまで、さまざまなテーマの記事をお届けします。
http://lamp-creative.com/

← 記事一覧