受け継がれる香　 ～香木～

リラックス---精神や肉体の緊張をほぐすこと。くつろぐこと。
リフレッシュ---元気を回復させること。気分をさわやかにすること。
　　　　　　　　　　　　　　　　　　　　　　　　　　　（三省堂 大辞林 より）

こんにちは、京都Dirの松村です。

多忙な毎日。張り詰めた毎日。ずーっとは続きません。
適度な休息が精神と体力を安定させ、気力を取り戻させます。
そしてまた次の一歩が踏み出せます。

リラックスとリフレッシュにはいろいろな方法がありますが、
「香り」という観点から癒しを提供されている企業様を紹介しましょう。

山田松香木店様です。

創業は江戸寛政八年。歴史と伝統を大切に守られている
京都の老舗企業様で、香木、香木工芸品、聞香関連品、
薫香製品を扱っておられます。

今回ficでは山田松香木店様のコーポレートサイトリニューアルと
オンラインショッピングサイトの構築に携わらせていただきました。

それではまずコーポレートサイトのご紹介から

今回の課題は「コンテンツの整理」「文字情報の認識率の向上」
「メンテナンス作業のしやすさ」です。

遥か飛鳥時代から続く香木の歴史について、その歴史も含め現代ではどうたしなむかと
いった内容を中心にコンテンツをまとめました。

また、画面サイズを大きくすることによって、以前は小さかった文字列も大きくし、
視認性も向上させています。

メンテナンスに関しては、納品後お客様で更新作業をおこなっていただくため、
Movable Typeを導入。
スムーズでタイムリーなメンテナンス環境を提供させていただきました。

続いてショッピングサイトです。

オーダーへの素早い対応と商品情報の管理、丁寧な顧客対応を実現するため、
カート部分はASPサービスを利用。

コーポレートサイトとの表現上の連動を持たせるため、
数ある中から柔軟にカスタマイズできるサービスを選択し、
導入いただいています。

またユーザーの方には商品選択から購入完了までの手順を
可能な限りスムーズに行えるよう画面遷移も考慮しています。

私共の地元京都にて、
歴史ある企業様のサイト構築に携わらせていただいた事は非常に貴重な体験でした。

山田松香木店様のように、私共も歴史と実績を積み重ね、
制作会社としてその時代の流れに沿った質の高い「表現」を
長く提供していくようにしなければと改めて気を引き締めた次第です。

さて、次回は「表現」の要、
デザインを制作するに当たってどう取り組んだのかを
担当デザイナーの澤よりご紹介いたします。

ミニストップHPとイラスト

第二制作事業部第一制作部の山本です。
ミニストップHPにて、イラストを使用したコンテンツが増えてきました。その一部を紹介します。

『採用情報トップページ』篇
ミニストップと地域の関連を表現し、会社を紹介するインデックスの役割も果たしています。

『WAONを賢く使ってますか？』篇
店員さんから、ミニストップを利用する老若男女です。名前までついちゃいました。
waonの有効利用促進のため登場したイラスト達ですが、このイラスト達が、さらに有効活用される場面が増えてくることに期待です。

『CMスペシャルコンテンツ』篇 ハロハロ、ポテト
最近すっかり、シリーズ化してきた自由研究コンテンツ。
ミニストップのファストフード商品をモチーフにしたキャラとその商品からイメージされて生まれたサブキャラがオリジナルの食べ方や商品のバックボーンなどを紹介するという内容です。ファストフード商品全品キャラクター化を目指しています！

ヘルシーファミリー倶楽部リニューアル！（コーディング＆技術編）

新型インフルエンザが収束に向かってるらしい今日この頃、
普通に風邪を引いてしまった京都制作の原田です。

ヘルシーファミリー倶楽部リニューアル！
（表現コンセプト～デザイン編）に続きまして、
「コーディング＆技術編」をお送り致します。

コーディング作業ですが、こちらのサイトは100％新規作成ではなく、
各カテゴリー内の情報コンテンツにある膨大な記事ページはそのまま使います。
そのままと言っても、当然のこと新しいヘッダ・フッタ等、
記事以外の外側のデザインは新しく作り直すことになるので、
ここでどうやって作業工数を短縮するかがポイントです！

