自分だけのこだわりのスタイル、ヨーロッパ感覚のレディースファッションを扱っておられる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




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


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

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

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


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

今回、京都の万寿寺通りにある居酒屋「かき谷」様のサイトを作成させて頂きました。
「かき谷」様が今回ホームページを依頼されたのは、場所が分かりにくい場所にあり、
もっとたくさんの方に「かき谷」様を知って頂きたい！とお考えの上、決められました。
そのため、とくに注意したのが、トップ画像。

一番に目が行くところ、いわゆる、「受付」にあたるトップ画像を何を載せようかを考えました。
やはり、かき谷様の目印であるちょうちんを目立つように載せ、
このちょうちんを目印にお客様がお店に来ていただければ…との思いを込め
この写真を選択させて頂いております。

また、お店に来られるお客様は、烏丸界隈で働いておられる会社員の方が
多いであろうことを想定し、仕事帰りに「ホッ」としていただける様な、
「フッ」と寄って頂ける様な落ち着いた暖かい雰囲気になる様デザインさせて
頂いております。

そして、やはりホームページを見られるお客様は、メニューを目的に来られる
お客様が多いと思います。
味も素材も接客も抜群の「かき谷」様のお料理を、写真でも感じていいただける
ような「リアル」さが出るよう写真も選ばせて頂いております。

また、たくさんのメニューの中から、どれを選択しようか迷われるお客様のために、
トップに「人気ランキング」を配置し、どういうメニューがあるのかを見やすいように
しております。

今回、現代社会においての自立を意識した働き方と、個のキャリア支援を念頭にした
マネジメントをされておられる「OCI」様のサイトを制作させて頂きました。

サイトをご覧になられる方は、主に「働いておられる方」「企業様」とのことでしたので、
全体的にも落ち着いた色味を使用し、見ていてストレスなくご覧いただけるよう、
部品やバナーひとつひとつにおいても、シンプルでかつ分かりやすくデザインさせて
頂いてます。

また、トップには幸せを感じて頂けるような、ナチュラルな笑顔の写真を載せ、
落ち着いた雰囲気にプラス、インパクトを与えられるような写真を選択させて頂いてます。

そして、OCI様の行っておられる3つのサービスを
ユーザーにどうすれば分かりやすく伝えられるか、そのページにアクセスして頂けるか、
を考え、トップ画像左側に、ボード調にデザインし各々のページにすぐに進められるように
リンクを貼っています。

トップ画像の下には、このページでよくアクセスされるであろう
「OCIブログ」と「お問い合わせ」ボタンのバナーを配置し、見て頂いている方に
分かりやすいようにしています。色もオレンジと目立つ色でデザインしています。

トップ以外のページには、写真や図を大き目に載せ、見栄え良くデザインしています。
特に文章量の多い部分には、色を使用し、見やすく、あまり堅苦しくないようにさせて
頂きました。

http://www.omoture.co.jp/

株式会社おもちゃあ様は、「おもちゃ心」であらゆるコンテンツを開発・制作・販売する京都に誕生したとても「おもしろい」会社です。とホームページの最初でも書いてあるようにこのページを作成させていただいた時は、普通の考え方ではいけない！と思いました。

一番のメインはFLASHですが、この画像もすべてスタッフの方が手作りされ、それにおもしろおかしく動きを付けました。何より大事にしたものそれはインパクトです！

最初見られた方は何の会社かな？と思われる方もいらっしゃるかもしれません。

テレビ番組制作、ビデオ制作を主に、洛西ケーブルビジョン株式会社の自主放送番組の企画・制作、イベントの企画・立案・運営等をしておられます。
まさに夢と希望を作られる会社と思いました。
すべてのページがこの会社の理念を表すかのように時代を超えたおもしろいコンテンツを創造させる会社のイメージに仕上げました。

メニューボタン一つとってもそうですし、楽しい現場のページにはスタッフの仕事ぶりが目に浮かびます。当たり前の感覚ではこのサイトは表現できない。
しかし、ホームページは、お客様の向こうにいらっしゃる本当のお客様が見るものです。
そのクライアントさまとその向こうのお客様をイメージし、試行錯誤しながら作成いたしました。
ホームページは会社の顔でもありますし、伝えたいものがあります。それをいかに生かせるかが大事なカギになると思います。

今後、SEOのことも考えられてサイト内にブログを設置されます。
ブログを設置することにより、日々の更新作業がお客様自身でできます。
よく無料サーバでブログを書いているという話は聞きますが、それでは自分たちのサイトのSEOにはつながりません。
もちろん、ホームページは作った後も、ケアが大事です。

