Web制作の練習や確認に使えるジェネレーターサイト「kobeya.com」を公開しています

Web制作を学習していると、HTMLやCSSの書き方を覚えるだけでなく、
「実際にどのように表示されるのか」
「値を変えると見た目がどう変わるのか」
を確認しながら進めることがとても大切です。

特にCSSは、色、余白、角丸、影、グラデーション、文字装飾など、少し数値を変えるだけで見た目の印象が大きく変わります。

ただ、学習を始めたばかりの頃は、コードを見ただけでは完成イメージがわかりにくかったり、どの値を変更すればよいのか迷ってしまうことも多いと思います。

そこで、Web制作の学習や制作時の確認に使えるジェネレーターサイトとして、kobeya.com を公開しています。

kobeya.comとは

kobeya.comは、HTML、CSS、JavaScriptなどを使って、Web制作に役立つ小さなジェネレーターや便利ツールをまとめたサイトです。

CSSの見た目を確認しながらコードを作成できるツール、画像や配色に関するツール、レイアウトやアニメーションを試せるツールなど、
Web制作の中で「ちょっと確認したい」と思う場面で使えるものを公開しています。

コードを最初からすべて自分で書くことも大切ですが、まずは画面上で試してみて、「この設定をするとこう見えるんだ」と理解することも、学習ではとても大切です。

kobeya.comは、そういった試しながら理解するためのWeb制作ツール集として活用してもらえたらと思っています。

webtraining.jpで学習している方に使ってほしい理由

webtraining.jpでHTMLやCSSを学習している方には、kobeya.comのジェネレーターをぜひ課題制作や自主練習の中で使ってほしいと思っています。

たとえば、HTML/CSSの課題を作成しているときに、背景、見出し、ボタン、カード、余白、影などを少し工夫したい場面があります。

そのようなときに、ジェネレーターを使って実際に見た目を確認しながら調整すると、自分では思いつかなかったデザインのヒントが見つかることがあります。

また、作成されたCSSコードをコピーして、自分のファイルに貼り付けて試すこともできます。

ただし、コピーして終わりではなく、ぜひコードの中身も少し確認してみてください。

• 「この数値を変えるとどうなるのか」
• 「この色を変えると印象がどう変わるのか」
• 「このCSSプロパティは何をしているのか」

このように、ジェネレーターをきっかけにコードを観察すると、CSSの理解がより深まります。

すでに公開している主なツール

kobeya.comでは、Web制作でよく使う表現を中心に、さまざまなジェネレーターを公開しています。

CSSグラデーションジェネレーター

背景やボタンに使えるCSSグラデーションを作成するツールです。

グラデーションは、Webデザインの中でもよく使われる表現です。
背景に使うと、単色よりもやわらかい印象や、華やかな印象を出すことができます。

色や角度を調整しながら見た目を確認できるので、
CSSの linear-gradient の仕組みを学ぶ練習にもなります。

テキストグラデーション

文字にグラデーションをかけるCSSコードを作成できるツールです。

通常の color 指定とは少し違い、背景のグラデーションを文字に反映させるようなCSSを使います。

見出しやキャッチコピーなどに使うと、ページの印象を少し華やかにできます。「文字にグラデーションをかけるには、どのようなCSSが必要なのか」を確認する学習にもおすすめです。

CTAボタンジェネレーター

文言、色、グラデーション、枠線、角丸などを調整しながら、CTAボタンのHTMLとCSSを作成できるツールです。

Webサイトでは、「お問い合わせ」「詳しく見る」「申し込む」などのボタンがとても重要です。

ボタンの色や余白、角丸、影などを少し変えるだけで、クリックしたくなる印象も変わります。

課題制作やポートフォリオ制作で、ボタンのデザインを少し整えたいときにも活用できます。

アニメーションジェネレーター

フェードイン、ローディング、テキスト、カード、ボタン、ナビゲーションなど、Webサイトでよく使われる動きを、プレビューで確認しながら作成できます。

CSSアニメーションは、animation、transition、transformなど複数のプロパティを組み合わせることが多く、コードだけを見ても動きをイメージしにくいことがあります。

ジェネレーターを使うと、速度や動き方、繰り返し、hover時の変化などを調整しながら、その場で表示を確認できます。完成したCSSコードをコピーして、自分のWebサイトへ利用することもできます。
見出しやボタンに少し動きを加えたいときや、hoverしたときのデザインを検討したいとき、CSSアニメーションの学習にも活用できます。

ダミー画像ジェネレーター

Webページをコーディングしている途中では、まだ使用する写真や画像が決まっていないこともあります。そのようなときに、必要な横幅と高さを指定してダミー画像を作成しておくと、画像が入った状態のレイアウトを確認できます。

よく使われる画像サイズをプリセットから選択できるほか、widthとheightを直接入力して、自由なサイズの画像を作成することもできます。背景色、文字色、メインテキスト、サブテキストを変更できるため、単なる無地の画像ではなく、画像の用途が分かる仮画像として使用できます。

作成した画像は、PNGまたはJPEG形式でダウンロードできます。また、生成された画像URLやHTMLコードも利用できるため、制作途中のページへ一時的な画像として配置するときにも便利です。

ブログのアイキャッチ、OGP画像、YouTubeのサムネイル、広告バナー、カード画像など、さまざまなサイズのレイアウト確認に活用できます。

写真も選べるサンプル画像ジェネレーター

単色、グラデーション、ストライプ、ドット、グリッドなどの背景を選び、画像サイズ、色、文字、テキスト位置などを調整できます。

さらに、海と空、山と森、花、観葉植物、猫、カフェ、パソコンとデスク、コーヒー、明るい室内、街並みなど、Web制作で使いやすい写真素材も選択できるようになりました。

選んだ写真は、指定した画像サイズに合わせて縦横比を保ったまま自動的にトリミングされます。写真の上へメインテキストやサブテキストを重ねたり、写真の暗さを調整して文字を読みやすくしたりすることもできます。

OGP画像、SNS投稿画像、YouTubeサムネイル、ブログのアイキャッチ、カード画像、広告バナーなど、よく使われるサイズもプリセットから選択できます。

作成したサンプル画像は、PNGまたはJPEG形式でダウンロードできます

アニメーションやレイアウトの確認にも使えます

CSSアニメーションやhoverアニメーション、FlexboxやGridの確認に使えるツールもあります。

アニメーションは、コードだけを見ると動きがイメージしにくい部分です。

実際に画面上で動きを見ながら、どのようなCSSで実現されているのかを確認すると、理解しやすくなります。

また、FlexboxやGridは、Web制作でとてもよく使うレイアウト方法です。

justify-content や align-items、gap などは、言葉だけで覚えるよりも、実際に配置を見ながら学ぶ方がわかりやすいです。

レイアウトの学習中にも、kobeya.comのツールを活用してみてください。