TechAcademy（テックアカデミー） Webデザインコース Webデザイン【Webデザインに必須！】無料で使えるかっこいいフォントまとめ！
Webデザイン

【Webデザインに必須！】無料で使えるかっこいいフォントまとめ！

無料で利用できるかっこいいフォントをまとめています。現役のWebデザイナーも利用しているおすすめなフォントです。初心者でも簡単にかつ無料で利用できるので、ぜひ活用してみてください。

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

かっこいい・クール系フォントの中から、無料で商用利用も可能なものをまとめました。

フォント一つでサイトの印象もガラリと変わるので、皆さんもぜひ使ってみてください！
(※商用利用については規模などによって使用料の発生するものも含まれています。各配布サイトの利用規約をご確認ください。)

 

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

 

カガクゴ

cool_f_1

横書き専用、迫力のあるデザインのフォントです。

カガクゴ

 

19seg box

cool_f_2

昔のコンピューターで使うようなデジタルな雰囲気を持ったフォント。

19seg box

 

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

鉄瓶ゴシック

cool_f_3

力強い太めのゴシック体フォント。

鉄瓶ゴシック

 

Mgen+ (ムゲンプラス)

cool_f_4

「M+ FONTS」に未収録の特殊な漢字を補った合成フォント。

Mgen+ (ムゲンプラス)

 

ほのか明朝

cool_f_5

澄み切ったイメージを出したい時に便利な、すっきりした明朝系フォント。日記やポエムを投稿するのに向いていそうです。

ほのか明朝

 

851チカラヅヨク

cool_f_6

テレビのテロップなどで出てきそうな、迫力のあるフォント。手書き感が残っていて良いですね。

851チカラヅヨク

 

らんすあたっく！

cool_f_7

絵を組み合わせたようなユニークなフォント。漢字は含まれていません。

らんすあたっく！

 

スマートフォントUI

cool_f_8

少しだけ縦長にデザインされたゴシック体フォント。見栄えと読みやすさを重視しています。

スマートフォントUI

 

カナ0816

cool_f_9

斜体系のカナフォント。数字も入力することができます。

カナ0816

 

さいとうしんぐ店

cool_f_10

商店街で使われたものをイメージした、太めの独特なフォント。

さいとうしんぐ店

 

マキナスFlat

cool_f_11

無感情な印象がテーマのフォント。第二水準やIBM拡張漢字などにも対応しています。

マキナスFlat

 

オリエンタル

cool_f_12

レトロな雰囲気を持った、カタカナ専用のフォントです。

オリエンタル

 

DBストレート12

cool_f_13

ひらがな、カタカナ、英数字用のデジタルなフォント。

DBストレート12

 

GD-高速道路ゴシックJA

cool_f_14

高速道路の標識で使用されるフォント。遠くから見てもわかりやすいようになっています。

GD-高速道路ゴシックJA

 

カリン91

cool_f_15

スタイリッシュなカタカナ用フォント。

カリン91

 

飴鞭ゴシック

cool_f_16

M+フォントをベースに、文字の端にトゲや丸みを追加したフォント。

飴鞭ゴシック

 

ゾウ

cool_f_17

カタカナ・横書き専用の太めでクールなフォント。

ゾウ

 

ステンシル・パイプ

cool_f_18

ロゴなどに使えるユニーク系フォント。カタカナ専用になっています。

ステンシル・パイプ

 

ロゴたいぷゴシック

cool_f_19

柔らかくも格好いいデザインのゴシック系フォント。

ロゴたいぷゴシック

 

NEUTRAL

cool_f_20

縦長でフラットなフォント。スマートな印象になります。

NEUTRAL

 

以上、無料で使えるかっこいいフォントを紹介しました。

初心者の方でも気軽に利用できるフリーフォントなので、サイトの作成やデザインの作業などにおすすめです。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

記事を検索

関連するキーワード

関連する記事

初心者必見！Webデザイナーになるための検定まとめ

