作品紹介 アーカイブ

ブログTOP

2009年9月18日

介護をわかりやすく伝えたい…!

9月も半ばになり、夜はだいぶ涼しくなってきましたが
仕事に熱い男が多いからか
京都制作部は夜になってもクーラーが稼働しています。
仕事をするのに心地よい涼しさ(寒さ)の中、
介護のことがよくわかる本の第二号が完成いたしました。

■ツール名
介護のことがよくわかる本VOL.02 2009秋冬

■クライアント
株式会社プロトコーポレーション様

■ツール概要
初心者に向けてわかりやすく介護情報を伝え
株式会社プロトコーポレーション様が運営する介護情報サイト
「オアシスナビ」に誘導するための本

■テーマ
パートナーの介護〜支える介護、支えられる介護〜

この本は、誰にも将来、起こりえる「介護」を
初心者に向けてわかりやすく伝えるという事を前提にしています。
私たちは、この情報マガジンをユーザー目線でわかりやすく表現する事に
重点をおき、制作しました。

ページを追って読んでいけば、自然に介護の知識を理解していただけるよう
編集会議を何回も重ね、情報コンテンツのセグメントや内容を
ブラッシュアップ。決定したコンテンツを
一冊の雑誌にまとめ上げる大変さを身をもって体験しました。

介護経験者のインタビューや、身体にやさしい料理で読者の共感を得て、
介護の入り口となる疾患を、老年病専門医から紹介し、
現実的な介護の仕組みの解説から、介護施設の紹介へとナビゲートする。
日頃、眺めているだけではわからない
本の仕組みを初めて知ったお仕事でした。

これからの人生を充実させる為には婚活も大事ですが
介護にまつわる知識も豊かな人生を送るために
必要であることを、この号を通して実感しました。

作品紹介 アーカイブ

ブログTOP

2009年9月 2日

シックスセンスを磨く旅!?


ようやく過ごしやすい気候になってまいりました。
皆様いかがお過ごしでしょうか。
 
今年は9月の大連休(シルバーウィーク)もあり、
「どこかに旅を……」とお考えの方も多いと思います。
そんなときにぜひご覧いただきたい旅情報誌が
完成しましたのでお知らせいたします。
 
yumelin_h.JPG
 
yumelin_otaru.jpgyumelin_kaisyu.jpgyumelin_koriyama.jpg
 
■ツール名
湯めぐLINK 2009年秋号
WEB湯めぐLINKでも本誌を見ることができます!
 
■クライアント
株式会社 共立クリエイティブ様
 
■ツール概要
株式会社 共立メンテナンス様が運営するホテルを中心に、
季節ごとの「旅」をご提案する情報誌。(A4サイズ・16ページ)
紹介されている宿は、ホテスパドットネットで予約可能。
※過去にも当ブログにて、2008年春号2008年夏号
2008年秋号についてご紹介させていただきました。
 
■秋号のテーマ
五感でする旅。
 
 
 
旅に出ると、五感が鋭敏になりませんか。
 
景色は美しく、ごはんは美味しく、
風の音や香りはいつもと違い新鮮で、
触れるものすべてに「わぁ」と小さく感動する。
旅に出かけると、そういった幸せな感覚が繰り返されますよね。
 
五感をぞんぶんに楽しませることこそが、
旅の醍醐味ではないか---という切り口で
いろいろな旅をご紹介しているのが、この秋号です。
 
五感が鋭敏になる、というのはつまり、
子どものように純粋になる、というのに近いのかもしれません。
 
そこで、ふと、思ったのです。
 
 
「感覚が鋭くなれば、第六感だって磨かれるのでは?」
 
 
虫の知らせ、女の勘、見えないものが見える等、
いろいろな第六感(超感覚)は、
やはり五感を磨いてこそ現れる感覚なのでは……?
 
シックスセンスを持ち合わせていない私としては、
まずは五感を磨く旅に出かけ、第六感を手に入れる。
そしてその得体のしれない超感覚を駆使して、
超人的なクリエイティブを……!!!
 
……なんていう妄想を抱きつつ、
どこへお出かけしようか検討中の絹田でした。
 
