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





◆ スクリプト300本超が使い放題!マガジンをおすすめします。
有料スクリプトはnoteからご購入ください(要ログイン)。
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 編集





◆ スクリプト300本超が使い放題!マガジンをおすすめします。
有料スクリプトはnoteからご購入ください(要ログイン)。
GOROLIB DESIGNスクリプト一覧と一括ダウンロード


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


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


◆ 自分の強みをサクッと活かして商売にしちゃう教科書
会社を辞めたい!でも独立は不安…そんなあなたは必読デス



■上から順が重要です

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

 WebデザインをIllustratorで行なう場合について。コーダーさんに渡すデザインカンプって、当初の支給テキストと比較するとたいてい変更入っていますよね?英数字の半角・全角、調整用のスペースや改行の挿入などです。「すべて支給テキストどおり」ということはまれかと思います。

 デザインカンプを元にコーダーさんは作業をするので、スライス画像やその座標と同時に、この「最終テキスト素材」も必要なわけです。

 このとき「Illustratorで開いてコピペしてくれ!」というのはあまりにも横暴というか乱暴というか…お行儀がよいとは言えませんね ^ ^ 後工程はパートナーなんですから大切にしましょうね。

 そこで、選択テキストを上から順につなげてテキストファイル出力するスクリプトを作成しましたので、ご利用ください。


■今回のスクリプト情報

【スクリプト概要】
選択テキストを上から順につなげてテキストファイル出力します

【スクリプトファイル名】
G392_WriteText.jsx

【使い方】
(1)テキストオブジェクトを選択します
(2)このスクリプトを起動します
(3)保存フォルダを選んでください
(4)ファイル名の初期値はタイムスタンプ(日時)です
10

【仕様】
(1)選択されたテキストオブジェクトが対象です(他のオブジェクトが混ざっていてもかまいません)
(2)テキストオブジェクトのcontents(内容)を座標の上から順に改行キーで連結します
(3)連結対象をテキストファイルとして出力します

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


(追記170911)
テキストが何層にも入れ子になってグループ化されていても処理可能としました。ダウンロード元、ファイル名は同じです。再ダウンロードにてお願いいたします。



■ダウンロードはこちらから

https://note.mu/gorolib/n/n4f05bb8f4f7c

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




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

© 2017 GOROLIB DESIGN
Released under the MIT license.





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





◆ スクリプト300本超が使い放題!マガジンをおすすめします。
有料スクリプトはnoteからご購入ください(要ログイン)。
GOROLIB DESIGNスクリプト一覧と一括ダウンロード


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


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


◆ 自分の強みをサクッと活かして商売にしちゃう教科書
会社を辞めたい!でも独立は不安…そんなあなたは必読デス



dc187be1-s


■みんな大好き皮算用!年収1億円バージョンです

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

 今回はたまーにお送りしている皮算用ネタです。


 今回はどーんと年収1億円を計算してみましょう!

 ホラ「まったく手の届かないくらいの目標をつくれ」って、あっちのアヤしいメルマガでも、こっちのメルマガでも連呼してるでしょ?(笑)

 まず1億円とはどのくらいのボリューム感かを把握してみます。

(1)1万円札が1万枚
(2)ゼロが8つ
(3)カンマ区切りだとカンマ2つで3等分(コレ→100,000,000)

 おお…1番の1万円札が1万枚というのはちょっと意外でした。え?そんなんでいいんだ、的な数字ですね。

 さて、私が最近気になっているのが月額サービスです。気がつくとDropboxもマイクロソフトOfficeもAdobeもKindleもみーんな月額サービスでした(私、気づくのおそすぎ…)。


■Creative Cloudで2000人集めたらいくら?

 月額サービスの何がいいって、登録会員様が安定すれば売り上げも安定することです。単発製品ならば売り上げグラフはギザギザですよね。月額サービスのグラフは、台形っていうか「面積が詰まっている感じ」になるわけです(えーと、ボキャブラリなさすぎ^ ^)

 例えばAdobe Creative Cloud(月額5,000円)で2,000人集めたとしたら、年収は、

 5,000円×2,000人×12ヶ月=120,000,000円(1億2千万円)!となります

 ほう!やるなAdobe!

 ただまあ月額5,000円のサービスってのはちょっと法外。IllustratorもPhotoshopもInDesignも使い放題で、それぞれのアプリがこれまで超高額だったから許されているものの、普通の人がおいそれとは出せない金額ですよね…。


■月額いくらなら払う?

 というわけで新規サービスに対して「月額いくらなら出せるか」を考えてみましょう。

 例えば、私が購読している週1のメルマガ「MEGA地震予測」は月額216円です。国土地理院のGNSS連続観測点データを元に地点ごとのタテヨコのズレを把握し、A点が左、C点が右にズレてたら真ん中のB点は歪んているから地震が起きやすいよ!という仮説のもとに地震予測をしてくれるのですが、これが極めて正確。216円でも余りある情報です。

 月額ならば、主観的には500円を超えるとちょっとね…という感じです(おま、自分のスクリプトマガジンは1000円じゃねーか!という貴兄もいらっしゃるかと思いますが、私のは単発ですので…m(_ _)m)

 月額400円ならいけそうな気がします。そこで月額400円で1000人集めたサービスがあったら、何本そのサービスがあれば年収1億円になるかを計算してみましょう。

 1億円÷12ヶ月÷400円÷1000人 ≒ 20.8本

 つまり同様のサービスが21本あれば、年収1億円です。おお?なんだか身近になってきました\(^o^)/

 まあ1本だけでも月収40万円ですから、そこそこの暮らしは十分できますけどね^ ^

 あとは掛け算・割り算でいかようにも計算できます。例えば月額800円ならサービス10本となりますし、10,000人集めることができるのなら、サービスは2本で十分です。ちなみに1000人は多いぜ!という方は、Twitterでもインスタでもフォロワーの方を1000人以上集めてみると「ん…こんな感じか」という実感が持てるかと思います。

 年収1億円ていうと、だいぶ景色が変わってくるんじゃないかなーと思います。

 私ですか?ただの皮算用マニアですので、まだまだまだまだでございます(^^;;

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




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




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

© 2017 GOROLIB DESIGN
Released under the MIT license.





↑このページのトップヘ