Adobe | 防寒対策異状なし

昨年末に出したmoto FANBOOKについて、実は語りたいことがまだまだあります。とはいえ、同人誌の性質上、自分のこだわりポイントをすべて挙げていったら、それは本全体でしたというような、どうにも変なオチになりかねません。

なので、この記事をもって、こだわりポイントの紹介は小休止を置きたいと思いますが、今回紹介するのはまさに「この本全体」に関わることです。

特にこだわった2つのフォント

今回お話するのは「フォント」です。moto FANBOOKはデザイン担当が紙面もフォント選びもデザイン担当がかなり力を入れてやってもらいました。制作過程では自分も意見をしましたが、その中で自分の意見も入れてもらったのが以下の2つのフォントです。

「moto」のシンボリックな部分
本文を読みやすくしたい

なお、どちらもAdobe Creative Cloud内のフォントライブラリー「Adobe Fonts」に収録されているので、Adobe CCのどのプランでもいいので契約しているユーザーであれば利用できます。

motoのモダンな丸っぽさを出したい

motoのロゴは丸っぽい。

motoのコーポレートロゴは丸っこいシンプルなものです。moto fanbookは非公式な同人誌ではありますが、この世界観を継承したいと考えていました。そこで選んだフォントは「Co」というものです。

上記のフォントは例ではありますが、一般的な欧文・日本語フォントでそれぞれモダンや丸っぽい印象を受けるものです。どれも素敵ではありますが、現在のモトローラの特徴的な部分はやはり先頭の「m」でしょう。

どのフォントもノンセリフ体（日本だとゴシック体）なので目立ったセリフはありませんが、「m」の先端のピョンと飛び出た部分！ここがmotoのロゴにはないものです。どうしても、このmのピョンを消したく、Creative Cloud内のロゴを探し続けた結果、「Co」に辿り着いたわけです。

ちなみに、C95当日にいらっしゃった方の中で「こんなフォントでしたっけ」とおっしゃる方がいました。おしゃべりしていると、その方がおっしゃっていたのはモトローラ・モビリティー旧ロゴ、というより、現モトローラソリューションのロゴでした。四角っぽいやつとおしゃっていたのがヒントでした。往来のモトローラファンにとっては、もしかしたらこっちの方がなじみ深いかもしれませんね。

本文は重く見えないようにしたい

さて、moto FANBOOKはレビュー的な内容やmoto modsシリーズの紹介がメインとなるため写真＋文の多い本になる想定でした。つまり、文章が本文がメインコンテンツになるわけです。

しかし、同人誌自体のそもそもの企画的にも、誌面の雰囲気的にはあまりもともとあるようなIT誌とは違うフレンドリーなものにしたいイメージがありました。そこで選んだのが本職の方で取材もした新しい「貂明朝テキスト」です。

どうですか、すごくフレンドリーながらもしっかりとしたイメージに見えないでしょうか。また、こうやってディスプレーで見るのと紙で見るのでは、印象が再び違うもの。選ぶ際は、試しに家のプリンターで印刷して比較しました。

ちなみに、貂明朝には「貂明朝テキスト」と「貂明朝」の2種類がありますが、違いは貂明朝テキストの方が本文用に最適化されています（違いはひらがなのみで、漢字などは共通です）。

あと、moto FANBOOKにはこの貂明朝シリーズに含まれる「色付きのSVGグリフ」が使われている箇所があります。SVGグリフって何だよ、という方はAdobe Fontsの公式ブログの記事を見た後に、ぜひmoto FANBOOKの実物もご覧いただければと思います（笑）

本記事はアフィリエイトプログラムによる収益を得ています。

本記事の外部リンクには一部アフィリエイト契約によるものが含みます。リンク先のページで商品を購入・予約などを行うと、筆者に一定の収益が発生します。詳しくはこちら。

Adobe Muse CCを使って同窓会の総会告知ページをつくってみました。一切Adobe Museを使ったことのない状態から、だいたい約5〜7時間、素材集めがなければもう少し短くできた気がしますが、ゼロからメインページおよびモバイル用ページの作成が終わったことに感動を覚えたので、その理由を書いていきます。

　実際にPCでアクセスしていただけるとわかるのですが、内容としてはとあるイベントの出席申請を促し、かつソーシャルでの拡散を主な目的としています。そのため、トップにはビジュアルと一緒に日程と開始時刻を明記。そのすぐ下にGoogleフォームを使った出席申請フォームが配置されています。

　日時以外の情報がトップに並んでしまうと煩雑になってしまうと考えていましたが、とはいえ同窓生がいきなり“総会”と言われてもわからないと思ったので、タブを切り替えることにより、総会のカンタンな内容や議事一覧を表示できるようにしました。

　最初はFacebookページのイベント機能だけで告知は済ませようと思っていました。ですが、Facebookを使っていない人にとってFacebook内のページはアクセスしてすぐ“そっ閉じ”されてしまう可能性もあり、急きょこのようなページをつくることになったわけです。つまり、制作時間はなるべく短くしたい。

　Muse CCの使い方などは、ウェブの公式ヘルプやAdobe Creative Cloud道場のアーカイブス動画を参考にしました。ちょっと前は新しいツールを買ったら、同時に参考書を買うのが常でしたが、今は本当に素晴らしいですね。動画ほどわかりやすいメディアはないです。

　操作感はほかのAdobe CCのツールを使ったことがあれば、そんなに困ることはありません。とくにDreamweaverやInDesignの経験があれば飲み込みやすいと思われます。感覚としてはInDesignに近く、用意した素材やツール内に用意されている素材を必要なところにぼんぼんドラッグ＆ドロップしていけばオーケーです。

　“ツール内に用意されている素材”の中には、今回使った“タブ”やGoogleマップ、Twitter、Facebookボタンなどのウィジェットのことです。メンドウなライブラリの読み込みを自分でやる必要はなく、これもドラッグ＆ドロップすればオーケーです。しかも、ボタンの大きさやタブの数など細かいところもGUIで変更できます。

　このようなウィジェットという考え方はそれこそ昔々からある簡易型のホームページ制作ソフトにはつきものでした。しかし、そこはデザインツールの雄・Adobe先生。ただ単に機能を提供するだけでなく、かゆいところに手が届くカスタマイズ性とお手軽さを両立しています。

　さらに感動したのはスマホ向け、タブレット向けページもカンタンに作成できること。自分は今回、PC向けページをつくった後にスマホ向けページをつくりました。その際、スマホ向けページは別に自動生成されるわけではないのですが、PC向けページからの文字や画像などをコピー＆ペーストしてサイズなどを調整するだけで、完成してしまいました。