Warning: Cannot modify header information - headers already sent by (output started at /export/sd06/www/jp/r/e/gmoserver/1/2/sd0014412/blog.x-yz.co.jp/kasukasu/wp-content/themes/stinger20130825/functions.php:1) in /export/sd06/www/jp/r/e/gmoserver/1/2/sd0014412/blog.x-yz.co.jp/kasukasu/wp-includes/feed-rss2.php on line 8
CMS blog @kasukasu_xyz http://blog.x-yz.co.jp/kasukasu kasukasu_xyzがCMSについて客観的に書きながら、最終的に Web Meister につなげるblog Tue, 29 Nov 2011 07:25:41 +0000 ja hourly 1 http://wordpress.org/?v=3.6 HTML5対応CMSの条件 http://blog.x-yz.co.jp/kasukasu/cms/263 http://blog.x-yz.co.jp/kasukasu/cms/263#comments Tue, 29 Nov 2011 07:25:41 +0000 kasukasu_xyz http://blog.x-yz.co.jp/kasukasu/?p=263 HTML5の話題が出ない日はないぐらいになっているが、Web屋としてHTML5で実装した後、それを運用できるCMSとはどのようなものなのか考察したい。

HTML5対応CMSの条件

  1. HTML5リッチインタフェース対応
  2. HTML5セマンティクス対応

はこの2点であると思われる。

HTML5リッチインタフェース対応

HTML5関連技術ではHTML5 canvasタグ+JavaScript、SVGなどによって動きのユーザインタフェースを実装することが可能である。これらをCMS化にする為には更新に関わる部分を外部ファイルとしてXMLなどで持つことが有効である。特にSVGはSVG自体がXMLである。つまり、ユーザインタフェースとコンテンツの分離をし、コンテンツをXMLで管理しておくことそれができるCMSである必要がある。

そのようなCMSであればコンテンツをXML化しておくことにより、必要なユーザインタフェースを追加すれば、それぞれのデバイスにふさわしいリッチなユーザエクスペリエンスを提供することができるようになる。

HTML5セマンティクス対応

HTML5マークアップの心得と作法

http://www.slideshare.net/futomihatano/html5-9066829

HTML5ではHTML4の文書構造やコンテンツの意味づけとは違うタグを設置する必要がある。文書構造では記事全体 article とその一部分 section タグが存在する。コンテンツの粒度がページ単位から記事内の一部分 section にまで細分化されることになる。そのため、CMSにおいてもコンテンツの粒度がページ単位ではなく section 単位で扱える必要がある。

ワンソース・マルチデバイスCMS – Web Meister

コンテンツ構造に関係なくコンテンツを再利用し、HTMLをワンソース・マルチデバイス化、必要に応じてデバイス特性を生かしたコンテンツをデバイス個別に用意することができる。各デバイスに適合したプログレッシブ・エンハンスメントやリッチインタフェースのコンテンツをXMLで管理することも可能である。ユーザインタフェースとコンテンツの分離、サイト階層構造とコンテンツをXMLで管理し、HTML5タグのarticleとsectionに対応し、section単位でのコンテンツの再利用が可能になっている。そのため、レスポンシブ・レイアウト+スマートフォン専用サイトを制作・管理が可能である。また、管理画面はマニュアルを必要としない操作性を目指して、XHTML、XMLを知らなくてもコンテンツ更新ができるようになっている。

文章としてはつめが甘いですが2つの条件を満たしているということを今日言いたかったのです。

 

]]>
http://blog.x-yz.co.jp/kasukasu/cms/263/feed 0
レスポンシブWebデザインの使い道って? http://blog.x-yz.co.jp/kasukasu/cms/255 http://blog.x-yz.co.jp/kasukasu/cms/255#comments Wed, 24 Aug 2011 07:02:53 +0000 kasukasu_xyz http://blog.x-yz.co.jp/kasukasu/?p=255 SwapSkills さんが日本に紹介して急速に広まりつつあると思う「Responsive Web Design:レスポンシブ・ウェブ・デザイン」についてまとめてみました。