Webデザイナーを目指す上で取得しておきたい検定についてまとめています。 まだまだ資格を就職や転職の際に見ている企業もあるので、持っておいて損なことはない...
Webデザイン

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

webデザインでかわいいを表現するというのは、とても難しいと思います。そんなデザインで悩んだ時に参考になるサイトを紹介したいと思います。女性向け・子供向けのサイ...
Webデザイン

要素の表示の仕方を覚える！CSSのdisplayとvisibilityの使い方【初心者向け】

CSSで書くdisplayとvisibilityの使い方について解説しています。 要素の表示を自在にコントロールするためには重要な知識になります。特に難し...
CSS

Airbnbを事例に学ぶ！失敗しないWebサイトの作り方とは

本稿は、Designmodeのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。 また本記事はIndra Sofian氏によって投稿されました。 ...
Webデザイン

今すぐ使える！CSSフレームワークのCompassとは【初心者向け】

CSSを効率的に書くためのフレームワークである、Compassについて解説しています。 Compassを使用するためにはSassの知識、開発環境が必要とな...
CSS

モックアップ作成ツールMockingbirdの使い方【初心者向け】

モックアップを作成するのに役立つMockingbirdの使い方について解説しています。Mockingbirdを初めて使うという人でも一連の動作の流れが分かるはず...
Webデザイン

あわせてよく読まれている記事

【Webデザインに必須！】無料で使える！女性っぽくかわいいフォントまとめ

