http://www.sankohan.com/



町屋で宿泊ができる、京都の「山光庵」様のサイトを作成させて頂きました。

京都の町屋といえば、平安時代からあったといわれている京都の伝統家屋です。
それゆえ、いわゆる京都のイメージ、「慎ましやかな」「気品あふれる」雰囲気を大事にし、
デザインをさせて頂いております。

サイトは、山光庵様のサイトで「予約方法」や、京都のイベント情報を掲載していく
「京都ブログ」を載せ、実際にお泊り頂く、宿泊施設「かすみ庵」と「景山庵」へリンク
させています。
※「景山庵」は工事中で、完成予定2011年2月のため、サイトはまだ準備中です。

全部で、3サイトの作成をすることになるので、それぞれの雰囲気を合わせつつ、
違うものにしていく必要があり、まず最初に3サイトのカラーやボタン、お客様からみた
利便性を考慮したリンク設定などの設計を最初にさせて頂きました。

また、宿泊のお申込みをして頂く際、ご予約案内ページで、ＰＤＦをプリントアウトして
いただきＦＡＸをして頂くのですが、お客様にとっては、ひと手間ふた手間とかかる作業
であり、いかにわかりやすく面倒なく動作して頂くかを考えデザイン致しております。

サイトが3サイトあり、それぞれのページで共通して使用するページもあるので、
ページ戻りがしやすいように、パンくずをつけたり、レフトナビにリンク先へのバナーを多く
設置したりし、使いやすさにも考慮致しました。

「山光庵」様の宿泊施設、「かすみ庵」「景山庵」はともに代表様の御子息のお名前から
付けられたということをお伺いし、お子様のように大切にされておられるのだなと感じ、
今後も長く運営して頂けるよう、流行りの流されることなく万人に愛される雰囲気づくりに
努めました。
そして、「かすみ庵」は、女性よりな雰囲気「優雅」「柔らかい」を強調したカラー小豆色、
景山庵は、男性よりな雰囲気「紳士的」「シック」さを強調した、沈香茶に決めさせて
いただきました。

まだ「景山庵」は準備中ですが、2サイトから3サイトになり、見る側＝お客様の立場に
なってみたとき、使いにくくなっていないか気持ちよく見られるサイトがどうかを
考えデザインさせて頂きたいと考えています。

http://www.kknissin.com/



厨房用品、厨房機器販売の大阪の株式会社ニッシン様のサイトを作成させて
頂きました。

今回は、コーポレートサイトで、あまり堅くなりすぎないようなデザインを
ご希望でしたので、全体的な雰囲気は柔らかく、暖かなイメージを持って
頂けるようにカラーを、ブルーとオレンジを選択しています。

また、堅すぎない雰囲気を持ちながらもしっかりと、
会社を知って頂けるよう、真ん中には、事業とされている、
「業務用店舗厨房用品について」と「オーダーメイド加工品」、
「加工品事例」を見やすい場所に配置しています。

お客様は、スーパーマーケットやレストラン・カフェ、百貨店、ホテルなど、
飲食店あるいは、接客業を主とされておられる所が多いと思いますので、
全体的な雰囲気で一番気を付けてデザインをさせて頂いたのが、
「清潔感」です。ごちゃごちゃせずに、すっきり見え、かつ洗練された雰囲気に
見えるように作成しています。

「オーダーメイド加工品事例」についてですが、加工品は、
株式会社ニッシン様がお客様の要望に応じて加工をされる商品であり、
その事例をニッシン様自身が載せれるようにプログラムが組み込まれています。
サイトを見られるお客様は、この事例を見てご希望の要望にマッチした場合、
あるいは近い商品があった場合は、ご注文されやすくなります。

トップ以外のページのメイン写真の部分は、トップの雰囲気に
合わせてやわらかい雰囲気で同系色のカラーの写真を選択しています。

サイトを見られるお客様が見やすいように、ボタンも大き目に作成し、
ボタンの内容もわかりやすいように、画像を配置致しました。

黒毛和牛、国産豚肉を販売されておられる、京都西陣の「ツルヤ精肉店」様のトップの
デザインを作成させて頂きました。
幅広い年齢層でサイトを見て頂けるよう、「おいしそう」「わかりやすい」が目で見て
伝わるようにデザイン致しました。
文字の大きさは大きめに強調されるようにし、写真は食欲がわきやすい明るい写真を選択
しています。

