「かっこいい!」を感じさせるデザインのWebサイトまとめ

「かっこいい」と感じるWebデザインのサイトを多く集めてみました。配色は黒や白が多くクールな印象を受けます。Webサイト制作をする上で、良いデザインが思いつかないという人はぜひ参考にしてみてください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

Webサイトの制作をしていて良いデザインが思い浮かばないことがあると思います。そんな時に参考になる「かっこいい」と感じるデザインのWebサイトを集めてみました。配色は黒が多くクールな印象を受けます。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

unobile

5505e2ac62dc3bd95245e061ebd9ca57-620x304

unobile

アパレルブランド「unobile」のインフォメーションサイトです。シングルページと呼ばれる、スクロールせずに表示できるデザインで作成されています。

また、黒と白を中心に作成されたページは、このブランドのイメージと非常にマッチしていると言えます。

 

PlatinumGames

355719472d7ec501d588d3dca958dbda-620x318

PlatinumGames

大阪にあるゲーム会社のサイトです。シンプルで無駄のないアニメーションがサイトを引き立たせており、サイトをより見やすく仕上げています。

 

[PR] Webデザインで挫折しない学習方法を動画で公開中

IGNITION POINT

80b35ad17556493f6ff36b767ce2ca71-620x353

IGNITION POINT

このサイトを見てみるとまず最初にアニメーションのクオリティの高さに驚かされます。動きの多いアニメーションながら、情報の邪魔にならないようにきちんと配慮されているのがわかります。

 

WHY WASEDA

ff7469cc99fb88d8cc86069e700ab83b-620x336

WHY WASEDA

このページは、フラットデザインと呼ばれる手法で作成されています。これは、背景の奥行きをなくすことで、独特の雰囲気をサイトに持たせることができます。

 

Site Inspire

bbde9fd89e5c23ed69b0aaa516738567-620x284

Site Inspire

このサイトはデザインの良いサイトを紹介しているのですが、その並んでいる部分が非常にカッコよく作られています。フォントがサイトの雰囲気と非常にマッチしています。

 

Brain Tree

0f2228acaf198d52d605af609c2da663-620x274

Brain Tree

このサイトも、フォントがサイトの雰囲気に非常にマッチしています。トップは黒メインの配色ですがスクロールしていくと、淡い色使いになっており、訪問者が飽きにくい配色になっていると言えます。

 

ScrollReveal

94105b5c98842c7a24426f541f60a416-620x324

ScrollReveal

このサイトは、スクロールした際のアニメーションのソースコードを配布しているサイトです。このソースで何ができるかをシンプルにカッコよく表現してあります。

 

永楽屋

スクリーンショット 2016-07-13 13.47.56

永楽屋

和菓子のお店らしい墨文字と海青波で、和の重厚感を表現したスッキリしたデザインです。

京都の老舗のイメージが良く出ています。

 

スタジオヒンジ

スクリーンショット 2016-07-13 16.24.02

スタジオヒンジ

軽快な画面分割が気持いい。色使いが統一された自然派のイメージです。

余計な物が全て排除されたシンプルさとメニューの見やすさが必見。

選択されている画像にもすべて統一感があり、スタイリッシュなイメージです。

 

 OCEANUS

スクリーンショット 2016-07-13 16.24.50

OCEANUS

推しの商品を大きく表示するインパクト。

ロゴと商品のイメージカラーで統一された画面はシンプルでありながら、見る人に強い印象を与えます。

画像が大きい分、メニューを上部に配置する配慮も見逃せません。

 

株式会社ソーシャルデザイニング研究所

スクリーンショット 2016-07-13 16.25.51

株式会社ソーシャルデザイニング研究所

2色配色で、訪れる人に強いインパクトを与えるます。黄色は強烈な物ではなく、少し彩度を落として上品な仕上げ。

スクロールがワンクリックでできる操作性にも工夫があります。

 

沖縄経済新聞

スクリーンショット 2016-07-13 16.30.02

沖縄経済新聞

新聞の紙面をイメージした面白い画面です。

新聞のコラム形式を意識してこだわっている割には、画面上でも読みやすいレイアウトになっています。

人の目を引く面白さがかっこいいですね。

 

共栄製茶株式会社

スクリーンショット 2016-07-13 16.30.43

共栄製茶株式会社

和風でありながら、爽やかな健康志向がウリ。

画像を曲線、または円で見せる事で親しみやすさを表現しています。メニュー画面が和風ならではの個性を発揮していておシャレです。

 

GLIONミュージアム

スクリーンショット 2016-07-13 16.31.55

GLIONミュージアム

ヨーロッパの重厚感を意識した、黒とゴールドのゴージャスなイメージです。

上部と左部のカテゴリー分けでメニューをすっきりと配置しています。

ステキな建物のイメージを強く印象づけます。

 

有限会社フリーステッチ

スクリーンショット 2016-07-13 16.32.47

有限会社フリーステッチ

ペット商品はかわいい写真がメインです。

このサイトのイメージはかわいいと言うよりもスタイリッシュ。

微妙な色使いと配置の工夫で、幼稚さを排除して大人の雰囲気を出しています。

 

リーガロイヤルホテルグループ

スクリーンショット 2016-07-13 16.34.03

リーガロイヤルホテルグループ

高級ホテルのイメージをコーポレートカラーの重厚感のあるクラシックなグリーンと、黒、ゴールドでまとめています。

背景に使われている画像の色は、微妙なグラデーションを使って高級感を演出しています。

 

odori

スクリーンショット 2016-07-13 16.35.51

odori

トップ画面がとにかくオシャレ。

料理の写真と風景の写真が交互に出てくることで、自然派であることとヘルシーな雰囲気を出しています。

大胆な写真の選定がインパクトを与えています。

 

今回は、「かっこいい」デザインのWebサイトをいくつか紹介していきました。サイトのアイデアが思いつかない時はこのようなサイトを探してみると、アイデアが思い浮かぶこともあります。是非自分でもかっこいいWebデザインのサイトを探してみることをお勧めします。

かわいい!を感じさせるWebサイトもまとめています。合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。自分の好きなデザインでWebサイトを作ることができます!