「Responsive Web Design:レスポンシブ・ウェブ・デザイン」
過去においてはリキッドデザイン(サイズ可変デザイン)と呼ばれ、主にPCの画面幅に応じて横幅が拡大・縮小するHTMLレイアウトのこと。
過去のリキッドデザインとの違いは全ての横幅で同一のレイアウトではなく、CSS3 Media Queries によって横幅指定でレイアウトが変更できるようになったこと。

以下を順番に読んでいくとレスポンシブWebデザインの大枠を理解できると思います。

スマホ対応の新潮流「レスポンシブWebデザイン」とは?
http://ascii.jp/elem/000/000/613/613028/
レスポンシブ・ウェブデザインって何?
http://all-web-blog.blogspot.com/2011/03/blog-post_09.html
WebサイトをiPhoneに対応させる -レスポンシブ・デザイン-
http://designblog.ecstudio.jp/design-2/responsive-design.html
iPhoneやiPad等にもWebサイトを最適化するレスポンシブWebデザイン構築に役立つフレームワークやTipsいろいろ
http://kachibito.net/web-design/responsive-web-design-resource.html
Media Queries (レスポンシブ・デザインを採用したWebサイト集)
http://mediaqueri.es/

レスポンシブWebデザインの使い道

これだけ見るとレスポンシブWebデザインのWebサイトを一つ用意すれば全てのデバイスに最適化できるように思えますが基本的にはPC向きであってモバイル向きではないと思います。

[翻訳]モバイル向けの CSS Media Queries は見掛け倒しである
http://unformedbuilding.com/articles/css-media-queries-for-mobile/

  • 核となる前提:モバイルにおいてスピードはより重要である
  • 画像のスケールをブラウザ任せにするのはバッドアイディアである
    • 最大サイズの画像=不必要に大きなファイルのダウンロード
    • ブラウザによるリサイズは CPU とメモリに負荷がかかる

要するにデータ受信量はPCサイトを見るのと変わらないということです。モバイル対応において固定幅のPCサイトには勝るがモバイル専用サイトには及ばないというのがレスポンシブWebデザインということになります。

固定幅PCサイト<レスポンシブWebデザイン<モバイル専用サイト

それでは固定幅PCサイトとモバイル専用サイトでいいではないかということになりますが
facebookページのようにiframeでWebサイトを呼び出すようなものがあります。

レスポンシブWebデザインでつくっていれば別途、横幅に合わせたWebサイトをつくる必要がありません。モバイルの為ではなくPCサイトのスキンに合わせる為の柔軟性が増すと思われます。

PCで見るのがメインのレスポンシブWebデザインサイト+モバイル専用サイトが今後の主流になっていくのではないでしょうか?

固定幅PCサイト+モバイル専用サイト
レスポンシブWebデザイン+モバイル専用サイト

のどちらでも管理可能な CMS – Web Meister を今後とも宜しくお願い致します。

Web Meister

]]>
http://blog.x-yz.co.jp/kasukasu/cms/255/feed 0
株式会社サイズ4年目を迎えることができました http://blog.x-yz.co.jp/kasukasu/xyz/253 http://blog.x-yz.co.jp/kasukasu/xyz/253#comments Fri, 01 Jul 2011 03:18:05 +0000 kasukasu_xyz http://blog.x-yz.co.jp/kasukasu/?p=253 お世話になっております。
株式会社サイズ代表取締役糟谷です。

本日、7月1日をもちまして4年目を迎えることとなりました。
リーマンショックの直前に起業し、一向に景況が改善しない中、
生き残ることができましたのは皆様のご支援あってのことです。

前期3年目は
XML CMS – Web Meister により、PC・携帯・スマートフォンへワンソースマルチデバイス化した
Webサイトを制作するという創業当初からの事業コンセプトをようやく認知いただき、
新規のお客様が獲得できるようになりました。

今期4年目は
上記事業でのトップクラスのWebインテグレーターとしてより多くのお客様の
お役に立てるよう体制を整え事業拡大を行っていきます。

また、弊社は既存のお客様から切られたことがありません。
事業を拡大するにあたっても既存のお客様への感謝の気持ちを忘れずに
既存のお客様へのサービスを第一に展開してまいります。

企業は3年越えると生存率が急激に上がると言われていますので
10周年を目指して日々努力してまいりたいと思います。