ブログを書くことによって日々自分のサイトに目を通すようにもなります。そうすると常にそのサイトに対しての愛着もわいてきますし、今後の展開なども浮かんできます。
それがホームページを育てていく始まりになると思います。

http://www.mizuho-osaka.co.jp/

今回、大阪にある3D CAD (EYECAD)でのプラント配管設計をされておられる、穂（みずほ）設計さまのホームページを作成いたしました。

設計事務所でありながらも、よくある設計事務所の堅いイメージではないホームページにしたいとのご要望がありました。

ある程度のイメージはもたれておられましたので、それに近づけつつ、より洗練されたイメージをプラスできるようデザインいたしました。

3D CAD (EYECAD)を使った配管設計の業務はもちろんですが、事業内容として環境への取り組みに大変力を入れておられることも感じました。

そのイメージもあり、トップページをはじめ各ページにはメイン画像に自然・環境のイメージをさせる緑や土を使っています。


また、もともとドメインやサーバーはお持ちでしたが今回ホームページを作成し、さらにドメイン・サーバの管理もさせていただいております。

http://www.qscontrolcorp.com




マヌカ蜂蜜、梅干などの食品から電気暖炉、ルーマニア木材などを扱うオンライン通販サイト、Q.C.Control Corp様。
今回は新規制作ということでお話をいただき、ショッピングサイトとコーポレートサイトを制作させていただきました。

この一文からも分かるとおり、実に様々な商品をお取扱いです。
知名度も上がりつつあるマヌカ蜂蜜をいち早くスイーツに取り入れられたり（マヌカ蜂蜜を練りこんだマヌカハニーロールは、なんとこちらでしか手に入りません！）、バイヤーさんが様々な地域で見つけられた食べ物やドリンクを販売されています。

打ち合わせにて、ショッピングの商品ページにとどまらず、より具体的なページをご用意して、見る人に商品の魅力をもっとしっかり伝えるというコンセプトが浮かび上がってきました。
やはり「商品が一覧できて」「その場でお買い物ができる」のは便利なのですが、それだけで完結する形だとちょっと寂しいのも事実。お客様にお買い物を長く楽しんでいただくためには、他ページも重要なのです。
ショッピングの機能とともに、html構築したページを別途作成して深みのあるつくりに仕上がったことが、こちらのサイトの一番のポイントです。


デザイン的にはウッドの心地よい空気感を取り入れ、ポップでカラフルな構成をさせていただきました。
やはりお買い物をする、というシーンでは、お店のビジュアルも非常に重要です。
実際のお店で考えてみるとよく分かるのですが、同じ商品が置いてあったとしても、おしゃれなお店でお買い物をしたいですよね。
ターゲットユーザーを考えた上で、遊び心のあるあかるいデザインをさせていただきました。

今後も商品を増やしていかれるとのこと、私たちも今後がとても楽しみなのです。

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

今回は、株式会社大和コンピューター様が新たに発表された、スクール管理システムのＰＲサイトを新規制作させていただきました。

ＰＲ物の中でウェブが先陣を切り、イメージ的にも元になるということで、具体的にシステムの内容や画像等をお教えいただいて内容を作り込んでいきました。


こういった目的を持ったサイトは、サイト自体のイメージによって、事前にお客様が想像されるシステム像が全く変わってしまいます。
そしてシステムの導入となると「難しそう」「使いこなせないのでは」というお気持ちを持たれるお客様も、まだまだいらっしゃいます。
ですので、現代的な色使いで明るく、また親しみやすい加工画像などを多用することによってユーザフレンドリーの高さを伝えています。


ターゲットも絞られていましたし、どのような雰囲気がよいか、キーカラーは何色かといった点についても明確なご希望をお持ちでしたので、非常に一貫性のあるサイトができあがりました。


flashも作成させていただいていますが、こちらもそのご希望に合わせ、サイト全体を包括するストーリー性を持たせています。
簡潔にまとめ、flashが主人公になりすぎないバランスを心がけました。



■項目を分けてお客様に分かりやすく■

「サイトを見ながら説明・検討をしやすい」
これが今回のポイントです。

もっとも配慮したことは、システムの内容を充分にお客様に伝えること。
魅力のある内容なのですから、それを十全に生かすことが必要でした。


お客様がシステムの「導入」をされる実際の場面で、こちらのサイトを見ながら検討する、といったシーンが想定されます。
担当者がまず検討し、会議にかけるといった流れも多くあるでしょう。

そういった際に分かりやすいように、大きく段落を分けたり、ナンバリングを目立たせたりと、細かな点のデザインを重ねてまとめあげました。

実際のシステム画面を頂けたこともあり、要所要所にイラストや写真を挿入することで、視覚的にも訴えかける構成となっています。