楽天ショップは商品に応じて、その種類のバナーをいくつも作成していくので、
数あるバナーのデザインを手掛けていきますが、いかにそれぞれの商品の良さを
生かしていくかを考えながら作成しました。
まとまりのないバナーだと伝えたいことがわからず、何の商品だかわからない・・となって
しまいますので、そうならないようバナーの余白やフォントの装飾、文字間の統一を図り
ながら作成しています。

今回メインカラーは白ベースに緑、オレンジを選択しています。
背景に設定した牧場は、自然で育った新鮮な牛や豚をイメージし、作成しております。
バナーは主にベースカラーを黒で設定し、商品の良さをより引き出せるようにしています。

楽天ショップは、数あるサイトの中から、お客様が探してこられるので、サイトを見て、
わかりにくいと、すぐに他のサイトに移られてしまいます。
より、「わかりやすく」「おいしそう」にという点に重点をおき、今回作成させて頂いております。

http://store.shopping.yahoo.co.jp/mizu-syori/


ポンプや純水器といった水処理用品をお取扱の、水処理ドットコム様。今回はYahoo!ストアの新規制作ということでお話を頂きました。

カートリッジフィルターイオン交換樹脂といった消耗品から、ポンプや高圧洗浄機、コンテナタンクなどにいたるまでの非常に豊富な水処理用品をお取扱です。


サイトデザインについてはかっちりと出来上がったものを頂き、それをYahoo!ストア上で可能な限り再現するという進め方での制作をさせていただきました。

Yahoo!ストアはモール型のショッピングサイトになりますが、独自ショップと比べると、そのカスタマイズ面では独特の縛りがあります。楽天よりも大分制限度合いが高いものです。
これを踏まえてどれだけ必要な情報を盛り込んでいくか、パズルのような店舗構築をいかに無駄なく行うかに注力しました。

例えばレフトナビ一つ取っても、Yahoo!ストアに元々ついているナビゲーションの見栄えは物足りないと感じられる場合が多いです。
ですのでタグを利用しての構築になりますが、Yahoo!ストア上でのタグの制限というものがあります。また容量制限もあります。主にこの二つをかいくぐり、今後のことも考えた構成で構築をしていかなければなりません。

今回はナビゲーションだけでなく、カテゴリページやフリーページなどでもそういった点に特に配慮しながら構築を進めました。フリーページでも1ページごとの容量オーバーを考慮する必要があるため、頂いたデータにボリュームがあれば分割したりといった作業も行います。

Yahoo!ストアで元々提供されているストアの形は非常にシンプルなものです。
見栄えにこだわりがなければ、比較的簡単に店舗構築も進めていけます。

ですがやはり見た目のきれいなショップ、全体が見やすくテキスト類も読みやすいショップにお客様は集まります。
頂いたデータが完成されたもので、それをYahoo!ストア上で無駄なく再現していく。このあたりのバランスを取りながら進めていくことで、すっきりとかつボリューミーなYahoo!ストアが完成しました。

http://www.daiwa-computer.co.jp



システム開発、ソフトウェア開発をはじめ、非常に幅広く事業を展開されている大和コンピューター様。今回は、コーポレートサイトのリニューアルということで頂いたお話です。

今までホームページを何年も運営してこられていると、やはりページ内の情報がより新しいものになっていたり、デザイン面でもより新しいものにという要望が生まれていたりと、初めて制作を行うというケースでは出てこないポイントがいくつもあります。
ですので、特に次の点に配慮しながら制作を進めていきました。


【リニューアルに伴って】
そういったご要望、またリニューアルにあたってはページのURLに変化がある・ないという点が重要ですので、新規に作成するページや内容が変わるページ、内容が変わらず運用するページなどなどをまずお伺いし、その上で何度も打ち合わせを重ねて全体をまとめ上げていきました。


【コーポレートサイトでのビジュアルバランス】
ビジュアル的な部分でも、コーポレートサイトとしての堅牢さを損なわないようにしながらも、明るい色をメインに据えるとともに、今らしさを打ち出しています。

コーポレートサイトでは「絵」まではいかない、例えば矢印やワンポイントモチーフなどのちょっとしたパーツが多量に必要とされますし、画像化されたテキストもかなりの数にのぼります。さりげなく馴染ませる、というバランスが、企業のホームページという場合には大切です。
そういった細かなページ内のパーツ類や見出しなども、全体の雰囲気に合うものを、何度も打ち合わせの上制作させていただいています。