旧サイトはDOCTYPE指定の無い普通のhtmlでテーブルレイアウト。
記事ページを使いまわすには同じ仕様で組むのが一番なのだけど、
「2009年の今、テーブルレイアウトってどうなのさ！」と。
SEO的にもソースの複雑さ等でも、何も良いことはありません。

そんなことを考えている時に、デザインが上がってきました。
それを見たとたん・・・
「あ～これはCSSで組まないと無理だな」と。
このデザインをテーブルで組むとなると大変な作業になると思いました。
これでプラン決定です。
新規でゼロから作るページはXHTMLで組むことにしました。

既存の記事ページはhtmlを無理やりxhtmlにすると、
スタイルの継承やマージン等の問題が出てレイアウトが崩れます。
そこで記事ページはhtmlのままで新デザインパーツを使うために、
スタイル問題を吸収するcssファイルを用意して対応しました。
これで作業工数はぐっと短縮されました！！

コーディングとは別に、スクリプトの開発も必要でした。
画像のマウスオーバー切り替えはもちろんのこと、
グローバルメニューのマウスオーバーで各ローカルメニュー表示、
そしてトップページには最新ニュースのスライドショーがあります。

今回これらの開発にベースライブラリとしてjQueryを採用しました。
この手のライブラリを使う一番のメリットは
DOMツリー完成後にアクション開始できることです。
ページ完成後だと長いページでは操作が出来ない時間が発生してしまう。
jQueryを採用した理由としては、強力なセレクターと信頼性があります。
MicrosoftやNokiaが自社製品に組み込むとかいう話があるくらいです。

このようにして、様々な技術が合わさって1つのサイトが出来ています。
一口でコーディングと言っても、
単にデザインをコード化するオペレーション作業では決して無く、
「コードをデザインしてるのですよ！」と声を大にして言いたい。

日々、コード文字列と戦うコーダー心の叫び。

Mission001　ヘルシーファミリー倶楽部リニューアル！（表現コンセプト～デザイン編）

どうも、第二制作事業部第一制作部の山形です。

自分はちょうどアラフォーと呼ばれる世代に突入！無事に厄年を迎えることができた、そんな世代が気になりだすことと言えば、け・ん・こ・う♪（実際あんまりに気にはしてない･･･これからは真剣に考える）
その健康について深く切り込んだ、ある企業様のWEB案件で「保健や健康等についての情報を発信するサイト」のリニューアルについての話をば。
今回このサイトを担当するにあたり、自分自身が掲げたテーマ「ユーザー目線にたってサイトをデザインする」

クライアント：株式会社法研様

法研様
　↓
[システム・統括担当]　エイケア・システムズ株式会社様
　↓
[サイト構成・デザイン・コーディング担当] FIC

ヘルシーファミリー倶楽部とは･･･
法研様が取引のある健康保険組合に向けて、保健や健康等についての情報を発信するサイト。約800社強の企業の健保組合に向けて、カスタマイズされて提供されます。
今回はそのサイトリニューアルです。

要望の内容としては、
・もっとスッキリみせたい。
・更新性を高めたい。
・カスタマイズしやすい。
要約すると、この3つになります。

表現コンセプト---------------------------------

まず、エイケア様とFICは表現のコンセプトを考えました。
ヘルシーファミリー倶楽部が提供するコンテンツは
・健康生活の情報→より健康な暮らしを目指す
・予防、チェック情報→不安を解消する
・くすり、病院、病気情報→万一のときの安心

それを踏まえて今回のサイトは
★健康な人が健康を維持するモチベーションになる
★健康な人が安心できるサイト
を目指そうと･･･つまり
・健康な人の健康意識を高め、自分で健康を維持し病気を減らす。
・健康へのモラルを高めて過度な受診や投薬をなくす。
・役立つ情報を得ることができ「健康・安心」を感じていただく。
以上のことをテーマにして方向性を確定します。

サイトの表現コンセプトは
「健康を意識する」
意識的、自主的、明るい、知的、前向きなイメージ。
健康に前向きになっていただけるような、安心感と元気を表現することに決定。

いざ！制作---------------------------------

さて、表現コンセプトも決まっていよいよ制作に移ります。

