BUNNY ROBBER GRPC BLOG

今回は、クリックすると表示されるフルスクリーンメニューの作り方です。フルスクリーンメニューはMuseの標準のウィジェットの中にある、「コンポジション→プレゼンテーション」と「メニュー→垂直方向」を組み合わせることで作ることができます。 1. 準備として、メニュー用のアイコンを用意する。 Museでの作業の前に、フルスクリーンメニューで使用するアイコンを用意してください。この記事では、Illustratorで作成した≡字のアイコンとX字のアイコンの2ファイルを使用しています。 イラストレーターで作ったアイコン。左が通常、右が閉じる用。 説明しやすい様に、カラーをグレーにしました。 2. Adobe Museで複数ページを作る。 メニューが完成した際に分かりやすい様、複数ページを作成します。完成したメニューは後から増やしたページに対しても自動でリンクが追加されるので、気にしない方はホームのページのみでの作業でもかまいません。 3ページを追加して、計4ページに。 3. コンポジションのプレゼンテーションを配置 作業はマスターページで行います。Aマスターページを開き、 ウィジェットライブラリ から コンポジション→プレゼンテーション を選択。上の小画面に表示された画像をページ上にドラッグします。 ウィジェットライブラリのコンポジションから、プレゼンテーションを使用します。 ↓ 4. コンポジションオプションを設定する ウィジェットライブラリからページ上にドラッグすると、 コンポジションオプション が自動で表示されるので、下の写真を参考に、 位置 を ライトボックス 、 パーツ の 閉じるボタン に チェック を入れてください。 コンポジションオプションの設定 5. 不要なオブジェクトを削除する ページ上にあるプレゼンテーションのオブジェクトをクリックして、必要のないオブジェクトを削除します（画面ではページの縦を確保して見やすくなるように、左側に縦長の画像ボックスを配置しています。さらに左下に重なっていた1.2.3ボタンを下に移動させています）。 2と3のボタンを選択し、デリートボタンで削除 します。さらに、 中央の 四角の中にある1の テキスト ...

  今回レビューする本は「Adobe Muse ランディングページ制作ガイド」です。 皆さんも知っている通りAdobe Museが開発終了となってしまったため、Adobe Museの解説本であるこの本の価値も下がってしまった感が否めないのですが、今後この本の購入を考えている人の参考になるかもしれないと思い、レビューを書いておきます。 この本は説明書ではなく、実践書 まず前提として、この本はAdobe Museの説明書はありません。Museを使ってランディングページを作る際の操作／手順を学ぶ本です。 辞書的な使い方はしにくい反面、流れの中でMuseについて学ぶことになっていくので、より実践的な使い方を学習できるのではと思います。 一方で、Museの機能の中でも使い方が難しいと感じるコンポジションについては最低限の記述に抑えられているので、このあたりは自分で勉強する必要があります。 ランディングページ制作での考え方を学べる この本では始めに、ランディングページについての説明があります。通常の企業サイトとは違い、ランディングページは訪問者の誘導、最終的には売り上げを目標としているので、そこに至るまでにはどのようにページを構成をするかということを、30pに渡り書かれています。 ランディングページの専門書ではないので分量的には多くはないのですが、基本的な構成は理解できると思います。 解説が非常に丁寧 この本の著者の境祐司さんは、ご自分でもサイトを運営していて、そこで色々なアプリケーションの説明をされています。私もMuseの操作を学ぶ際は、境さんのYoutube動画を何本も見ました。 私のように動画を見た方は同じ様に感じると思うのですが、境さんは説明が非常に丁寧です。まるでマンツーマンで指導するかの様に、操作の一つ一つを言語化しながら動画を収録しています。 そしてこの本も境さんの動画と同様 、操作手順を一つ一つ丁寧に説明しています。Museがマウスでの操作が中心のアプリケーションとはいえ、ここまで丁寧な解説があるならば、本の内容を学ぶ上で躓くことは殆どないと思います。 残念な点が2点 まず一つ目は、本のデザイン。文字が小さく文字間が不自然なので読みづらいです。書体はモリサワの中ゴシックか太ゴシックか見出しゴシッ...