【ナビゲーションの充実】
コーポレートサイトでは、ページ数が多く、また将来的にも増えていくということを踏まえてナビゲーションを設計します。各ページにリンクするボタンなどですね。

今回はご希望をお伺いし、ドロップダウンのナビゲーションを導入しました。グローバルナビゲーションと呼ばれる、画面の上部に位置するナビゲーションです。

ドロップダウンは、マウスを乗せるとその下部にずらりとボタンが出てくるという動きをするものですが、「マウスを乗せるまでは見えない」ために、ページ内をすっきりとさせることができ、サイト内のページボリュームが多い場合には有効な手段です。


また今回は各ページの属するカテゴリ（事業概要に属する、ＩＲ情報に属するなど）によって、画面の左に配するナビゲーションも変化を持たせました。
これにより、煩雑になりがちなコーポレートサイト内のページ移動をスムーズにすることが可能になっています。

ホームページを見ていて、どなたでも一度は「あのページはどうやって行くんだったっけ？」と思った経験がおありだと思います（ページボリュームが多いほど、その傾向は強まります）。

このことを踏まえ、ナビゲーション手段を多く、様々な形態で盛り込みました。
ページの本文エリア右上にあたる部分にトピックパスとも呼ばれる「今いるページはどのような経路を辿っているか」のナビゲーション、フッタ部分にも主要なページへのテキストリンク配置、サイトマップページ。
初めてサイトに訪れる方もそうでない方も、サイト内を行き来する上でよりスムーズに動けるように、配慮をしています。

http://www.gion-hatagen.com



京都で一味・七味唐辛子を販売されている、祇園はた源様。その名の通り、祇園の真ん中に店舗をお持ちです。
今回は新規制作としてお話を頂きました。


お取扱の商品は一味、七味、八味（というものを私恥ずかしながら初めて知りました）などの唐辛子もの、そして柚子胡椒や山椒、黄金塩などの薬味ものです。

サイトデザインをするにあたり、お写真と実物を拝見し、パッケージがとてもきれいで統一感がある点に着目しました。実際にあるお店で、実際にある商品なのですから、その印象とサイトの印象は共通してあるべきです。

ということで、パッケージに使われている金箔付きの和紙をモチーフにさせていただきました。
色づかいも、お伺いしたご希望に沿い、濃いカラーを多く使ってまとめています。こういった色構成だと目立ちやすくなりますから、白ベースの多いウェブサイト群の中で勝負しやすくなるという利点もありますね。

また、実店舗をお持ちの場合には、ウェブサイトと共通のイメージで何かの広告物を展開するといったケースもポピュラーです（セールのお知らせなんかが分かりやすいですね）。
ある程度インパクトのある構成がしてあると、そういった際に展開しやすいということもあります。

ウェブサイトは情報が伝わることがもちろん大事ですが、イメージ戦略として非常に大きなウエイトを占めるものなので、サイト制作時にはみっちりと打ち合わせをさせていただき、お客様ご自身の方向性を固めていただくことが大切なのです。


今回は、新商品や既存の商品のご案内を自社で行っていきたいというご希望を頂いておりましたので、一部にブログシステムを導入しています。
商品の写真にはどのような設定をしておくか、どんな表示が必要かなどのご要望をお聞きし、その上でサイト全体の雰囲気に合った構築になっています。
スタッフブログはより「ブログらしさ」が感じられるよう、独立したデザインとなっています。


ほかには今後どんどん商品の展開も増え、ページ増加も考えられますので、構成が変化しても対応できるようにレイアウトをしています。

http://www.iconet.co.jp/

今回は、飲食店事業の運営をされておられる、「イコン株式会社」様のサイトを
作成させて頂きました。

イコン株式会社様は、多数の飲食店を日本全国に運営されておられる会社様であり、
それぞれの飲食店を一つのサイトで紹介するということは、
個性を出しすぎてはいけない、シンプルすぎてもいけない、と様々な事を考慮した上で
デザインさせて頂きました。

ただ、ユーザーはあくまでも、イコン株式会社様で働きたい！と考えておられる方
ということで、シンプルに分かりやすく、活気ある雰囲気を前面に出す形で
デザインしています。

カラーは、派手になりすぎないように、「白、灰色、クリーム」を使用し、
シンプルですっきりした清潔感のあるサイトになっています。

サイト構成としては、トップ、企業情報、店舗一覧、採用情報、お問合わせとあり、
採用情報のみ採用情報トップを作成し、デザインもここだけ違う形にしています。

