So-net無料ブログ作成
検索選択

2014年 あけましておめでとうございます。 [日記]

HappyNewYear_2014.jpg

あけましておめでとうございます。本年も、どうぞよろしくお願い申し上げます。


前回の更新(夏!)から、ずいぶん日が開いてしまいました。
公私ともに、バタバタしておりまして。 私、酉年なもんですから仕方ないですかね。(^^;)
年末ギリギリまでオフィスの改装や、ホームページのリニューアルにも手を付けていました。
年始早々の案件も重なった為、正月休みも返上です。

そんな中、ホームページは、なんとか新年リニューアルに間に合わせることができました。
ご覧頂けましたら幸いです。 http://aspect-design.info/2014/

HappyNewYear_2014.png

とりあえず、今月は年賀状のデザインに合わせております。
バックは春の海、っていうか、パソコン(OSX Mavericks)のデスクトップイメージですけどね。

キーボードの矢印キーやクリック、ドラッグ操作で、全ページを連続的にご覧頂けるようにしてみました。
Windows 8 や、スマホのタッチパネルでもスムーズに操作出来る(ハズ)です。
色々凝った(つもりの)インターフェースですので、変な挙動、お気づきの点など有りましたら、ご連絡頂ければ幸いです。

本年も、どうぞよろしくお願い申し上げます。




タグ:日記 年賀状
nice!(0)  コメント(2)  トラックバック(0) 
共通テーマ:日記・雑感

すごいぞ FreeHand:HTMLパブリッシュ [FreeHandで行こう!]

【 FreeHandで行こう!】その62 <すごいぞ FreeHand:HTMLパブリッシュ>

***

このシリーズでは、FreeHand のデザインツールとしての優位性を紹介しています。
FreeHand の情報を求めている方や、Illustrator ユーザーの方にも、お役に立てれば幸いです。

今シリーズは、 「すごいぞ FreeHand」と題してざっくばらんに話を進めています。
初めてお越しの方は、FreeHand をご理解頂くために 総集編か カテゴリーTOP もご覧頂ければ幸いです。

     → FreeHand _総集編はこちら    → FreeHand _カテゴリーTOPはこちら

***


すごいぞ FreeHand シリーズ第4弾。(→ 第1弾第2弾第3弾 はこちら)
今回のお題は「HTMLパブリッシュ! by FreeHand」です。


FreeHand からの HTMLパブリッシュについては、以前に何度か書いたことがありました。 →123
恐らく、FreeHand の HTMLパブリッシュ機能を実務に使われている方は極めて少数派と思われますし、実際バグも多く残ったままになっている、最新のフォーマットではない、、、など、あまり強くお勧め出来るものではないのですが、上手く使えば強力な武器になると確信するところもありますので、今回弊社2014年版 WEBサイト作成を例にして解説したいと思います。



その前に、現在の弊社 WEBサイトをご覧下さい。正月にアップした時より、機能面も充実してきました。
ASPECT_HP_201403.jpg
実装機能:
●マウスで、スマホ風に画面ドラッグ、またはクリックで横方向にページ単位スクロール。
●ダブルクリック拡大表示機能も装備。(対応はブラウザによります)
●各コンテンツ1P目のダブルクリックに限り、フレーム解除+フルスクリーン拡大表示。(同上)
●キーボードの矢印 key(←、→)で、高速ページ間移動。↑キーはコンテンツ切替。
●ウインドウ下のメニューからも、連続クリックのページ送りが可能。

上記は独自機能として Javascript で実装させたもののため、FreeHand のHTMLパブリッシュ機能とは直接関係ないものですが、Javascript と連携させる方法なども、併せて解説してみたいと思います。


まず、FreeHand のHTMLパブリッシュ機能を利用する最大のメリットは、考えながら制作しているデザイン段階のデータを、そのままコーディングされた状態に書き出し出来るという事にあります。
(相互リンクを伴うサイト全体構成までもを一気に書き出し出来るのです)


通常、コーディングされたHTMLデータを得ようとすると、デザインパーツを作成し、画像に書き出し、CSSでデザインを固めて行くという手順を踏む必要があり、デザインを試行錯誤しながら一連の作業を続けるという同時進行は出来ません。
その為、デザイン提案の段階ではコーディングまで作り込む事は現実的で無く、デザイン画像という形でプレゼンするということになりますが、これでは、リンクも張れない、動く部分も作れないということになってしまいます。(口頭での説明か、別サンプルでの説明になってしまいます)

FreeHand のHTMLパブリッシュ機能を利用すれば、デザインデータがそのままオブジェクト単位にレイヤー分けされ、リンクや引数、CSS記述を生かしたまま Dreamweaver で編集可能な HTMLデータとして出力されます。Dreamweaver 上で Javascript を組み込む等すれば、実際のサイトと同レベルのものが短時間で出来上がってしまうという離れ業をやってのけてくれるのです。

