カテゴリ: Adobe

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





◆ #いきなりHTML 2(レスポンシブ対応)
なんと!スライスもコーディングも全自動!イラレからHTML+CSSへ一発出力します

◆ スクリプトで時短革命
デザイン業界にもRPAを!スクリプトはオーダーメイドがイイんです!

◆ 10倍ラクするIllustrator仕事術〜ベテランほど知らずに損してる効率化の新常識
イラレ使いにこれ1冊!ホントに10倍ラクできます




■ 安定したバージョンをお勧めします
(Illustrator で説明します)
スクリーンショット 2018-11-07 8.11.44

 みなさま、おつかれさまです。@gorolibです。

 その昔、Adobeのソフトはウン十万円もしましたが、今では月額で各製品が使い放題となりました。Creative Cloudのことです。

 Creative Cloud を購入すると、あまり迷わずに最新バージョンのインストールをすることになりますが、最新バージョンには不具合も多くあります。

 iOS(iPhoneのOS)と異なり、Adobe製品では、重大な不具合でも長期間放置されることがあります。例えば、Illustrator CC 2018 による文字組の不具合は深刻でした。

参考:CC 2018のトラブルシューティング | Adobe Community

 それ以外にも、Illustrator CC 2018 には、アピアランスパネルで不具合があったように記憶しています(修正されたかは未確認)。そのため、即座に CC2017 を再インストールし、CC2019 が登場した現在(2018年11月08日)でも、使い続けています。

 とんでもない目玉機能が登場したら、多少の不具合も覚悟でバージョンアップするかもしれません。しかし、基本機能の不具合は、業務に支障が出るため、慎重にならざるを得ません…。


■ 以前のバージョンのインストール

 新製品や新機能は、いつでも胸踊るものです。しかし、例えば Illustrator においては、機能としてほぼ完成していますので、バージョンアップを急ぐ必要はないのです。

 ここでは、意外と知られていない、旧バージョンのインストール方法を掲載しておきます。Illustrator については、個人的には、バージョン21.1.0 (CC2017のこと)をお勧めします。

(1)Creative Cloud アプリを起動します
【Mac のメニューバーより】
スクリーンショット 2018-11-08 10.08.02

【アプリケーションフォルダより】
スクリーンショット 2018-11-08 10.11.36

(2)Apps タグをクリックして各アプリの右側をプルダウン>管理>他のバージョンと進みます
スクリーンショット 2018-11-07 8.11.44

(3)以前のバージョンを選んでインストールします
スクリーンショット 2018-11-07 8.13.40


お役に立てれば幸いです!


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




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

© 2017 GOROLIB DESIGN
Released under the MIT license.





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





◆ #いきなりHTML 2(レスポンシブ対応)
なんと!スライスもコーディングも全自動!イラレからHTML+CSSへ一発出力します

◆ スクリプトで時短革命
デザイン業界にもRPAを!スクリプトはオーダーメイドがイイんです!

◆ 10倍ラクするIllustrator仕事術〜ベテランほど知らずに損してる効率化の新常識
イラレ使いにこれ1冊!ホントに10倍ラクできます




■Webデザインの校正にはやはりブラウザ経由が良いです^ ^

  おつかれさまです。@gorolibです。
 Webデザインの校正工程は、Adobe XDのプロトタイプ機能を使って行うのが便利です。以下にそのやり方を記載していきます。私は手抜きですので、Illustratorで作成したアートボードサイズでクリップしたpngを1枚ペタッと貼り付ける方法です。


※アートボードサイズでクリップしたpng画像をIllustratorから出力しておきます。


(1)XDのアートボードサイズを、Illustratorのアートボードサイズと同じにします。また、ビューポートの高さは1500にします(経験上)。ここを設定しておかないと、ブラウザではpng画像の全体表示になってしまいます。ビューポートの高さとは、ページ送りの高さと考えておけばよいと思います。

スクリーンショット 2018-09-22 11.36.43

(2)png画像を貼り付け原点を(0,0)に合わせます

スクリーンショット 2018-09-22 11.34.58

(3)右上の共有マークから「プロトタイプを公開」を選択します

スクリーンショット 2018-09-22 11.35.08

(4)フルスクリーンで開く(デスクトップの場合)をチェックして、公開リンクを作成します。

スクリーンショット 2018-09-22 11.46.10


(5)作成が終わると元の画面に戻ります。リンクアイコンをクリックすると、プロトタイプを表示するURLがコピーされますので、それをお客様にメール等で連携します。

スクリーンショット 2018-09-22 11.35.56


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



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




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

© 2017 GOROLIB DESIGN
Released under the MIT license.





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





◆ #いきなりHTML 2(レスポンシブ対応)
なんと!スライスもコーディングも全自動!イラレからHTML+CSSへ一発出力します

◆ スクリプトで時短革命
デザイン業界にもRPAを!スクリプトはオーダーメイドがイイんです!

◆ 10倍ラクするIllustrator仕事術〜ベテランほど知らずに損してる効率化の新常識
イラレ使いにこれ1冊!ホントに10倍ラクできます


(更新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.





↑このページのトップヘ