おーちゃん

webデザイナーでいろんな業種のデザインを作っています✨デザインの幅を広げるために、デ…

おーちゃん

webデザイナーでいろんな業種のデザインを作っています✨デザインの幅を広げるために、デザインの考察していくゾ!

記事一覧

#029 サイトレビュー

https://tokyugardencity.com/ja/ 種類:コーポレートサイト テイスト:シンプル、スタイリッシュ フォント 英数字、日本語:Inter →Google Fonts 配色 ベース:#fff…

2

#028 サイトレビュー

https://pf.quant.page/ 種類:コーポレートサイト テイスト:シンプル、スタイリッシュ フォント 日本語:Noto Sans JP 英数字:Mont-SemiBold →Font Free 配色 ベ…

#027 サイトレビュー

https://www.kaids.co.jp/ 種類:コーポレートサイト テイスト:シンプル、POP フォント 日本語:Noto Sans JP 英数字:Montserrat 配色 ベース:#fff メインカラー:…

#026 サイトレビュー

https://www.100inc.co.jp/ 種類:コーポレートサイト テイスト:シンプル、POP フォント 日本語:游ゴシック体(小見出し:Noto Sans Japanese細字使用の時) 英数字:…

#025 サイトレビュー

https://creit.co.jp/ 種類:コーポレートサイト テイスト:シンプル、女性らしさ フォント 日本語:fot-tsukuaoldmin-pr6n →Adobe Fonts 筆記体:Homemade Apple →Go…

1

#024 サイトレビュー

https://www.bayflow.jp/topics/2202bsuper/ 種類:キャンペーンサイト テイスト:POP、スタイリッシュ フォント 日本語:Zen Kaku Gothic Antique→Google Fonts 英数…

#023 サイトレビュー

https://dive-hiroshima.com/ 種類:メデイアサイト テイスト:POP フォント 日本語:YakuHanJP 英数字:Montserrat 配色 ベース:#EEF8EE メインカラー:#4DCCF4(水…

#022 サイトレビュー

類:コーポレートサイト テイスト:シンプル、スタイリッシュ フォント brandon-grotesque →Adobe Fonts 配色 ベース:#fff メインカラー:#222323(ブラック) アク…

#021 サイトレビュー

https://tak-inc.com/ 種類:コーポレートサイト テイスト:シンプル、スタイリッシュ フォント 英数字:Highway Gothic Wide →フリーフォント 本文:Noto Sans JP 配…

#020 サイトレビュー

https://e.kobe-c.ac.jp/ 種類:コーポレートサイト テイスト:シンプル、ナチュラル フォント 見出しタイトル:Noto Serif JP 英数字:Barlow →Google Fonts コンテン…

1

#019 サイトレビュー

https://www.kiyasuya.jp/ 種類:コーポレートサイト テイスト:シンプル、スタイリッシュ フォント TelopMinProN-D →FONTPLUS 高級感、質感など雰囲気に合っている …

1

#018 サイトレビュー

https://www.m-zec.com/ 種類:コーポレートサイト テイスト:シンプル、スタイリッシュ フォント 日本語:Noto Sans JP 英数字:Kanit→Google Fonts 配色 ベース:#…

1

#017 サイトレビュー

種類:特設サイト テイスト:POP フォント 本文:M PLUS Rounded 1c →Google Fonts POPな文字はSVGで一つずつ書き出している 配色 基本多色 背景色:#fff アクセント…

2

#016 サイトレビュー

https://minoh-greenvilla.jp/ 種類:コーポレートサイト テイスト:シンプル、柔らかい、POP フォント 日本語:Noto Sans JP 英数字:Josefin Sans →Google Fonts フ…

#015 サイトレビュー

https://tamagaway.jp/ 種類:コーポレートサイト テイスト:シンプル、スタイリッシュ、個性 フォント 日本語:Shippori Mincho →Google Fonts 英数字:Marcellus →G…

#014サイトレビュー

https://www.iken.ac.jp/media/ 種類:メディアサイト テイスト:POP フォント 日本語フォント:游ゴシック 英数字:Goldman, cursive →Google Fonts 配色 ベース:#…