サイトカラーは「調和、安心、良識」などを表す緑と、「知性、好奇心、希望」などを表す黄色をあわせた黄緑色を基調に、健康に対する安心感と希望をイメージさせます。

取りあえず自身のモチベーションを上げる為に、シンボルマークを造ってみました。

Healthyの「H」をモチーフに家族を表現。「家族みんなで、健康な生活をしよう」というマインド。
実際この場所には各企業のロゴが入ったりと、カスタマイズされる場合があるのでどれだけ使用されるかは判りません。

で、完成したトップページはこんな感じです。
※サイトが会員制なので画像での紹介です

1. 右上には社会（街並）と健康（自然）の融合･･･ということで、
　明るいタッチでイラストを描いて配置。
　↓

2. リニューアル前はグローバルメニューに14～5個のメニューが並んでいたのを、
　新たに考案した7つのカテゴリー内に振り分けして、スッキリさせ閲覧しやすく改定しました。

3. グローバルメニューの下には「さがす・調べる」コンテンツ内の病気や薬の事を調べたり、
　病院を検索できるボタンを表示。

4. 新着記事はスペースを取らないように、記事ごとに表示し自動で切り替わるよう設定。

5. カテゴリーごとにアイコンを作成。色を変えてジャンルの違いをわかりやすく表示。
　中ページもその色で構成されています。
　↓

どの案件でもそうですが、今回は特にユーザー（健康保険組合員の皆様）が視覚的、機能的に操作しやすく閲覧してもらえるかを第一に考え、デザイン･レイアウトに落とし込みました。

いかがでしょう?「健康を意識する」という表現コンセプトに添ったサイトに見えますでしょうか？
トップページのデザインが決定すれば中ページをバシバシ制作していきます。
総ページ数が何百ページにもなる情報サイトなので、旧サイトのレイアウト・HTMLを流用しなければならないページも多々出てくるので、なるべく違和感無くデザインするように心がけました。
又、コーディング等に関する奮闘記は、後日テクニカルスタッフが語ってくれる予定です。

それと今回この案件を制作するにあたり、すごく良いエイケア様の担当の方にめぐり合うことができました。
なんというか、我々のテンション、モチベーションを上げてくれるのが上手な方で、一緒に良いサイトを造っていこうという気持ちがヒシヒシと伝わってくる、そんな担当者様！色んな面において、見習っていかねば！！と強く感じました～。
この場を借りて「ありがとうございました！」と伝えたい気持ちでいっぱいです。
また一緒にお仕事できたらなぁと思っております。

FIC主な担当者
Pro.井上
Dir.村尾
Des.山形
Tec.原田

そうだ、早夏キャンペーンで旅に出よう

GWも終了し、すっかり魂抜け気味な、東京制作の山本です。

GW中に旅に出かけた方も多いのではないでしょうか？
旅に出かけた方にも、そうでない方にも、旅するのにオススメな時期が、
実は今！から夏本番までの時期なんです。

なぜかというと、暑すぎず、寒すぎず、気候的にもちょうど良いし、
なんだかワクワクしませんか？（わたしだけ？）

それにこの季節って、平日・土日に限らず、実は一番穴場なんですよ。
GWや夏休みと違って、人が殺到しないですし、道路も電車もすいている。
なので、ゆったり・贅沢な気分で過ごせるというわけです。

弊社がお手伝いしているサイト「ホテスパドットネット」の会員の方なら、
そんなゆったり旅が出来る上に、価格まで「お得！」

それが、今回ご紹介する「早夏キャンペーン」です。

穴場シーズンの「早夏」とはいえ、リゾートホテルの場合、やはり土日は予約が
取りづらく、平日が本物のメインになります。
そこで、土日が休みの方のための「土日ハヤナツ」
平日が休みの方、または有給休暇を取る方のための「平日ハヤナツ」を打ち出し、
紙面も2つに分けて構成しました。

平日お休みの方にも、土日お休みの方にも、GWにお出かけできなかった方にも、
GWにお出かけしたけど、私のように魂を抜かれてしまっている方にも、
ゆったリラックスできる旅に出てもらいたい…という思いを込めて、制作しました。

今後も、シーズンや休暇に縛られない、自由な旅のスタイルを提案するお手伝い
ができればと思います。