カテゴリ: Adobe

このエントリーをはてなブックマークに追加 Share on Tumblr Clip to Evernote 編集




◆ どんとこい発達障害!スケジュールが立てられない人の大逆転!仕事術(980円)
苦手意識を大逆転! 次々と仕事が片付きます(会員登録せずに購入可)

◆ 自分の強みをサクッと活かして商売にしちゃう教科書(980円)
会社を辞めたい!でも独立は不安…そんなあなたは必読デス(会員登録せずに購入可)

◆ スクリプト300本超が使い放題!マガジンをおすすめします。
GOROLIB DESIGNスクリプト一覧と一括ダウンロード

◆ はじめての方はこちらから
新しいスクリプトはわかったわ。じゃあどうしたらいいの?という方へ

◆ 仕事がなくなっちゃう(笑)スクリプトはオーダーメイドが最強です
いつもいつも苦労しているアノ作業。一瞬で終わると人生観かわります(ホントです^ ^)




(更新170912)
58



■InDesignの設計者がつくったシンプルなIllustratorってカンジです

 おつかれさまです。@gorolibです。

 今日はAdobe museというWebオーサリングツールをご紹介します。

 参考:Adobe Muse CCの購入

 Webオーサリングツールとはいわゆる「ホームページビルダー」です。コーディングなし、GUIだけでWebページが実装できるアプリケーションの総称です。

 私は自慢じゃないですが、まともにコーディングしたことはありません(元システム屋なのですが)。元々はMacawというWebオーサリングツールをずいぶん使っていました。


 鳴り物入りのクラウドファンディングで開発されたツールだそうで、確かに使いやすくソースもきれいなのですが、いかんせんその後の更新がない。実は少々バグがあるので制作の戻りが多いのです。



■結論:Adobe Muse CCを末長く

 そこで今回Webページデザイン&制作の受注を機に、Webオーサリングツールを刷新することにしました。Adobeでなんかないの?と探したところ見つかったのがこのAdobe Muse CC(以下Muse)というわけです。私は中の人ではありませんが、こういうときCCでよかったなぁと思います。結論としてはMuseを末長く使う予定です。もう少しで納品予定ですが、それくらいよかったのです。


■Museのインストール

 インストールはCreative Cloudから。身構えるほどは重くないサイズです(所用時間は「夕飯食べてる間」くらいかな)
11


■エディトリアルとWebが似ているとは意外

 Museは「Webページ制作におけるレイアウトアプリ」と割り切ると、たいへん使い勝手がよいです。最初のデザインからどうぞ!みたいな顔をしていますが、やはりデザインカンプ制作にはIllustratorやPhotoshopなど手慣れたアプリがいいです。

 Museは「InDesignの設計者がつくったシンプルなIllustrator」ってカンジです。実際マスターページやグラフィックフレームという概念があり、配置コマンドのショートカットキーがコマンドDだったりと、やたらInDesignに似ています。
44

なるほどコーディングってレイアウト作業なのですね。エディトリアルとWebが似ているとは意外でした。


■Museはコーディング作業の代替

 一般的にWebページ制作は以下の3工程になると思います。

(1)デザインカンプ作成
(2)素材のスライス
(3)コーディング

 Museは3番コーディングの代替機能だと思ってください。1番もできそうな顔をしていますが、3番に限定したほうが多分使い勝手はよいです。DTPから引っ越しされた方はこのあたりが混乱するのですが(私もそうでした^ ^)、無理やり対応させるとすれば

(1)版下作成
(2)入稿データ作成
(3)印刷

 と対応していただければわかりやすいと思います。Museは前提としてデザインカンプが校了し、素材のスライスが完了している段階と思ってください。


■新規サイト作成(コマンドN)
45

 それでは作業をはじめて行きましょう。まずはコマンドNで新規サイトを作成します。

 ページ幅は固定幅=1200pxでつくってみましょう。一方の可変幅というのがいわゆるレスポンシブデザインです。ブラウザの幅を縮めていくと「にゅにゅにゅ」っとレイアウトが変形するタイプのコーディング方法です。