女性が好きそうな可愛いサイトにしたいけど、デザインがいまいちピンとこない… そういうときは、フォントを可愛いものに変えてみましょう！ そこで今回は、可愛らしい・女性らしい雰囲気のフォントの中から、無料で商用利用も可能なものをまとめました。 皆さんもぜひ使ってみてください！ (※商用利用については規模などによって使用料の発生するものも含まれています。各配布サイトの利用規約をご確認ください。)   なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。   こども丸ゴシック 小学校の1年生から3年生までに習う漢字が入った、手書き風のフォントです。 こども丸ゴシック   やまフォント 可愛らしい手書き風のフォント。商用での利用は報告とクレジットの表記が必要になります。 やまフォント   [PR] Webデザインで挫折しない学習方法を動画で公開中やさしさゴシック 見やすく、優しい印象のゴシック体フォント。 やさしさゴシック   Holiday（ホリデイ）-MDJP05 複雑な漢字にも対応した手書きフォント。顔文字なども使用できます。 Holiday（ホリデイ）-MDJP05   たんぽぽ 縦長のひらがな用フォント。丸くて明るいイメージのデザインです。 たんぽぽ   うずらフォント 手書き風のフォント。第二水準の漢字などにも対応しています。 うずらフォント   JKゴシック 名前の通り、女子高生風の細いゴシック系フォント。 JKゴシック   ふんわりうさぎフォント ひらがな・カタカナ・アルファベットと一部の記号に対応した手書き風フォント。 ふんわりうさぎフォント   ふわもこフォント 雲のような形のユニークなフォント。ひらがな・カタカナ・英字・一部の記号に対応しています。 ふわもこフォント   ゆずポップ 4つの太さが選択できるポップ体フォント。 ゆずポップ   ＫＦひま字 横書き・縦書き対応の手書き風かわいいフォント。ギリシャ文字などにも対応。 ＫＦひま字   ねずみ 横書き専用のフォント。漢字と一部の記号は含まれません。綺麗な読みやすいデザイン。 ねずみ   よもぎフォント 縦書きも可能な等幅の手書きフォント。半角英数・カタカナでの表記も可能です。 よもぎフォント   しろうさぎ ひらがな用の太め・可愛らしいフォント。 しろうさぎ   タロ子フォント 筆ペンでの手書き風フォント。基本的な漢字にも対応しています。 タロ子フォント   mini-わくわく 丸い書き文字フォント。漢字は含まれませんが太めの丸ゴシック体と組み合わせて一緒に使うことができます。 mini-わくわく   やさしさゴシック手書き やさしさゴシックに手作り感を加えたもの。より柔らかい印象になっています。 やさしさゴシック手書き   ゆたココ 丸文字手書き風フォント。半角英数字に対応しています。 ゆたココ   ぼくたちのゴシック 子供向けな雰囲気のシンプルなゴシック体フォントです。 ぼくたちのゴシック   うたミンフォント 歌う文字をテーマにした音符のようなユニークなフォント。 うたミンフォント   以上、無料で使える可愛い系フォントを紹介しました。全てフリーフォントなので、初心者の方でも気軽に利用できます。 紹介したフォントを使って、可愛いサイトデザインにチャレンジしてみてください！ 他にも、Webデザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。 [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
Webデザイン

【Webデザインに必須！】無料で使えるおしゃれなフォントまとめ！

お洒落で見やすいフォントの中から、無料で商用利用も可能なものをまとめました。 最近では記事を発信しているメディアも増えてきているので、よりフォントが重要になってきています。フォントひとつでサイトの印象を大きく変えるので、妥協せずに満足できるものを選びましょう。 (※商用利用については規模などによって使用料の発生するものも含まれています。各配布サイトの利用規約をご確認ください。)   なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。   フロップデザインフォント シンプルで使いやすいゴシック体フォント。文字が読みやすいように工夫してデザインされています。 フロップデザインフォント   ピグモ01 絵のようなユニークなフォント。第二水準漢字などにも対応しています。 ピグモ01   [PR] Webデザインで挫折しない学習方法を動画で公開中ほのかアンティーク角 アンチック体の、優しい雰囲気を持つフォントです。 ほのかアンティーク角   はれのそら明朝 明朝系のすっきりしたフォント。 はれのそら明朝   しねきゃぷしょん 洋画の字幕のような雰囲気を持つフォントです。 しねきゃぷしょん   刻ゴシックフォント 漢字に対してひらがなとカタカナが少し小さく縦長にデザインされたゴシックフォント。 刻ゴシックフォント   セプテンバー ペンで紙に書いた文字から作られた、やわらかい雰囲気を持ったフォント。 セプテンバー   櫻井幸一フォント　フェルトペン フェルトペンで書かれた手書き風のフォント。 櫻井幸一フォント　フェルトペン   刻明朝フォント 「刻ゴシックフォント」の明朝体版。クラシックな雰囲気が特徴です。 刻明朝フォント   刻丸明朝かな 「刻明朝フォント」のひらがなとカタカナだけを少し丸みのあるデザインにアレンジしたもの。(漢字は含まれていません) 刻丸明朝かな   なごみ極細ゴシック 漢字は直線的に、かなは曲線的にデザインされたフォント。 なごみ極細ゴシック   超極細ゴシック体 とても細いゴシック体のフォントです。 超極細ゴシック体   青梅ぷらすゴシックP シンプルでやわらかい雰囲気のゴシック体フォント。 青梅ぷらすゴシックP   ほのか丸ゴシック 漢字より少しだけかな表記を小さくした丸ゴシック体フォントです。 ほのか丸ゴシック   明朝體フォント むつき 古い本の活字のような独特の明朝体フォント。 明朝體フォント むつき   小瑠璃フォント 丸めデザインのすっきりしたフォント。 小瑠璃フォント   851手書き雑フォント 手書き風のフォント。絵文字や各種外国語にも対応しています。 851手書き雑フォント   ロゴたいぷゴシック-コンデンスド 少し縦長にデザインされたゴシック体フォント。 ロゴたいぷゴシック-コンデンスド   こころ明朝体 角丸の明朝体フォント。やさしい雰囲気を持っています。 こころ明朝体   うつくし明朝体 横書きの見栄えを意識したオールド系明朝体フォント。 うつくし明朝体   以上、サイトの見栄えがおしゃれに見えるフォントを紹介しました。 明朝体ひとつとっても様々な種類のフォントが存在します。ぜひいろいろ見てサイトに活用してみてください。 [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
Webデザイン

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

Webサイトの制作をしていて良いデザインが思い浮かばないことがあると思います。そんな時に参考になる「かっこいい」と感じるデザインのWebサイトを集めてみました。配色は黒が多くクールな印象を受けます。   なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。   unobile unobile アパレルブランド「unobile」のインフォメーションサイトです。シングルページと呼ばれる、スクロールせずに表示できるデザインで作成されています。 また、黒と白を中心に作成されたページは、このブランドのイメージと非常にマッチしていると言えます。   PlatinumGames PlatinumGames 大阪にあるゲーム会社のサイトです。シンプルで無駄のないアニメーションがサイトを引き立たせており、サイトをより見やすく仕上げています。   [PR] Webデザインで挫折しない学習方法を動画で公開中IGNITION POINT IGNITION POINT このサイトを見てみるとまず最初にアニメーションのクオリティの高さに驚かされます。動きの多いアニメーションながら、情報の邪魔にならないようにきちんと配慮されているのがわかります。   WHY WASEDA WHY WASEDA このページは、フラットデザインと呼ばれる手法で作成されています。これは、背景の奥行きをなくすことで、独特の雰囲気をサイトに持たせることができます。   Site Inspire Site Inspire このサイトはデザインの良いサイトを紹介しているのですが、その並んでいる部分が非常にカッコよく作られています。フォントがサイトの雰囲気と非常にマッチしています。   Brain Tree Brain Tree このサイトも、フォントがサイトの雰囲気に非常にマッチしています。トップは黒メインの配色ですがスクロールしていくと、淡い色使いになっており、訪問者が飽きにくい配色になっていると言えます。   ScrollReveal ScrollReveal このサイトは、スクロールした際のアニメーションのソースコードを配布しているサイトです。このソースで何ができるかをシンプルにカッコよく表現してあります。   永楽屋 永楽屋 和菓子のお店らしい墨文字と海青波で、和の重厚感を表現したスッキリしたデザインです。 京都の老舗のイメージが良く出ています。   スタジオヒンジ スタジオヒンジ 軽快な画面分割が気持いい。色使いが統一された自然派のイメージです。 余計な物が全て排除されたシンプルさとメニューの見やすさが必見。 選択されている画像にもすべて統一感があり、スタイリッシュなイメージです。    OCEANUS OCEANUS 推しの商品を大きく表示するインパクト。 ロゴと商品のイメージカラーで統一された画面はシンプルでありながら、見る人に強い印象を与えます。 画像が大きい分、メニューを上部に配置する配慮も見逃せません。   株式会社ソーシャルデザイニング研究所 株式会社ソーシャルデザイニング研究所 ２色配色で、訪れる人に強いインパクトを与えるます。黄色は強烈な物ではなく、少し彩度を落として上品な仕上げ。 スクロールがワンクリックでできる操作性にも工夫があります。   沖縄経済新聞 沖縄経済新聞 新聞の紙面をイメージした面白い画面です。 新聞のコラム形式を意識してこだわっている割には、画面上でも読みやすいレイアウトになっています。 人の目を引く面白さがかっこいいですね。   共栄製茶株式会社 共栄製茶株式会社 和風でありながら、爽やかな健康志向がウリ。 画像を曲線、または円で見せる事で親しみやすさを表現しています。メニュー画面が和風ならではの個性を発揮していておシャレです。   GLIONミュージアム GLIONミュージアム ヨーロッパの重厚感を意識した、黒とゴールドのゴージャスなイメージです。 上部と左部のカテゴリー分けでメニューをすっきりと配置しています。 ステキな建物のイメージを強く印象づけます。   有限会社フリーステッチ 有限会社フリーステッチ ペット商品はかわいい写真がメインです。 このサイトのイメージはかわいいと言うよりもスタイリッシュ。 微妙な色使いと配置の工夫で、幼稚さを排除して大人の雰囲気を出しています。   リーガロイヤルホテルグループ リーガロイヤルホテルグループ 高級ホテルのイメージをコーポレートカラーの重厚感のあるクラシックなグリーンと、黒、ゴールドでまとめています。 背景に使われている画像の色は、微妙なグラデーションを使って高級感を演出しています。   odori odori トップ画面がとにかくオシャレ。 料理の写真と風景の写真が交互に出てくることで、自然派であることとヘルシーな雰囲気を出しています。 大胆な写真の選定がインパクトを与えています。   今回は、「かっこいい」デザインのWebサイトをいくつか紹介していきました。サイトのアイデアが思いつかない時はこのようなサイトを探してみると、アイデアが思い浮かぶこともあります。是非自分でもかっこいいWebデザインのサイトを探してみることをお勧めします。 かわいい！を感じさせるWebサイトもまとめています。合わせてご覧ください。 [お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。自分の好きなデザインでWebサイトを作ることができます！
Webデザイン

おしゃれに見せよう！WordPressのフォントを変更・カスタマイズに便利なプラグインまとめ

WordPressのプラグインにはコードなどを編集せずに直感的操作でフォントデザインを変えることのできるものが存在します。 公式や個人で配布されている各種テーマをインストール・有効化した後で、フォントの大きさや種類などを更に細かく設定したい時などにも役立ちます。 ここでは、「テーマの編集」メニューなどを使わずにWordPressのフォントやサイトデザインを調整することのできるプラグインを紹介していきます。   なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。   Font WordPressの管理画面ではなく、サイトを表示させたままの状態で上の管理バーからフォントの変更をすることができるプラグインです。 手描き風の文字など独特なデザインのフォントを使用することができます。 デフォルトで使用できるフォントは英語対応のものばかりですが、TTFやOTF形式のファイルを自分でアップロードして利用することもできるので日本語サイトでも活用することができます。 Font   Visual Theme Customizer Font同様、サイトを表示させながらフォントの調整ができるプラグインです。 フォントの種類・太さ・色・イタリック表記や打ち消し線などの一通りの設定もここで変えることが可能です。 Undo・Redoなどの編集時に便利な機能もショートカットやメニューアイコンで操作できるのでじっくりデザインにこだわりたい人にもおすすめです。 スマホやタブレットでサイトを表示させた場合のプレビューが見れるのも特徴です。 アニメーションなどの追加機能がついた有料版もあります。 Visual Theme Customizer   [PR] Webデザインで挫折しない学習方法を動画で公開中Easy Google Fonts このプラグインをインストールすると、WordPressの管理バー「カスタマイズ」からフォントの編集ができるようになります。 見出し1～6それぞれを別々のフォント設定にすることも可能なので、各テーマデフォルトの見出し表示を好きなものに変えたいときにも便利です。 フォントの大きさや種類の他にline-heightなども操作することができるのでサイトデザインの調整に役立ちます。 Easy Google Fonts   以上、フォントをカスタマイズできるプラグインを紹介しました。 フォントの種類を知っている人はなかなかいないですし、一つずつ確認しながら好きなフォントに変更したいところ。サイトなどで調べながら行うとどうしても時間がかかってしまうので、プラグインを活用しましょう。 ぜひ、WordPressの使い方を覚えましょう！ [お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。
WordPress

作る前にチェック！スマートフォンサイトのデザイン集サイトまとめ

スマートフォン対応を検討することも多くなっていると思いますが、PCのサイトと大きくデザインが異なるので、自分で作る際、あるいは発注する際にデザインで迷うことはないでしょうか。   そこで、今回はスマホサイトのデザイン集サイトをピックアップしてみました。国内と海外の両方のサイトをピックアップしているので、気になるものを参考にしてみてください。   国内のスマホデザイン集サイト 国内サイトだけあって、国内のスマートフォンサイトのデザインを集めたサイトが多くなっています。 カテゴリーなども細かく整理されていることが多いので、見つけやすくて便利です。    スマートフォンサイト集めてみました。 日本のスマートフォンサイトを数多く網羅しているデザイン集です。 細かなジャンル別にカテゴライズされているので、これから作成しようとするサイトの性格に合うものをより早く見つけ出すことが可能です。ユーザーによる星評価やコメントも役立ちます。 スマートフォンサイト集めてみました。      iPhoneDesignBox 女性に人気がありそうなかわいいデザインのスマートフォンサイトが多く紹介されています。 パステルカラーや柔らかくフェミニンなイラストはサイトの滞在時間を伸ばすことにも効果がありそうです。居心地のいいスマートフォンサイトを作りたいならぜひチェックしたいサイトです。 iPhoneDesignBox     AGT 大胆な構図と、思わず視線が釘付けになるような画像をミックスした良質なサイトを中心に紹介しています。 スマートなサイト作りの参考になりそうなデザインが並んでいます。 AGT     thinkthing スマートフォンサイトの制作などを手がける株式会社アイスリーデザインが運営するサイトです。国内のサイトだけでなく、海外サイトも多く紹介されています。 このサイトでは、ユーザーがスマホサイトを紹介できるようになっています。投稿されたサイトにはFacebookで「いいね！」 を付けることも可能です。 thinkthing      iPhoneデザインアーカイブ iPhone用のサイトデザインを集めたサイトです。携帯サイトキャプチャ集「モバイルデザインアーカイブ」の姉妹サイトでもあります。 国内の大手企業のサイトを中心に1000位上のサイトが紹介されています。カテゴリー別に探せるので便利です。 iPhoneデザインアーカイブ     海外のスマホデザイン集サイト 国内のサイトだけを見ていても、似たようなデザインになってしまうという場合は海外のサイトが便利です。 視覚的に特徴のあるサイトが多いようです。   Mobile Website Gallery スマートフォンサイトというより映画のワンシーンを見ているような、クオリティの高い写真で構成されるサイトをピックアップしています。 アパレルや出版社など、会社そのものの雰囲気を伝えたいサイト作りに参考になりそうです。 Mobile Website Gallery     [PR] Webデザインで挫折しない学習方法を動画で公開中FWA mobile 写真を主役にしたモバイルサイトを多数掲載しています。 無駄を省いてシンプルなサイトにしたいという場合は役に立ちそうです。 FWA mobile   今回の記事はいかがでしたか？ ぜひこの記事を参考に、スマートフォンサイトを作ったり、発注したりしてみてください！ [お知らせ]TechAcademyではプログラミング初心者でも8週間でエンジニアになれるRuby on Railsオンラインブートキャンプを開催しています。
Webデザイン

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

webデザインでかわいいを表現するというのは、とても難しいと思います。そんなデザインで悩んだ時に参考になるサイトを紹介したいと思います。女性向け・子供向けのサイトを作りたいと考えている人には参考になるはずです。   なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。   Beautylabo Beautylabo ピンクベースの配色にふわっとしたフォントで見事にかわいいを表現しています。ターゲットとしている若い女性に受け入れられるかわいいデザインと言えるでしょう。   じゃらし系キャラクター「ぶくぶくあわー」 ブクブクアワー このサイトに行くと真ん中のキャラクターがトコトコ歩きます。キャラクターだけではなく配色フォントにも思わずかわいいと言ってしまうようなサイトです。   [PR] Webデザインで挫折しない学習方法を動画で公開中株式会社ブラン 株式会社ブラン 「かっこかわいい」とはまさにこれです。ドットで表現された可愛さの中に、動きでかっこよさを出している非常にクオリティの高いサイトです。   ELPH’S CIRCUS ELPH’S CIRCUS キャラクターグッズの世界観を見事に表現したかわいいwebサイトです。キャラクターの可愛さとテーマパークのような配色で見ていて楽しいサイトとなっています。   SCRAP SCRAP バナーの可愛さが際立つサイトです。かわいい背景にかわいいバナーにかわいい色使い。かわいいがつまったサイトになっています。   DESIGN YOUR HEADPHONE DESIGN YOUR HEADPHONE ヘッドフォンとイヤホンで作られたトップ画像が目を引くかわいいサイトです。製品のデザインのセンスの良さがわかる素敵なレイアウトだと言えます。   どすこいまげニャン どすこいまげニャン キャラクターを紹介しているサイトです。一目見てかわいいだけではなく、ボタンのわかりやすさ、押しやすさにも、配慮され、クオリティの高いサイトと言えるでしょう。   パティスリーコンセント パティスリーコンセント 女性がターゲットで、ナチュラルカラーでシックにまとめ上げています。 コンセプトが「かわいい」だけあって、かわいいのはもちろん、年齢層を問わないオシャレさもありますね。   手芸センタードリーム 手芸センタードリーム 明るい黄緑と黄色のカラーが、優しくて元気な印象を与えます。 手芸のイメージでコンテンツに刺しゅうの素材を用いる気遣いが、温もりを感じさせるかわいいサイトに仕上げています。   ダイハツポート ダイハツポート 強烈な印象でありながらかわいい車のフォルムを強調した、明るくてPOPな印象。 若い女性がターゲットですが、商品をチープに見せないためにシメの黒をうまく使っています。   白鶴-ぷるぷるスパークリングゼリー 白鶴-ぷるぷるスパークリングゼリー 渋い白鶴のイメージを払拭して、若い女性をターゲットにしたカラフルな色使い。 特別にかわいい素材を使っていないのに、フリーハンド状の円のアニメーションがユルい印象でかわいさを強調しています。   ドミノアンティーク ドミノアンティーク 中年層以上のアンティークに興味がある人のサイト。 高級イメージではなく、アンティークの親しみに安さを強調しながら、丸いフォルムで商品写真を配置。 ほのかな「かわいらしさ」を感じます。   きらむぎ きらむぎ ナチュラルイメージがやわらかさを出し、健康志向の人が注目するように配慮されています。 手描きのコンテンツが、とにかくかわいい。 トップページが曲線で構成されている事に注目したいですね。   たかしま農園 たかしま農園 ターゲット問わずの、トマトのイメージを強烈に印象づける色使いが斬新。 かわいさを強調しているのは、手描き風のフォントの選択です。 農園で働く人の一生懸命さを表しています。   学校法人百華学園精華幼稚園 学校法人百華学園精華幼稚園 小さい子供を持つ親がターゲット。 楽しく優しいイメージを、やわらかいピンクを主体に色数を抑えて表現。 過度な動画は使わず、トップページをスクロールなしで見せる配慮も参考にしたいところです。   資生堂-インテグレート 資生堂-インテグレート 背景の強烈なピンクが刺激を与えながらも、ハートのコンテンツとイメージ写真で、若い女性のための商品である事が一目瞭然のサイト。 やわらかさがなくても「かわいい」を表現できる例だと言えます。   Acorn-Style* Acorn-Style* コンセプトが「オシャレかわいい」、若い層から中高年の女性がターゲット。 ナチュラルなイメージは、手描きのコンテンツを中心にするのでかわいい物が多いですね。 色使いも優しいのが、かわいらしさを引き立てます。   今回はかわいいwebデザインのサイトを紹介しました。デザインに困った際参考になるサイトばかりですので、一度目を通してみてはいかがでしょうか。 かっこいい！を感じさせるサイトもまとめています。併せてご覧ください。 [お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。自分でサイトのデザインをしたい方はぜひご覧ください。
Webデザイン

WEEKLY RANKING

TechAcademy（テックアカデミー） Webデザインコース Webデザイン【Webデザインに必須！】無料で使えるかっこいいフォントまとめ！