はじめに
こんにちは、転職エントリをまとめるサイト「転職DB」を個人開発しているbani24884です。今回は、デザインスキルに自信がない筆者が、どのようにしてサイトのデザインを一新できたのか、その過程を共有したいと思います。
TL;DR
- デザインに関する専門知識がほとんどない私でも、v0.devを活用することでサイトのデザインをリニューアルすることができました。
- デザイナーがいない個人開発プロジェクトにおいて、v0.devは非常に役立つツールだと実感した。
リニューアル前
リニューアル後
課題
サイトの課題
リニューアル前のサイトは、情報をテーブルで表示するシンプルなデザインでした。当初はとにかく早くリリースすることを目標にしていたため、デザインは二の次でした。しかし、これが以下のような問題を引き起こしていました。
- ページ上の文字情報が過多で見づらい
- SEOが弱い（例えば、子ページがないため適切な階層構造になっていない）
開発者の課題
これらの問題を解決したいと考えていましたが、以下のような課題に直面していました。
- デザインのスキルが乏しいため、自分でデザインを行うと質が低くなりがち
- CSSが苦手で、直感的にコーディングすることが多く、しばしば理解できていない部分がある
v0.devの活用
上述の課題を克服するため、私はVercelが提供するv0.devを利用しました。v0.devは、簡単なプロンプトから高品質なフロントエンドのコードを生成してくれるツールです。
プロンプト例
メディアサイト風のカードリスト表示
メディアサイトによく見られるカードリスト表示は、次のようなプロンプトで簡単に作成できます。
media site card layout with text search, combo box and sort
このプロンプトから、v0.devは高品質なカードリストレイアウトを生成してくれます。生成されたコードを少し修正するだけで、自分のプロジェクトに組み込むことができます。
左にメニューがある2カラムのレイアウト
左側にナビゲーションバーを配置した2カラムのレイアウトも、簡単なプロンプトで実現できます。例えば、以下のようなプロンプトです。
NavBar on the left
このプロンプトを使用すると、左側にナビゲーションバー、右側にメインコンテンツを配置した2カラムレイアウトが生成されます。これも、少しのカスタマイズで自分のプロジェクトに適用できます。
これらのプロンプトを利用することで、デザインのスキルがない方でもある程度整った外観のウェブサイトを構築することが可能になります。
筆者はこれらの出力したコンポーネントを組み合わせて、サイトをリニューアルしていきました。
ただし、生成されたコードをそのまま使うだけでなく、プロジェクトの要件に合わせて適切にカスタマイズすることが重要です。v0.devはデザインの出発点を提供してくれますが、最終的には開発者自身がコードを理解し、調整を加える必要があります。
まとめ
v0.devは、デザインスキルが乏しい個人開発者や、リソースが限られているプロジェクトにとって非常に価値のあるツールです。これにより、見た目がプロフェッショナルで使いやすいウェブサイトやアプリケーションを、大きな時間やコストをかけずに構築することが可能になります。
ただし、v0.devはあくまでもデザインの出発点を提供してくれるツールであり、生成されたコードをそのまま使うだけでは不十分です。開発者自身がコードを理解し、プロジェクトの要件に合わせて適切にカスタマイズすることが重要です。
v0.devを効果的に活用することで、私のようなデザインスキルが乏しい開発者でも、スピーディーにサイトのデザインリニューアルを行うことができました。。ぜひ、みなさんもv0.devを試してみてください。