39

 ところで、私は最近レスポンシブデザイン消極派です。あのトランスフォーマーのようなギミックが果たしてどれだけ商品やサービスの販促に役立つのか甚だ疑問だからです。少しのギミックでもものすごく時間がかかります。コストパフォーマンスの問題ですね…。

 一度、可変幅でレスポンシブデザインを試してみてください。少しでも複雑なデザインにするとあっという間にゴールが見えなくなります。また「こんなはずじゃなかった」とクライアントとのコミュニケーション相違がもっとも発生する箇所でもあります。

 結論としては、デスクトップ用、スマホ用の2種類があればいい。ページ数が多ければその量が気になりますが「高々2倍」です。終わりのみえないレスポンシブデザインよりも数倍効率がいいのです。レスポンシブデザインの必要は必ずしもありません。Webページ制作の目的は企業の販促であり、ギミックの博覧会ではないのですから。


■あとはひたすら配置するだけ(ホントです)

 実はあとはデザインカンプどおりに、ひたすら配置するだけです。
24

 誤解を恐れずに言えば、スライス画像の配置かテキストフレームの配置の2種類です。デザインカンプに座標と幅・高さが入っていればホントに誰でもできる作業なのです。ちなみに変形パネルのショートカットはシフト+F8でIllustratorと同じです。


■フッターはフッターとして

 気をつけるべきはフッターです。最下端になるオブジェクトは右クリックでフッターという設定にしましょう。そうしないとWebページの下端部がうまいこと行きません。
48


■あとはメタデータの設定

 さてあとはメタデータの設定です。
 ページ>ページプロパティ>メタデータ
 にて設定します。

 詳細はここでは省略いたしますが、設定がmeta name=”Description”で、キーワードがmeta name=”keywords” となります。SEO対策ですね…。
12

■サイトの確認方法
19

 さてMuseにおけるサイトの確認方法は大きく3種類あります。
(1)ブラウザでプレビュー
(2)サイトを Business Catalyst にパブリッシュ
(3)HTML 形式で書き出し

 パブリッシュと呼ばれるようですが、何言ってるかよくわからないので(サンド冨樫風)、実機確認と考えていただければと思います(用語は当局に合わせる必要はありますけどね)

 私が実際に使った用途としては、

(1)ブラウザでプレビュー…ちょこちょこ確認したいとき
(2)サイトを Business Catalyst にパブリッシュ…スマホで確認したいとき(仮想含め、自前でサーバを立てなくてもAdobeのサーバを借りることができます)
(3)HTML 形式で書き出し…納品のとき

 なお(1)ブラウザでプレビューについては、サイトをプレビューとページをプレビューの2種があります。Webページ数が多いときは(1)のうち「ページをプレビュー」でちゃちゃっと確認でもいいですが、まとめて見ることがほとんどかと思いますので「サイトをプレビュー」でいいと思います。

 スマホデザインの実機確認には(2)が便利。ローカル端末で仮想Webサーバー立てなくてよいのが極めて便利でした。

 またindex以下のページのファイル名について(なんとか.html)。初期値ではtitleタグのファイル名になってしまいます。日本語titleですとファイル名も日本語になります。そのままでOKですが、macOSからの納品は文字化けしないように圧縮ソフトにご注意ください。このソフトはよかったです。



■今回つくってみたサイトはこちら

 はい、ホントにこれだけです。超カンタンでしょ?

 常々つくろうと思っていた自分のサイトを作ってみました。
58

 お役に立てれば幸いです!ではでは出羽の海。



お役に立ちましたらツイートお願いします!




このサイトで配布しているイラストレーターのアクションやスクリプトファイルを無断で転載・配布・販売することを固く禁じます。ご紹介いただける際は必ずURLリンクにてお願いいたします。 このサイトで配布しているイラストレーターのアクションやスクリプトファイルの使用で、ファイルの破損やアプリケーションに不具合が発生した場合でも、責任は負いかねますのでご承知おきくださいませ。自己責任での使用をお願いいたします。

© 2017 GOROLIB DESIGN
Released under the MIT license.





このエントリーをはてなブックマークに追加 Share on Tumblr Clip to Evernote 編集




◆ どんとこい発達障害!スケジュールが立てられない人の大逆転!仕事術(980円)
苦手意識を大逆転! 次々と仕事が片付きます(会員登録せずに購入可)

◆ 自分の強みをサクッと活かして商売にしちゃう教科書(980円)
会社を辞めたい!でも独立は不安…そんなあなたは必読デス(会員登録せずに購入可)

◆ スクリプト300本超が使い放題!マガジンをおすすめします。
GOROLIB DESIGNスクリプト一覧と一括ダウンロード

◆ はじめての方はこちらから
新しいスクリプトはわかったわ。じゃあどうしたらいいの?という方へ