実際、弊社2014年版サイトでは、Javascript の開発には多くの時間を割きましたが、コンテンツそのものは短期決戦で制作完了する事が出来ました。
デザインを作りながら、同時に動きのチェックも出来るため、動きを伴うインターフェースデザインの開発には大変有効と確信するところです。


それでは、実際の FreeHand のコンテンツデータをご覧下さい。
FH_HTML_2014.jpg
1P当たりのサイズを 1000 × 650px として横に10Pで 10000 × 650px の横長コンテンツ。
7P分(都合70Pのデータということになります)プラス Site Map(目次)ページの合計71Pデータです。


HTML パブリッシュの設定は以下のようにします。
FH_HTML_SetUp.jpg
レイアウトは「レイヤーで配置」を選びます。(テーブルだと、適当に分割されたスライス画像になります)
ベクターアート、画像とも PNG形式がおすすめです。PNG形式の詳細設定は PNG書き出し設定に準じます。
背景透明にする為に 32ビット、アルファチャンネルを含むを選択してください。解像度は別の解像度を選択してあっても72dpiに書き出されます。
PNG以外の形式の選択も出来ますが、JPG は背景透明に設定出来ませんし、品質設定が選択出来ないバグもあるため、お勧め出来ません。
SWFは良い感じにパブリッシュ出来ますが、近年のブラウザはSWF形式と相性が良くないため、やはりお勧め出来ません。

ちなみに、DOCTYPE は、HTML 4 になります。(HTML4 は、現状で最も普及しているバージョンと考えられますので、1世代前のフォーマットとはいえ、まだまだ大丈夫でしょう。)
ただ、1行目に DOCTYPE 宣言の記述がありません(10数年前の仕様ですから)ので、4.01の記述を追加すると良いでしょう。記述が無いと Javascript の動作に影響が出る場合があるようです。



また、リンクパレットはこんな感じです。
FH_Link.jpg

onmouseUp="Cancel=1 等は、マウスアップ時にスクロールをキャンセルする為の引数記述です。
メール送信は、mailto: を記述すれば使えます。(最下段参照)


FreeHand から HTMLパブリッシュを行うと、僅か1〜2分でパブリッシュ完了。HTML・CSSコードの作成と、全ての画像データが72dpiに整えられて書き出されます。(外部画像データとして配置されたものは、倍率やトリミングが変更されていなければそのまま利用されます)



制作にあたっては、以下の点も参考にしてください。(順不同)

●パブリッシュデータは改行無しで文字詰め表示されているため、Dreamweaver のコマンドメニュー
 「ソースフォーマットの適用」を適用して編集しやすいように変換します。

●パブリッシュデータは基本的に左寄りに表示されます。大外枠の div style="position:static;" を
 "position:relative;" に変更し、centerタグを追加すればセンター表示するようになります。

●文字の行間指定は「=、+、%」と3種あるうちの「+」を使用してください。行間の再現性が高まります。

●フォントは、指定のものに加えて一般的な MSP、osaka が追加されますが、昨今のフォントも追加すると
 良いでしょう。私はメイリオとヒラギノを加えるようにしています。

●テキストも、画像も、グループ化(単独でも)するとベクターアート扱いになります。

●CSSは ページ毎に head に記述されるタイプですが、全ページを統一すれば、外部ファイル化が便利です。
 CSS記述を統一するには、全ての書式を含むテキストブロック(全角スペースに指定すれば良いでしょう)
 を各ページの最深部分に置いておきます。
 その後、Javascript や メタタグの追加なども含めて、Dreamweaver で head 部分を一括差替えします。

●カラーマネジメントは、「なし」を選択するとカラー表示領域が最大となり発色が良くなります。

●単位は「ピクセル」を選択します。(ドキュメント左下のポップアップメニューより)
 自動的に カーソル移動距離、グリッド(吸着)もピクセル単位になり、イラレで言うところの
「ピクセルグリッドに整合」(ピクセルにスナップ)状態になりますが、残念な事に Mac OS10.4 以降
 グリッドが機能しなくなってしまった(OS非対応、Windows は未確認)ため、無用なアンチエイリアスが
 掛からないようにするためには数値ウインドウで整数値を再入力することが必要になる場合が有ります。

●読み込みは下のレイヤーから優先されます。先に表示させたいものを下のレイヤーに移動させます。

●自動生成される画像は下から順に番号で管理されるため、上下関係を変更するとファイル名も変わります。
 キャッシュを読んだ場合、違う画像が表示される可能性があるため更新時には注意が必要です。

●自動番号名ファイルによる上記問題を回避するには、固有ファイル名の画像を配置するようにします。
 (自動生成された画像のファイル名を固有名に変更して再配置すれば良いでしょう)