#029 サイトレビュー

https://tokyugardencity.com/ja/ 種類:コーポレートサイト テイスト:シンプル、スタイリッシュ フォント 英数字、日本語:Inter →Google Fonts 配色 ベース:#fff メインカラー:#F8F8F8(グレイ) アクセントカラー:(多色) 文字:#212121(全部) ファーストビュー 左カラムをホバーすると背景が黒く変わる メニューアイコンもホバーすると動きが変わる サイトに訪れた瞬間カラフルな色が右から左へ向か

#028 サイトレビュー

https://pf.quant.page/ 種類:コーポレートサイト テイスト:シンプル、スタイリッシュ フォント 日本語:Noto Sans JP 英数字:Mont-SemiBold →Font Free 配色 ベース:#fff メインカラー:#5F00E7(パープル) 文字:#000(全部) ファーストビュー 中央のイラストはgifで動いている →イラストが切り替わる時にcssを使用して一瞬拡大している イラストや明るい色に負けないように、文字の色は#

#027 サイトレビュー

https://www.kaids.co.jp/ 種類:コーポレートサイト テイスト:シンプル、POP フォント 日本語:Noto Sans JP 英数字:Montserrat 配色 ベース:#fff メインカラー:#1A30AB(ブルー) アクセントカラー:linear-gradient(90deg, rgba(254,152,95,1) 0%, rgba(255,89,111,1) 100%);(オレンジのグラデーション) 文字:#333(全部) ファーストビ

#026 サイトレビュー

https://www.100inc.co.jp/ 種類:コーポレートサイト テイスト:シンプル、POP フォント 日本語:游ゴシック体(小見出し:Noto Sans Japanese細字使用の時) 英数字:Roboto Condensed →Google Fonts 配色 ベース:#fff メインカラー:#2F475C(濃いグレイ) アクセントカラー:#FF7A59(オレンジ) 文字:白背景には#444444    写真背景には#000000 ファーストビュー

#025 サイトレビュー

https://creit.co.jp/ 種類:コーポレートサイト テイスト:シンプル、女性らしさ フォント 日本語:fot-tsukuaoldmin-pr6n →Adobe Fonts 筆記体:Homemade Apple →Google Fonts 配色 ベース:#fff アクセントカラー:多色、グラデーション 文字:#000(全部) ファーストビュー ロゴが目立つように、見やすいようにスライドショーがロゴに被らないようになっている スライドショーの画像が

#024 サイトレビュー

https://www.bayflow.jp/topics/2202bsuper/ 種類:キャンペーンサイト テイスト:POP、スタイリッシュ フォント 日本語:Zen Kaku Gothic Antique→Google Fonts 英数字:baou→有料 配色 ベース:#D0C3B7 メインカラー:多色 #FEE30B(黄色)#EF7FB1(ピンク)#1AAED6(水色)#28AF75(グリーン)#E6772F(オレンジ) アクセントカラー:#E67730(オレ

#023 サイトレビュー

https://dive-hiroshima.com/ 種類:メデイアサイト テイスト:POP フォント 日本語:YakuHanJP 英数字:Montserrat 配色 ベース:#EEF8EE メインカラー:#4DCCF4(水色)、#1B1B1B(ブラック) 文字:#1B1B1B(ブラック) ファーストビュー 角丸の長方形が重なったような外観、サイト全体に合っている あまり重要ではないページへのリンクは角丸長方形の中にはなく、主張しすぎないようにグレーで配置さ

#022 サイトレビュー

類:コーポレートサイト テイスト:シンプル、スタイリッシュ フォント brandon-grotesque →Adobe Fonts 配色 ベース:#fff メインカラー:#222323(ブラック) アクセントカラー:#F4531B(オレンジ) 文字:#000(背景グレー文字:#F6F6F6) ファーストビュー 背景動画とキャッチコピーだけで何をしている会社かわかる 時折現れるロゴの一部がストーリーっぽくなっていて面白い 動画は軽いものを使用し、荒さが目立たない

