▶︎動画でも話してるので、文章読むのが面倒な方はこちらをみてもらえればと思います。
今回は、手書きのラフスケッチの画像からHTML/CSSコードに変換できるDesign2Codeについて解説します。
手書きのラフスケッチの画像からHTML/CSSコードに変換できるDesign2Codeについて
まずは、Design2Codeのサイトにアクセスします。
![](https://oshitai.jp/wp-content/uploads/2024/02/スクリーンショット-2024-02-17-16.47.57.png)
サイトのURLは下に貼ってありますので、そちらをご確認ください。
サイトにアクセスしたら、左側にある「Settings」と書かれているボタンをクリックします。
![](https://oshitai.jp/wp-content/uploads/2024/02/スクリーンショット-2024-02-17-16.50.14.png)
ポップアップ画面が表示されたら、OpenAIのAPIキーを入力します。
![](https://oshitai.jp/wp-content/uploads/2024/02/スクリーンショット-2024-02-17-16.50.26.png)
OpenAIのAPIキーを入力したら、「Save」をクリックします。
![](https://oshitai.jp/wp-content/uploads/2024/02/スクリーンショット-2024-02-17-16.51.29.png)
これで、画像からHTMLやCSSコードに変換するための準備が整いました。
![](https://oshitai.jp/wp-content/uploads/2024/02/スクリーンショット-2024-02-17-16.52.05.png)
それでは、早速変換を始めましょう。
この部分にHTMLやCSSコードに変換したい画像をドラッグ&ドロップします。
![](https://oshitai.jp/wp-content/uploads/2024/02/スクリーンショット-2024-02-17-16.52.34.png)
処理が完了するまでしばらくお待ちください。
左側にアップロードした画像が表示され、このように手で書いたデザインからHTMLやCSSコードに変換してくれます。
![](https://oshitai.jp/wp-content/uploads/2024/02/スクリーンショット-2024-02-17-16.52.45.png)
生成されたコードの表示は右側の画面で確認できます。
スマホなどの小さい画面での表示を確認したい時は、「モバイル」と書かれているボタンをクリックします。
![](https://oshitai.jp/wp-content/uploads/2024/02/スクリーンショット-2024-02-17-16.53.38.png)
そして、実際に変換されたソースコードを確認したい場合は、「コード」と書かれているボタンをクリックします。
![](https://oshitai.jp/wp-content/uploads/2024/02/スクリーンショット-2024-02-17-16.54.06.png)
このサイトでは、作成されたソースコードを修正することも可能です。
修正内容を確認しやすくするために、一旦デスクトップのプレビュー表示に切り替えます。
![](https://oshitai.jp/wp-content/uploads/2024/02/スクリーンショット-2024-02-17-16.55.59.png)
次に、左側にあるテキストボックスに修正内容を入力します。
今回は、「テキストを日本語に翻訳してください」とお願いしてみます。
![](https://oshitai.jp/wp-content/uploads/2024/02/スクリーンショット-2024-02-17-16.54.40.png)
入力が完了したら、「Update」ボタンをクリックします。
![](https://oshitai.jp/wp-content/uploads/2024/02/スクリーンショット-2024-02-17-16.56.45.png)
処理が完了するまでしばらくお待ちください。
しばらく待っていると、お願いした通りテキストを英語から日本語に翻訳してくれました。
![](https://oshitai.jp/wp-content/uploads/2024/02/スクリーンショット-2024-02-17-16.57.19.png)
変換されたソースコードは、ダウンロードすることもできます。
「Download Code」と書かれたボタンをクリックします。
![](https://oshitai.jp/wp-content/uploads/2024/02/スクリーンショット-2024-02-17-17.07.46.png)
そうすると、変換されたソースコードを自分のパソコンに保存できます。
ファイルは「index.html」という名前で保存されます。
![](https://oshitai.jp/wp-content/uploads/2024/02/スクリーンショット-2024-02-17-17.08.39.png)
このファイルをブラウザで表示すると、先ほどプレビュー画面で確認していた内容が表示されます。
![](https://oshitai.jp/wp-content/uploads/2024/02/スクリーンショット-2024-02-17-17.14.22.png)
このようにデザインコードを利用すると、手書きのスケッチをHTMLやCSSコードに変換してくれます。
なお、アップロードする画像は手書きの画像である必要はありません。
PhotoshopやFigmaなどを使って作成した画像でも大丈夫です。
リセットボタンをクリックして別の画像をアップロードしてみましょう。
![](https://oshitai.jp/wp-content/uploads/2024/02/スクリーンショット-2024-02-17-17.15.58.png)
先ほどと同じように画像をドラッグ&ドロップします。
![](https://oshitai.jp/wp-content/uploads/2024/02/スクリーンショット-2024-02-17-17.16.23.png)
処理が完了するまでしばらくお待ちください。
しばらく待っていると、期待した通り画像からソースコードに変換してくれました。
![](https://oshitai.jp/wp-content/uploads/2024/02/スクリーンショット-2024-02-17-17.16.30.png)
![](https://oshitai.jp/wp-content/uploads/2024/02/スクリーンショット-2024-02-17-17.17.10.png)
このようにデザインツールを使って作成した画像でもHTMLやCSSコードに変換してくれます。
それでは、次にウェブサイトのキャプチャー画面で試してみましょう。
先ほどと同じように画像をドラッグ&ドロップします。
![](https://oshitai.jp/wp-content/uploads/2024/02/スクリーンショット-2024-02-17-17.17.42.png)
処理が完了するまでしばらくお待ちください。
このようにウェブサイトのキャプチャー画面からでもソースコードに変換してくれます。
![](https://oshitai.jp/wp-content/uploads/2024/02/スクリーンショット-2024-02-17-17.18.08.png)
それでは今回変換されたコードを少し修正してみましょう。
スマホのような小さい画面の場合は、1列で表示させた方が見やすいです。
![](https://oshitai.jp/wp-content/uploads/2024/02/スクリーンショット-2024-02-17-17.24.05.png)
そのため、左側のテキストボックスにこのような修正指示を入力します。
![](https://oshitai.jp/wp-content/uploads/2024/02/スクリーンショット-2024-02-17-17.24.11.png)
アップデートボタンをクリックして、修正が完了するまでしばらくお待ちください。
しばらく待っていると、お願いした通り小さい画面の表示の場合は1列で表示されるように修正してくれました。
![](https://oshitai.jp/wp-content/uploads/2024/02/スクリーンショット-2024-02-17-17.24.53.png)
そして、パソコンのような大きい画面の場合は2列の表示のままになっています。
![](https://oshitai.jp/wp-content/uploads/2024/02/スクリーンショット-2024-02-17-17.25.19.png)
このようにDesign2Codeを利用すると、画像からHTMLやCSSコードを生成してくれます。
是非お試しください。