●配置ファイルでも、サイズを変更したりグループ化すると自動生成画像として書き出されます。

●マスク内の画像が正しく表示されない場合は、マスクをグループ化して自動生成画像にします。

●埋め込み画像が上手く表示出来ない場合も、グループ化して自動生成する事で回避出来ます。
 ブラウザから直接ドロップしたような画像も、グループ化しておけば確実に書き出されます。

●Flash を表示させるには swfファイルを画像同様に配置することで可能ですが、セキュリティ強化された
 ブラウザに対応させる為には Dreamweaver側でエンベッド対策させるのが安全でしょう。
 プレゼン使用目的であればなんら問題ありませんが。



FreeHand の HTMLパブリッシュ機能は、Ver.7(1997)に実装され、若干の改良と機能簡略化が行われた Ver.9 以降は、バグ修正も行われないまま放置されて開発が終了してしまいましたが、開発当時の最先端の機能と使いやすいインターフェースが搭載されていた為、今でも上手く使いこなせば、見劣りせずに使用することが出来るものとなっています。(HTMLバージョンは、1997年に策定された当時最新の HTML4.0です。)

なにより、試行錯誤しながら制作している「生」のデザインデータが、一気に複数ページのサイトとして、ページ間リンクや引数まで伴って、そのままコーディングされた状態でパブリッシュされるという点が、代え難いメリットと確信出来るハズです。

プレゼンまでに時間が限られていても、完成に近い形のコーディング済みデータでデザイン確認出来るというメリットは、FreeHand が WEB用デザインツールとしても、類い稀な優位性を有していると痛感出来る部分だと思います。
勿論、プレゼン用途に限らず、弊社サイトのように実使用運用も問題ありません。
ALT属性ぐらいは追加記述しておいた方が良さそうですけれども...。



追記:
弊社サイトでは、テキストや画像が選択出来なくしてあるため、1枚の画像になっているのか? との問い合わせをいただきましたが、勿論画像にしてあるのではありません。
ドラッグによるスクロールを行う場合、選択されてしまうとスクロール操作が出来なくなる為、Javascript で選択出来ない仕様としています。テキストもそのまま生きていますので、検索などにも有効に機能します。



追記:
弊社サイトは、PC表示時には iframe にコンテンツを表示し、iPad、iPhone、android などデバイス機器には直接コンテンツ表示を行い表示領域を調整します。アクティブではありませんが、パッシブなレスポンシブ対応を実現しています。


↓ iPhone での表示(天地固定:横スクロール。 横位置時も天地固定になります。)
iPhone_Response.png

↓ iPad での表示(横位置表示では 1ページを最適表示。横スクロール。 縦位置時も天地固定になります。)
iPad_Response.png

android デバイスは多様性があるため、機種により表示が異なる場合があると思われます。



追記:おまけ機能
おまけ機能として、iframe 内に外部サイトを読み込ませる機能があります。(参照サイト用に使用)
当初、Yahoo サイトを読み込ませるデモンストレーションアドレスをこちらで公開しておりましたが、
著作権がらみや悪意ある使用も想定されるとのことで、Yahoo が禁止対策を実施したことに合わせ
アドレスを削除しました。(2014.10)



***


シリーズを続けています。初めてお越しの方は、総集編か、カテゴリーTOP(旧い順)からご覧下さい。
  →総集編 では、FreeHand の真の実力をご覧頂けます。
  →続・総集編 は、総集編の続編です。総集編と合わせてご覧下さい。
  →FreeHand_使い方 DTP編、FLASH編など含め、全10編。
  →FreeHand_INDEX はこちら
  →付録編 では、ざっくばらんな情報をご覧いただけます。諸々入れて全10編。
  →Tips編 1分で出来る小ネタ集など。全5編。
  →FreeHand VS CS4 では、最新版の Illustrator CS4 と比較しています。どうよ。
  →FreeHand VS CS5 では、最新版の Illustrator CS5 と比較しています。どうよ。どうよ。
  →FreeHand_入門編 Illustrator の作業が、FreeHand ではこんな感じ。全10編。
  →FreeHand_番外編 実践的に使える裏技テクニックほか、様々な情報を提供。諸々10数編。
  →すごいぞ FreeHand 編 今なお圧倒的な生産性の高さを誇る FreeHand の底力をご覧頂けます。
  →FreeHand VS Illustrator 初期バージョンから最新バージョンまで、ガチンコ比較してみました。

  → FreeHand インストール アクチベーションサーバ廃止に伴い、シリアルナンバーが公開されました。

  → FreeHand 関連 画像検索(一覧表示) 画像からリンクをたぐっていただけます。


***




  → FreeHand カテゴリー 一覧はこちら