デザイン事例

マウスの動きに合わせ、カラフルなドットが立体的に動くトップページ。そのアニメーションに合わせ、キャッチコピーもリアルタイムにタイピングするような動きで表現されており、テクノロジーの企業であることが上手く表現されている。 スクロールして...

まずサイトを開いて、英字の印刷物のような背景のテクスチャーや枠組み、ブラックレター書体のロゴと、それに合わせるように配置されたセリフ書体のフォント、そして筆のタッチを残すようなイラストが印象深い。 ぱっと見て、企業のサイトであるという...

グローバルナビゲーションを左側に固定配置したサイト。モニターが長大化する昨今において、横長の画面を上手く利用するレイアウトだ。 コーポレートロゴの緑色をポイントで使いつつ、青・緑系統の色で全体的に優しい色合いで構成されている。各ページ...

桜の花をモチーフに、赤色と白を基調とした華やかながらも落ち着いたイメージのあるサイト。 コーポレートロゴを縦長に使い、ヘッダー、フッターエリアからはみ出すように配置することで、レイアウト上のアクセントになっている。 サービスの強...

多言語マーケティングを売りにしている企業サイト。多様な国籍の従業員が微笑みかける動画をメインビジュアルとし、海外向けマーケティングパートナーとしての土台の確かさを訴求している。 横長のモニターでも画面幅いっぱいにコンテンツが表示され、...

カラフルな風船を持った写真がメインビジュアルを飾るトップページ。サイトの背景にも風船が飛ぶようなアニメーションが動いている。ヘッダーやフッターなど随所に風船の写真が掲載されており、サイト全体を通して楽しげな空気を感じられる。 グローバ...

ファーストビューにはビジネスシーンを思わせる動画を掲載。スクロールに合わせてコンテンツが動画の上を流れるほか、ボタンや見出しを枠からはみ出すように配置するレイアウトにより画面を立体的に見せている。 ページ遷移時には画面読み込み中である...

グローバルナビゲーションを画面左に配置したレイアウト。スクロールすると画面右側のコンテンツだけが流れるようにできており、画面左側でページのコンセプトを伝え、右側で情報を伝えるというスプリットスクリーンレイアウトを採用している。横長のPCモニ...

ひよこのようなキャラクターが可愛く印象的なトップページ。キャラクターの視線はマウスに追従するように動くほか、マウスオーバーするとぷるぷる震えるアニメーションが実装されている。このキャラクターはサイトの随所に用いられており、ポップで楽しげな印...

明るくポップな色味で、フレンドリーな印象のあるサイト。トップページの「会社設立をお考えの方へ」ボタンなどは、マウスを載せると現れる光沢感のあるエフェクトが特徴的だ。 サービス紹介ページではテキストを箇条書きにする・アイコンを用いるなど...

白い余白を効果的に使い、爽やかで開放的な印象を与えるサイト。トップページメインビジュアルの写真白いフレームを設けたかのように余白があり、透明感がある。写真からはみ出すようにテキストが配置されているのも要素に奥行きが生まれ、デザインに立体感が...

オリジナルの写真が多く、キャッチコピーに視線を誘導するようレイアウトが工夫されているサイト。デバイスフォントでなく画像内に直接文字を書くことで、雑誌のように自由なレイアウトを実装している。 縦書きの文字や、縦長の写真が比較的多いのも特...

黄緑色を基調とし、優しい色使いで親しみやすさを感じさせるサイト。メインビジュアルではスタッフの写真をメインに掲載し、より話しやすい雰囲気を醸し出している。 各ページの大見出しは黄緑色の背景で、下向きの三角形のような形になっているのが特...

流線形のグローバルナビゲーションが特徴的なサイト。 アーチ状になったナビゲーションが視線上に動きをつけ、飽きのこないデザインとなっている。メインビジュアルには写真を使うサイトが多いが、このサイトではトリミングされた写真と、デザインされ...

ヘッダーや背景が白く、クリーンな印象を与えるデザイン。ロゴがセンタリング配置になっていることで事務所の名前をより強く印象づけている。 「料金表」ページでは、横に長い表組がスマートフォンの画面では表を分割して見やすいように配慮されている...

メインビジュアルや、各ページの上部に設置された写真は都会的でスマートな印象を与える。ヘッダー・フッターに並ぶ要素がほぼ同じで、ページの最下部までスクロールしてもページ冒頭と同じアクションを起こせるようになっている。 全ページ、フッター...

写真を画面全体に広げず、白い余白を残すファーストビュー。写真にロゴをはみ出すように配置するなど、昨今のwebトレンドを取り入れ、画面に立体感を出すトップページだ。 写真の上に大胆にリード文を載せる、雑誌のようなレイアウトは見ていて楽し...

文字組が個性的なトップページ。ファーストビューではメインビジュアルを効果的に見せるためヘッダーの背景が透過しているが、スクロールすることで導線としての機能に特化する。電話・メールでの問い合わせボタンは大きく設けられ、スムーズにユーザーを誘導...

深い青を基調とした、信頼感を与えるトップページ。ファーストビューにはスタッフの集合写真が掲載されている。問い合わせを行うユーザーにとって、実際に担当してくれる人の顔がサイトで見られると、安心感があるだろう。 トップページのデザインは写...

コーポレートカラーのオレンジが暖かい印象を与えるサイト。 ロゴマークにも使用されている犬のモチーフを活かし、サイト内の随所に可愛らしいイラストを使用している。「ページの上へ」ボタンや見出しなど、隅々まで遊び心が感じられる。 フリ...