より一層のご協力を何卒お願い致します。

]]>
http://blog.x-yz.co.jp/kasukasu/xyz/253/feed 0
【株式会社サイズ】Facebookページはじめました 2011年5月ニュースレター http://blog.x-yz.co.jp/kasukasu/cms/web-meister/248 http://blog.x-yz.co.jp/kasukasu/cms/web-meister/248#comments Tue, 24 May 2011 05:07:33 +0000 kasukasu_xyz http://blog.x-yz.co.jp/kasukasu/?p=248 3月11日に発生した東日本大震災によりビジネス環境が大きく変化した業種・業界も多いと思います。Webインテグレーション業界もその例外ではありません。

震災により以下の2点が明らかになりました。・内部による情報配信体制の必要性・Webサイトのデータ消失リスクまた、震災以前からスマートフォン市場が急拡大しその勢いは止まりません。

弊社ではCMS – Web Meister によるワンソース・マルチデバイスサイト構築手法を確立し、技術評論社【Web Site Expert】で発表の機会をいただきました。#33「ワンソース・マルチデバイスによるコーポレートサイトの制作手法」
さらに#35「特集 第3章:スマートフォン対応サイト制作のポイント」ではスマートフォンに焦点を絞った記事を執筆させていただきました。
http://www.x-yz.co.jp/about/book.html#book_2

また、6月4日(土)開催:第27回WebSig会議「来るべきスマホ時代のコミュニケーションデザイン~技術とコミュニケーションデザインの両側面から」
「Web屋が知っておきたいスマートフォンの現在(いま)」というテーマで講演を行ないます。是非、ご参加ください。
http://www.x-yz.co.jp/news/20110519_1.html
・PC・携帯・スマートフォンサイトのWebインテグレーション・CMS – Web Meister によるワンソース・マルチデバイス弊社の2本柱が上記の問題点を解決するお役にたてると考えております。
Web制作・コンサルティング、セミナー、執筆活動等を通じ、皆様のご協力が必要となる機会も増えるかと思います。

facebookページをはじめましたので
http://www.x-yz.co.jp/
よろしければ Like ボタンをクリックしてください。

引き続きご愛顧、ご支援をよろしくお願い申し上げます。

―――――――2011年度トピックス

■Webインテグレーション
2011.04.26(株)サイズ、「カプコンフィギュアビルダー」の携帯・スマートフォンサイトを「jQuery Mobile」で構築
http://www.x-yz.co.jp/news/20110426_1.html
今後のスタンダードとなる「jQuery Mobile」にいち早く取り組みました。

■CMS – Web Meister
2011.03.31法政大学様オフィシャルサイトへの導入事例を掲載
http://www.web-meister.jp/case/case_hosei.html
震災直前の導入でしたが震災当日からの情報発信に大きな力を発揮しました。

■講演・執筆活動
2011.06.04:糟谷 博陸/第27回WebSig会議
「来るべきスマホ時代のコミュニケーションデザイン~技術とコミュニケーションデザインの両側面から」
「Web屋が知っておきたいスマートフォンの現在(いま)」
http://www.x-yz.co.jp/news/20110519_1.html

2011.03.28:山本 聰 共著/ワークス・コーポレーション
Web検定ガイドブック「Webリテラシー/プロジェクトマネージメント章」第2版を執筆・監修
http://www.x-yz.co.jp/about/book.html#book_1

2011.03.26:糟谷 博陸 著/技術評論社【Web Site Expert】
#35「特集 第3章:スマートフォン対応サイト制作のポイント」
#33「ワンソース・マルチデバイスによるコーポレートサイトの制作手法」執筆
http://www.x-yz.co.jp/about/book.html#book_2

2011.02.18:糟谷 博陸 /PDBマーケティング主催スキルアップ講座
「リード獲得を10倍効率化するアクセス解析手法 」講演
http://www.x-yz.co.jp/news/20110218_1.html

