ヘルプ一覧へ

画面をデザインする

豆知識は、画面が最初に話せるようになった言葉でした。画面デザイナーはその続きです。本日のメニュー、 お得な案内、お店からのひとこと——画面に映すものを自由に組み立てられ、音楽が流れる同じ アイドル画面にそのまま表示されます。

デザイナーを開く

  1. 豆知識の設定を開いてサインインします。デザインはアカウントに保存されるので、サインインしたどの画面でも表示できます。
  2. あなたの豆知識の下で「画面をデザイン」を選びます。
  3. すでに文章を書いてある場合は、その横の「デザイン」を選ぶと、白紙ではなくその言葉から始まります。
画面デザイナー:キャンバス、レイヤー一覧、選択中の要素の設定。
画面デザイナー:キャンバス、レイヤー一覧、選択中の要素の設定。

画面に置けるもの

  • テキスト — 好きな書体・サイズ・色で、枠の中の好きな位置に。
  • 表 — メニュー、価格表、営業時間。1行に1件、列はカンマで区切って入力できます — `Espresso,3.00` — 表計算ソフトからそのまま貼り付けてもかまいません。どちらでも価格はきれいに揃います。
  • 図形 — 長方形、楕円、線。文字の背景の帯、見出しの下の罫線、お知らせを囲む枠に。

ドラッグで移動。角をつかむと縦横まとめて、辺の中央をつかむとその方向だけサイズを変えられます。矢印キーで選択中の要素を少しずつ動かせます(shiftを 押しながらだと大きく動きます)。重なり順はレイヤー一覧に表示されている順番のままで、一覧の 矢印で前面・背面に移動できます。

どこから始めるか迷ったら、空のキャンバスに3つの下地——メニュー、お得な案内、縦向き画面——が 用意されています。どこでも自由に変えられます。

きれいにそろえる

ドラッグ中はガイドが表示されます。レイヤーはキャンバスの端と中心のほか、画面上にあるほかの要素の 端や中心にも吸い付くので、見出しのちょうど真下に価格を置くのに微調整はいりません。実線のマゼンタは ページ、破線のシアンは別のレイヤーを表します。等間隔にも吸い付きます。ほかの2つの近くへ動かすと間隔がそろう位置で止まり、それぞれの間隔が短いバーで示されます。サイズ変更でも同じ線を探すので、隣の要素とぴったり同じ位置で終わらせられます。ドラッグ中に⌥ option(Alt)を押している間は、これらをすべて無視します。

複数をまとめて動かすには、shiftを押しながらそれぞれをクリックするか、キャンバスの空いている場所を ドラッグして囲みます。2つ以上選ぶと「整列」が現れ、左端・中央・右端・上・中央・下をそろえられ ます。3つ以上なら横方向・縦方向に等間隔で並べることもできます。基準になるのは選択したものの範囲で あってキャンバスではないので、置いた覚えのない場所に飛ぶことはありません。

縦向きの画面と、透明な背景

画面の形は、そのデザインをどんな画面向けに組むかを決めます。壁掛けテレビ用の横長、入口脇の 縦長ディスプレイ用の縦向き、その中間の2種類。どれを選んでも、各画面が自分に合わせて表示します。 横長テレビに縦向きのデザインを出しても、はみ出さずに中央に収まります。

テレビを縦置きにするなら、プレーヤーでそのプレーヤーの画面の向きも設定しましょう。 画面全体が回転し、縦向きのデザインが上から下までいっぱいに表示されます。

背景は最初透明です。つまりアルバムアートとビジュアライザーがデザインの後ろで流れ続けます。 ロゴや短いメッセージにはこれが最適です。画面を自分の内容だけにしたいときは、透明をオフにして色を 選んでください。メニューは無地の背景のほうが読みやすくなります。

表示のタイミングを決める

どのレイヤーにも「表示するタイミング」のスライダーがあります。1分ほど触ってみる価値があります。

  • 左端 — 画面が出た瞬間から表示されます。
  • 1〜2秒 — 前のものに続いて現れます。メニューの3つの区切りを0.5秒ずつずらすと、ひとりでに組み上がります。
  • 右端 — 答えの表示を待ちます。豆知識の答えが出るのと同じ、約10秒後のタイミングです。

「タイミングを試す」を押すと最初から通しで再生されます。そのまま編集を続けられます。

テキスト版

どのデザインにも、自分自身のプレーンテキスト版が付いています。レイアウトを描けない画面が表示する言葉であり、 一覧でそのデザインを指す名前でもあります。キャンバスの文字から自動で書かれるので、入力するものはなく、 デザインとずれる余地もありません。図形だけで作ったデザインには借りてくる言葉がないため、保存する前に テキストレイヤーを追加してください。

デザインが映る場所

  • ウェブプレーヤー — 全画面ボタンを押すか、数分そのままにしておくと、アイドル画面がオンにしている豆知識と一緒にデザインを順番に表示します。パソコンやタブレットで使うもご覧ください。
  • Apple TV・iPhone・iPad・Roku — デザインそのものを端末上で描画します。ここで設定したタイミングもそのままです。

画面ごとに別のものを映せます。 既定では、サインインしたすべての画面に同じデザインが表示されます。ロビーのテレビが1台ならそれで十分です。カウンターの奥にテレビが3台ある場合——ドリンク、フード、本日のおすすめ——豆知識の設定を開き、保存した画面の横にある「すべての画面に表示」から映す画面を選んでください。1つのデザインだけを割り当てた画面は切り替えをやめ、そのまま表示し続けます。メニュー表はそうあるべきです。

画面ごとのスイッチは豆知識と同じものなので、豆知識をオフにした画面にはどちらも表示されません。 切り替え方と、デザインと一緒に流す豆知識の選び方は画面の豆知識をご覧ください。

ロビーでの使い方の例

  • 本日のおすすめ、または価格つきの短いメニュー。
  • 元が取れる案内:「ホワイトニングは受付までお尋ねください。ほとんどの方が1時間以内で終わります。」
  • Wi-Fiの名前と、パスワードの受け取り場所。
  • 営業時間、臨時休業、「13時30分に戻ります」。