Adobe Museの寿命はあと2年。それ以降は不明。 話題としては遅いのですが、2018年の3月のバージョンをもってAdobe Museの開発が終了しました。Adobeは今後2年間、2020年3月26日までをMuseのサポート期間とし、それ以降はバグの修正もしないと発表しています。 今後2年間で発生するバグには修正のアップデートはあるとしても、それ以降に発生したバグには対応しないということは、例えばサポートが終わった翌日の2020年3月27日にChromeのバージョンアップがあって、それがMuseで作ったサイトに対応していなければOUT、ということになります。 2年後以降はどうなるかわからない、Museはそういうアプリケーションになってしまいました。 なぜAdobe Museは終了したのか Museの終了の理由を考えてみます。Museはコードの記述を不要とするアプリケーションですが、その仕様故、大規模なサイトを制作するのには向いていません。 Museのデータはサイト上にあるもの全てを含んで1ファイルとするので、その分容量が大きなりやすく、それはアプリケーションの動作に影響します。となると、多くてもサイト全体で10P程度の規模がMuseの限界だと私は捉えています。 それを踏まえて最近のWebの流れとして、モバイルファーストがあります。サイトを閲覧する端末のシェアのトップがスマホとなったため、Webのデザインもスマホ向けのシンプルなデザインを考慮して設計していくことが主流になっています。 では、スマホ向けのシンプルなデザインに対応した小中規模のサイトを作るとなった場合にMuseが選択肢としてベストかと考えると、そうでは無いでしょう。 Adobeの公式リリースではDIYと表現していますが、現在のサイト制作手段はWordpress等のCMSや、Wix等のオンライン上でのWeb作成サービス、ブートストラップ等のフレームワーク。そしてそれらに対応する有料無料のテンプレートがWeb上に大量にあります。 スマホ向けのシンプルなデザインに対応した小中規模サイトを作るなら、Museよりも早くて簡単に作れるツールが幾つもあるのです。 この流れはさらに加速しており、今も新しいサービスが次々と生まれています（Ameba OwndやStudio等）。そ...

Adobe Museにある「長方形ツール」と「長方形フレームツール」 Abobe Muse（CC2018）のツールバーの中には長方形ツールと長方形フレームツールという名前も外見も似通った2つのツールがあります。 通常画面左端に表示されるツールバーの中で長方形ツールは文字通り長方形で示され、その下の長方形フレームツールは対角線のある長方形で描かれています。 パッと見ではあまり違いのないこの2つのツール。どのような違いがあるかMuseを半年以上触っている私も理解していませんでしたでし、むしろ気にも留めていませんでした。 専ら私が選ぶのは長方形ツールの方で、四角の中に画像を配置したり罫線を入れる為に使っていました。一方の長方形フレームツールは完全無視。このツールは無くても良いのでは？とも感じていました。 しかし、調べてみると両者には意外な（？）違いがありました。 InDesingから引き継がれた2つのツール Museを触っている人なら知っていると思いますが、Museは同じAdobeからリリースされているInDesignを開発したチームで作られたものです。MuseにはInDesignでの開発思想やインタフェースのデザインが引き継がれており、長方形ツールと長方形フレームツールもその一つです。 MuseとInDesingのフレームの違いとは InDesingのフレーム InDesignのフレーム InDesignの長方形ツールと長方形フレームツールは文字と画像を挿入するためのものですが、役割的には結構柔軟に作られています。例えば「グラフィックフレーム（長方形フレームツールで作る画像用フレーム）」を「テキストフレーム」にしたり、「テキストフレーム」を解除して「割り当て無しフレーム（長方形ツールで作るフレーム）」にするなど、コマンドで自由に役割を変えることができます。 Museのフレーム Museのフレーム Museの場合、長方形ツールと長方形フレームツールは役割が異なります。 長方形ツールで作るフレームは長方形という名前でレイヤー等に表示され、フレームに塗りや罫線を指定した場合はそのままの状態。文字が入ればテキストフレームに変化します。また、InDesignのようにテキストフレ...

Googleカレンダーをレスポンシブ化してみる 今回はAdobe Museに埋め込んだGoogleカレンダーをレスポシブ化させる方法についてです。残念ながらAdobe Muse（CC2018）の設定ではGoogleカレンダーをレスポシブ化させることは出来ません。 ネットで一通り検索して調べてみたところ、 以前の投稿 で採り上げたGoogleカレンダー埋め込み支援ツールからGoogleカレンダーのHTMLコードを取得し、そのコードをdivタグで囲んでclassを設定。更にそのclassに対してCSSのposition指定を使用してレスポンシブ化させる方法が一般的でした。 とはいってもclassやCSSについて良くわからない方もいるでしょうし、実際私もCSSでレスポンシブ化させる際のposition指定については理解できていません。 なので、今回は簡単に利用できるサイトを使用してレスポンシブ化のためのコードを取得します。 Embedresponsively.com にアクセス Googleカレンダーをレスポシブ化させるためには、下記のサイトを利用します。 Embedresponsively.com（リンク） 画面が開いたら、上に並ぶ青い文字の中の右から二つ目「 Generic iFrame 」を クリック してください。 Generic iFrameをクリック 次に、「Generic iFrame Embed:」の下にある 枠の中に、Googleカレンダー埋込支援ツールにて取得したHTMLコードを入力（コピー＆ペーストで可） し、枠の右端にある青い「 Embed 」ボタンを クリック してください。 コードを入力して、Embedをクリック そうすると枠の下にGoogleカレンダーが表示され、その下の「Embed Code:」の下にある枠にレスポンシブ用のCSSを含んだ新たなコードが出力されます。 出力されたコードをクリップボードにコピー この出力されたコードを全て選択してコピーし、Adobe Museのオブジェクトメニュー内、「HTMLを挿入...」で開いたウインドウの枠内にペーストしてください。 Adobe Muse ↓ Adobe Muse 以上の手...