被災地の一日も早い復興を心よりお祈り申し上げます。
以上、今後とも宜しくお願い致します。

]]>
http://blog.x-yz.co.jp/kasukasu/cms/web-meister/248/feed 0
法政大学オフィシャルサイトをリニューアル、CMS- Web Meister を導入しました。 http://blog.x-yz.co.jp/kasukasu/cms/240 http://blog.x-yz.co.jp/kasukasu/cms/240#comments Tue, 05 Apr 2011 05:28:36 +0000 kasukasu_xyz http://blog.x-yz.co.jp/kasukasu/?p=240 「自由と進歩」を基礎に、15学部を擁する日本有数の総合大学として、リーディング・ユニバーシティを目指して、激動する21世紀の難局を打開できる『自立的で人間力豊かなリーダーの育成と時代の最先端を行く高度な研究』を行う法政大学。

法政大学オフィシャルサイトをリニューアル、CMS- Web Meister を導入しております。震災直前の公開でしたが震災当日からのWebサイトでの情報公開を時間単位で適切に行うことができています。コーポレートサイトは少なくともニュースなど即時対応を求められるものに関しては内部からの情報発信を行える体制を整えておく必要があると思われます。

法政大学オフィシャルサイト

法政大学オフィシャルサイト

]]>
http://blog.x-yz.co.jp/kasukasu/cms/240/feed 0
「Web Site Expert #35/特集 第3章:スマートフォン対応サイト制作のポイントを執筆 http://blog.x-yz.co.jp/kasukasu/xyz/235 http://blog.x-yz.co.jp/kasukasu/xyz/235#comments Mon, 28 Mar 2011 04:13:53 +0000 kasukasu_xyz http://blog.x-yz.co.jp/kasukasu/?p=235 『Web Site Expert #35』
特集
主役はスマートフォン~スマホ時代のサイト構築

第3章:スマートフォン対応サイト制作のポイント

Webサイト制作において,PCや携帯だけでなく,スマートフォン対応が必須になってきました。「スマートフォン対応のWebサイト」と,その制作方法に焦点を当てて解説いたします。

『Web Site Expert #33』
ワンソース・マルチデバイスによるコーポレートサイトの制作手法

Android端末の登場により,マルチデバイス化が促進しているWeb制作の分野において,コーポレートサイトはどうあるべきか,制作視点から考察します。

よりもだいぶわかりやすく書けたと思います。

技術評論社『Web Site Expert #35』

2011年3月26日発売
B5判/116ページ
定価1,554円(本体1,480円)

技術評論社 Web Site Expert #35

Web Site Expert #35

]]>
http://blog.x-yz.co.jp/kasukasu/xyz/235/feed 0
Webサイトのスマートフォン対応で思うこと http://blog.x-yz.co.jp/kasukasu/cms/226 http://blog.x-yz.co.jp/kasukasu/cms/226#comments Fri, 04 Feb 2011 11:29:38 +0000 kasukasu_xyz http://blog.x-yz.co.jp/kasukasu/?p=226 Webサイトのスマートフォン対応 7つの基本ルール | Web担当者Forum
http://web-tan.forum.impressrd.jp/e/2011/01/31/9607
中々、良記事だと思いますが一部こう書いた方がわかりやすいのではないかと思い、

「Web Site Expert #33/「ワンソース・マルチデバイスによるコーポレートサイトの制作手法」
http://blog.x-yz.co.jp/kasukasu/cms/194
の続編のようなものを執筆中なのでちょっと思うことをまとめてみました。

