犬のためのリフォームを手掛けておられる「くらすわん」様。
サイトの新規制作ということでお話をいただきました。


こちらのサイトの大きな特長は、「くらすわんについて」というページです。
かなりボリュームのある文章をいただいて、インタビュアーとインタビュイーがサービスについて詳しく掘り下げていく、という構成になっています。

リフォームはリフォームでも、「犬と一緒に暮らす」ことに特化したサービスが何よりの特色ということで、「なぜ犬に特化したのか」「どんな流れで進めていくのか」「どのような点が一般のリフォームとは違うのか」といった点を特に重点的にクローズアップしているのです。

ケーススタディや料金表を掲載するのも一つの手段なのですが、価格や例だけでは分からない部分というものも多くあります。住まいは毎日の生きやすさに直結するものですから、よりそのような「運営者の理念や姿勢」といったものが、お客様には気になってくるところといえますね。


■対談形式■
文章量がある場合、読みやすさはデザインにかかってきます。いくらよいことが書いてあっても、読んでもらえないのでは価値は伝わらないままです。

対談形式にも色々な形がありますが、今回は目に優しいことと、親しみやすさ、といったあたりがポイントです。写真もたくさん挿入し、単調にならないように組んでいきました。


■レイアウトを変える■
ポイントとしてもう一点、こちらはデザイン面です。
こちらの「くらすわんについて」ページのみ、ワンカラムになっています。向かって左のナビゲーション部分をなくしてあるのですね。
ページのテキスト量が多いため、かなり縦に長くなり、スクロールする量が多くなっています。左のナビゲーション＝左カラムがあるままだと、スクロールしていった際にバランスが悪くなってしまうのです。
また、左カラムを置いたままだと、このページの肝となる対談の部分に使えるスペースが狭くなり、窮屈な印象を与えるということもあります（使えるスペースが狭くなるとさらにページが縦に伸びるというデメリットもあります）。

ただし、ワンカラムにしてしまうからといって、ただ左カラムを抜くというだけではユーザビリティへの配慮が足りません。左カラムにあった、各ページへリンクしているエリアがなくなってしまうということだからです。これはSEO的な見地からもあまりよいことではありません。

今回はそれをカバーするため、ページの一番上に、あるいは他の項目やページに、いつでも分かりやすく移動していけるようにナビゲーションバーを特設しました。


他にも、CMSを導入してページの自社更新ができる部分を持たせ、作り込みの必要な度合を見ながらバランス調整をしたり、ノーマルなままで終わりがちなお問い合わせフォームを使いやすくカスタマイズをしたりと、細部までかなりこだわったつくりになっています。

http://www.hashimotomark.co.jp


優勝カップやトロフィー、各種メダルからオリジナルプリントまで、幅広くお取扱のHMトロフィー様。新規制作でお話を頂きました。

ECサイト（Eコマースサイトの略で、ネットショップのことです）の制作にあたっては、「何を販売する」「何種類のカテゴリがある」「いくらで販売する」というような事項以外に、たくさん決めておかなければいけないことがあります。

運営会社情報、送料、発送の際の手順や配送業者、消費税の扱い、ポイント制度の導入、そして特定商取引に関する表示といった「ネットショップを運営する上での必須項目」にあたるものです。

HMトロフィー様では、今回オンライン上で取扱をされる商品を、今までもずっとお取扱でした。ですので、今までに培ってこられたノウハウを無駄なく応用するために何度も打ち合わせをさせていただきました。


ネットショップには様々な種類のものがありますが、今回は独自ショップということで、ショッピングカート以外の部分でもかなりの自由度がありました。会社概要に色んな情報を盛り込んだり、独自で用意したいページを組み込みやすいのです。モール型のショッピングサイト（楽天など）ではポンと手が出しにくいので、これは独自ショップならではのメリットですね。SEO的な見地からも運営していきやすいというポイントもあります。

今回はショッピングカートに加えてブログシステムも導入したうえで、運営しやすい形と、お客様が見やすい形を両立させています。

たとえばショッピングカートでは「自社で商品情報を登録・変更・削除できる」という点が一番のメリットですが（これはどのようなツールがくっつけられていって機能強化されていっても、変わらない点です）、このページを形作っていく上で、こちらからも様々なご提案をさせていただき、よりよい形を模索し続けながら制作をさせていただきました。

また、ブログシステムの使い方や商品登録の方法などをお教えするサポートも別途提供させていただきました。

中国人女性との国際結婚のご紹介などをされている、東縁倶楽部様。
今回新規制作にてお話を頂き、制作をさせていただきました。


「結婚相談」といいますと、まず対象となるユーザ層が非常に広くなります。
20代以上の男女のうちどのラインをメインターゲットとするか、ということですね。
東縁倶楽部様では「中国人女性を日本人男性へご紹介する」ことを強みとしてお持ちでしたので、まずどのような方へ向けて発信していくか、という方向性固めから打ち合わせをさせていただきました。

昨今は結婚相談、お見合い、婚活パーティーなどなど、この分野は大きく広がりが出ました。その中で、お相手を探していらっしゃる男性の印象に残るためにはどのようなデザインが最適か？　どんなデザインにすれば、閲覧者の方自身が幸せな将来へ向かっていく前向きな気持ちを感じていただけるか？　といったことを考え合わせた構成になっています。


こういった内容のウェブサイトでは、閲覧者の方は、システムや料金の説明だけではなく「運営者（運営会社やスタッフ）」に関しても興味を持たれます。実際にやりとりを行うわけですから、どんな人が運営しているんだろう？　ということがとても気になるのですね。

ですので、必要事項的なデータだけではなく、メッセージ・理念といった文章をいただき、大々的に全面に出すという手法を取ることに決定しました。
こういった「運営者からの声」とでもいうべきものをサイト内に大きく持ってくることで、安心感が増すのです。


何かをしたいと思った時に、どれぐらいの費用と時間がかかり、どんな流れになるのか。そういったことは調べればデータとして分かりますが、どんな人がそれに関っているのか？　までは分かりません。
ウェブサイトは数多くありますから、メッセージ性、運営理念を伝える姿勢というものは、今のウェブ戦略においてもとても重要なのです。

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