今回はAdobe MuseにGoogleカレンダーを埋め込む方法です。たまに見るアドビ公式のMuseのフォーラムに同様の質問があったのと、偶然見たサイトにGoogleカレンダーが埋め込まれていたことが切欠となりました。 Googleカレンダーを利用するにはGoogleのアカウントが必要なので、お持ちでない方は前もってアカウントを取得しておいてください。 ※Google および Google ロゴは Google LLC の登録商標であり、同社の許可を得て使用しています。 Googleカレンダーを共有化し、サイトに埋め込むためのコードを取得する はじめにGoogleカレンダーで共有化の設定 Googleカレンダーを開きます。 1. Googleのページの右上にある 四角のメニューをクリック するとパネルが開きます。 2. パネルの中にある「 カレンダー 」を クリック します。 (C) Google  3. Googleカレンダーが開いたら、画面の右上にある 歯車のアイコンをクリック します。 4. 開いたパネルの中の「 設定 」を クリック します。 (C) Google 5. 次に画面左側にある「 マイカレンダー 」から、 共有したいカレンダー名をクリック します。 (C) Google 6. マイカレンダーの設定画面になったら、上から2つめの「 アクセス権限 」の枠の中にある「 一般公開して誰でも利用できるようにする 」を クリック してください。 (C) Google 7. クリックすると警告パネルがでますが、 OKボタン を クリック してください。 (C) Google 以上の手順でサイトに埋め込みたいGoogleカレンダーに表示するマイカレンダー全てを共有化させます。 8. 共有化の設定が終わったら、「カレンダーの統合」の枠の中にある青文字「 カスタマイズ 」を クリック してください。 (C) Google OKをクリックするとGoogleカレンダー埋込支援ツールが開きます。 Googleカレンダー埋込支援ツールで埋め込み用コードを取得 Googleカレンダー埋込支援ツールでは左...

今回はAdobe Museでのテキストへのリンクスタイルの設定方法です。リンクスタイルはCSSでいうところの :hover や :visitedなどの擬似属性にあたります。Adobe Museのリンクスタイルはテキストのみに設定できるので、実質は pタグ内のaタグに対してということになります（それ以外の、例えば画像に対して :hoverなどを設定するにはAdobe Museでは「ステート」という機能を使用しますが、この投稿では説明しません）。 なお、今回も前回に引き続き、デザインは「HTML&CSSとWebデザインが一冊できちんと身につく本」の中でサンプルとして配布されているものを元にして、私がAdobe Museで作ったもので、背景に使用した画像はフリー写真素材サイト「Pixabay」からダウンロードしたNYの遊園地「コニーアイランド」。文章は コニーアイランドのウィキペディア からの引用となっています。 テキストへのリンクスタイルを設定するには リンクスタイルの設定は「 サイトプロパティ 」で行います。「サイトプロパティ」を開くには、2通りの方法があります。 一つは画面上部のメニュー内「 ファイル 」内にある「 サイトプロパティ 」から。 もう一つはテキストフレームを選択した状態で画面上部のコントロールパネル内にある青文字の「 ハイパーリンク 」をクリックし、表示されたパネルにある「 リンクスタイルを編集 」からです。 サイトプロパティでの設定 それでは実際に設定していきます。 1. サイトプロパティを開くとパネル上に「レイアウト」「コンテンツ」「詳細」の3つのボタンがあるので、「 コンテンツ 」を選択します。 2. 左側の四角の右下にある 書類のアイコンをクリック して、新規リンクスタイルを作成します。 ここでは「linkstyle_01」という名前でリンクスタイルを作成しました。 3. リンクスタイルを作成すると左側の枠の中に名前が表示されるので、それをクリックし、枠の右側にあるチェックボックスでリンクを設定された文字の各状態を設定していきます。 一見複雑に見えますが、仕組みをわかってしまえば簡単です。幾つか設定の異なるリンクスタイルを作り、どのように...