◆ 仕事がなくなっちゃう(笑)スクリプトはオーダーメイドが最強です
いつもいつも苦労しているアノ作業。一瞬で終わると人生観かわります(ホントです^ ^)




36

■Creative Cloudアプリがくるくるのまま動かない件

おつかれさまです。GOROLIB DESIGNです。

この1週間くらい、Creative Cloudアプリの調子がわるいです。

元を正すとイラストレーターの起動がモウレツに遅くなっていて、ライブラリパネルを開くと通信できていない。

はーこれはCreative Cloudだろうと、起動してみるとくるくる状態のまま動かない(起動していてサインインしてないんだかわかりませんが…)。

で、まったく解明ができてないのですが、どうやら同時起動に関連するような気がしてきました。

当方、iMacとMacBook Proの2台にインストールしていますが、イラストレーターやフォトショップが同時起動できないのは、規約上わかる。でもCreative Cloudが同時に起動しないのはちょっと違うよねぇ…と思うのです。

事象としてはハッキリしてきて、
iMac起動中に、MacBook Proがだめ
というケースに絞られてきました(ん?逆もあったかな?)

しかもどうやらCreative Cloudの同時起動による不具合で、マシン自体の挙動が猛烈に遅くなってきました。これは別の原因かもしれませんが、現時点では

どちらかのマシンの電源を切る

ようにしないと、まともに作業できません。いや、そりゃねえっすわ。

iMacの電源切り忘れて出かけたら、外でまともに作業できないっす。
(少なくてもイラストレーターは落とすとして) 

せめて、Creative Cloudは同時起動してほしいし、本体はくるくるにならずにイラストレーターなどのアプリ起動時に

「2台同時起動はできません」

とかメッセージを出して欲しいですね…。

引き続き調査中です。ではでは出羽の海。



お役に立ちましたらツイートお願いします!




このサイトで配布しているイラストレーターのアクションやスクリプトファイルを無断で転載・配布・販売することを固く禁じます。ご紹介いただける際は必ずURLリンクにてお願いいたします。 このサイトで配布しているイラストレーターのアクションやスクリプトファイルの使用で、ファイルの破損やアプリケーションに不具合が発生した場合でも、責任は負いかねますのでご承知おきくださいませ。自己責任での使用をお願いいたします。

© 2017 GOROLIB DESIGN
Released under the MIT license.





このエントリーをはてなブックマークに追加 Share on Tumblr Clip to Evernote 編集




◆ どんとこい発達障害!スケジュールが立てられない人の大逆転!仕事術(980円)
苦手意識を大逆転! 次々と仕事が片付きます(会員登録せずに購入可)

◆ 自分の強みをサクッと活かして商売にしちゃう教科書(980円)
会社を辞めたい!でも独立は不安…そんなあなたは必読デス(会員登録せずに購入可)

◆ スクリプト300本超が使い放題!マガジンをおすすめします。
GOROLIB DESIGNスクリプト一覧と一括ダウンロード

◆ はじめての方はこちらから
新しいスクリプトはわかったわ。じゃあどうしたらいいの?という方へ

◆ 仕事がなくなっちゃう(笑)スクリプトはオーダーメイドが最強です
いつもいつも苦労しているアノ作業。一瞬で終わると人生観かわります(ホントです^ ^)




■PDFを単一のファイルにまとめる方法(Acrobat DC)は「PDFを作成」です

おつかれさまです。GOROLIB DESIGNです。

「複数のPDFファイルをひとつのPDFファイルにまとめる」という作業は、

・ありそうで、
・なさそうで、
・やっぱり年に3回くらいある

作業かと思います。だから忘れちゃうんですよねー。Acrobatのメニューって。

備忘としてまとめておきます。

Acrobat DCにて、複数のPDFファイルをひとつにまとめるには、

ツール>PDFを作成>結合
41
12
です。画面上に結合したいファイルをドラッグ&ドロップすればOKでございます。
32

ではでは出羽の海。





 
お役に立ちましたらツイートお願いします!




このサイトで配布しているイラストレーターのアクションやスクリプトファイルを無断で転載・配布・販売することを固く禁じます。ご紹介いただける際は必ずURLリンクにてお願いいたします。 このサイトで配布しているイラストレーターのアクションやスクリプトファイルの使用で、ファイルの破損やアプリケーションに不具合が発生した場合でも、責任は負いかねますのでご承知おきくださいませ。自己責任での使用をお願いいたします。

© 2017 GOROLIB DESIGN
Released under the MIT license.





↑このページのトップヘ