<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>アスパラガス &#187; ホームページ制作/WEB制作 福岡 | アスパラガス</title>
	<atom:link href="http://www.asparagus.jp/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.asparagus.jp</link>
	<description>ホームページ・WEBコンテンツ制作/SEO/SEMコンサルティングなら株式会社アスパラガス</description>
	<lastBuildDate>Mon, 15 Jun 2015 06:52:34 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.3</generator>
		<item>
		<title>LINEクリエイターズスタンプ　チャレンジ奮闘記～その１～</title>
		<link>http://www.asparagus.jp/blog/web_design/line%e3%82%af%e3%83%aa%e3%82%a8%e3%82%a4%e3%82%bf%e3%83%bc%e3%82%ba%e3%82%b9%e3%82%bf%e3%83%b3%e3%83%97%e3%80%80%e3%83%81%e3%83%a3%e3%83%ac%e3%83%b3%e3%82%b8%e5%a5%ae%e9%97%98%e8%a8%98%ef%bd%9e/</link>
		<comments>http://www.asparagus.jp/blog/web_design/line%e3%82%af%e3%83%aa%e3%82%a8%e3%82%a4%e3%82%bf%e3%83%bc%e3%82%ba%e3%82%b9%e3%82%bf%e3%83%b3%e3%83%97%e3%80%80%e3%83%81%e3%83%a3%e3%83%ac%e3%83%b3%e3%82%b8%e5%a5%ae%e9%97%98%e8%a8%98%ef%bd%9e/#comments</comments>
		<pubDate>Mon, 29 Sep 2014 02:08:06 +0000</pubDate>
		<dc:creator>アスパラガス</dc:creator>
				<category><![CDATA[WEBとかデザインとか]]></category>

		<guid isPermaLink="false">http://www.asparagus.jp/?p=743</guid>
		<description><![CDATA[ついにLINE（ライン）クリエイターズスタンプ「ばぶのすけ★ばぶたろう」の審査が終わりました！ LINEさんがなぜか特急で審査してくれたみたいで、2か月・3か月とかかると思っていた審査が、予想より早く終わりました。ちょっ [...]]]></description>
			<content:encoded><![CDATA[<p>ついにLINE（ライン）クリエイターズスタンプ「ばぶのすけ★ばぶたろう」の審査が終わりました！</p>
<p>LINEさんがなぜか特急で審査してくれたみたいで、2か月・3か月とかかると思っていた審査が、予想より早く終わりました。<br />ちょっとまだ売れる準備ができてないんですけどっ！</p>
<p>ここで一つの疑問が浮上します…。　俺たち、試されている？<br /><br />売れる力があるのか？と、、、。</p>
<p>LINE様はもちろん売れれば売れるほど助かるわけで…。<br />売れないとむしろ審査にかかる手間だけ損なわけで…。<br />もし、売れる力があるなら他のも審査急ぐよ的な？？？<br />売れないなら、審査凍結しちゃうよ的な？？</p>
<p>これはガンバらねば。。</p>
<p><img class="alignnone size-thumbnail wp-image-691" title="名称未設定-1" src="http://www.asparagus.jp/wp-content/uploads/2014/08/ae46b1f460ee46f789c27b264a6cb421-250x250.png" alt="" width="250 " height="250" /></p>
<p>8個めまで登録したスタンプたち、３つはまだ「審査中」にもならず。。。<br />あきらかに、第1弾は早い！これは急いで露出を増やすべし。</p>
<p>次回予告・LINEスタンプ～いかに露出させれるか編vol.１～</p>
<p>そしてこれが審査が通った作品です。<br /><a href="https://store.line.me/stickershop/product/1027113/ja">LINEストアで「ばぶのすけ★ばぶたろう」を見る</p>
]]></content:encoded>
			<wfw:commentRss>http://www.asparagus.jp/blog/web_design/line%e3%82%af%e3%83%aa%e3%82%a8%e3%82%a4%e3%82%bf%e3%83%bc%e3%82%ba%e3%82%b9%e3%82%bf%e3%83%b3%e3%83%97%e3%80%80%e3%83%81%e3%83%a3%e3%83%ac%e3%83%b3%e3%82%b8%e5%a5%ae%e9%97%98%e8%a8%98%ef%bd%9e/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>弊社フード事業 ナチュラルフレンチ・ガレの「2013年 洋風おせち料理」の販売を開始いたしました。</title>
		<link>http://www.asparagus.jp/blog/2013osechi/</link>
		<comments>http://www.asparagus.jp/blog/2013osechi/#comments</comments>
		<pubDate>Mon, 15 Oct 2012 10:02:06 +0000</pubDate>
		<dc:creator>アスパラガス</dc:creator>
				<category><![CDATA[アスパラガスからのお知らせ]]></category>
		<category><![CDATA[アスパラブログ]]></category>

		<guid isPermaLink="false">http://www.asparagus.jp/?p=628</guid>
		<description><![CDATA[毎年リピート率80％以上を誇る、ガレ自慢の洋風おせちセット シェフ特選の食材を贅沢に使った厳選おせち料理。 老舗フレンチシェフならではの魅力もたっぷり詰め込んで、出来る限りお値段を低く抑えたおせちに仕上がりました。 毎年 [...]]]></description>
			<content:encoded><![CDATA[<figure class="w630fig"><a href="http://item.rakuten.co.jp/le-galle/c/0000000107/" target="_blank"><img src="http://www.asparagus.jp/wp-content/uploads/2012/10/spbtn_cate_osechi.jpg" alt="ガレの「2013 洋風おせちセット」" title="ガレの「2013 洋風おせちセット」" width="616" height="120" class="adtgnnone size-full wp-image-630" /></a></figure>

<h2>毎年リピート率80％以上を誇る、ガレ自慢の洋風おせちセット</h2>
<p>シェフ特選の食材を贅沢に使った厳選おせち料理。<br />
老舗フレンチシェフならではの魅力もたっぷり詰め込んで、出来る限りお値段を低く抑えたおせちに仕上がりました。</p>
<p>毎年店頭では<b>400人分（100セット）</b>程のおせち料理を承っておりますが、今年もネット予約販売限定のおせちを数量限定で、ご用意しました。</p>

<h2>新春テレビ特番でも大絶賛いただいた自慢の洋風おせち料理は3種類！</h2>
<div class="w360right">
<h3>ガレの洋風おせちセット </h3>
<dl>
<dt class="f12B">【セット内容】</dt>
<dd>・伊勢海老のヴァプール×1尾（早期ご予約限定）</dd>
<dd>・サーモンの瞬間スモーク×4袋</dd>
<dd>・フランス産 マグレ鴨のスモーク×4袋</dd>
<dd>・博多もち豚の自家製ロースハム×4袋</dd>
<dd>・たらば蟹のフリカッセ×4袋</dd>
<dd>・豊後牛の赤ワイン煮込み×4袋</dd>
<dd>・博多もち豚のテリーヌ×4袋</dd>
<dd>・博多もち豚のリエット×1瓶</dd>
<dd>・豊後牛サーロインのローストビーフ×1枚</dd>
<dd>・ハモン・セラーノ 生ハム×4袋</dd>
<dd>・エスカルゴ ブルゴーニュ風×1瓶</dd>
<dd>・ガレ特製ドレッシング×1瓶</dd>
<dd>以上、12点</dd>
</dl>
<p><a href="http://item.rakuten.co.jp/le-galle/osechi/" target="_blank">≫ ガレ楽天ショップ 「洋風おせちセット」詳細はこちら</a></p>
</div>

<figure class="w260fig"><a href="http://item.rakuten.co.jp/le-galle/osechi/" target="_blank"><img src="http://www.asparagus.jp/wp-content/uploads/2012/10/ban_2013osechi1-250x250.jpg" alt="ガレの洋風おせちセット" title="ガレの洋風おせちセット" width="250" height="250" class="adtgnnone size-thumbnail wp-image-632" /></a></figure>
<br class="clear">



<div class="w360right">
<h3>ガレの洋風おせち ★贅沢セット★</h3>
<dl>
<dt class="f12B">【セット内容】</dt>
<dd>・オマール海老のヴァプール×4尾（早期ご予約限定）</dd>
<dd>・豊後牛サーロインのローストビーフの塊×500g</dd>
<dd>・豊後牛の赤ワイン煮込み×4袋</dd>
<dd>・たらば蟹のフリカッセ×4袋</dd>
<dd>・サーモンの瞬間スモーク×4袋</dd>
<dd>・フランス産 マグレ鴨のスモークの塊×1枚</dd>
<dd>・博多もち豚の自家製ロースハム×4袋</dd>
<dd>・博多もち豚のテリーヌ×4袋</dd>
<dd>・エスカルゴ ブルゴーニュ風×4袋</dd>
<dd>・博多もち豚のリエット×1瓶</dd>
<dd>・ハモンセラーノ 生ハム×4袋</dd>
<dd>・栗カボチャのポタージュスープ×4袋</dd>
<dd>・鴨茶漬け×4袋</dd>
<dd>・ガレ特製ドレッシング×1瓶</dd>
<dd>以上、14点</dd>
</dl>
<p><a href="http://item.rakuten.co.jp/le-galle/osechi-lux/" target="_blank">≫ ガレ楽天ショップ 「洋風おせち 贅沢セット」詳細はこちら</a></p>
</div>

<figure class="w260fig"><a href="http://item.rakuten.co.jp/le-galle/osechi-lux/" target="_blank"><img src="http://www.asparagus.jp/wp-content/uploads/2012/10/ban_2013luxury-250x250.jpg" alt="ガレの洋風おせち 贅沢セット" title="ガレの洋風おせち 贅沢セット" width="250" height="250" class="adtgnnone size-full wp-image-639" /></a></figure>
<br class="clear">


<div class="w360right">
<h3>ガレの洋風おせち ★オードブルセット★</h3>
<dl>
<dt class="f12B">【セット内容】</dt>
<dd>・博多もち豚のテリーヌ×2袋</dd>
<dd>・豊後牛の赤ワイン煮×2袋</dd>
<dd>・海老のトマトソース仕立て×2袋</dd>
<dd>・サーモンの瞬間スモーク×2袋</dd>
<dd>・フランス産 マグレ鴨のスモーク×2袋</dd>
<dd>・博多もち豚の自家製ロースハム×2袋</dd>
<dd>・ハモン・セラーノ 生ハム×2袋</dd>
<dd>・博多もち豚のリエット×1瓶</dd>
<dd>・ガレ特製ドレッシング×1瓶</dd>
<dd>以上、9点</dd>
</dl>
<p><a href="http://item.rakuten.co.jp/le-galle/osechi_hors/" target="_blank">≫ ガレ楽天ショップ 「洋風おせち オードブルセット」詳細はこちら</a></p>
</div>

<figure class="w260fig"><a href="http://item.rakuten.co.jp/le-galle/osechi_hors/" target="_blank"><img src="http://www.asparagus.jp/wp-content/uploads/2012/10/ban_2013hors-250x250.jpg" alt="ガレの洋風おせち オードブルセット" title="ガレの洋風おせち オードブルセット" width="250" height="250" class="adtgnnone size-thumbnail wp-image-642" /></a></figure>
<br class="clear">
]]></content:encoded>
			<wfw:commentRss>http://www.asparagus.jp/blog/2013osechi/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>明けましておめでとうございます。2012年もよろしくお願いいたします。</title>
		<link>http://www.asparagus.jp/blog/info/2012greeting/</link>
		<comments>http://www.asparagus.jp/blog/info/2012greeting/#comments</comments>
		<pubDate>Wed, 04 Jan 2012 05:34:30 +0000</pubDate>
		<dc:creator>アスパラガス</dc:creator>
				<category><![CDATA[アスパラガスからのお知らせ]]></category>

		<guid isPermaLink="false">http://www.asparagus.jp/?p=590</guid>
		<description><![CDATA[皆さん。新年あけましておめでとうございます。 旧年中は格別なご高配を賜り、まことに有難く厚く御礼申し上げます。 本年も、より一層のご支援を賜りますよう、従業員一同心よりお願い申し上げます。 弊社は今年の4月に創立5年目を [...]]]></description>
			<content:encoded><![CDATA[<figure class="w630fig"><img src="http://www.asparagus.jp/wp-content/uploads/2012/01/pho_blog20120104_entry02.jpg" alt="Happy New Year 2012 今年もよろしくお願いいたします。" width="620" height="170" class="alignnone size-full wp-image-594" /></figure>

<p>皆さん。新年あけましておめでとうございます。<br />
旧年中は格別なご高配を賜り、まことに有難く厚く御礼申し上げます。<br />
本年も、より一層のご支援を賜りますよう、従業員一同心よりお願い申し上げます。</p>

<p>弊社は今年の4月に創立5年目を迎える年となります。</p>

<p>フード事業のフレンチレストラン「<a href="http://www.galle.jp/" target="_blank">ナチュラルフレンチ・ガレ</a>」におきましては、今年で創業30年という節目を迎えます。<br />
そして、2店舗目のBistro＆Bar「<a href="http://www.vegelabo.com/" target="_blank">ベジラボ</a>」も、お陰様で大変好評をいただいております。</p>

<p>デジタルクリエイト事業部、フード事業部共に、<br />
これまで以上に気持ちを引き締めて、お客様により一層のサービスを提供できるよう、努めてまいります。</p>

<p>全員の心をひとつにして頑張ってまいりますので、今年もよろしくお願いします。 </p>]]></content:encoded>
			<wfw:commentRss>http://www.asparagus.jp/blog/info/2012greeting/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>フード事業の業務拡大により、新店舗「Bistro＆Bar Vegelabo＜ベジラボ＞」でSTAFFを募集しております。(募集終了)</title>
		<link>http://www.asparagus.jp/blog/vegelabo_staff/</link>
		<comments>http://www.asparagus.jp/blog/vegelabo_staff/#comments</comments>
		<pubDate>Mon, 04 Jul 2011 16:52:01 +0000</pubDate>
		<dc:creator>アスパラガス</dc:creator>
				<category><![CDATA[アスパラガスからのお知らせ]]></category>
		<category><![CDATA[アスパラブログ]]></category>

		<guid isPermaLink="false">http://www.asparagus.jp/?p=515</guid>
		<description><![CDATA[株式会社アスパラガスでは、2011年7月16日に新店舗「<a href="http://www.vegelabo.com/" target="_blank">Bistro＆Bar Vegelabo＜ベジラボ＞</a>」を福岡市中央区薬院（浄水通り）にオープンする予定です。それに伴い、急きょSTAFF（社員・アルバイト）を募集しております。(募集は終了いたしました)]]></description>
			<content:encoded><![CDATA[<figure class="w630fig"><img src="http://www.asparagus.jp/wp-content/uploads/2011/07/pho_blog20110705_entry021.jpg" alt="Bistro＆Bar Vegelabo＜ベジラボ＞" title="Bistro＆Bar Vegelabo＜ベジラボ＞" width="620" height="170" class="alignnone size-full wp-image-524" /></figure>

<h2>7/16 NEWオープン！Bistro＆Bar Vegelabo＜ベジラボ＞</h2>

<p>お店のコンセプトは「カジュアル」肩肘はらずにゆっくりと食事を楽しんでもらえるお店が目標です☆<br />
そしてより多くのお客様にフレンチの良さを体験していただきたいと思っています。<br />
しっかりとした経験を積める環境で一緒にお店を作り上げていきませんか？！</p>


<h2>仕事情報</h2>
<h3>【仕事内容】</h3>
<p>（1）キッチン業務<br />
（2）ホール業務<br />
料理が好きで分野を問わず飲食業の経験が多少あれば大丈夫です。<br />
本店から受け継ぐ自慢の「レシピ」があるので安心◎</p>

<h3>【職場の環境】</h3>
<p>料理の奥深さを勉強して料理する喜びを感じられます。本気で頑張れば、どこでも通用する技術を身につける事が出来る！<br />
最近では本店の出身者が東京ミッドタウンの某有名店の料理長として働いておりました。</p>

<h3>【さらなる成長】</h3>
<p>本店勤務の料理長を含め知識も経験も豊富なスタッフがしっかりアナタの成長のお手伝いをします。<br />
今までの経験を活かして更なる成長をしませんか？</p>

<h2>募集情報</h2>
<dl>
<dt class="f12B">勤務地</dt>
<dd>福岡市中央区薬院4丁目8-3　（地下鉄「薬院大通駅」スグ）</dd>

<dt class="f12B">勤務曜日・時間</dt>
<dd>10:00～翌2:00の間でシフト制</dd>

<dt class="f12B">給与</dt>
<dd>[社員]：月給17万円以上<br />
[アルバイト]：時給800円以上</dd>

<dt class="f12B">資格</dt>
<dd>未経験OK・高校生不可</dd>

<dt class="f12B">待遇</dt>
<dd>□美味しいまかない付き<br />
□制服貸与<br />
□嬉しい自転車通勤手当!!(3000円/月※20日以上勤務の場合)<br />
□社員登用有<br />
※試用期間最大3ヵ月有(同条件)</dd>

<dt class="f12B">休日休暇</dt>
<dd>シフト制</dd>

<dt class="f12B">備考</dt>
<dd>フレンチの枠を飛び出した美味しい料理を、気軽に楽しんで頂くために、老舗フレンチ「Naturalfrench Galle」の2号店＜ベジラボ＞を薬院にオープンします。内装はナチュラルテイストの明るめなお店。「普段使いのフレンチ」を目指して一緒に働きませんか？</dd>

<dt class="f12redB">応募可能期間</dt>
<dd>2011年 7/4（月）～7/18（月） AM7:00（終了予定）</dd>
</dl>


<h2>応募情報</h2>
<dl>
<dt class="f12B">面接地・他</dt>
<dd>ベジラボ （<a href="http://maps.google.co.jp/maps?hl=&#038;q=%E7%A6%8F%E5%B2%A1%E5%B8%82%E4%B8%AD%E5%A4%AE%E5%8C%BA%E8%96%AC%E9%99%A24%E4%B8%81%E7%9B%AE8-3&#038;sourceid=navclient-ff&#038;rlz=1B3GGHP_jaJP429JP419&#038;ie=UTF-8" target="_blank">地図はこちら</a>）</dd>

<dt class="f12B">応募方法</dt>
<dd>まずはお気軽にお電話ください。</dd>

<dt class="f12B">応募後のプロセス</dt>
<dd>面接には履歴書（写貼）を持参ください。</dd>

<dt class="f12B">代表問い合わせ先</dt>
<dd>担当/採用係 080-3171-0804</dd>
</dl>]]></content:encoded>
			<wfw:commentRss>http://www.asparagus.jp/blog/vegelabo_staff/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>スマートフォンサイトの需要が高まりつつあるので、勉強がてらアスパラガス用に作ってみました</title>
		<link>http://www.asparagus.jp/blog/smart_phone/</link>
		<comments>http://www.asparagus.jp/blog/smart_phone/#comments</comments>
		<pubDate>Thu, 30 Jun 2011 00:17:25 +0000</pubDate>
		<dc:creator>☆MNE☆</dc:creator>
				<category><![CDATA[WEBとかデザインとか]]></category>
		<category><![CDATA[アスパラブログ]]></category>

		<guid isPermaLink="false">http://www.asparagus.jp/?p=498</guid>
		<description><![CDATA[こんにちわ(・∀・)　ガラケーを卒業（ほぼ故障のため）し、ついにスマートフォンデビューを果たした☆MNE☆です。
そんなきっかけもあり、弊社WEBサイトにスマートフォン用デザインを導入してみよう思い、とりあえず作ってみました。]]></description>
			<content:encoded><![CDATA[<figure class="w630fig"><img src="http://www.asparagus.jp/wp-content/uploads/2011/06/pho_blog20110630_entry02.jpg" alt="スマートフォンサイト作ってみました" title="スマートフォンサイト作ってみました" width="620" height="170" class="alignnone size-full wp-image-500" /></figure>



<h2>スマートフォンサイト構築にあたっての最低限知っておきたいルール</h2>
<p>スマートフォンでは、PCサイトを手軽に閲覧できることが魅力の一つだと思います。<br />
しかしながら、ただ今までどおりのPCサイトをそのまま表示させたとしても、そのサイトはあくまでも<span class="f12B">”PC”</span>で閲覧したときに最適化して見ることのできるものだと認識しておかなければなりません。</p>

<p>スマートフォンの画面は、今までのガラケーよりは大きくなりましたが、それでもPCやタブレット型のものに比べると、かなり小さいものになっています。その小さな画面内で、いかに見やすく操作しやすいかが、スマートフォンサイト構築のミソだと思っています。そこで、スマートフォン用に最適化したWEBサイトの構築するにあたって、最低限知っておいたほうがいいことを簡単に書いておこうと思います。</p>



<div class="w360right">
<h3>■なんのブラウザを基準につくるのか</h3>
<p>スマートフォンと言っても、大きく分けてiPhoneとAndroidがあるのはみなさんご存知かと思いますが、iPhoneとAndroidでは使用しているブラウザは違うものなのです。</p>

<h4 class="f12red">iPhoneの標準ブラウザーは「Safari」</h4>
<p>アップルがMac OS X向けに開発したWebブラウザーのiPhone版です。</p>

<h4 class="f12red">Androidの標準ブラウザーは「ブラウザ」</h4>
<p>とってもストレートなネーミングですが、そもそもAndroidはGoogleが開発しているものなので、そのブラウザは「Chrome」に非常に近いものとなっているようです。ブラウザ上でのFLASHも再生可能になっています。</p>

<p>とは言っても、IEさんと違って優秀なブラウザかつ、レンダリングエンジンは「WebKit」を採用しているためHTML5やCSS3の実装が進んでおり、JavaScriptも問題なく動作するWebブラウザーです。</p>

<p>※アプリで「Firefox」等をインストールするケースもあります。</p>
</div>

<figure class="w260fig"><img src="http://www.asparagus.jp/wp-content/uploads/2011/06/pho_blog20110630_entry03.jpg" alt="スマートフォンのブラウザ" title="スマートフォンのブラウザ" width="250" height="200" class="alignnone size-full wp-image-501" /></figure>
<br class="clear">



<div class="w360right">
<h3>■横幅や画像のサイズを把握しておく</h3>
<p>従来のガラケーでは、画面・画像サイズは最大横幅240pxを基準に作ってきたかと思いますが、スマートフォンでは縦向き時<span class="f12red">「320px～640px」</span>となり、横向き時<span class="f12red">「480px～960px」</span>となります。</p>

<p>デザインカンプなどを作成する際に、縦を標準とする場合は<span class="f12redB">320px</span>で作成すれば問題ないと思います。</p>

<p>横を基準とする場合<span class="f12redB">、iPhoneなら480px</span>、<span class="f12redB">Androidなら500px前後</span>で作成すれば問題ないと思います。</p>
</div>

<figure class="w260fig"><img src="http://www.asparagus.jp/wp-content/uploads/2011/06/pho_blog20110630_entry04.jpg" alt="スマートフォンの横幅や画像のサイズ" title="スマートフォンの横幅や画像のサイズ" width="250" height="170" class="alignnone size-full wp-image-502" /></figure>
<br class="clear">



<h3>■リキッドデザインを心掛けること</h3>
<p>リキッドデザインとは、ブラウザの横幅を変更した時にコンテンツの表示サイズも変更されるタイプのデザインのことで、<span class="f12redB">サイズ可変デザイン</span>とも言います。</p>

<p>スマートフォンでは、縦画面・横画面それぞれに合わせた表示がされます。ガラケーに慣れている世代には、基本的に縦画面が基準となると思いますが、横画面でも表示される可能性を踏まえてデザインおよびHTMLのコーディングを行わないといけません。</p>

<figure class="w630fig"><img src="http://www.asparagus.jp/wp-content/uploads/2011/06/pho_blog20110630_entry05.jpg" alt="スマートフォンサイト　リキッドデザイン" title="スマートフォンサイト　リキッドデザイン" width="620" height="225" class="alignnone size-full wp-image-503" /></figure>

<p>上記画像でもお分かりのように、サイト中段メニューの部分や「最近の制作実績」の部分が、横画面時には可変しています。<br />
CSSでwidthを指定するときは固定サイズでの指定はなるべく避け、「％」を使った指定をしてあげましょう。</p>



<h3>■iPhone・Android向けのmetaタグ「viewport」の指定</h3>
<p class="pbot_no">スマートフォン（iPhone・Android）での可視領域や拡大・縮小などの設定をするmeta要素である「viewport」を記述します。</p>
<pre class="brush: xml; title: ; notranslate">
&lt;!-- 記述例 --&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=yes&quot;/&gt;

</pre>

<h4>【 各パラメータと内容 】</h4>
<dl>
<dt class="f12redB">width</dt>
<dd>可視領域の幅。<br />
デフォルト値：980px<br />
200pxから10000pxまでの範囲を指定できます。</dd>
<dd>上記例にある「device-width」はデバイスの幅に合わせるという意味。</dd>

<dt class="f12redB">height</dt>
<dd>可視領域の高さ。<br />
デフォルト値：widthの値とデバイスのアスペクト比から算出されます。<br />
233pxから10000pxまでの範囲を指定できます。</dd>

<dt class="f12redB">user-scalable</dt>
<dd>「no」で拡大縮小を禁止し、「yes」で拡大縮小を可能にします。<br />
デフォルト値：「yes」<br />
「no」を指定するとテキスト入力フィールド内でのスクロールも制限されます。</dd>

<dt class="f12redB">initial-scale</dt>
<dd>表示倍率の初期値。<br />
デフォルト値：自動算出。<br />
ズームの範囲は「minimum-scale」と「maximum-scale」の範囲内に制限されます。</dd>

<dt class="f12redB">minimum-scale</dt>
<dd>可視領域の最小倍率。<br />
デフォルト値：0.25<br />
0 から 10.0 までの範囲で指定できます。</dd>

<dt class="f12redB">maximum-scale</dt>
<dd>可視領域の最大倍率。<br />
デフォルト値：1.6<br />
0 から 10.0 までの範囲で指定できます。</dd>
</dl>


<div class="w360right">
<h3>■画像の多用を避け、テキスト＆CSS3で表現する</h3>
<p>スマートフォンでは、通信速度の遅い3G回線でも閲覧されることを考慮し、画像の使用頻度を減らしてページの容量を抑えることを心掛けた方がよいでしょう。</p>

<p>ボタンや背景色のある枠組みなどで、角丸を使用する際にも、画像はなるべく使わず、<span class="f12redB">CSS3の「border-radius」</span>を使って表現しましょう。</p>

<p>テキストを画像のようにメリハリをつけるためには、フォントサイズを大きくしたり、色を変えるなどの少しの工夫で、スマートフォンでは大変見やすくなります。</p>
</div>

<figure class="w260fig"><img src="http://www.asparagus.jp/wp-content/uploads/2011/06/pho_blog20110630_entry06.jpg" alt="画像の多用を避け、テキスト＆CSS3で表現する" title="画像の多用を避け、テキスト＆CSS3で表現する" width="250" height="170" class="alignnone size-full wp-image-504" /></figure>
<br class="clear">



<h3>■画面の大きさや特性・操作方法を考慮して、ユーザビリティを損なわないようにする</h3>
<p>上記で述べたものも、ユーザビリティの点で欠かせないものとなっていますが、その他にも注意すべき点がいくつかあります。</p>
<dl>
<dt class="f12redB">コントラストの差をつける</dt>
<dd>スマートフォンは持ち運びができる点から、野外で使用する頻度がとても多いと思われます。明るい場所などでスマートフォンの画面を見たときに、画面内の背景・画像・文字等のコントラストの差があまりないと、すごく見えにくいものになってしまいます。<br />
画面をはっきり見ることができる場所ではいいのですが、それ以外でも閲覧されることを考慮して表現しましょう。</dd>

<dt class="f12redB">リンクの領域は大きくする</dt>
<dd>スマートフォンは指で操作するタッチデバイスですので、小さなリンクは非常に押しにくいです。<br />
ボタンリンクは最低30px～40px以上にし、テキストリンクで上下にリンクが並んでいる場合などは誤タッチしやすいので、CSSで「line-height」「padding」「margin」等をしっかりとったほうが良いでしょう。</dd>

<dd>また、リンクとはっきりわかるような工夫をしましょう。PCサイトと違い、ロールオーバーによるリンクの確認ができませんので、矢印をつけたり、アンダーラインをつけたりして、リンクだと認識しやすいものにしましょう。</dd>

<dt class="f12redB">javascript（jQuery等）を使ってみる</dt>
<dd>スマートフォンが従来のガラケーと大きく違う性能のひとつとして、javascriptが使用可能だということです。<br />
jQuery等を利用して、リッチコンテンツを作り上げることも可能です。<br />
HTML5・CSS3・javascriptを上手く利用し、使い勝手の良いサイトを構築しましょう。</dd>

<dt class="f12redB">出来る限り実機で確認する</dt>
<dd>当たり前ですが、これに尽きます。スマートフォン用のシミュレーターも優秀ですが、やはりタッチ操作ができませんし、表示領域の違いや色味の違いもあります。<br />
出来ればiPhoneとAndroidの両端末を持っていたいところですねｗ</dd>
</dl>


<h2>スマートフォンサイト制作に欠かせないシミュレーター</h2>
<p>スマートフォンサイト制作では、ほぼPCに向き合っている状況だと思います。<br />
実機での確認は要所要所と最終的なところでしょう。（随時スマホ片手に作業してられませんしｗｗｗ）</p>

<p>そんな中で役立つのがシミュレーターの存在です。<br />
以下にiPhone用とAndroid用のシミュレーターの配布先を記載しているので、必要な方はどうぞ</p>

<dl>
<dt class="f12redB">iPhone用</dt>
<dd>iBBDemo2 ： <a href="http://labs.blackbaud.com/NetCommunity/article?artid=662" target="_blank">http://labs.blackbaud.com/NetCommunity/article?artid=662</a></dd>

<dt class="f12redB">Android用</dt>
<dd>Android SDK ： <a href="http://developer.android.com/sdk/index.html" target="_blank">http://developer.android.com/sdk/index.html</a></dd>
</dl>

<figure class="w630fig"><img src="http://www.asparagus.jp/wp-content/uploads/2011/06/pho_blog20110630_entry07.jpg" alt="スマートフォン シミュレーター" title="スマートフォン シミュレーター" width="620" height="300" class="alignnone size-full wp-image-505" /></figure>


<h2>ちなみにアスパラガスのWEBサイトはWordPressで構築されているので、スマートフォン用プラグインを探しました。</h2>

<p>弊社WEBサイトはWordPressを使って構築されているので、スマートフォン用デザインの導入にあたり、いいプラグインが出ていないか、色々と探してみました。今回、自分の中で選ぶポイントとして、WordPressのテーマとして導入ができるかどうかだったので、とりあえず<a href="http://wordpress.org/extend/plugins/wptap/" target="_blank">「WPtap」</a>というプラグインを使うことにしました。<br />
多分、他にもいいプラグインがあったり、今後出てくることもあると思いますので、その時はその時で考えますｗ</p>


<h2>今回参考にさせていただいたサイト</h2>
<p>いやー、さすがにひとりでここまで出来ませんｗ<br />
そこで、今回のスマートフォン制作にあたって、参考にさせていただいたサイトをご紹介したいと思います。<br />
ありがとうございます！！</p>

<dl>
<dt class="f12B">ユージック 様</dt>
<dd><a href="http://www.u-ziq.com/blog/2011/01/post_61.html" target="_blank">スマートフォン向けサイトの作り方</a></dd>

<dt class="f12B">WEB Drawer -WEB制作に関するメモサイト- 様</dt>
<dd><a href="http://webdrawer.net/mobile/smartphonemake.html" target="_blank">初心者のためのスマートフォンサイトを作るときに見ておきたいサイト</a></dd>

<dt class="f12B">to-R 様</dt>
<dd><a href="http://blog.webcreativepark.net/sp/2011/06/10tips.html" target="_blank">スマートフォンサイトをデザインする上で知っておくべき10のTIPS</a></dd>

<dt class="f12B">かちびと.net 様</dt>
<dd><a href="http://kachibito.net/wordpress/wptap.html" target="_blank">多数デバイスに対応させる事も可能なモバイル自動対応WordPressプラグイン・WPtap</a></dd>

<dt class="f12B">デザインどや！？ 様</dt>
<dd><a href="http://www.doya-doya.com/diary/2010/07/23/1050" target="_blank">どや！？iPhone、iPad用ブラウザシミュレータ「iBBDemo2」</a></dd>
</dl>]]></content:encoded>
			<wfw:commentRss>http://www.asparagus.jp/blog/smart_phone/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>WEBサイト制作前やデザイン制作時に欠かせないヒアリングシートを作り直してみた</title>
		<link>http://www.asparagus.jp/blog/web_hearing_sheet/</link>
		<comments>http://www.asparagus.jp/blog/web_hearing_sheet/#comments</comments>
		<pubDate>Wed, 01 Jun 2011 07:42:17 +0000</pubDate>
		<dc:creator>☆MNE☆</dc:creator>
				<category><![CDATA[WEBとかデザインとか]]></category>
		<category><![CDATA[アスパラブログ]]></category>

		<guid isPermaLink="false">http://www.asparagus.jp/?p=441</guid>
		<description><![CDATA[WEB業界の人なら、サイト制作前のお客さんとの最初の打合せなんかで「ヒアリングシート」というのを使っていると思います。
弊社でも使っているものはあったのですが、項目を精査してみたり、他の制作会社のシートを参考に作り直してみました。]]></description>
			<content:encoded><![CDATA[<figure class="w630fig"><img src="http://www.asparagus.jp/wp-content/uploads/2011/06/pho_blog20110601_entry02.jpg" alt="ヒアリングシート" title="ヒアリングシート" width="620" height="170" class="alignnone size-full wp-image-443"></figure>

<h2>制作依頼時のヒアリングシート</h2>
<p>ヒアリングシートの内容には、業種によって様々なものがあると思いますが、WEB制作に関して言えば、制作依頼のお話が来た時点や、検討されている段階で、お客様の考えをアウトプットすることに大きな目的があり、その内容をもとにサイトの方向性や目標等を定めていきます。</p>

<p>アウトプットする内容としては、大きく分けて以下のような項目になると思います。</p>

<ul>
<li class="f12B">■ WEBサイト構築の背景・目的</li>
<li class="f12B">■ WEBサイトのタイプ（企業サイト、製品紹介サイト・ECサイト、etc...）</li>
<li class="f12B">■ ターゲットとするエンドユーザーの層</li>
<li class="f12B">■ WEBサイトから期待する効果</li>
<li class="f12B">■ 同業種・競合他社の有無とその動向</li>
<li class="f12B">■ 予算と制作スケジュール</li>
<li class="f12B">■ 保守・管理に関して</li>
</ul>

<figure class="w260fig"><a href="http://www.asparagus.jp/wp-content/uploads/2011/06/img_hearing_sheet01.jpg" title="制作依頼時のヒアリングシート" rel="box_img"><img src="http://www.asparagus.jp/wp-content/uploads/2011/06/img_hearing_sheet01-e1306913818185-250x250.jpg" alt="制作依頼時のヒアリングシート" width="250" height="250" class="alignnone size-thumbnail wp-image-450"></a></figure>

<div class="w360right">
<p>WEBサイトを<span class="f12redB">"意味のある・効果のある"</span>ものへと作り上げていく上で、上記項目は欠かすことのできない情報となります。</p>
<p>これらを踏まえた上で、その他様々なヒアリングシートを比較・参考にし、弊社なりの制作事前用ヒアリングシートを作り直してみました。</p>
<p>※右図参照（クリックで拡大します）</p>
<p>もし、内容を気に入っていただけましたら、以下にPDFをご用意しておりますので、ロゴ等を変更してご自由にお使いください＾＾</p>
<p><a href='http://www.asparagus.jp/wp-content/uploads/2011/06/hearing_sheet_first.pdf' onclick="javascript:pageTracker._trackPageview('/downloads/hearing_sheet');" target="_blank">[PDF] ヒアリングシート（制作依頼時） 1.79MB</a></p>
</div><br class="clear">


<h2>WEBサイトデザインの為のヒアリングシート</h2>
<p>前項では、”制作依頼時”のヒアリングシートでしたが、ここでは、<span class="f12redB">デザインに取り掛かる前用のヒアリングシート</span>を紹介します。デザイナーや会社によってデザインの進め方は色々あるでしょうが、弊社では、デザイン制作前用のヒアリングシートを使っています。</p>

<p>お客様によっては、ある程度デザインイメージを持たれてる方もいらっしゃいますが、ほとんどのお客様は、ざっくりとしたものしか見えていません。そういったざっくりとしたものを、ヒアリングシートでアウトプットすることにより、デザインという”視覚化”を行っていきます。</p>

<p>ラフデザインやワイヤーデザインをするために、最低限必要な内容としては、以下のような項目になると思います。</p>

<ul>
<li class="f12B">■ WEBサイトのデザインテイスト</li>
<li class="f12B">■ サイトカラー（会社・店舗カラー）</li>
<li class="f12B">■ 使用するフォント</li>
<li class="f12B">■ デザイン参考サイト</li>
<li class="f12B">■ 必要なシステム・プログラム</li>
</ul>

<figure class="w260fig"><a href="http://www.asparagus.jp/wp-content/uploads/2011/06/img_hearing_sheet02.jpg" title="WEBサイトデザインの為のヒアリングシート" rel="box_img"><img src="http://www.asparagus.jp/wp-content/uploads/2011/06/img_hearing_sheet02-e1306913906450-250x250.jpg" alt="WEBサイトデザインの為のヒアリングシート" width="250" height="250" class="alignnone size-thumbnail wp-image-449"></a></figure>

<div class="w360right">
<p>WEBサイトの<span class="f12redB">テイスト</span>や<span class="f12redB">カラー</span>は、デザインの枠組みを作るものとしてとても重要な要素となっています。その枠組みに合わせて、各種レイアウト（コンテンツ・システム反映部分等）を決めていきます。</p>
<p>お客様からのイメージを一方的にアウトプットするだけでなく、デザイナーとしての意見や経験を、お互いに話し合いながら進めていけば、「より良いもの」を作れるのはもちろんですが、「お客様の意見が度々変わって、その都度デザインも変更しないといけない」というような状況を避けることにも繋がっていくと思います。</p>
<p>※右図参照（クリックで拡大します）</p>
<p>こちらも以下にPDFをご用意しておりますので、ロゴ等を変更してご自由にお使いください＾＾</p>
<p><a href='http://www.asparagus.jp/wp-content/uploads/2011/06/hearing_sheet_second.pdf' onclick="javascript:pageTracker._trackPageview('/downloads/hearing_sheet_design');" target="_blank">[PDF] ヒアリングシート（デザイン時） 1.92MB</a></p>
</div><br class="clear">


<h2>あとがき…</h2>
<p>今回、弊社のヒアリングシートの作り直しをしましたが、<br />
技術の進歩や流行りによって、その内容は常に変更していく必要があると思います。</p>

<p>お客様のやりたいことや目標をうまく引き出し、それを精査することは、成功するサイト作りのための第一歩になります。<br />
そこにデザイナーの力とディレクションが加われば、より強固なものとなっていくでしょう。</p>

<p>このヒアリングシートを活用・成長させていきながら、今後も”いい”サイトを作れるように頑張っていきます レ(ﾟｰﾟレ)！</p>]]></content:encoded>
			<wfw:commentRss>http://www.asparagus.jp/blog/web_hearing_sheet/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>WordPressプラグイン「Head Cleaner」で自動整形した際、titleタグをmeta(keywordsとdescription)より上にするには</title>
		<link>http://www.asparagus.jp/blog/wp_plugin_headcleaner/</link>
		<comments>http://www.asparagus.jp/blog/wp_plugin_headcleaner/#comments</comments>
		<pubDate>Tue, 17 May 2011 06:30:28 +0000</pubDate>
		<dc:creator>☆MNE☆</dc:creator>
				<category><![CDATA[WEBとかデザインとか]]></category>
		<category><![CDATA[アスパラブログ]]></category>

		<guid isPermaLink="false">http://www.asparagus.jp/?p=375</guid>
		<description><![CDATA[htmlの&#60;head&#62;内部の中身と、フッタ領域を整形しなおし、
スッキリとしたhtmlを実現できるWordPressプラグイン<a href="http://wppluginsj.sourceforge.jp/head-cleaner/" target="_blank">「Head Cleaner」</a>ですが、&#60;title&#62;タグが&#60;meta&#62;(keywordsとdescription)より下の位置に配置される事が気になっていて、どうにかならないもんかと自分なりに弄ってみました。]]></description>
			<content:encoded><![CDATA[<figure class="w630fig"><img src="http://www.asparagus.jp/wp-content/uploads/2011/05/pho_blog20110501_entry02.jpg" alt="Permutes - 並び替える -" width="620" height="170" class="alignnone size-full wp-image-458" /></figure>

<h2>とりあえず、&lt;title&gt;タグは一番最初に読み込ませたい部分なので…</h2>
<p>そもそも何でこんなことをしようと思ったかと言うと、<br />
「Head Cleaner（現時点のバージョン 1.4.2.2）」はWordPressに入れて有効化した時点で、以下のような感じのコード配置になっています。</p>
<pre class="brush: xml; title: ; notranslate">
&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head lang=&quot;ja&quot;&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;!-- 本当はここの部分にタイトルを入れてあげたい --&gt;
&lt;meta name=&quot;description&quot; content=&quot;ディスクリプションの内容&quot;&gt;
&lt;meta name=&quot;keywords&quot; content=&quot;キーワード,キーワード,キーワード,キーワード&quot;&gt;
&lt;title&gt;タイトル&lt;/title&gt; &lt;!-- この位置になってしまう… --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;http://www.asparagus.jp/wp-content/themes/asparagus/other.css&quot; type=&quot;text/css&quot;&gt;
</pre>

<p>これが”悪い”というわけではないのですが、まぁ強いて言えば性格ですかねｗｗｗ<br />
あとは、SEO的観念も少々…。<br />
とりあえず&lt;title&gt;タグは&lt;meta charset=""&gt;の直下じゃないと気が済まなかったわけです。</p>


<h2>「Head Cleaner」の設定</h2>
<figure class="w260fig"><img src="http://www.asparagus.jp/wp-content/uploads/2011/04/pho_blog20110501_entry01.jpg" alt="Head Cleaner" title="Head Cleaner" width="250" height="190" class="alignnone size-full wp-image-382" /></figure>

<div class="w360right">
<p>今回の「Head Cleaner」の利用にあたって、以下の項目だけチェックを入れています。（他項目は、今回必要性を感じなかったので ＾＾；）</p>
<ul>
<li>■ CSS と JavaScript を、サーバ上にキャッシュする</li>
<li>■ 複数の CSS を結合する</li>
<li>■ CSS を最適化する</li>
<li>■ &lt;head&gt; 内の JavaScript を、フッタ領域に移動</li>
</ul>

<p>他項目チェック時の動作確認はしていません。</p>
</div><br class="clear">


<h2>まずはheader.phpの中身を以下のようにしました。</h2>
<pre class="brush: xml; title: ; notranslate">
&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head lang=&quot;&lt;?php bloginfo('language')?&gt;&quot;&gt;
&lt;meta charset=&quot;&lt;?php bloginfo('charset'); ?&gt;&quot;&gt;
&lt;title&gt;&lt;?php wp_title(); ?&gt;&lt;/title&gt; &lt;!-- charset直下にtitleを配置 --&gt;
&lt;?php wp_head(); ?&gt; &lt;!-- wp_headより上部分が「Head Cleaner」による整形対象 --&gt;
</pre>

<p>ちなみに「keywords」と「description」が無いじゃないか！ってなってますが、<br />
<a href="http://wordpress.org/extend/plugins/headspace2/" target="_blank">「HeadSpace2」</a>プラグインによる吐き出しなので&lt;? wp_head (); ?&gt;の位置に吐き出されます。<br />
おそらく「HeadSpace2」を入れている方とか多いんじゃないかと思います。</p>


<h2>次にプラグインの中を弄っていきます。</h2>
<p>「Head Cleaner」（今回のバージョンは1.4.2.1）をダウンロード後、解凍します。<br />
その中に「head-cleaner.php」というファイルがあるので、テキストエディタで開き、以下のように変更していきます。</p>

<pre class="brush: php; title: ; notranslate">
/****************/
/* 581行目あたり */
/****************/

// ***** Parse Start! *****
$meta_tag    = $this-&gt;_dom_to_html($dom-&gt;find(&quot;meta&quot;));
$title_tag   = $this-&gt;_dom_to_html($dom-&gt;find(&quot;title&quot;), 1);
$base_tag    = $this-&gt;_dom_to_html($dom-&gt;find(&quot;base&quot;), 1);
…

/**** 上記部分を以下のように修正 ****/

// ***** Parse Start! *****
// ↓metaからcharset部分だけを先に取り出す
$meta_tag    = $this-&gt;_dom_to_html($dom-&gt;find(&quot;meta[charset]&quot;));
$title_tag   = $this-&gt;_dom_to_html($dom-&gt;find(&quot;title&quot;), 1);
// ↓meta_tag2を追加してcharset以外のmeta情報をtitle以下に取り出す
$meta_tag2    = $this-&gt;_dom_to_html($dom-&gt;find(&quot;meta[!charset]&quot;));
$base_tag    = $this-&gt;_dom_to_html($dom-&gt;find(&quot;base&quot;), 1);



/****************/
/* 623行目あたり */
/****************/

// Build!
$ret_val .=
	$this-&gt;_tag_trim($doctype_tag) .
	$this-&gt;_tag_trim($html_tag) .
	$this-&gt;_tag_trim($head_tag) .
	$this-&gt;_tag_trim($meta_tag) .
	$this-&gt;_tag_trim($title_tag) .
	$this-&gt;_tag_trim($base_tag) .
…

/**** 上記部分を以下のように修正 ****/

// Build!
$ret_val .=
	$this-&gt;_tag_trim($doctype_tag) .
	$this-&gt;_tag_trim($html_tag) .
	$this-&gt;_tag_trim($head_tag) .
	$this-&gt;_tag_trim($meta_tag) .
	$this-&gt;_tag_trim($title_tag) .
	$this-&gt;_tag_trim($meta_tag2) . //meta_tag2をtitle_tagの下に追加
	$this-&gt;_tag_trim($base_tag) .
</pre>

<p>修正完了後、プラグインのフォルダにアップロードして完了です。<br />
上記対応で&lt;title&gt;タグを&lt;meta charset=""&gt;直下に表示し、「keywords」と「description」は&lt;title&gt;タグの次に表示されるようになったと思います。</p>

<p>その他「Head Cleaner」の設定で各種メタタグの追加等をした場合に、<br />
目的の位置がずれた場合は、上記タグを参考に弄ってみてください。</p>


<h2>あとがき…</h2>
<p>一応、思った通りの表示にはなっていますが、自分の本職はデザイナーのほうなので、<br />
文法的なこと…　分かっていません(・∀・；)</p>

<p>しかも自動アップデートとかしちゃったりすると、おそらく上書きされてしまいますので、もう一度設定し直さなくてはいけません。「Head Cleaner」側の設定でどうにかできるようになればいいのにぃ…</p>

<p>もし見られた方で、こうした方がもっといいとか、ご指摘等ございましたら、コメントお願いいたします＾＾</p>]]></content:encoded>
			<wfw:commentRss>http://www.asparagus.jp/blog/wp_plugin_headcleaner/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>サイトリニューアルにあたって、HTML5でマークアップしてみて（備忘録的）</title>
		<link>http://www.asparagus.jp/blog/html5/</link>
		<comments>http://www.asparagus.jp/blog/html5/#comments</comments>
		<pubDate>Tue, 10 May 2011 06:20:03 +0000</pubDate>
		<dc:creator>☆MNE☆</dc:creator>
				<category><![CDATA[WEBとかデザインとか]]></category>
		<category><![CDATA[アスパラブログ]]></category>

		<guid isPermaLink="false">http://www.asparagus.jp/?p=433</guid>
		<description><![CDATA[ソースを見られてる方はお気付きでしょうが、今回の弊社サイトリニューアルに伴い、何かと話題なHTML5でサイトをマークアップしてみました。HTML5というと、&#60;audio&#62;要素・&#60;video&#62;要素・&#60;canvas&#62;要素なんかが注目されていますが、とりあえず今回はそんな要素は使わずにマークアップしています（単に今は弊社サイトに必要性がないので…）。
ここでは、実際にマークアップするにあたって、考えたことなんかを書いていこうと思います。]]></description>
			<content:encoded><![CDATA[<h2>「HTML4.01」「XHTML1.0」とは違う、DOCTYPE宣言と&lt;head&gt;内の要素</h2>
<p class="pbot_no">以下に今までのDOCTYPE宣言との違いを書いてみます。</p>
<pre class="brush: xml; title: ; notranslate">

&lt;!-- HTML4.01 --&gt;
&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;
&lt;html&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
&lt;meta http-equiv=&quot;Content-Script-Type&quot; content=&quot;text/javascript&quot;&gt;
&lt;meta http-equiv=&quot;Content-Style-Type&quot; content=&quot;text/css&quot;&gt;
&lt;title&gt;タイトル&lt;/title&gt;
… 略 …

&lt;!-- XHTML1.0 --&gt;
&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; lang=&quot;ja&quot; xml:lang=&quot;ja&quot;&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;meta http-equiv=&quot;Content-Script-Type&quot; content=&quot;text/javascript&quot; /&gt;
&lt;meta http-equiv=&quot;Content-Style-Type&quot; content=&quot;text/css&quot; /&gt;
&lt;title&gt;タイトル&lt;/title&gt;
… 略 …

&lt;!-- HTML5 --&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head lang=&quot;ja&quot;&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;title&gt;タイトル&lt;/title&gt;
… 略 …

</pre>

<p>はい、見ての通り単純明快です。<br />
今まではDOCTYPE・スタイルシート・Javascriptなんかの宣言文なんて、コピペぐらいでしか記述したことなかったんですが、HTML5になってここまで簡単になると、コピペするまでもなく記述できますね＾＾</p>


<h2>HTML5で出てきた新要素について</h2>
<p>これまでは、何でも&lt;div&gt;で括られてきましたが、<br />
HTML5からは、より意味のある括りとして以下のような要素が追加されました。<br />
いくつかの要素を、以前のやり方と比較しながら以下に説明していきます。</p>



<h3>&lt;header&gt;要素</h3>
<p class="pbot_no">ヘッダーとしての括りで、グローバルナビゲーションなどが入ります。</p>
<pre class="brush: xml; title: ; notranslate">
&lt;!-- HTML4.01 or XHTML1.0 --&gt;
&lt;div id=&quot;header&quot;&gt;
ヘッダーの中身
&lt;/div&gt;

&lt;!-- HTML5 --&gt;
&lt;header&gt;
ヘッダーの中身
&lt;/header&gt;
</pre>



<h3>&lt;footer&gt;要素</h3>
<p class="pbot_no">フッターとしての括りで、関連リンクや著作権などの情報が入ります。</p>
<pre class="brush: xml; title: ; notranslate">
&lt;!-- HTML4.01 or XHTML1.0 --&gt;
&lt;div id=&quot;footer&quot;&gt;
フッターの中身
&lt;/div&gt;

&lt;!-- HTML5 --&gt;
&lt;footer&gt;
フッターの中身
&lt;/footer&gt;
</pre>



<h3>&lt;nav&gt;要素</h3>
<p class="pbot_no">ナビゲーションとして使用し、サイト内の他のページなどへのリンクを入れます。</p>
<pre class="brush: xml; title: ; notranslate">
&lt;!-- HTML4.01 or XHTML1.0 --&gt;
&lt;div id=&quot;header&quot;&gt;
	&lt;div id=&quot;navigation&quot;&gt;
 	&lt;ul&gt;
	&lt;li&gt;リンク1&lt;/li&gt;
	&lt;li&gt;リンク2&lt;/li&gt;
	&lt;li&gt;リンク3&lt;/li&gt;
 	&lt;/ul&gt;
 &lt;/div&gt;
&lt;/div&gt;

&lt;!-- HTML5 --&gt;
&lt;header&gt;
	&lt;nav&gt;
 	&lt;ul&gt;
	&lt;li&gt;リンク1&lt;/li&gt;
	&lt;li&gt;リンク2&lt;/li&gt;
	&lt;li&gt;リンク3&lt;/li&gt;
 	&lt;/ul&gt;
 &lt;/nav&gt;
&lt;/header&gt;
</pre>



<h3>&lt;article&gt;要素</h3>
<p class="pbot_no">いわゆるブログの記事部分やコンテンツの内容部分などが入ります。<br />
&lt;article&gt;を入れ子にした場合、内側の&lt;article&gt;は外側の&lt;article&gt;に関係していることになります。</p>
<pre class="brush: xml; title: ; notranslate">
&lt;!-- HTML4.01 or XHTML1.0 --&gt;
&lt;div id=&quot;entry&quot;&gt;
&lt;h1&gt;記事の見出し&lt;/h1&gt;
&lt;p&gt;見出しの内容&lt;/p&gt;
	&lt;div id=&quot;entry_body&quot;&gt;
 &lt;h2&gt;記事の小見出し&lt;/h2&gt;
 &lt;p&gt;小見出しの内容&lt;/p&gt;
 &lt;/div&gt;
&lt;/div&gt;

&lt;!-- HTML5 --&gt;
&lt;article&gt;
&lt;h1&gt;記事の見出し&lt;/h1&gt;
&lt;p&gt;見出しの内容&lt;/p&gt;
	&lt;article&gt;
	&lt;h1&gt;記事の小見出し&lt;/h1&gt;
 	&lt;p&gt;小見出しの内容&lt;/p&gt;
 	&lt;/article&gt;
&lt;/article&gt;
</pre>

<p>上記内容で、お気付きの方もいらっしゃると思いますが、&lt;h1&gt;が複数出てきています。<br />
html5において、&lt;article&gt;、&lt;section&gt;、&lt;aside&gt;、&lt;nav&gt;要素などのセクショニング・コンテンツごとでは、&lt;h1&gt;は複数使うことができます。（これまでのHTML4.01やXHTML1.0でも&lt;h1&gt;の複数使用はできるのですが、「1ページ＝1テーマ」がSEOに有利であることを考えるところから「&lt;h1&gt;要素は1ページに1個」が主流となっていました。）<br />
上記HTML5内の入れ子部分の&lt;h1&gt;は、親要素の中に含まれるので、ここで出てくる&lt;h1&gt;は実質&lt;h2&gt;と同じ意味合いがあります。</p>

<p>かならず&lt;h1&gt;を各セクションの見出しとして使わないといけないわけではありません。<br />
もちろん、階層に合わせて&lt;h2&gt;、&lt;h3&gt;なども使うことが可能です。</p>


<h3>&lt;section&gt;要素</h3>
<p class="pbot_no">&lt;section&gt;は汎用的なセクションとして扱います。<br />
&lt;header&gt;、&lt;footer&gt;、&lt;article&gt;、&lt;aside&gt;、&lt;nav&gt;などの各要素に当てはまらず、かつ「見出し」を付けることができるコンテンツなどに使います。</p>
<pre class="brush: xml; title: ; notranslate">
&lt;!-- HTML4.01 or XHTML1.0 --&gt;
&lt;div id=&quot;entry&quot;&gt;
&lt;h1&gt;記事の見出し&lt;/h1&gt;
&lt;p&gt;見出しの内容&lt;/p&gt;
&lt;/div&gt;

&lt;!-- HTML5 --&gt;
&lt;section&gt;
&lt;h1&gt;セクションの見出し&lt;/h1&gt;
&lt;p&gt;見出しの内容&lt;/p&gt;
&lt;/section&gt;
</pre>



<h3>&lt;aside&gt;要素</h3>
<p class="pbot_no">メインのコンテンツの補足情報や余談の情報を入れるセクションとして扱います。</p>
<pre class="brush: xml; title: ; notranslate">
&lt;!-- HTML4.01 or XHTML1.0 --&gt;
&lt;div id=&quot;entry&quot;&gt;
&lt;h1&gt;記事の見出し&lt;/h1&gt;
&lt;p&gt;見出しの内容&lt;/p&gt;

&lt;div id=&quot;hosoku&quot;&gt;
&lt;h2&gt;最新記事一覧&lt;/h2&gt;
&lt;ul&gt;
	&lt;li&gt;記事タイトル&lt;/li&gt;
	&lt;li&gt;記事タイトル&lt;/li&gt;
	&lt;li&gt;記事タイトル&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;!-- HTML5 --&gt;
&lt;article&gt;
&lt;h1&gt;記事の見出し&lt;/h1&gt;
&lt;p&gt;見出しの内容&lt;/p&gt;
&lt;/article&gt;

&lt;aside&gt;
&lt;h1&gt;最新記事一覧&lt;/h1&gt;
&lt;ul&gt;
	&lt;li&gt;記事タイトル&lt;/li&gt;
	&lt;li&gt;記事タイトル&lt;/li&gt;
	&lt;li&gt;記事タイトル&lt;/li&gt;
&lt;/ul&gt;
&lt;/aside&gt;
</pre>



<h3>&lt;hgroup&gt;要素</h3>
<p class="pbot_no">当該セクションの見出しをグループ化してまとめるために扱い、&lt;hgroup&gt;要素全体で一つの見出しと見なされます。<br />
小見出しなどが複数の階層にある場合、&lt;h1&gt;～&lt;h6&gt;の見出しをセットで使用します。<br />
&lt;hgroup&gt;要素の見出しランクは、&lt;hgroup&gt;の中にある&lt;h1&gt;～&lt;h6&gt;の中で最もランクの高い要素と同じランクとなります。</p>
<pre class="brush: xml; title: ; notranslate">
&lt;!-- HTML4.01 or XHTML1.0 --&gt;
&lt;div&gt;
&lt;h1&gt;記事の見出し&lt;/h1&gt;
&lt;h2&gt;記事の小見出し&lt;/h2&gt;
&lt;h2&gt;記事の小見出し&lt;/h2&gt;
&lt;h2&gt;記事の小見出し&lt;/h2&gt;
&lt;/div&gt;

&lt;!-- HTML5 --&gt;
&lt;hgroup&gt;
&lt;h1&gt;記事の見出し&lt;/h1&gt;
&lt;h2&gt;記事の小見出し&lt;/h2&gt;
&lt;h2&gt;記事の小見出し&lt;/h2&gt;
&lt;h2&gt;記事の小見出し&lt;/h2&gt;
&lt;/hgroup&gt;
</pre>



<h3>&lt;figure&gt;要素、&lt;figcaption&gt;要素</h3>
<p class="pbot_no">文書の本文から参照されるような挿絵、図表、写真、コードなどに&lt;figure&gt;要素を使用し、注釈を付けるために&lt;figcaption&gt;要素が使われます。</p>
<pre class="brush: xml; title: ; notranslate">
&lt;!-- HTML4.01 or XHTML1.0 --&gt;
&lt;div&gt;
&lt;img src=&quot;../images/neko.gif&quot; alt=&quot;猫の写真&quot;&gt;
&lt;p&gt;猫の写真の説明文&lt;/p&gt;
&lt;/div&gt;

&lt;!-- HTML5 --&gt;
&lt;figure&gt;
&lt;img src=&quot;../images/neko.gif&quot; alt=&quot;猫の写真&quot;&gt;
&lt;figcaption&gt;猫の写真の説明文&lt;/figcaption&gt;
&lt;/figure&gt;
</pre>



<h2>最後に…</h2>
<p>自分なりに思うこととして、これまでのHTML4.01やXHTML1.0でも、W3Cに準拠したマークアップをすれば、きっちりした文書構造を築けていました。HTML5になって各セクション要素を用いて、より分かりやすく文章の構造分けや意味付けができるようになったのではないかと思います。</p>

<p>ゆくゆくは、この文章構造の意味付けが、今後のSEOへと繋がっていくかもしれません。<br />
しかしながら、正しいマークアップが出来ていたとしても、結局はコンテンツの中身が最重要だと思っています。</p>

<p>ですので、「正しいマークアップ＆他にはない魅力的なコンテンツ」の図式が成立したとき、<br />
最強のSEOへの足がかりとなるでしょう(・∀・)</p>

<p>HTML5で出てくる新しい要素をざっと上記で備忘録がてら説明してみましたが、若輩者故、間違っている部分もあると思いますので、ご指摘等あれば、お気軽にコメントいただければと思います。</p>]]></content:encoded>
			<wfw:commentRss>http://www.asparagus.jp/blog/html5/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>せっかくなんで、ブログも作ってみました。</title>
		<link>http://www.asparagus.jp/blog/sekkaku-blog/</link>
		<comments>http://www.asparagus.jp/blog/sekkaku-blog/#comments</comments>
		<pubDate>Wed, 27 Apr 2011 02:30:43 +0000</pubDate>
		<dc:creator>☆MNE☆</dc:creator>
				<category><![CDATA[アスパラガスからのお知らせ]]></category>
		<category><![CDATA[アスパラブログ]]></category>

		<guid isPermaLink="false">http://www.asparagus.jp/?p=361</guid>
		<description><![CDATA[今回、アスパラガスのWEBサイトリニューアルにあたり、「あ、ブログもやりたいな～」っていう感じで、CMSを導入してみようと思い、代表格の「WordPress」でWEBサイトを構築してみました。]]></description>
			<content:encoded><![CDATA[<h2>これから触る機会が多くなるだろう「WordPress」によるサイト構築</h2>

<figure class="w260fig"><a href="http://ja.wordpress.org/" target="_blank"><img class="over alignnone size-full wp-image-366" title="WordPress" src="http://www.asparagus.jp/wp-content/uploads/2011/04/pho_blog20110426_entry01.jpg" alt="WordPress" width="250" height="190" /></a></figure>

<div class="w360right">
<p>以前から、何回も扱ったことがある「MovableType」によるサイト構築も考えていたのですが、やはりライセンス費用とか発生しちゃうし、最近、一層盛り上がってきている<a href="http://ja.wordpress.org/" target="_blank">「WordPress」</a>で構築してみようと思いました。</p>
<p>なんてったってオープンソースなんで、<br />
ライセンス費用もなく（ここ重要ｗ）、周りでも利用されている方が多いので、ちょっと流行りにのっかってみました。</p>

<p>一応、別案件で「WordPress」での構築はやったことがあったので、今回のリニューアルに関しても、特に腰が重くなるということはありませんでしたwww</p>
</div>

<h2>「WordPress」に興味が湧いたきっかけ</h2>
<p>まぁ、前々から一応興味はあったのですが、「MovableType」をずっと扱ってきてたので、<br />
大きな必要性は特に感じていませんでした。</p>

<p>しかしまぁ何というか、やっぱり「MovableType」のライセンス費用が値上がりしたことで、本格的に別のCMSを考えないとなぁ…と思っていました。（きっかけの序章w）</p>

<p>そこから結構な時間が経ち、2011年2月6日にWordPressの大々的なカンファレンスが福岡であるというじゃないですか！<br />
<a href="http://2011.wordcampfukuoka.com/" target="_blank">「WordCamp Fukuoka 2011」</a>というカンファレンスで早速予約をして、心待ちにしていました。</p>

<p>当日は、スタッフさんも含めると400名近くの方が、会場である九州産業大学の情報学部棟に集まっていました。<br />
講師で出られていた方々もたくさんいらっしゃり、講義内容も様々なもので、「次はどの講義を聞こう！」という感じで意気揚々と会場内で興奮しておりましたwww</p>

<p>「WordCamp Fukuoka 2011」後の懇親会でもたくさんの方々とお話や名刺交換などさせていただき、自分…触発されまくりで、やる気心にガソリンが注がれた気持ちでした。</p>

<p>そのお陰もあり、本格的に「WordPress」の導入を考え、実際に行動に移すことが出来ました。<br />
おそらく、これから「WordPress」によるサイト構築をお客様に薦めることも多くなってくると思います。</p>

<h2>ブログ作ってみたはものの…</h2>
<p>心配なのは3日坊主的にならないかという事…(笑)</p>

<p>一応、アスパラスタッフで気ままに書いていこうと思うのですが、仕事もかなり詰まってて、<br />
正直週一くらいで更新できれば万々歳と思っています。</p>

<p>まじめな話や技術系の話、美味しい物の話や楽しかったことの話など、<br />
これから色々と見てくださっている皆様にお伝えしていきたいと思っています。</p>

<p>では、頑張ります (・∀・)v</p>]]></content:encoded>
			<wfw:commentRss>http://www.asparagus.jp/blog/sekkaku-blog/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>株式会社アスパラガスのWEBサイトをリニューアルいたしました！</title>
		<link>http://www.asparagus.jp/blog/first/</link>
		<comments>http://www.asparagus.jp/blog/first/#comments</comments>
		<pubDate>Wed, 27 Apr 2011 00:00:43 +0000</pubDate>
		<dc:creator>アスパラガス</dc:creator>
				<category><![CDATA[アスパラガスからのお知らせ]]></category>
		<category><![CDATA[アスパラブログ]]></category>

		<guid isPermaLink="false">http://www.asparagus.jp/?p=1</guid>
		<description><![CDATA[アスパラガスは2007年4月に起業し、5年目に突入しました。
同時に、4年間も自社サイトをほったらかし…　もとい、丁重に保存状態を保ってきたので、そろそろ心機一転サイトもリニューアルする運びとなりました。]]></description>
			<content:encoded><![CDATA[<h2>この4年間、周りの人たちにも恵まれ、順調に会社としてやってくることができました。</h2>
<p>自分たちの仕事ぶりを評価して頂き、それによって新しいお客様をご紹介していただいたり、制作実績をご覧になられたお客様からのお問い合わせを受け、お仕事に発展したりと、とてもありがたい状況です。</p>

<p>改めまして、アスパラガスを成長させていただいた全ての皆さまに、感謝の気持ちをお伝えいたします。<br />
そして、今後のアスパラガスはこれまで以上に"まっすぐ"成長していきたいと思っております。</p>
<p>フード事業部におきましては、新しいコンセプトのもとに、新店舗を構える準備を進めております。<br />
詳しい店舗情報や内容に関しましては、ただいまスタッフ一同で、試行錯誤しておりますので、展開が決まり次第、こちらのブログや直接皆様へお話したいと思っております。</p>

<p>簡単ではございますが、ホームページリニューアルのお知らせと、皆様へのご挨拶と代えさせて頂きます。<br />
今後ともアスパラガススタッフ一同、よろしくお願いいたします。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.asparagus.jp/blog/first/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