ここでのWebサイトのスマートフォン対応という言葉には

  • PCサイトをスマートフォン用に最適化
  • スマートフォン用サイトの制作
  • という2つの意味があると思います。それぞれどこで使えるか分類することでわかりやすくなるのではないかと思います。

    Webサイトのスマートフォン対応 7つの基本ルール | Web担当者Forum 記事中の

    3.リンクだと一目でわかるようにする
    4.タッチ操作に最適な行間や余白をとる
    6.Flashは不可! アニメgifやアプリ連携で対応
    はPCサイトをスマートフォン用に最適化、スマートフォン用サイトの制作の両方で使えるTipsです。

    2.サイドバーやメニューは絞ってシンプルにする
    5.リキッド(可変幅)でデザインする
    スマートフォン独自HTMLテンプレートを制作する必要があるのでスマートフォン用サイトの制作のtipsです。

    特に5.リキッド(可変幅)でデザインする
    はデザイン、マークアップについて高いスキルが必要となります。
    スマートフォン用サイトだけならまだしもPCサイトも含めた
    ワンソース・マルチデバイスを行うのは相当難しいと思われます。

    7.HTML5+CSS3を積極的に活用する
    HTML5とCSS3は分けて考えた方が良いと思います。
    PCサイトをスマートフォン用に最適化する場合、HTMLは同じでCSS3のみ実装が効率的だと思います。
    スマートフォン用サイトを制作する場合は、HTML5+CSS3を積極的に活用して問題ないと思います。

    1.スマートフォン対応の基本はPCサイトから
    携帯サイトを独自仕様を使わずにWeb標準で作られていればそのまま携帯サイトが使えるので一概に言えないと思います。
    これは[PR]のポジショントークだと思いますが僕もポジショントーク的には
    1.スマートフォン対応の基本はPCサイトから
    になります。

    かなり思うが多い文章になりました。

    ]]>
    http://blog.x-yz.co.jp/kasukasu/cms/226/feed 0
    ad:tech tokyo 2010 にサイズが Web Meister を出展しました。 http://blog.x-yz.co.jp/kasukasu/xyz/209 http://blog.x-yz.co.jp/kasukasu/xyz/209#comments Thu, 27 Jan 2011 06:49:16 +0000 kasukasu_xyz http://blog.x-yz.co.jp/kasukasu/?p=209 ad:tech tokyo 2010「マーケティング革命から経営維新まで:新たなビジネスモデルを創出する国際会議」に株式会社サイズが Web Meister を出展しました。大勢の方にご来場いただき心よりお礼申し上げます。

    Webサイト:→ http://www.adtech-tokyo.com/ja/

    ad:tech tokyo 2010 開催概要

    開催日
    2010年10月28日(木) 10月29日(金)

    会場
    ザ・プリンス パークタワー東京 コンベンションホール
    〒105-8563
    東京都港区芝公園4-8-1
    TEL:03-5400-1111

    ad:tech tokyo 2010

    ]]>
    http://blog.x-yz.co.jp/kasukasu/xyz/209/feed 0
    宣伝会議「新・Web制作見積もり基準セミナー」の講師を行いました。 http://blog.x-yz.co.jp/kasukasu/xyz/203 http://blog.x-yz.co.jp/kasukasu/xyz/203#comments Thu, 27 Jan 2011 06:40:47 +0000 kasukasu_xyz http://blog.x-yz.co.jp/kasukasu/?p=203 宣伝会議が、Web制作会社、広告会社、制作会社のために、新たな見積もり・請求の体系化と企画・プロデュースの価値付けの宣伝会議方法を学ぶ「新・ Web制作見積もり基準セミナー」を開催いたしました。
    株式会社サイズより代表取締役/プロデューサー糟谷博陸が講師として参加いたしました。定員を越える60名の方に参加いただきました。多数の方に参加いただき、あらためてお礼申し上げます。

    開催概要

    開催日 2010年8月5日(木) ※1日集中
    講義時間 11:00-17:00
    定員 40名
    受講料 48,000 円 (税込)
    会場 313南青山ビル2階
    ]]>
    http://blog.x-yz.co.jp/kasukasu/xyz/203/feed 0
    「Web Site Expert #33/「ワンソース・マルチデバイスによるコーポレートサイトの制作手法」を執筆 http://blog.x-yz.co.jp/kasukasu/cms/194 http://blog.x-yz.co.jp/kasukasu/cms/194#comments Thu, 27 Jan 2011 03:10:06 +0000 kasukasu_xyz http://blog.x-yz.co.jp/kasukasu/?p=194 ワンソース・マルチデバイスによるコーポレートサイトの制作手法

    Android端末の登場により,マルチデバイス化が促進しているWeb制作の分野において,コーポレートサイトはどうあるべきか,制作視点から考察します。

    それなりに一所懸命書きました。

    技術評論社『Web Site Expert #33』

    2010年11月25日発売
    B5判/112ページ
    定価1,344円(本体1,280円)

    技術評論社 Web Site Expert #33

    Web Site Expert #33

    ]]>
    http://blog.x-yz.co.jp/kasukasu/cms/194/feed 0