こちらのページでは、実際に今働いておられる社員様の紹介もあり、
質問、回答という形式で記載しています。
社員様の写真をより、多く取り入れ、社内の雰囲気が伝わるようにしています。
採用情報だけ違うデザインにすることにより、サイトを見るお客様に飽きが
気にくいという効果もありますし、ここで働きたい！と思って頂ける方が
より増えるのではないかと思います。

そして、新着情報とスタッフブログには、プログラムを設置しています。
トップのメニューボタン下にある新着情報は、幅も大き目に取っています。
サイトに来られるユーザーは、トップから来られることが多いかと思いますので、
見てすぐ、情報が見れるように分かりやすいように上部に設置しています。

また、スタッフブログのページですが、トップ写真は実際に働いておられる方の
写真を選択致しました。

トップのFLASHですが、動くものに一番目がいくと思います。
流れとしては、イコン株式会社様がお店で出されておられるお料理の「洋食」、
次に、「和食」を載せ、次に店内の写真や出しておられるお酒、
そして次に、全店舗の写真を載せ、コンセプトである、
「喜んでいただくこと、そしてそのために成長をし続けていくことが我々の企業理念です。」
を、表示させています。
このように、動画の中にストーリー性を持たせて、イコン株式会社様の
ことを知って頂けるような紹介のような内容になっています。

レディースファッションの楽天ショップ、another様の店舗構築をお任せいただきました。
ヒアリングといただいたご要望にもとづき、すっきりとかわいいデザインにさせていただきました。


楽天ショップは確かに簡単に始められますが、普段自分がお買い物をしているような形に持っていくまでは、なかなかに多くのステップを踏む必要があります。htmlタグも必ず必要になります。

そしてhtmlを使って制作をする場合、分かりやすくタグを組むということが必要です。

今回は弊社でスタート形をお作りした後、運営は自社でなさっていくとのことでしたので、この点に配慮しながらの制作をさせていただきました。

■動きのあるページ制作■
ショッピングサイトは特に、見た目の移り変わりが激しいジャンルです。
シーズンによって商品が入れ替わったり、キャンペーンが次々に変わっていったり（しかも楽天やYahoo!といった、モール型のショッピングサイトであれば、楽天主催やYahoo!主催の企画もあります）、もちろん新商品の入荷や新たなジャンルの商材を追加ということも考えられるからです。

その点を考慮すると、モール型ショッピングサイトは、そのモールのフェアも意識した展開を考えてスタートさせる必要がありますので、立ち上げ時の姿のままでしか運営できないようなレイアウトは避けるべきですね。
こういった点に配慮して、後々のバナー追加やサイドナビ（楽天ではレフトナビといいますが）を変更していきやすいように制作をさせていただいています。

動きのあるといえば、リンク部分のアクションも意外と大切です。
リンクが張られている箇所にマウスを持っていくと、字の色が変わったりということですね。
地道な部分ではありますが、こういったところも「ショップを訪れるお客様」を楽しませる大切な要素なので、気を抜かずに構成を行っています。


■ショッピングサイトの落とし穴、商品詳細ページ■
自分自身がお買い物をする時にはあまり意識しないものですが、ショッピングサイトの商品ページは非常につくりこみが重要です。
楽天ショップは特に「楽天のＴＯＰから商品名で検索して」見にいかれるお客様が多いので（ほぼその動きになるといっても過言ではありません）、商品詳細ページには力を入れる必要があります。

現在の楽天ショップでは、RMSを使っての商品登録の際、最低限必要な文章や選択物以外にも、htmlタグを使用してのより高いＰＲが求められています。
画像をたくさん、そして大きく見たい。
商品情報は見やすくないと。
お客様方は声には出しませんが、そう考えています。

ですので今回は商品詳細ページの型もご提供し、打ち合わせをさせて頂いて、その後の商品登録がスムーズに進むようにとさせていただきました。

自分だけのこだわりのスタイル、ヨーロッパ感覚のレディースファッションを扱っておられるfairybell様です。
今回は楽天ショップのトップページを作成いたしました。

もともと、Yahooでショップをされており、プラス今回は楽天ショップをとのことで制作にかかりました。

