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

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

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

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

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を押すとあるページへ移動し、♯を押すとまたあるページへ移動する、といったものですね。

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

http://www.be-face.com/



フェイスニング、表情筋トレーニングのbe face　様のホームページです。

フェイスニングとは、顔にある筋肉のトレーニングです。
どんなに表情豊かな方でも、実際に使用している筋肉は20%ほどだそうです。

体の健康については様々なメディアでとりあげられておりますが、顔の健康についてはあまり語られていません。
顔は世界共通のコミュニケーションツールであり、人と関わるための扉です。

そのためのフェイスニング、表情筋トレーニングについて美容医学研究所　ソシエテ　ヴィサージュ　認定講師がより多くの方に素敵な笑顔を持っていただきたい、自分作りのプロデュースをお手伝いをしてくれます。

まず、このサイトを作成するにあたって、イメージは人の顔です。それも『笑顔』。

トップページを作成するときにいつも、そのホームページの看板となるタイトル部分、そしてそのホームページを印象付けるメイン画像をすごく考えます。特にメイン画像に関しては、そのホームページのイメージが左右されるといっても過言ではないと思います。

作成するときに、その写真選びに時間をかけます。特に人物を使う場合、見られる人によっては、好き嫌いもあるでしょうし、その写真の表情によっても見る側のイメージを左右することでしょう。

今回は、特にフェイスニングということもあり、自然な笑顔でパワーのある表情を伝えられるよいうにイメージしました。


あと、ホームページを印象づける一つとしてイメージカラーも大事です。クライアント様より大理石のイメージというご要望もありました。大理石というと高貴で冷たい印象も一見イメージしがちですが、今回はそのイメージをもとにやさしく仕上げました。

http://www.kameokanaika.com




枚方市にて、糖尿病をはじめとした生活習慣病を専門にてがけていらっしゃる亀岡内科様。
今回は新規制作にてお話を頂きました。


糖尿病や生活習慣病といっても、個人個人によって状況や病態がことなり、必要となる治療は多岐にわたるということを事前の打ち合わせでお聞きしておりました。

それならばいっそう、患者様の視点からは、どんな治療をしているのだろう？　どんな病院なんだろう？　ということが気になるはずです。

ホームページに載せる情報を絞っていく打ち合わせに際しては、この点に絞った構成を考えていきました。
専門的な内容は必要ですが、あまりに多く学術的になるのは避けた方がよい。
患者様ご本人だけではなくそのご家族が見られることも意識したデザインを。
折々に、ご自身で治療についての案内を出していける場所があれば、患者様の安心にもつながる。
そういったことを突き詰めていき、シンプルで分かりやすい構成に仕上がりました。


情報は的確に、目に見やすい形で伝えるという観点から、特にテキストのサイズや間隔についてはやりとりを重ねて制作をさせて頂いています。
その読みやすさを際立たせるためにも、全体の配色はやわらかく落ち着いたものを選択しました。