皆様もどうぞ楽しい秋旅をお楽しみください。

作品紹介 アーカイブ

ブログTOP

2009年8月 4日

宿・ホテルの予約サイト HOTESPA.netトップページリニューアル

第二制作事業部第一制作部の近藤です。

4月から東京勤務となり、東京サマー満喫!と言いたいところですが
天気の悪い日々が続き夏らしさをまだ実感できておりません。
関西は昨日梅雨明けの発表があり、さっそく暑いようですね。

今年の夏はお盆休み+9月のシルバーウィークと連休が2回もあり
ワクワクと心弾ませている方も多いのではないでしょうか?

さて今回は、予定がなにもない~!という方も一度ご覧になっていただきたい
宿・ホテルの予約サイトHOTESPA.netを紹介させていただきます。
以前にディレクターの河本から紹介しているサイトですが、
昨年12月のトップページリニューアルで携わらせていただきました。


デザインするにあたってトップページのみのリニューアルということもあり、
いかに新しく、見やすく、調和したデザインにするかという所に重点を置きました。

[新しく・見やすく]
・グローバルメニュー
癒しの湯宿・ドーミーイン・SPAの3種類の施設を、色分け&大きなタブで区切ることにより違いを明確にさせました。
各ボタンはサイズを大きくすることにより、ユーザーがより認識しやすいようにしました。
また、背景には画像などは入れずスッキリさせることにより、コンテンツ部分を目立たせるように考えました。


hotespa01.jpg



・コンテンツエリア
施設・キャンペーン等の情報量が増えた為、縦長になっていた情報を横幅を広げることにより
優先度の高いコンテンツを一目で見られるように考えました。
(トップページのみ750ピクセル→950ピクセルに変更)

hotespa02.jpg



[調和]
トップ以外はヘッダとフッタ以外は変更しないことになっていたので、
中ページに入った時に、幅の違いに違和感のないデザインをするように心掛けました。
・ヘッダ・フッタをトップと中ページで共有できるものを使用する。
・ベースの幅を同じする。

旧サイトの幅をベースに、追加された横幅をタブ状(付箋のような感覚で)に表現することで、
新・旧のデザインに調和をもたすことができたのではないかと思います。

hotespa03.jpg



このサイトのリニューアルでは企画からデザインまで携わることができ、伝える重要性を再認識しました。
言葉で伝えることがとても苦手な私ですが、
せめてデザインだけでも「さすがですね!」と言われるようにこれからも努力・努力・努力・・・いたします。

作品紹介 アーカイブ

ブログTOP

2009年7月21日

山田松香木店リニューアル!(デザイン~コーディング&技術編)

ども、松村→澤ときて、最後を務めます。ワキです。
今回、山田松香木店様のサイトリニューアルでは、イロイロと仕掛けやこだわりが盛り込まれているのですが、その中でも最も特徴的なものをひとつ紹介します。
「インターネットユーザーの閲覧環境にあわせたデザイン」について考慮したものです。


横に広がりのあるデザイン
先の澤さんのエントリーにて軽く触れているように、横に広がりのあるデザインを今回のリニューアルにおいて提案しました。
ただ、一昔前まで(大体3~5年くらい前でしょうか?)、この業界では「横幅760ピクセル以下でデザインするのが常識」とされてきました。その理由の多くは、ノートパソコンで閲覧しているユーザーの多くが800×600ピクセルの表示サイズが限界だったことからでした。(また、横に「お気に入り」を表示させて使うデスクトップパソコンユーザーへの配慮でもありました。)


では、最近のユーザーの閲覧環境ってどうなんだろう?
ここ数年、急速な液晶モニターの大型化と低価格化により、高画質大型モニターの普及が高まってきました。これにより、1024×768ピクセル以上の大きな解像度で表示できるノートパソコンやデスクトップパソコンが大多数となり、800×600ピクセルでしか表示できないパソコンのシェアは非常に低い、数パーセント(調査データによりまちまちなので断定はできませんが、大体1~8%位)にまでなりました。これを受け、横に広がりのあるデザインが可能な状況になったのです。

