|
株式会社サンワ ホーム様 サンワホーム様のHPのリニューアルです。 モデルハウス並みのデザイン性の高い住宅をアピールするという内容から、このページのキーワードは「高級感」となっています。黒を全体に使う手法は質の高い写真が多く提供されている場合は有効ですが、単調なデザインなることも往々にしてあります。そこで上部のボタンにはフラッシュアニメーションを使用しています。 高級感に気をくばりつつも、一番クリックしてほしい「資料請求」のボタンは青で強調しました。 |
| セット アッパー様 製造業の雰囲気を保ちつつ重くならないようにすることが1つのテーマてした。そこで軽アルミに薄い青い着色をほどこした質感で全体をまとめています。 しかしそれだけでは面白みに欠けるので、トップ画像の背景に別の質感とテクスチャーを与え、画面を横に貫かせることで強いアクセントとしました。 |
| GWO様 エステ経営に関するコンサルティングサービスを提供されている、GWO様のHPです。知性を表す青と白をテーマカラーとした構成であり色彩的には簡素なので、ボタンやボードのような質感と濃淡のリズムにこだわりました。安定感の中にある微妙な遊びがポイントです。 |
| 制作事例
病気に関する情報を提供するページです。病気というと病院。すると清潔感や病室のイメージから青や赤、白といった色調が連想されますが、それだけでは暗いイメージになりがちです。ここでは健康、温もりのイメージを優先し、肌色やオレンジ系の色調を採用しました。と同時に、医療を連想させるカルテボードのような質感を用いています。清潔感・信頼感を優先するならばそれに合わせたデザインに変化するでしょう。ページ中心の親子画像もポイントです。 |
|
制作事例 クールな高級感と知性がテーマのデザインです。画面の黒は見た目にはほとんどわかりませんが青が入っており、これがわずかに白黒写真横のグラデーションで姿を表します。 白黒写真だけでは暗いイメージになってしまいますが、この画面のようにすぐ下にカラー写真を持ってきたい場合はむしろ色のないほうが色調の衝突を防ぐことができます。サイド部のディスク状のマークがワンポイントです。 |
| 新東京 保証様 法律関係のテーマでしばしば見られる青・緑中心などの色調構成は、一歩間違えると冷たいイメージになってしまいます。そこで、ここでは直線的なイメージと、オレンジの色調で画面を構成しました。「誠実さと暖かさ」という、ある意味ては対立するコンセプトの微妙なバランスをご覧いただきたいデザインです。 |
| 制作事例 色使いやストライプ模様・シンプルな構成は、コーチングが米国発祥であるということを意識したものです。論理性・簡潔性を重視しました。左上の握手マークがアクセントになっています。 |
| 制作事例 ウェブサイトの戦略立案に関するホームベージです。シルバー基調が今回のテーマですが、灰色は気をつけないと暗く地味なデザインになってしまいます。そこで全体を横に貫く水平線と黒いトップラインで画面を締めました。とはいえ色はほとんどないので、写真や小さいマークを目立たせることができました。 |
| 制作事例 「SEO」というと抽象的なイメージが先行しがちですが、実際には人間が関わるビジネスであり、無機質なデザインは避けたいと考えました。ここでは明るい空のイメージを優先し、青をテーマカラーとしています。ナビゲーションボタンには角が丸い半透明ボードを配置し、重くなり過ぎないようにデザインすると同時に、トップ画像とメイン記事部分とを緩やかにつなぎ合わせました。 |
| 株式会社JA東京中央セレモニーセンター様 ラビスホール池上様のHPです。暖かな「家族葬」のイメージを重要視し、葬儀場としての品格を失わないよう留意しつつ、曲線やピンクの配色で親しみやすさを演出しました。ご利用になる年齢層の広さを考え、押し付けがましくない読みやすさにも気を配っています。 |
| NPO法人「iTAS」様 福祉関係のNPO法人のホームページですが、このケースではロゴに合わせた形のデザインになりました。ロゴのオレンジとグリーンで全体を構成しています。色じたいは人に対する優しさをイメージさせますが、法人格としての堅実さの表現も必要でした。そこで形態的には直線的なデザインを採用しています。各カテゴリーのイメージを表した小さな絵がポイントです。
|
| 制作事例
当社の本サイトです。知的なイメージを保ちつつ、鋭くなりすぎない柔らかさを残しました。これは、実は既に過去に作ってあったロゴに合わせたデザインなのです。このように、企業の顔であるロゴを活かすサイトデザインも大切です。 |
| 制作事例
ビジネスブログのサイトです。まずトップ画像をデザインし、それに合わせて軽アルミのボタンや強めの藍色を配置しました。ビジネスのスピード感を重視したデザインです。重くなったり単調になったりすることを防ぐため、各要素の質感は慎重に選択しています。 |
| 製作事例
M&Aの用語を紹介するページです。画面を縦断するワインレッドの帯で構造を明確化しました。この画面ではわかりませんが、「メニュー」横に伸びているピンク色の帯は画像と記事部分との区切りであると同時に他のページではいわゆる「パンくずナビ」(トップページ > M&Aとは...という形のナビゲーション)が表示されます。 |
| 製作事例 このサイトでは紹介している商品である右上のカードからモチーフと色をとって全体を構成しました。ものによりますが、商品を印象づけために効果的な方法の一つです。 |
| 制作事例 白と青でフォーマルなイメージ、オレンジで親しみやすさを演出しました。暖かさを残したいがフォーマルさを失いたくないというときに、清潔感のある鮮やかなオレンジは力を発揮します。とくにこのページは画面一杯に広がる構成なので、鮮やかに画面を貫くオレンジがアクセントになります。なお左のボタンの「料金/サービス」部は展開出来る形になっており、簡単なテキスト入力で項目の追加も可能です。 |
| 制作事例 NLP(神経言語プログラミング)についてのページです。知性を表現する青とグリッド模様で全体をまとめました。文章の内容を読ませたいページなので大きな画像はあえて使わず、刺激的な色も控えています。読みやすさを重視したレイアウトです。 |
| じゅりクリニック様 皮膚科のクリニック、じゅりクリニック様のHPです。お年寄りの方がご覧になるので文字を大きめに、と言うご要望にお答えしてデザインしました。アクセシビリティへの配慮が重要なケースといえます。美容・優しさ・真心を届ける—というイメージをテーマとし、曲線的要素とピンク・山吹色系の色調を採用しています。ボタンに配置したバラと見やすいカレンダーがポイントです。 |
| プレミアム・ミネラルウォーター.COM ミネラルウォーター販売のホームページです。曲線と透明な質感を多めに使い、水の運動性と清潔性を表現しました。右上にはクリッカブルな球体が配置され、水の質感をより感じてもらえるよう工夫されています。クリックしたくなるボタンとこの水玉がこのページのポイントです。 |
| 製作事例 SEO対策サービス提供のHPです。空の写真はオフィス街の空をブラインドからのぞいているイメージを抽象化したデザインです。 ナビゲーションボタンの下にしいてある透明のボードはあえて外側にはみ出させ、質感を強調してみました。 |
| 製作事例 オレンジをテーマカラーとしています。ナビゲーションボタンには角が丸い半透明ボードを配置し、重くなり過ぎないようにデザインしています。ナビゲーションの部分でトップ画像とメイン記事部分とを緩やかにつなぎ合わせました。 |
| 製作事例 こちらのデザインでは窓の外をのぞいているようなさわやかさを表現しました。ボタンにポインターをあわせると半透明なサブナビゲーションボードが現れます。情報量が多くても使いやすくすっきりした構成にすることができます。 |