#021 サイトレビュー

https://tak-inc.com/ 種類:コーポレートサイト テイスト:シンプル、スタイリッシュ フォント 英数字:Highway Gothic Wide →フリーフォント 本文:Noto Sans JP 配色 ベース:#fff 文字:#fff(全部) →動画を背景に文字や装飾を白にすることで読みやすくしている ファーストビュー 空のグラデーション背景と「九州の空」の文字が合っている 「九州の空」のタイポグラフィーのデザインが印象的 スクロールすると、

#020 サイトレビュー

https://e.kobe-c.ac.jp/ 種類:コーポレートサイト テイスト:シンプル、ナチュラル フォント 見出しタイトル:Noto Serif JP 英数字:Barlow →Google Fonts コンテンツ文章:Noto Sans JP 配色 ベース:#fff メインカラー:#FAF8F2(薄い黄色) アクセントカラー:#85BCE5(水色) 文字:#121212(全部) ファーストビュー 右側のスライドの背景色が画像ごとに変わる 左側のタイトル

#019 サイトレビュー

https://www.kiyasuya.jp/ 種類:コーポレートサイト テイスト:シンプル、スタイリッシュ フォント TelopMinProN-D →FONTPLUS 高級感、質感など雰囲気に合っている 配色 ベース:#34342B(ベージュ+壁の質感のテクスチャ) 文字:#534E4E(全部) アクセントカラーはなく、ホバーした時は透過したり、細い下線が表示されたりなど、落ち着きのある色のみ使用している ファーストビュー 木陰の落ち着きのある写真が印象的で

#018 サイトレビュー

https://www.m-zec.com/ 種類:コーポレートサイト テイスト:シンプル、スタイリッシュ フォント 日本語:Noto Sans JP 英数字:Kanit→Google Fonts 配色 ベース:#fff メインカラー:#1E257D(紺色) アクセントカラー:グラデーション background: -webkit-linear-gradient(360deg, rgba(0,44,140,1) 19.7675%, rgba(170,0,139,1)

#017 サイトレビュー

種類:特設サイト テイスト:POP フォント 本文:M PLUS Rounded 1c →Google Fonts POPな文字はSVGで一つずつ書き出している 配色 基本多色 背景色:#fff アクセントカラー:#E85859(レッド) メインカラー:#285F3A(グリーン) 文字:#3C2100(ブラウン) ファーストビュー タイトルロゴが飛び出るようにまず表示され、背景のイラスト→下部のメインイラスト→上部のグローバルメニューの順で表示される 背景イラス

#016 サイトレビュー

https://minoh-greenvilla.jp/ 種類:コーポレートサイト テイスト:シンプル、柔らかい、POP フォント 日本語:Noto Sans JP 英数字:Josefin Sans →Google Fonts フォントサイズは全体的に読ませたいところは大きく設定している メニュー:18px 見出しタイトル:40px 文章本文:20px 注釈本文:16px 配色 ベース:#fff メインカラー:#FAF8F4(ベージュ) アクセントカラー:#42A9

#015 サイトレビュー

https://tamagaway.jp/ 種類:コーポレートサイト テイスト:シンプル、スタイリッシュ、個性 フォント 日本語:Shippori Mincho →Google Fonts 英数字:Marcellus →Google Fonts 配色 ベース:#C3B8B0(くすんだベージュ・ピンク・グリーンが混ざった背景が淡く時間が経過すると共に変化している) 文字:#fff(全部) →基本的にアクセントカラーはなく、その中でもボタンだったり見出しタイトルを余白や

#014サイトレビュー

https://www.iken.ac.jp/media/ 種類:メディアサイト テイスト:POP フォント 日本語フォント:游ゴシック 英数字:Goldman, cursive →Google Fonts 配色 ベース:#fff メインカラー:#37C3E6(ブルー) アクセントカラー:#f65d3a(オレンジ) 文字:#080304(全部) ファーストビュー 2カラムになっていて右側にマガジンのエリアになっている マガジンの背景に英語の袋文字がぐるぐると回