なんと最新モデルでは1920×1080ピクセルのフルハイビジョン表示可能なノートパソコンも発売されているそうです。また、最新OSのWindows Vistaや今年発売予定のWindows 7などはワイド表示サポートが標準となっているようです。


いざ!コーディング!
ただ、このデザインを受け、何も考えずに単純にコーディングすると、ほぼ全てのユーザーの環境で、横スクロールバーが表示されることになります。これを避けるため、「見えないとダメな領域」と「見えなくても良い領域」に分けました。
下記のページの場合は右の背景画像は「見えなくても良い領域」とすることで、現在多くのシェアである1024×768ピクセル以上の表示エリアを持つユーザーが閲覧した際、横スクロールが出ないように構築しました。



あまり大きくとらなければ「お気に入り」や「履歴」を表示させても横スクロールは出ません。



ちなみに、約30%以上のシェアがあると言われる、1280×1024ピクセル以上が表示が可能なユーザーには全ての要素が見れるようになっています。



我々WEBデザイナーは、ユーザーの色んな使用状況を想定し、ユーザーエクスペリエンスをより良いものにするための工夫や仕組みを常に考えながら日々制作にあたっています。あまり気付いてもらえない地味な部分が多く、脚光を浴びることはほとんどありませんが、サイトに訪れたユーザーにとってストレスにならず、目的の情報にすんなり到達でき、再度訪れてもらうこと(出来ればお気に入りに入れてもらうこと)が最終Goalなので、違和感無く、存在に気付かれないことこそが理想の仕事と言えるのかも知れないです。

作品紹介 アーカイブ

ブログTOP

2009年7月 6日

山田松香木店リニューアル!(表現コンセプト~デザイン編)

第二制作事業部第一制作部の澤です。

「日本の香り」香木を提供されている、山田松香木店様のホームページリニューアルに携わりました。
前回に引き続き今回は、いかにデザインを構築したかについて「表現コンセプト~デザイン編」としてお送り致します。

今回、リニューアルに携わる担当者(松村、澤、脇)の共通認識としては、
情報:コンテンツの整理をし、認識しやすいページへ。
視覚:歴史有る香木を視覚的に感じさせるページへ。

香木とは
★どういうものなのか
★どう楽しむのか
★どうしたら入手できるのか
この導線を分かりやすくコンテンツの整理をいたしました。
敷居が高い認識がある香木を、多くの人に興味を持っていたけるのがサイトの目的であると考えました。このサイトを通じユーザーが「香木」への入口となれるよう、分かりやすく誘導し、楽しみ方などを伝えられるよう試みました。

表現コンセプト:歴史を感じさせながら、香木をより身近に感じさせる
-------------------------------------------------------------

[ 情報 ] 誘導ボタンの認識のしやすさ

[ グローバルメニューエリア ]
ホームページに訪れるユーザーが認識しやすいように試みたこと。
「コーポレートサイト」と「オンラインショップサイト」の誘導しやすくするためメニューボタンをヘッター部分に設け、2つのサイトの違いを色で分けてみました。

yamadamatsu01.jpg

・コーポレートサイトは、落ち着いた茶系を用いて歴史を感れるイメージに
yamadamatsu02.jpg

・オンラインショップサイトは、明るい黄金色を用いて身近なイメージに
yamadamatsu03.jpg


[ 各メニューボタン ]
商品の紹介するページへのリンクボタンには、写真を入れることで一目で分かるようにしました。
yamadamatsu04.jpg


[ 視覚 ] 意識して試みた、香木「日本の香り」のビジュアル化

香木の「香り」をどうホームページ上で感じてもらうか・・・
香りは広がり、香木の歴史はこれからも続くなど。
香りの広がりと歴史の継続を出すため、横幅に制限を持たずにレイアウトすることにしました。
そのことにより広がりを感じれるホームページになったと思っております。

yamadamatsu05.jpg

歴史有る山田松香木店様のホームページ作成に携わる事ができ、私の中でも今後のデザインの幅が広がりました。

続いては、html化に取り組んでくれました脇より「コーディング&技術編」を紹介いたします。

1  2  3  4  5  6  7  8  9  10  11

関連リンク

アーカイブス

最新のコメント