楽天サイトといえば、最近各お店できれいにデザインされたものや色々な見せ方をするサイトが多くなってきています。
特にトップページはお店の顔でもあるので、本来なら自分でできるけど、やはりトップページのデザインはかっこよく見せたいので・・・という依頼も増えてきています。
楽天ショップは色々な制約がありながらも、ゴールドで作成する場合は普通のサイトと同じくらいの自由度もあります。また、RMSで作成する場合でも色々な工夫によって見栄えよくデザインすることもできます。

今回は、すでにYahooでオープンしている店がかわいい作りなのでかっこよく大人っぽくデザインしてほしいとのご要望でした。
楽天ショップといえば、バナーも命です。

メインカラーは、黒とグレー。使い方によっては暗く重たいページになりがちですが、あくまでも若い女性のお洋服ということもあり、かわいらしさも組み入れるように心がけてデザインしました。

トップページの商品の入れ替えや、各ページはお店のほうで更新していくとのことですが、お客様が更新される場合にできるだけ更新しやすいようにトップページの幅などを考えて構成しております。

最近ネットショップの依頼が多い中、いかにその向こうにいらっしゃるお客様に見やすく使いやすくできるかが大きなポイントにつながることを考えながら作成しております。

http://www.kawabata-hp.or.jp



京都市右京区の河端病院様のホームページをリニューアルされるということで、お話を頂きました。


デザイン面でのリニューアルとともに、よりいっそうのコンテンツの充実をはかるために何度も打ち合わせをさせて頂きました。

リニューアルというものは、現在までのホームページ運営からフィードバックされたものを汲み上げてよりベストな形を作る絶好の機会です。

長くホームページ運営をされてこられた河端病院様からのご要望を盛り込み、またヒアリングを重ね、flashや地図、先生方のイラストなども作成をさせていただくことになりました。

■目に訴えるもの■
flashはコンセプトを頂いたうえで全体との調和をはかり、アクロバティックなアクションを避け、河端病院様のロケーションや方向性がつたわるよう大きな写真のゆったりとしたものを。
親しみやすい先生のイラストや、見慣れた形態で分かりやすい地図を。

病院のホームページをご覧になる方、は、楽しむためではなく情報を得るという目的をお持ちです。
情報をしっかりと掲載する中で、こういった視覚的に訴える部分は「目の息抜き」的な大切なポイントとなるのです。


また、ホームページをご覧になる方には、5ページほどのものであっても「今どこを見ているかわからない」という状況は発生しやすいものです。

今見ているページがどんなまとまりに属しているか。
分かりやすくナビゲーションするために、河端病院様の場合はコンテンツ内容で大きくまとまりを持たせ、病院の案内であればテーマカラーのエメラルドグリーンを、診療の案内であればライトブラウンをといったように、ポイントポイントで色分けを行いました。

こういった、文字以外によるナビゲーションというものも、最終的な完成度を左右する点なのです。


■テキストのリズム■
河端病院様では整形外科、内科、外科を設置されており、その詳細な内容や設備案内が必須項目です。
治療についても具体的に説明を掲載し、個人情報保護方針や概要についてもテキストボリュームが多くなります。

文字のサイズに関しても全体的にやや大きめ、画像化したテキスト類も意図的に大きくレイアウトを行ったため、いかにリズムよくページの内容をまとめ上げていくかが肝心です。

要所要所に見出しを立て、写真や区切りを挿入することで、そういった文章を目にやさしく提供することで、全体としてすっきりとした印象を与えるホームページが完成しました。


■モバイルサイト■
今回はモバイルサイトの制作もさせていただきました。
病院へ「行く」という機会はとても多いので、家を出てからも情報を確認できるといった意味でもモバイルサイトの必要性は大きなものです。

携帯電話のウェブブラウザ機能は発達しましたが、今もなお、重要になるのは「ページの読み込みが早い」という点です。

そのため、ＰＣ版のホームページの内容を簡潔にまとめなおし、携帯電話の画面サイズで見ても見やすいように組みなおしています。

テキストのサイズは個人によって本当に差があります。文字サイズを小さくして一行に20文字程度入る設定の方もいれば、逆に一行に8文字程度の方もいます。
多様なケースに対応できるよう、改行や間隔にも配慮したコーディングを行いました。

また、携帯電話でのホームページ閲覧では「アクセスキー」というものがよく使われています。プッシュボタンの1を押すとあるページへ移動し、♯を押すとまたあるページへ移動する、といったものですね。

パソコンで見ていれば短く思える文章も、携帯からだと非常に長く感じられることが多いので、このようなテクニックで細かくユーザビリティを上げていくことが重要なのです。