広告企画デザイン|ホームページ 会社案内 ロゴマーク 似顔絵広告 キャラクターデザイン アニメーション 映像
企業の魅力を価値あるデザインに アート&デザイン タッグ SINCE2001
  • コンセプト
    • 考え方
    • 経営改革とデザインの力
    • エンターテイメント研究会
    • 専門家派遣
    • ロゴタイプについて
  • 会社案内
    • 会社概要
    • タッグができること
    • タッグを組む
    • 制作の流れ
    • デザインブログ
  • 作品事例
    • 作品一覧
    • タッグ似顔絵創作課
  • お問合せ
    • お問合せ・ご相談
    • サイトマップ
Art & Design Blog

「ホームページ制作ソフト」カテゴリーアーカイブ

ホームページ制作 使用ソフト紹介&メイキング

投稿日時: 2017年6月11日 投稿者: TAG

鎌ケ谷市で広告企画デザイン制作をしているアート&デザイン タッグ 田上です。
今回はホームページ制作の内容を一部紹介します。
今回紹介するのは、企画が出来上がり具体的な制作の段階です。

パルホームサービスさまのホームページ制作を例に紹介させて頂きます。

▼クリックして実際のホームページへ

使っているソフトはAdobe Creative Cloud
・IllustratorCC
・Xd CC
(Adobe Experience Design CC )
・AnimateCC
・MuseCC
・DreamweaverCC

などを駆使して作りました。

 

Adobe Creative Cloud

Adobe Creative Cloud

IllustratorCC

IllustratorCC

Adobe Experience Design CC

Adobe Experience Design CC

AnimateCC

AnimateCC

DreamweaverCC

DreamweaverCC

MuseCC

MuseCC

 

 

 

 

 

Adobe CreativeCloudはライセンス契約でAdobeソフトウエア製品すべてが使えます。
また、アップデートと過去のバージョンもいくつか前まで利用可能。20Gのストレージとモリサワフォントもいくつか入っています。

ではどのように作っているか説明すると
IllustratorCC
・IllustratorCCでは主にホームページデザインを作るために使用します。いきなりホームページデータは作りません。まず、見る人にわかりやすく、なおかつユニークなデザインを考え、提案します。最初にトップページデザインのみ作り方向性が決まった後、全ページのデザインデータを作り確認しながらお客様と何回もやりとを行います。
デザインデータですべてOKをいただいた後にホームページのデータに変換していきます。

他のホームページ制作者はPhoto shopなどでデザインする方もいます。

Illustratorで作る理由としては

Illustrator画面 使い慣れたソフトが一番の時間短縮。

・20年以上使っているソフト
・ベクターデータ(どんなに拡大しても荒れないデータ形式)だから
・慣れているからデザインしやすい

Adobe Experience Design CC
Illustratorデータで作ったデータをXd上に変換。
Xdは、まだベータ版のソフトだが、何案件か使って時間短縮にもなったので利点をご紹介。

Xd画面。ドラック&ドロップでボタンからのページリンクが簡単に貼れる

・画像データなどにもリンクを貼れるので実際のホームページのイメージに近くページ移動が確認できる。
・プリント不要。お客様にメールでリンクを送ってインターネット上で確認できる。
・この段階の修正であれば安易にできるので時間短縮になる。
・軽快に動く使用感。特に縮小拡大はどんなソフトよりもスムーズ。

 

MuseCC
・トップページは、スクロールすると画像、文字、写真、イラストなどに自由な動きがつけられる、MuseCCを使用。いろんな動きがつけられるが、やりすぎると分かりづらくなるのでシンプルな動きを心がけた。欠点はHTMLのコードが複雑で書き出し後変更しづらい。DreamweverCCではプレビューできないなど、部分的に扱いづらい。

Muse

Muse編集画面

 

AnimateCC
AnimateCC(旧Flash)はタイムライン上で動きをつけFlashアニメーションが作れる。HTML5用のJavaScriptデータに書き出しiPad、iPhoneなどでも見られるようになった。

AnimeteCC編集画面。トップページのイラスト鉛筆画のみの画像と着色済みの画像2つを用意して切り替わるアニメーションデータを制作

 


DreamweaverCCはIllustratorなどで作ったデザインデータをホームページデータへ変換するソフト。HTMLとデザインの指定をCSSデータで作り検索エンジンに嫌われないように最適化したデータを作るためのソフト。

DreamweaverCC編集画面 プレビュー画面、HTMLコード、CSSの編集画面

 

最後の仕上げにHTMLとCSSデータをWordPressに変換。テンプレートをカスタマイズしてオリジナルデザインに仕上げる。

WordPress編集画面 様々なプラグインで拡張でき一度作ってしまえばお客様側でも編集可能。

完全なオリジナルデザインの場合、様々なソフト使用して制作しています。


ホームページ制作のお問合せ・ご相談はこちら



カテゴリー: ホームページ制作ソフト
  • トップページ
  • ▼ブログカテゴリー
    • お知らせ
    • デザイン
    • ▼エンターテイメント研究会
      • エンターテイメント研究会
      • エンタメ相談会
      • エンタメ句会
    • アート
    • ワードプレス
    • 雑学
    • 似顔絵広告

最近の投稿

  • 鎌ケ谷100人カイギVol,02開催! 2019年10月4日
  • 「人生と経営がとことんおもしろくなる勉強会」レポート 2018年7月20日
  • エルメスが贈るシネマ体験「彼女と。」国立新美術館へ 2018年7月16日
  • 第三号 ニュースレター発行しました! 2018年7月8日
  • 第二号 ニュースレター発行しました! 2018年5月8日
  • 第一号 ニュースレター発行しました! 2018年3月8日
  • 千葉県中小企業家同友会 会報誌「経営革新」の表紙に載せていただきました! 2018年2月8日
  • J-WAVEに生出演させて頂きました!! 2018年1月11日
  • 第54回 エンターテイメント研究会「エンタメ句会」開催! 2017年8月27日
  • 81.3FM J-WAVEからラジオが届きました! 2017年8月27日

アーカイブ

  • 2019年10月
  • 2018年7月
  • 2018年5月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年8月
  • 2017年6月
  • 2017年5月
  • 2017年3月

カテゴリー

  • アート
  • エンターテイメント研究会
  • エンタメ句会
  • エンタメ相談会
  • お知らせ
  • デザイン
  • ホームページ制作ソフト
  • ワードプレス
  • 似顔絵広告
  • 雑学
2022年6月
月 火 水 木 金 土 日
 12345
6789101112
13141516171819
20212223242526
27282930  
« 10月    




FaceBook


アート&デザイン タッグ ロゴマーク
    コンセプト
  • ▶︎ワクワクする広告づくり
  • ▶︎誇りが持てる広告づくり
  • ▶︎課題解決型広告づくり
  • ▶︎エンタメ研究会
  • ▶︎ロゴマークについて
    会社案内
  • ▶︎タッグについて
  • ▶︎経営理念
  • ▶︎経営方針
  • ▶︎会社概要
  • ▶︎専門家派遣
    作品事例
  • ▶︎作品一覧
  • ▶︎タッグ似顔絵創作課
  • ▶︎タッグができること
  • ▶︎制作の流れ
    お問合せ
    • ▶︎お問合せ・ご相談
    • ▶︎サイトマップ
    • ▶︎デザインブログ

アート&デザイン タッグ 〒273-0125 鎌ケ谷市初富本町2-6-15 ☎︎047-446-1512  Copyright © All rights reserved.